/* ============================================================
   Sanctuary Insurance, FAQ page scoped layer
   Inherits all tokens, shell + section patterns from styles.css.
   Only page-specific composition lives here, scoped under .page-faq.
   Hero is a VARIANT (split copy + framed support photo), NOT the
   home full-bleed parallax scene. The FAQ accordion, search box and
   quote tool reuse the shared classes verbatim; this file only adds
   the hero variant, the FAQ category grouping and the quick-help
   contact strip. No em/en dashes. Mobile-first (375 base).
   ============================================================ */

/* ---------- FAQ hero VARIANT: split copy + framed support media ---------- */
.page-faq .faq-hero {
  position: relative;
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(237,206,104,.20) 0%, rgba(237,206,104,0) 46%),
    radial-gradient(120% 90% at 4% 6%, rgba(244,169,192,.16) 0%, rgba(244,169,192,0) 44%),
    var(--canvas);
  color: var(--ink-inverse);
  overflow: clip;
  padding-block: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);
}
.page-faq .faq-hero .fh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3rem);
  align-items: center;
}
.page-faq .faq-hero .fh-copy .breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-small); color: var(--ink-inverse-soft); margin-bottom: 1rem;
}
.page-faq .faq-hero .fh-copy .breadcrumb a { color: var(--ink-inverse-soft); }
.page-faq .faq-hero .fh-copy .breadcrumb a:hover { color: var(--ink-inverse); }
.page-faq .faq-hero .fh-copy .breadcrumb .sep { opacity: .5; }
.page-faq .faq-hero .fh-copy .breadcrumb .here { color: var(--warm); }
.page-faq .faq-hero .eyebrow { color: var(--warm); font-weight: 600; font-size: var(--fs-small); margin-bottom: .6rem; }
.page-faq .faq-hero h1 { color: var(--ink-inverse); max-width: 16ch; }
.page-faq .faq-hero .lede { color: var(--ink-inverse-soft); font-size: clamp(1rem,.95rem + .3vw,1.15rem); max-width: 46ch; margin-top: 1rem; }
.page-faq .faq-hero .fh-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.6rem; }
.page-faq .faq-hero .fh-actions .btn-link { color: var(--ink-inverse); }

/* framed media (variant signature: a single framed photo with a soft warm
   halo + a floating answer-time badge, not a layered parallax scene) */
.page-faq .faq-hero .fh-media { position: relative; }
.page-faq .faq-hero .fh-frame {
  position: relative; border-radius: var(--radius-lg); overflow: clip;
  box-shadow: var(--shadow-float);
  aspect-ratio: 3/2;
}
.page-faq .faq-hero .fh-frame img { width: 100%; height: 100%; object-fit: cover; }
.page-faq .faq-hero .fh-halo {
  position: absolute; inset: -10% auto auto -8%; width: 56%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, rgba(237,206,104,.45) 0%, rgba(237,206,104,0) 70%);
  pointer-events: none;
}
.page-faq .faq-hero .fh-badge {
  position: absolute; right: -.6rem; bottom: -.6rem;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: .7rem .9rem;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: .6rem; max-width: 84%;
}
.page-faq .faq-hero .fh-badge .ico {
  width: 34px; height: 34px; flex: 0 0 auto; color: var(--accent);
  background: #FDECEC; border-radius: 9px; display: grid; place-items: center;
}
.page-faq .faq-hero .fh-badge .ico svg { width: 20px; height: 20px; }
.page-faq .faq-hero .fh-badge b { display: block; font-size: var(--fs-small); }
.page-faq .faq-hero .fh-badge span { font-size: var(--fs-xs); color: var(--ink-soft); }

/* ---------- FAQ section: category grouping over the shared accordion ---------- */
/* the .faq-band / .faq-search / .faq-list / .faq-item classes come from
   styles.css and the shared app.js drives them. This only adds the group
   headers + the result-summary line that sit inside the shared list area.
   #faqList carries the shared .faq-list grid; its direct children here are
   the four .faq-group blocks (plus the empty-state paragraph), so the
   shared .7rem grid gap becomes the GROUP-to-group rhythm. We lift that
   to a larger group gap and re-add the item-to-item gap INSIDE each group,
   which the shared list-level grid no longer reaches once items are nested. */
.page-faq #faqList { gap: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
.page-faq .faq-group { display: grid; gap: .7rem; }
.page-faq .faq-group .faq-group-head {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem;
}
.page-faq .faq-group .faq-group-head .fg-ico {
  width: 34px; height: 34px; flex: 0 0 auto; color: var(--accent);
  background: #FDECEC; border-radius: 9px; display: grid; place-items: center;
}
.page-faq .faq-group .faq-group-head .fg-ico svg { width: 19px; height: 19px; }
.page-faq .faq-group .faq-group-head h3 { font-size: var(--fs-h3); }
.page-faq .faq-group .faq-group-head .fg-sub { font-size: var(--fs-small); color: var(--ink-soft); }

/* a group can become empty during a live search; hide its header then */
.page-faq .faq-group.is-empty { display: none; }

/* ---------- Quick-help contact strip (under the accordion, light) ---------- */
.page-faq .faq-help {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  background: var(--surface-2); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 2vw, 2rem);
  display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center;
}
.page-faq .faq-help .fhx-copy h3 { font-size: var(--fs-h3); }
.page-faq .faq-help .fhx-copy p { margin-top: .5rem; color: var(--ink-soft); font-size: var(--fs-small); max-width: 46ch; }
.page-faq .faq-help .fhx-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- Quote band intro tweak (this page leads with the helper) ---------- */
.page-faq .quote-band .qb-intro .eyebrow { color: var(--accent-deep); }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .page-faq .faq-hero .fh-grid { grid-template-columns: 1.05fr .95fr; }
  .page-faq .faq-help { grid-template-columns: 1.4fr 1fr; }
  .page-faq .faq-help .fhx-actions { justify-content: flex-end; }
}