/* ═══════════════════════════════════════════════════════════
   SECTION APPEARANCE (migration 0059)
   Universal per-section background + light/dark text theme +
   panel elevation. Loaded AFTER sections.css so the theme flips
   and panels win the cascade. Colours are literal (not tokens)
   because the brand tokens are semantically inverted.
   ═══════════════════════════════════════════════════════════ */

.sec-appear { position: relative; isolation: isolate; }
.sec-appear__inner { position: relative; z-index: 1; }

/* The wrapped section paints its own flat background; force it transparent so
   the appearance background shows through. (Selector beats a single .home-*
   class on specificity.) */
.sec-appear__inner > section { background-color: transparent; }

/* ─── Flat background fills ─── */
.sec-appear--bg-light { background: #F4F1EA; }   /* cream */
.sec-appear--bg-white { background: #FFFFFF; }
.sec-appear--bg-dark  { background: #0B0B0E; }   /* near-black */
.sec-appear--bg-media { background: #0B0B0E; }   /* dark base behind media while it loads */

/* ─── Media background layer ─── */
.sec-appear__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sec-appear__photo { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.sec-appear__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec-appear__overlay { position: absolute; inset: 0; background: #0B0B0E; }  /* opacity set inline */

/* ─── Text theme: LIGHT (dark / photo / video backgrounds) ─── */
.sec-appear--text-light .sec-appear__inner { color: #F4F1EA; }
.sec-appear--text-light .section-title,
.sec-appear--text-light .home-features__name,
.sec-appear--text-light h1,
.sec-appear--text-light h2,
.sec-appear--text-light h3 { color: #FFFFFF; }
.sec-appear--text-light .section-label { color: rgba(244, 241, 234, 0.72); }
.sec-appear--text-light .section-desc,
.sec-appear--text-light .home-features__desc { color: rgba(244, 241, 234, 0.80); }
.sec-appear--text-light .home-features__icon { color: rgba(244, 241, 234, 0.78); }

/* ─── Text theme: DARK (cream / white backgrounds) ─── */
.sec-appear--text-dark .sec-appear__inner { color: #1A1A1A; }
.sec-appear--text-dark .section-title,
.sec-appear--text-dark .home-features__name,
.sec-appear--text-dark h1,
.sec-appear--text-dark h2,
.sec-appear--text-dark h3 { color: #1A1A1A; }
.sec-appear--text-dark .section-label { color: #6B6B6B; }
.sec-appear--text-dark .section-desc,
.sec-appear--text-dark .home-features__desc { color: #555555; }
.sec-appear--text-dark .home-features__icon { color: #1A1A1A; }

/* ═══════════════════════════════════════════════════════════
   PANELS — elevate the cream feature grid beyond flat-text-on-cream.
   Each feature becomes a card. Applies everywhere (the elevation the
   owner asked for); theme-aware so it's a white card on light and
   frosted glass on dark/media.
   ═══════════════════════════════════════════════════════════ */
.home-features__item {
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-features__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 15, 15, 0.10);
}
/* On dark / media backgrounds a solid white card glares — use glass. */
.sec-appear--text-light .home-features__item {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

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

/* ═══════════════════════════════════════════════════════════
   PRICING — theme-aware surfaces.
   The pricing cards are pure white (--color-onyx-rich: #FFFFFF). They
   pop on dark/photo backgrounds as-is (Phase 1 flips the headings), but
   VANISH on a white/cream themed background (white-on-white). Give them
   a clear edge there so they "float" — the white-card-on-light fix. The
   card's own dark text stays correct (the card surface is still white).
   ═══════════════════════════════════════════════════════════ */
.sec-appear--bg-white .home-pricing__card,
.sec-appear--bg-light .home-pricing__card {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.06), 0 14px 34px rgba(15, 15, 15, 0.10);
}
/* The primary card already carries a dark border; just deepen its lift shadow. */
.sec-appear--bg-white .home-pricing__card--primary,
.sec-appear--bg-light .home-pricing__card--primary {
    box-shadow: 0 2px 4px rgba(8, 7, 6, 0.10), 0 20px 44px rgba(8, 7, 6, 0.16);
}

/* On dark / photo / video the white cards become frosted glass (matching the
   features panels) so the text — flipped light by the token scope above —
   reads. The pricing card text uses the brand text tokens, which are already
   warm-white inside .sec-appear--text-light. */
.sec-appear--text-light .home-pricing__card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.sec-appear--text-light .home-pricing__card--primary {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.40);
}
/* The feature checkmark is a baked-in near-black SVG (a token flip can't reach
   a colour inside a data-URI) — swap it for a light stroke on dark. */
.sec-appear--text-light .home-pricing__features li::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f2efe8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ═══════════════════════════════════════════════════════════
   HEADER CLEARANCE for THEMED first/post-hero sections.
   sections.css gives the first section (and the one after a hero)
   padding-top:160px so its eyebrow clears the fixed header. The
   .sec-appear wrapper makes the section a grandchild of <main>, so
   `main > section:first-of-type` / `.hero + section` no longer match
   and the clearance is lost (content brushes the nav). Re-apply it to
   the wrapped section. */
main > .sec-appear:first-child .sec-appear__inner > section,
.hero + .sec-appear .sec-appear__inner > section,
.page-hero + .sec-appear .sec-appear__inner > section,
.page-hero--backdrop + .sec-appear .sec-appear__inner > section {
    padding-top: var(--space-40);
}

/* ═══════════════════════════════════════════════════════════
   WHITE-SURFACE CARDS keep DARK text on a themed-dark section.
   `.sec-appear--text-light` flips the brand text tokens to warm-white
   for text sitting directly on the dark background. Cards that have
   their OWN white surface (trainer cards) would then render light text
   on white → invisible. Re-assert the default cream-context tokens
   INSIDE those cards so their text goes dark again. */
.sec-appear--text-light .home-trainers__card {
    --color-bone:           #1F1B16;
    --color-pearl:          #080706;
    --color-steel:          #444038;
    --color-steel-muted:    #888278;
    --platinum-bright:      #2A2521;
    --platinum:             #555048;
    --platinum-muted:       #888278;
    --platinum-deep:        #B5B0A6;
    --color-divider:        rgba(31, 27, 22, 0.08);
    --color-divider-strong: rgba(31, 27, 22, 0.16);
}