/* ════════════════════════════════════════════════════════════
   ONYX FITNESS — Mobile-foundation patterns
   (loaded site-wide after components.css, before sections.css)

   Purpose: reusable building blocks for the six-moment mobile
   homepage redesign. These patterns are extracted from existing
   section-scoped rules and made reusable as additive opt-ins.
   No existing site behavior is altered — section-specific styles
   continue to render as they always have. Subsequent moment
   prompts compose moments by combining the patterns here.

   ────────────────────────────────────────────────────────────
   DESIGN VOCABULARY (canonical reference — keep in sync with
   tokens.css; do not duplicate values, only consume them)

     PAGE SURFACE          var(--color-onyx)      #FAF6EF cream
     ELEVATED CARD         var(--color-onyx-rich) #FFFFFF white
     DARK SURFACE          var(--color-pearl)     #080706 near-black
     DEFAULT TEXT (cream)  var(--color-bone)      #1F1B16 warm dark
     DISPLAY/EMPHASIS      var(--color-pearl)     #080706 true dark
     MUTED TEXT            var(--color-steel-muted) #888278

     MOBILE BREAKPOINT     768px (site convention; 30+ media queries)

     EYEBROW               var(--text-xs)    +  var(--tracking-widest)
                           uppercase, semibold
     HEADLINE (mobile)     var(--text-3xl)   = clamp(2rem, 4vw, 3rem)
     BODY                  var(--text-base)  = 1rem
     CAPTION/FOOTNOTE      var(--text-sm)    = 0.875rem

     MOMENT V-PADDING      var(--section-y)       clamp(3.5rem, 7vw, 5.5rem)
     MAJOR RHYTHM GAP      var(--section-y-large) clamp(4rem, 10vw, 8.5rem)
     CARD INTERNAL         var(--space-5) to var(--space-6)

     REVEAL DURATION       0.6s (set on .reveal-on-scroll)
     REVEAL EASE           var(--ease-out-expo)
     PULSE CYCLE           2.5s ease-in-out infinite
     STAGGER PER ITEM      0.08s–0.10s per nth-child

   ──────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────
   .status-pill — generalized status indicator (Open · 24/7, etc.)

   Extracted from .home-find__status. The Find Us block keeps its
   existing class for backward compatibility (no regression on the
   homepage's Place moment); .status-pill is the same shape made
   reusable so subsequent moments can drop one in.

   Usage:
     <span class="status-pill" data-open-status>
         <span class="status-pill__dot" aria-hidden="true"></span>
         <span class="status-pill__text">Open &middot; 24/7 access</span>
     </span>

   The data-open-status attribute is read by main.js to flip the
   text + status modifier (staffed vs 24-7) based on the current
   weekday/hour. Existing logic is unchanged; the new element just
   participates in the same selector.
   ──────────────────────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-onyx-warm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--platinum-deep);
    background: rgba(10, 9, 8, 0.04);
}

.status-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-bone);                    /* warm white (resolves via hero scope override on dark surfaces) */
    box-shadow: 0 0 0 2px rgba(250, 246, 239, 0.18);  /* warm-white rim */
    animation: pulse-dot 2.5s ease-in-out infinite;   /* @keyframes lives in sections.css */
    flex-shrink: 0;
}

/* Variant when staffed hours not active — same JS toggles
   data-status. The selector mirrors .home-find__status[data-status="unstaffed"]
   so the visual treatment is identical. */
.status-pill[data-status="unstaffed"] .status-pill__dot {
    background: var(--platinum-deep);
    animation: none;
    box-shadow: none;
}

/* When the pill sits on a dark surface (.moment--surface-dark)
   the borders and text need to invert. */
.moment--surface-dark .status-pill {
    color: var(--color-bone);
    border-color: rgba(250, 246, 239, 0.18);
    background: rgba(250, 246, 239, 0.05);
}


