/* Home: the hero (claim and search, the welcome insight beside them), the role band, the
 * library, trust, and the navy section for researchers (handoff, Aufbau der Startseite).
 * The library parts are also used by Browse.
 */

/* --- hero ------------------------------------------------------------------------ */

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  padding-block: var(--s-9) 72px;
}

/* two columns from 1100 px: text left, the welcome insight right (decision 70); below,
   the card follows the search */
@media (min-width: 1100px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: start;
  }
}

.hero__claim {
  margin-top: 22px;
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.hero__claim em {
  color: var(--c-ink);
}

.hero__lead {
  max-width: 560px;
  margin: 26px 0 0;
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

.search-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-width: 640px;
  margin-top: 36px;
  padding: var(--s-2);
  background: var(--c-paper);
  border: var(--rule) solid var(--c-field-line);
}

.search-box:focus-within {
  border-color: var(--c-navy);
}

.search-box__input {
  flex: 1 1 280px;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 10px;
  background: transparent;
  border: 0;
  color: var(--c-ink);
  /* 16 px, not less: iOS zooms the page into any smaller field on focus */
  font-size: var(--fs-body-sm);
  /* a placeholder longer than the field ends in "…" instead of half a letter */
  text-overflow: ellipsis;
}

.search-box__input::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

.search-box__btn {
  min-height: 48px;
  padding: 12px 18px;
  font-size: var(--fs-body-sm);
}

.quick-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  max-width: 620px;
  margin-top: var(--s-4);
}

.quick-topics__label {
  margin-inline-end: var(--s-1);
  color: var(--c-muted);
  font-size: var(--fs-meta);
}

.quick-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.quick-topics__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--c-sand);
  color: var(--c-navy);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.quick-topics__list a:hover {
  background: var(--c-line);
}

.hero__ask {
  margin: 18px 0 0;
  color: var(--c-muted);
  font-size: var(--fs-body-sm);
}

/* --- roles band ----------------------------------------------------------------- */

.roles {
  background: var(--c-sand);
  border-block: var(--rule) solid var(--c-line);
}

.roles__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-block: 30px;
}

.roles__heading {
  margin-inline-end: var(--s-2);
  font-size: 20px;
  font-weight: var(--fw-regular);
}

.roles__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- library ---------------------------------------------------------------------- */

.library {
  padding-block: var(--section-y) var(--s-7);
}

.library__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}

.library__sub {
  margin: var(--s-2) 0 0;
  color: var(--c-muted);
}

.library__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}

.filters .field {
  gap: var(--s-1);
}

.filters .select {
  min-width: 140px;
  /* a long outlet name must not stretch the row past the heading */
  max-width: 220px;
  font-size: var(--fs-meta);
}

/* Outlet, year and sort apply in place as they change (library.js), so their button is
   for readers without JavaScript. The language select changes the whole page's language
   and always waits for its button (WCAG 3.2.2). */
.js [data-autosubmit] .filters__apply {
  display: none;
}

.filters--language .filters__apply {
  min-height: var(--tap);
  padding-inline: var(--s-4);
}

.search-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  color: var(--c-muted);
}

.search-results strong {
  color: var(--c-ink);
}

/* topic tabs: All + six + "More topics" */
.topic-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  margin-top: 34px;
  border-bottom: var(--rule) solid var(--c-line);
}

.topic-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--c-muted);
  font-size: var(--fs-meta-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: var(--rule-accent) solid transparent;
}

.topic-tab:hover {
  color: var(--c-navy);
  border-bottom-color: var(--c-line-strong);
}

.topic-tab[aria-current="true"] {
  color: var(--c-navy);
  border-bottom-color: var(--c-gold);
}

.topic-more {
  position: relative;
}

.topic-more > summary {
  list-style: none;
  cursor: pointer;
}

.topic-more > summary::-webkit-details-marker {
  display: none;
}

.topic-more__menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  inset-inline-start: 0;
  min-width: 260px;
  margin: 0;
  padding: var(--s-2) 0;
  list-style: none;
  background: var(--c-paper);
  border: var(--rule) solid var(--c-line-strong);
}

.topic-more__menu a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  color: var(--c-ink);
  font-size: var(--fs-meta);
  text-decoration: none;
}

.topic-more__menu a:hover,
.topic-more__menu a[aria-current="true"] {
  background: var(--c-sand);
  color: var(--c-navy);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--grid-gap);
  margin-top: 34px;
}

/* three columns from 1100 px, two from 700 px, one below (handoff, Breakpoints) */
@media (min-width: 1100px) {
  .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .library-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.library__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: var(--s-7);
}

.library__count {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-meta-lg);
}

.library__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--s-6) 0;
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

