/* faq.css: the FAQ's own look (plan.md, "FAQ"). Calm: a short photo band with the search and the topics, then the
   questions by topic on the paper. */

/* ---- hero: a still photo as a short band with rounded lower corners, darkened at its foot; over its foot, centered,
   the headline, the search and the topics ---- */
.faq-hero { position: relative; display: grid; align-content: end; min-height: min(38rem, 64svh); padding: calc(var(--header-h) + clamp(3rem, 1.5rem + 4vw, 6rem)) 0 clamp(2.25rem, 1.25rem + 2.5vw, 3.75rem); border-radius: 0 0 var(--radius-xl) var(--radius-xl); overflow: hidden; isolation: isolate; background: var(--c-ink); color: var(--c-on-ink); }
.faq-hero__media { position: absolute; inset: 0; z-index: -1; }
.faq-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, 0.62) 0%, rgba(13, 13, 13, 0.18) 24%, rgba(13, 13, 13, 0.3) 48%, rgba(13, 13, 13, 0.88) 100%); }
.faq-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 66% 26%; }
.faq-hero__inner { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.faq-hero__title { margin: 0; max-width: 16ch; font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.02; font-weight: 600; letter-spacing: var(--track-display); text-wrap: balance; text-shadow: 0 2px 30px rgba(13, 13, 13, 0.5); }
.faq-hero__lede { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--c-on-ink); text-shadow: 0 1px 14px rgba(13, 13, 13, 0.7); }
.faq-hero__search { position: relative; width: min(100%, 36rem); margin: var(--space-2) 0 0; }
.faq-hero__icon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); display: grid; color: var(--c-ink-soft); pointer-events: none; }
.faq-search { width: 100%; min-height: 3.5rem; padding: 0 1.25rem 0 3.25rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink); font: 500 1.0625rem/1.2 var(--font-text); box-shadow: var(--shadow-l); }
.faq-search::placeholder { color: var(--c-ink-soft); opacity: 1; }
.faq-search:focus-visible { outline: 3px solid var(--c-brand-on-ink); outline-offset: 3px; }
.faq-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: var(--space-2); }
.faq-topic { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--radius-pill); border: 1px solid var(--c-glass-edge); background: var(--c-glass-ink); color: var(--c-on-ink); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.faq-topic:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.faq-topic:focus-visible { outline: 3px solid var(--c-brand-on-ink); outline-offset: 3px; }
@media (max-width: 599px) {
  .faq-hero { min-height: min(40rem, 82svh); }
  .faq-hero__img { object-position: 70% 22%; }
  .faq-topics { gap: 0.4rem; }
  .faq-topic { min-height: 2.5rem; padding: 0 0.8rem; }
}

/* ---- faq: every question, by topic; each topic's title sticky beside its questions on a computer ---- */
.faq-page { padding-block: clamp(4rem, 2rem + 5vw, 8rem); }
.faq-page__count { margin: 0 0 var(--space-4); min-height: 1.5em; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-soft); }
.faq-page__count:empty { margin-bottom: 0; min-height: 0; }
.faq-group + .faq-group { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.faq-group__title { font-size: clamp(1.875rem, 1.35rem + 2vw, 3rem); }
.faq-page__none { display: grid; gap: var(--space-2); max-width: 40rem; }
.faq-page__none[hidden] { display: none; }
.faq-page__none p { margin: 0; }
.faq-page__none p:last-child { color: var(--c-ink-soft); }

/* ---- close: the words in one column at the lower left, over the siding; the technician reading the next job on his
   phone at the right stays clear (on a phone, his face above the words) ---- */
.faq-close .close-band__inner { grid-template-columns: minmax(0, 36rem); gap: var(--space-4); }
.faq-close .close-band__act { gap: var(--space-3); }
.faq-close .cta-row { margin-top: 0; }
@media (max-width: 759px) {
  .faq-close { display: grid; align-content: end; min-height: min(46rem, 94svh); padding-top: 17rem; }
  .faq-close .close-band__media video { object-position: 74% 50%; }
  /* the words cross the whole picture here, and the light siding at his right shows behind their ends: the picture
     darkens under them across its width, from below his face down */
  .faq-close .close-band__media::after { background: linear-gradient(180deg, var(--c-ink) 0%, rgba(13, 13, 13, 0) 20%, rgba(13, 13, 13, 0.1) 38%, rgba(13, 13, 13, 0.62) 56%, rgba(13, 13, 13, 0.78) 74%, var(--c-ink) 100%); }
}