/* pages/sections.css — @layer pages (Quiet Neutral). Skins for the six CMS
   section partials the theme builder can drop onto any editorial page:
   hero · rich_text · image_with_text · featured_products · faq · newsletter_signup.

   These render inside #main-content (already the --wrap folio column with side
   padding) via {% render_page_sections %} — so each section is only responsible
   for its own vertical rhythm and an inner readable column, never the page gutter.
   Layout only: buttons (.btn/.btn--ghost/.btn--quiet), the section header
   (.rule-head), the card (_product_card.html include) and the input
   (.field__input) are components in components.css and are consumed here by
   scope vars only. No shadows, no gradients — the image hero's text-contrast
   scrim is a flat translucent-ink overlay (same recipe as .drawer's backdrop
   in components.css), not a gradient wash. scope-night on the image hero
   (set by the template) is left inert here on purpose: a merchant-authored
   marketing hero carries no real wellness/arcana data, so this file never
   keys type colour off --realm-accent/--realm-deep — that would tint a
   realm-less section with a cue it has no right to.

  LINK REQUIREMENT — this file is NOT linked by base.html. It is loaded by the
  theme-scoped override at themes/library/supernatural/templates/cms/page.html,
  so CMS-built editorial pages get these band/column/grid rules without touching
  plugins/installed/cms/. */
@layer pages {

  /* Shared band rhythm — one section, one quiet vertical measure. */
  .section-hero,
  .section-richtext,
  .section-imgtext,
  .section-featured,
  .section-faq,
  .section-newsletter { margin-block: var(--s8); }

  /* ═══════════════════════ HERO ═════════════════════════════════════════ */
  .section-hero { text-align: center; }
  .section-hero__inner { max-width: 46rem; margin-inline: auto; position: relative; z-index: 1; }
  .section-hero--image {
    --hero-image: none; /* fallback; the template sets the real value inline */
    position: relative;
    padding: var(--s9) var(--s5);
    background-image: var(--hero-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--surface-well);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  /* Flat translucent-ink scrim for text contrast over a photo — not a
     gradient (both notional "stops" would be the same flat colour; this is
     the same rgba(--ink) overlay .drawer/.quicksearch__backdrop already use
     in components.css, just as a pseudo-element instead of a second layer
     in the background shorthand). */
  .section-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.5);
  }
  .section-hero--image .section-hero__eyebrow,
  .section-hero--image .section-hero__title,
  .section-hero--image .section-hero__lede { color: var(--paper); }
  .section-hero__eyebrow {
    margin: 0 0 var(--s4);
    font: 600 var(--t-micro)/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--on-surface-muted);
  }
  .section-hero__title {
    margin: 0 auto var(--s4);
    max-width: 20ch;
  }
  .section-hero__lede {
    margin: 0 auto var(--s6);
    max-width: 46ch;
    font: 400 var(--t-lede)/1.5 var(--font-text);
    color: var(--on-surface-muted);
  }
  .section-hero__cta { margin-top: var(--s2); }

  /* ═══════════════════════ RICH TEXT ════════════════════════════════════ */
  .section-richtext__inner { max-width: 46rem; margin-inline: auto; }
  .section-richtext--center { text-align: center; }
  .section-richtext__title { margin: 0 0 var(--s5); }

  /* ═══════════════════════ IMAGE WITH TEXT ══════════════════════════════ */
  .section-imgtext__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s6);
    align-items: center;
  }
  @media (min-width: 720px) {
    .section-imgtext__grid { grid-template-columns: 1fr 1fr; gap: var(--s7); }
    /* Flip: image sits second on desktop; on mobile the source order stands. */
    .section-imgtext__grid--flip .section-imgtext__media { order: 2; }
  }
  .section-imgtext__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-card);
    border: 1px solid var(--hairline);
  }
  /* min-width: 0 — grid-item safety so a long unbroken URL/word in the copy
     can never widen the track past its 1fr cell (same guard .card uses). */
  .section-imgtext__body { min-width: 0; }
  .section-imgtext__title { margin: 0 0 var(--s4); }
  .section-imgtext__cta { margin-top: var(--s4); }

  /* ═══════════════════════ FEATURED PRODUCTS ════════════════════════════ */
  /* Plain gapped grid — same recipe as category.css's .listing__grid. A
     zero-gap hairline sheet would double-border against .card's own
     independent hairline + --r-card radius. */
  .section-featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s5);
  }
  .section-featured__empty {
    margin: 0;
    padding: var(--s7);
    background: var(--surface-well);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    text-align: center;
    font: 400 var(--t-body)/1.6 var(--font-text);
    color: var(--on-surface-muted);
  }

  /* ═══════════════════════ FAQ ══════════════════════════════════════════ */
  .section-faq__inner { max-width: 46rem; margin-inline: auto; }
  .section-faq__list { display: grid; gap: var(--s3); }
  .section-faq__item {
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: var(--s4) var(--s5);
    background: var(--surface-raised);
  }
  .section-faq__q {
    cursor: pointer;
    font: 600 var(--t-lede)/1.4 var(--font-text);
    color: var(--on-surface);
    list-style: none;
  }
  .section-faq__q::-webkit-details-marker { display: none; }
  .section-faq__q::after { content: " +"; color: var(--on-surface-muted); font-family: var(--font-mono); }
  .section-faq__item[open] .section-faq__q::after { content: " \2212"; }
  .section-faq__a { margin-top: var(--s3); }

  /* ═══════════════════════ NEWSLETTER SIGNUP ════════════════════════════ */
  /* Flat neutral panel — same recipe as home's own newsletter band. No
     realm wash: a merchant-authored signup block isn't wellness- or
     arcana-specific, so it stays on the neutral ground (--surface-well),
     not the .panel--wash sage/violet tint components.css also offers. */
  .section-newsletter__inner {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    background: var(--surface-well);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s7) var(--s6);
  }
  .section-newsletter__title { margin: 0 0 var(--s2); }
  .section-newsletter__lede {
    margin: 0 auto var(--s5);
    max-width: 46ch;
    font: 400 var(--t-lede)/1.5 var(--font-text);
    color: var(--on-surface-muted);
  }
  .section-newsletter__form {
    display: flex;
    gap: var(--s2);
    max-width: 26rem;
    margin-inline: auto;
    justify-content: center;
  }
  .section-newsletter__field { flex: 1; }
  .section-newsletter__submit { flex: 0 0 auto; }
  @media (max-width: 480px) {
    .section-newsletter__form { flex-direction: column; }
  }

  /* ═══════════════════════ SHARED PROSE (|safe bodies) ══════════════════ */
  .section-prose { font: 400 var(--t-body)/1.7 var(--font-text); color: var(--on-surface-muted); }
  .section-prose :where(h2, h3, h4) { color: var(--on-surface); }
  .section-prose :where(a) { color: var(--realm-deep); text-decoration: underline; text-underline-offset: 2px; }
  .section-prose :where(ul, ol) { padding-left: var(--s5); margin: 0 0 var(--s4); }
  .section-prose :where(li) { padding: var(--s1) 0; }

}