/* =========================================================================
   Questions

   The answers a customer most needs before enquiring. Centred, as the
   sections above it are, and then, as Apple lays out a choice of
   features: the questions in a quiet list, the chosen one lit down its
   edge by the house's LED line, and its answer beside it in a panel of
   the page's liquid glass, crossing over as the question changes
   (src/js/ui/faq.js). On a phone the panel follows the list.

   Without script the list is no use, so it is left out and every answer
   is shown in turn, each under its question.
   ========================================================================= */

.faq {
  position: relative;
  /* After the register, and the last section before the footer, whose
     own hairline closes the page. */
  padding: var(--section-pad) var(--gutter-safe);
  background: var(--c-black);
}

/* ---- The headline ---- */
.faq__intro {
  max-width: 46rem;
  margin: 0 auto var(--block-gap);
  text-align: center;
}

.faq__intro .eyebrow {
  justify-content: center;
  margin: 0 0 var(--space-6);
}

.faq__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-headline);
  line-height: 1.04;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #f4f8fb 0%, #c9d6e0 45%, var(--c-obsidian) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-ink);
}

.faq__headline em {
  font-style: italic;
}

.faq__note {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-headline-line);
  color: var(--c-ink-3);
}

.faq__note a,
.faq__panel a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) ease;
}

@media (hover: hover) {
  .faq__note a:hover,
  .faq__panel a:hover {
    text-decoration-color: currentColor;
  }
}

/* ---- The list, and the answer beside it ---- */
.faq__selector {
  display: grid;
  gap: var(--block-gap);
  max-width: 76rem;
  margin: 0 auto;
}

@media (min-width: 56rem) {
  .faq__selector {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(var(--space-7), 6vw, 6rem);
    align-items: start;
  }

  /* the answer held in view as the list is worked down */
  .faq__panels {
    position: sticky;
    top: var(--space-7);
  }
}

/* ---- The questions ---- */
.faq__tabs {
  display: grid;
  border-top: 1px solid var(--c-hairline);
}

.faq__tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--c-hairline);
  text-align: left;
  cursor: pointer;
}

.faq__num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--c-ink-4);
  transition: color 0.4s ease;
}

.faq__tab-text {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem);
  line-height: 1.4;
  color: var(--c-ink-3);
  transition: color 0.4s ease;
}

@media (hover: hover) {
  .faq__tab:hover .faq__tab-text {
    color: var(--c-ink);
  }
}

.faq__tab:is([aria-selected="true"], [aria-expanded="true"]) .faq__tab-text {
  color: var(--c-ink);
}

.faq__tab:is([aria-selected="true"], [aria-expanded="true"]) .faq__num {
  color: var(--c-gold);
}

/* the chosen one, lit down its edge */
.faq__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: linear-gradient(180deg,
    var(--c-led-core),
    var(--c-led) 50%,
    color-mix(in oklab, var(--c-led) 25%, transparent));
  box-shadow: 0 0 10px var(--c-led-glow);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.5s var(--ease-out);
}

.faq__tab:is([aria-selected="true"], [aria-expanded="true"])::before {
  transform: scaleY(1);
}

.faq__tab:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: -2px;
}

/* ---- The answers, in glass ---- */
.faq__panels {
  display: grid;
}

.faq__panel {
  grid-area: 1 / 1;
  align-self: start;
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* the light inside stays inside */
  padding: clamp(var(--space-6), 4vw, 3.5rem);
  border: 1px solid transparent;
  border-radius: 6px;
  /* the cards' frosted glass (tokens.css): its grain and sheen over the
     panel's own dark glass; and along the cut corner (below) a line of
     light, as the rim would draw there were it not cut away */
  background:
    linear-gradient(135deg,
      transparent calc(50% - 0.75px),
      rgb(255 255 255 / 0.13) 50%,
      transparent calc(50% + 0.75px))
      0 0 / var(--faq-cut) var(--faq-cut) no-repeat,
    var(--frost-sheen),
    var(--frost-grain),
    linear-gradient(180deg, rgb(20 22 24 / 0.5), rgb(8 9 10 / 0.6));
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow:
    var(--frost-rim),
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    inset 0 0 18px rgb(255 255 255 / 0.03),
    0 40px 90px -40px rgb(0 0 0 / 0.95);
  /* its top-left corner cut, as the cards' top corners are, the ends of
     the cut softened */
  --faq-cut: 1.5rem;
  clip-path: polygon(0 var(--faq-cut), var(--faq-cut) 0, 100% 0, 100% 100%, 0 100%);
}

@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .faq__panel {
    --faq-r: 0.25rem;
    --faq-k: calc(var(--faq-r) * 0.7071);
    clip-path: shape(from 0 100%,
      line to 0 calc(var(--faq-cut) + var(--faq-r)),
      curve to var(--faq-k) calc(var(--faq-cut) - var(--faq-k)) with 0 var(--faq-cut),
      line to calc(var(--faq-cut) - var(--faq-k)) var(--faq-k),
      curve to calc(var(--faq-cut) + var(--faq-r)) 0 with var(--faq-cut) 0,
      line to 100% 0,
      line to 100% 100%,
      close);
  }
}

/* A faint light within the glass, for it to read as glass rather than a
   grey box: the warm gold and the cool blue of the house's own lighting,
   held inside the panel's edges. */
.faq__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 12% 100%, rgb(214 179 106 / 0.14), transparent 70%),
    radial-gradient(ellipse 55% 50% at 92% 0%, rgb(127 211 255 / 0.11), transparent 70%);
  pointer-events: none;
}

.faq__panel-num {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--c-gold);
}

/* The question is not repeated at the head of its answer while the list
   beside it names it; it is there for the page without script. */
.js .faq__panel-question {
  display: none;
}

.faq__panel-question {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  color: var(--c-ink);
}

.faq__panel p:not(.faq__panel-num) {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.faq__panel p:not(.faq__panel-num) + p {
  margin-top: var(--space-4);
}

/* With script, one answer at a time, crossing over */
.js .faq__panel {
  opacity: 0;
  visibility: hidden;
  translate: 0 0.75rem;
  transition:
    opacity 0.45s ease,
    translate 0.6s var(--ease-out),
    visibility 0s linear 0.45s;
}

.js .faq__panel.is-shown {
  opacity: 1;
  visibility: visible;
  translate: none;
  transition:
    opacity 0.55s ease 0.1s,
    translate 0.7s var(--ease-out) 0.1s,
    visibility 0s;
}

/* ---- One column: each answer folds open under its question ----
   (faq.js, below 56rem). The fold grows from nothing to the answer's
   height by its one grid row, and the answer crosses in as it does in
   the panel beside the list. The panels' own column is left empty. */
.faq__selector.is-folding .faq__panels {
  display: none;
}

.faq__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}

.faq__fold.is-open {
  grid-template-rows: 1fr;
}

/* the one closing above the question pressed: gone at once (faq.js) */
.faq__fold.is-instant,
.faq__fold.is-instant .faq__panel {
  transition: none;
}

.faq__fold-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__fold .faq__panel {
  grid-area: auto;
  margin: var(--space-4) 0 var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  .faq__fold {
    transition: none;
  }
}

/* Without it, no list, and every answer in turn */
.no-js .faq__tabs {
  display: none;
}

.no-js .faq__selector {
  grid-template-columns: minmax(0, 1fr);
  max-width: 50rem;
}

.no-js .faq__panels {
  position: static;
  gap: var(--space-5);
}

.no-js .faq__panel {
  grid-area: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .faq__panel,
  .js .faq__panel.is-shown {
    transition: none;
    translate: none;
  }
}