/* ────────────────────────────────────────────────────────────
   .moment — moment-level wrapper for the six-moment redesign.

   Each subsequent moment prompt wraps its content in:
     <section class="moment moment--surface-cream">...</section>
   or
     <section class="moment moment--surface-dark moment--large">...</section>

   The wrapper provides:
     - Uniform vertical padding (clamped section-y or section-y-large)
     - Cream or dark surface treatment with appropriate text color
     - A reveal scope (children fade in via the observer in main.js;
       see auto-reveal note below)

   Single-template architecture: the same markup renders desktop
   and mobile; CSS inside each moment file handles the layout swap
   at 768px.
   ──────────────────────────────────────────────────────────── */
.moment {
    padding-block: var(--section-y);
    position: relative;
}

.moment--large {
    padding-block: var(--section-y-large);
}

.moment--surface-cream {
    background: var(--color-onyx);          /* cream page surface */
    color: var(--color-bone);                /* warm dark text */
}

.moment--surface-dark {
    background: var(--color-pearl);          /* near-black */
    color: var(--color-bone);                /* the bone variable resolves to warm white in dark scope */
}

/* Dark-scope text overrides — when a moment is on dark surface,
   display text uses bone (resolves to warm white via dark-scope
   token override; see tokens.css lines 287+). */
.moment--surface-dark .moment__headline,
.moment--surface-dark .moment__eyebrow {
    color: var(--color-bone);
}
.moment--surface-dark .moment__body,
.moment--surface-dark .moment__caption {
    color: var(--color-bone);
    opacity: 0.85;
}


/* ────────────────────────────────────────────────────────────
   Moment typography utility classes — vocabulary in shorthand.

   These wrap the design vocabulary (see header table) into
   classes that read intent at a glance. Used by moment scaffolding
   code, NOT by CMS section templates (operator-edited content
   continues using its existing classes).
   ──────────────────────────────────────────────────────────── */
.moment__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-steel-muted);
    margin: 0 0 var(--space-3);
}

.moment__headline {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    color: var(--color-pearl);
    line-height: 1.05;
    margin: 0 0 var(--space-4);
}

.moment__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-bone);
    margin: 0 0 var(--space-5);
}
.moment__body:last-child { margin-bottom: 0; }

.moment__caption {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-steel-muted);
    margin: 0;
}


/* ────────────────────────────────────────────────────────────
   .reveal — opt-in fade-in-on-scroll utility.

   Add the class to any element to get the same .reveal-on-scroll
   treatment that existing homepage sections use. The
   IntersectionObserver in main.js (setupRevealObserver) watches
   for this class and applies the .reveal-on-scroll → .is-revealed
   transition pattern defined in base.css.

   Auto-reveal also applies to direct children of any .moment
   wrapper (selector `.moment > *` in main.js). If a moment needs
   custom reveal logic (e.g., child elements control their own
   visibility, or a swipe deck stages reveals on slide-in), wrap
   them in a non-.moment-direct-child container or use scoped CSS
   to suppress the default fade-in:

       .moment-2 .moment-2__deck > * {
           opacity: 1 !important;
           transform: none !important;
           transition: none !important;
       }

   This pattern prevents future moments from fighting against the
   framework when they need custom behavior.
   ──────────────────────────────────────────────────────────── */
.reveal {
    /* Initial state — JS adds .reveal-on-scroll at observe time
       so this class on its own does nothing visible until the
       observer engages. Pre-applying the at-rest state would mean
       a flash-of-hidden-content if JS fails. */
}


/* ────────────────────────────────────────────────────────────
   Mobile-only refinements for the moment-level patterns.

   Desktop renders moments with their declared padding. On mobile,
   tighten internal whitespace so the moment doesn't read as
   cavernous on a 375px viewport.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .moment__headline {
        /* Slightly smaller on mobile so two-line headlines don't
           dominate the viewport. The clamp on --text-3xl already
           scales it down, but a tighter ceiling reads better in
           the narrower context. */
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }
    .moment__body {
        margin-bottom: var(--space-4);
    }
    .status-pill {
        font-size: 0.6875rem; /* 11px — slightly tighter for mobile chrome */
    }
}