/* pages/home.css — @layer pages. Quiet Neutral home page (redesign spec §2.4).
   Layout only: components (.btn, .card, .pmedia, .pillnav/.pill, .trust,
   .price) live in components.css and are consumed here by class only. Flat
   panels throughout — no gradients, no shadows, no hover-lift, no realm
   surface fork. Home stays day scope (no data-realm on <main>); the two
   realm blocks below carry their own muted tint locally via plain
   .realm--wellness / .realm--arcana modifier classes, not [data-realm]. */
@layer pages {

  /* ═══════════ Hero — split copy + a flat hero-photo panel ═══════════ */
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--s7);
    padding: var(--s7) 0;
  }
  .hero__title {
    margin: 0 0 var(--s4);
    max-width: 14ch;
    font: 700 var(--t-h1)/1.05 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-surface);
  }
  .hero__lede {
    margin: 0 0 var(--s6);
    max-width: 46ch;
    font: 400 var(--t-lede)/1.6 var(--font-text);
    color: var(--on-surface-muted);
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

  /* Flat well panel — no gradient wash, no floating-chip shadow. */
  .hero__frame {
    background: var(--surface-well);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s6);
  }
  .hero__media { position: relative; }
  .hero__tag {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    background: var(--surface-raised);
    color: var(--on-surface-muted);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    padding: 4px 10px;
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; padding: var(--s6) 0; }
    .hero__title { max-width: none; }
  }

  /* ═══════════ Category pill nav (Wellness set + Arcana set) ═════════ */
  .pillnav { margin: 0 0 var(--s8); }

  /* ═══════════ Shared heading rhythm for the two featured grids ══════ */
  .home-section { margin: var(--s8) 0; }
  .home-section__title {
    margin: 0 0 var(--s5);
    font: 700 var(--t-h2)/1.15 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--on-surface);
  }

  /* ═══════════ Featured product grids — grow column count, not card width ═ */
  .pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s5);
  }
  .pgrid__empty {
    grid-column: 1 / -1;
    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);
  }

  /* ═══════════ Realm split — two flat tinted panels (no gradient) ════ */
  .realmsplit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    margin: var(--s8) 0;
  }
  .realm {
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s6);
  }
  .realm--wellness { background: var(--sage-tint); }
  .realm--arcana { background: var(--violet-tint); }
  .realm__eyebrow {
    margin: 0 0 var(--s2);
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .realm--wellness .realm__eyebrow { color: var(--sage-deep); }
  .realm--arcana .realm__eyebrow { color: var(--violet-deep); }
  .realm__title {
    margin: 0 0 var(--s3);
    font: 700 var(--t-h2)/1.15 var(--font-display);
    color: var(--ink);
  }
  .realm__blurb {
    margin: 0 0 var(--s5);
    max-width: 42ch;
    font: 400 var(--t-body)/1.6 var(--font-text);
    color: var(--ink-muted);
  }
  @media (max-width: 780px) {
    .realmsplit { grid-template-columns: 1fr; }
  }

  /* ═══════════ Trust band — vertical rhythm only (skin in components.css) */
  .trust + .newsletter,
  .realmsplit + .home-section,
  .home-section + .trust {
    margin-top: var(--s8);
  }

  /* ═══════════ Newsletter — flat well panel, no gradient ══════════════ */
  .newsletter {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--s6);
    background: var(--surface-well);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--s7) var(--s6);
    margin: var(--s8) 0;
  }
  .newsletter__title {
    margin: 0 0 var(--s2);
    font: 700 var(--t-h2)/1.2 var(--font-display);
    color: var(--on-surface);
  }
  .newsletter__pitch {
    margin: 0;
    max-width: 44ch;
    font: 400 var(--t-body)/1.6 var(--font-text);
    color: var(--on-surface-muted);
  }
  .newsletter__form {
    display: flex;
    gap: var(--s3);
  }
  .newsletter__form input[type="email"] { flex: 1; min-width: 0; }
  .newsletter .notice { grid-column: 1 / -1; margin-top: var(--s3); }
  @media (max-width: 780px) {
    .newsletter { grid-template-columns: 1fr; padding: var(--s6) var(--s5); }
    .newsletter__form { flex-direction: column; }
  }

}