/* --- trust ------------------------------------------------------------------------ */

.trust {
  padding-block: 60px var(--section-y);
}

.trust__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-top: 40px;
  border-top: 2px solid var(--c-navy);
}

@media (min-width: 1100px) {
  .trust__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.trust__heading {
  font-size: 34px;
  font-weight: var(--fw-display);
  line-height: 1.2;
}

.trust__heading em {
  color: var(--c-ink);
}

.trust__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-6);
}

.trust__marker {
  display: block;
  width: var(--marker);
  height: var(--marker);
  background: var(--c-gold);
}

/* the approval point carries the CAIS green, the site's one sign for a person's
   approval (DECISIONS.md 5) */
.trust__marker--approved {
  background: var(--c-green);
}

.trust__point h3 {
  margin: 14px 0 6px;
  color: var(--c-navy);
  font: var(--fw-bold) var(--fs-lead) / 1.3 var(--f-sans);
}

.trust__point p {
  margin: 0;
  color: var(--c-muted);
}

/* --- for researchers (navy) ------------------------------------------------------------ */

.researchers {
  background: var(--c-navy);
  color: var(--c-white);
}

.researchers__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding-block: var(--section-y);
}

@media (min-width: 1100px) {
  .researchers__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.researchers h2 {
  margin-top: 18px;
  color: var(--c-white);
  font-size: 42px;
  font-weight: var(--fw-display);
  line-height: 1.18;
}

.researchers__lead {
  max-width: 500px;
  margin: var(--s-4) 0 0;
  color: var(--c-on-navy);
  font-size: var(--fs-lead);
}

.researchers__cta {
  min-height: 48px;
  margin-top: 30px;
  padding: 12px 24px;
}

.steps__item {
  display: flex;
  gap: 22px;
  padding-block: 22px;
  border-top: var(--rule) solid var(--c-on-navy-line);
}

.steps__item:last-child {
  border-bottom: var(--rule) solid var(--c-on-navy-line);
}

.steps__num {
  flex: none;
  width: 30px;
  color: var(--c-gold-light);
  font: var(--fw-display) 28px / 1 var(--f-serif);
}

.steps__item h3 {
  margin: 0;
  color: var(--c-white);
  font: var(--fw-bold) var(--fs-lead) / 1.3 var(--f-sans);
}

.steps__item p {
  margin: var(--s-1) 0 0;
  color: var(--c-on-navy);
}

/* --- small screens -------------------------------------------------------------------- */

@media (max-width: 699px) {
  .hero__inner {
    gap: var(--s-7);
    padding-block: var(--s-7) var(--s-8);
  }

  /* One line, as wide as the box. With wrap, each flex line takes the width of its widest
     item, and Safari sizes a search field from its default size=20 at ~336 px of Poppins:
     field and button stuck out of the box below 379 px and moved the page sideways
     below 363 px (Jan's iPhone, 22 Oct). Chrome's field is ~189 px, so only WebKit showed it. */
  .search-box {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .search-box__input {
    flex-basis: auto;
  }

  /* Role chips and topic tabs scroll sideways rather than stacking (handoff). Each row runs
     to the screen's edges, so the next chip is cut by the edge itself, the sign that the
     row goes on; inside the gutter a cut 16 px short of the edge looked like a rendering
     fault ("IS & Managemen"). No fade: gradients are ruled out (decision 69). */
  .roles__chips,
  .topic-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .roles__chips .chip,
  .topic-tab,
  .topic-more {
    flex: none;
  }

  /* "More topics" opens as a sheet along the bottom of the screen. Fixed without an
     edge to hold it, it sat at its place in the document, far below the screen. It
     starts closed and closes on a tap outside it (library.js). */
  .topic-more__menu {
    position: fixed;
    z-index: 30;
    inset-inline: 0;
    top: auto;
    bottom: 0;
    min-width: 0;
    max-height: 70vh;
    padding-bottom: var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-width: var(--rule) 0 0;
    border-color: var(--c-navy);
  }

  /* on top of the audio bar while one is showing */
  .has-player .topic-more__menu {
    bottom: var(--player-h);
  }

  /* with the menu closed, its tab shows that the chosen topic is in it */
  .topic-more:has(a[aria-current="true"]) > .topic-tab {
    color: var(--c-navy);
    border-bottom-color: var(--c-gold);
  }

  .library__filters,
  .filters {
    width: 100%;
  }

  .filters .field {
    flex: 1 1 140px;
  }

  /* 16 px, not less: iOS zooms the page into any smaller field on focus */
  .filters .select {
    font-size: var(--fs-body-sm);
  }

  .trust__heading,
  .researchers h2 {
    font-size: var(--fs-h2);
  }
}