/* editorial.css — the two text-first pages added for the admin content wave:
 *   .quotes  → /testimonials/  (guest quote cards, hydrated from /api/testimonials)
 *   .faq     → /faq/           (accordion, hydrated from /api/faq)
 *
 * ONE FILE FOR TWO PAGES, deliberately: every stylesheet base.js links is
 * fetched on every page in the site, and these two are the same layout idea —
 * a centred editorial header, a rule, a stack of cards, a closing CTA — in the
 * same type and colour language. Two files would be two more render-blocking
 * requests on the homepage to describe pages the homepage does not have.
 *
 * Both roots are scoped (.quotes / .faq), so this file is inert everywhere else.
 * Consumes tokens.css; reveal behaviour mirrors gallery.css / blog.css.
 */

.quotes,
.faq {
  --edge: clamp(1.25rem, 5vw, 4rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) var(--edge) clamp(4.5rem, 11vw, 9rem);
  color: var(--ink);
}
.quotes [data-reveal],
.faq [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.quotes [data-reveal].is-visible,
.faq [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.no-js .quotes [data-reveal],
.no-js .faq [data-reveal] {
  opacity: 1;
  transform: none;
}
.quotes .rule,
.faq .rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto var(--space-6);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── Shared editorial header ─────────────────────────────────────────────── */
.quotes-head,
.faq-head {
  max-width: 900px;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.quotes-head__eyebrow,
.faq-head__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.quotes-head__title,
.faq-head__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-800);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
.quotes-head__intro,
.faq-head__intro {
  margin: var(--space-5) auto 0;
  max-width: 44rem;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* ── Testimonials: a masonry of quote cards ──────────────────────────────────
 * CSS columns rather than grid: the quotes run from one line to a full
 * paragraph, and columns let a short card sit under a long one instead of
 * leaving a hole in a row. Same masonry idea as the gallery, different content.
 */
.quotes-grid {
  columns: 1;
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 700px) {
  .quotes-grid {
    columns: 2;
  }
}
@media (min-width: 1100px) {
  .quotes-grid {
    columns: 3;
  }
}
.quote-card {
  position: relative;
  display: block;
  break-inside: avoid;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  /* Flat sand panel + gold hairline — the same "framed editorial panel" the
     promo cards and service price menus use. No drop shadow anywhere. */
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
a.quote-card:hover,
a.quote-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.quote-card__mark {
  display: block;
  font-family: var(--script);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.75;
}
.quote-card__quote {
  margin: var(--space-4) 0 0;
  font-family: var(--serif);
  font-size: var(--fs-300);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--ink);
}
.quote-card__name {
  margin: var(--space-5) 0 0;
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.quotes-cta {
  margin-top: clamp(3rem, 7vw, 5rem);
  text-align: center;
}

/* ── FAQ: a <details> accordion ──────────────────────────────────────────────
 * Native disclosure elements: the browser owns open/close, keyboard operation
 * and the screen-reader semantics, so there is no ARIA here to get wrong and no
 * JavaScript after render. The chevron is a CSS box rotated by [open].
 */
.faq-list {
  max-width: var(--container-narrow);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-list[hidden] {
  display: none;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) var(--space-2);
  cursor: pointer;
  list-style: none; /* kill the default disclosure triangle */
  font-family: var(--serif);
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__q:hover {
  color: var(--gold-deep);
}
.faq-item__q-text {
  flex: 1;
  min-width: 0;
}
.faq-item__chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-item__chev {
  transform: rotate(-135deg);
}
.faq-item__a {
  padding: 0 var(--space-2) clamp(1.25rem, 3vw, 1.75rem);
}
.faq-item__p {
  margin: 0 0 var(--space-4);
  max-width: 46rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.faq-item__p:last-child {
  margin-bottom: 0;
}

/* ── FAQ holding panel — shown until the endpoint has answers ─────────────── */
.faq-fallback {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  text-align: center;
}
.faq-fallback[hidden] {
  display: none;
}
.faq-fallback__title {
  margin: 0 0 var(--space-4);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.faq-fallback__text {
  margin: 0 auto var(--space-6);
  max-width: 40rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.faq-fallback__line {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-300);
  color: var(--ink);
}
.faq-fallback__link {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-light);
}
.faq-fallback__link:hover,
.faq-fallback__link:focus-visible {
  border-bottom-color: var(--gold);
}
.faq-hours {
  list-style: none;
  margin: var(--space-6) auto 0;
  padding: var(--space-5) 0 0;
  max-width: 22rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-200);
  color: var(--ink-soft);
}
.faq-hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 3px 0;
}
.faq-cta {
  margin-top: clamp(3rem, 7vw, 5rem);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .quotes [data-reveal],
  .faq [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .quote-card,
  .faq-item__chev {
    transition: none;
  }
}