/* ============================================================
   V2 HERO — LIVE OPERATIONS DASHBOARD STRIP
   ------------------------------------------------------------
   A "sticky footer" band docked to the bottom of the homepage
   hero. Reads as a live operations dashboard: a row of animated
   stat tiles (People / Inventory / Attendance / Swimmers / Score)
   that count up on reveal, under the Count → Track → Operate
   pillar rail. Pairs with public/js/v2-hero-dashboard.js.

   Scoped to `.v2-hero.has-dash` so the AI / sports landing pages
   that reuse the bare `.v2-hero` (no dashboard) are untouched.
   Tokens (--ink / --cream / --paper / --accent / --rule …) come
   from v2-editorial.css and flip automatically in dark mode.
   ============================================================ */

/* Turn the hero into a column: the 2-col grid grows and centers,
   the dashboard strip docks to the bottom edge. */
.v2-hero.has-dash{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding-bottom:0;
    overflow:hidden; /* the strip is full-bleed; clip its top border seam */
}
.v2-hero.has-dash .v2-hero-grid{
    flex:1 1 auto;
    align-content:center;
    padding-top:2.25rem;
    padding-bottom:2.5rem;
}

/* The demo counter is white on a near-white hero — give its card a soft warm
   shade + ambient shadow so it reads as a distinct object, without losing the
   signature hard offset shadow. */
.v2-hero.has-dash .v2-hero-counter .counter-card{
    background:linear-gradient(165deg, #ffffff 0%, var(--paper-soft) 100%);
    border-color:var(--ink);
    box-shadow:8px 8px 0 var(--accent-glow), 0 20px 44px -26px rgba(10,10,10,.5);
}
[data-theme="dark"] .v2-hero.has-dash .v2-hero-counter .counter-card{
    background:linear-gradient(165deg, var(--paper-soft) 0%, var(--paper) 100%);
    box-shadow:8px 8px 0 var(--accent-glow), 0 20px 44px -22px rgba(0,0,0,.6);
}

/* ---- The strip ---- */
.v2-hero-dash{
    width:100%;
    border-top:1px solid var(--rule);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-glow) 55%, transparent) 0%, transparent 70%),
        var(--paper);
    padding:1.15rem 0 1.35rem;
}
.v2-hero-dash-inner{
    max-width:1320px;margin:0 auto;padding:0 1.5rem;
    display:flex;flex-direction:column;gap:1rem;
}

/* ---- Head row: live dot · pillar rail · caption ---- */
.v2-hero-dash-head{
    display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;
}
.v2-hero-dash-live{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);
}
.v2-hero-dash-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
}
.v2-hero-dash-pillars{
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);
    display:inline-flex;align-items:center;gap:.4rem;
}
.v2-hero-dash-pillars span{color:var(--accent-deep);font-weight:800}
.v2-hero-dash-caption{
    margin-left:auto;
    font-size:.8125rem;font-weight:500;color:var(--muted);
    letter-spacing:.01em;
}

/* ---- Tiles ---- */
.v2-hero-dash-tiles{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:.75rem;
}
.v2-dash-tile{
    position:relative;
    display:flex;flex-direction:column;gap:.6rem;
    padding:.95rem 1.05rem 1rem;
    /* Subtle top-lit shade + soft shadow so the card lifts off the strip
       instead of reading as white-on-white. */
    background:linear-gradient(180deg, color-mix(in srgb, var(--cream) 45%, #ffffff) 0%, var(--cream) 100%);
    border:1px solid var(--rule-strong);
    border-radius:2px;
    box-shadow:0 10px 24px -18px rgba(10,10,10,.5);
    min-height:118px;
    /* Tiles are links to the matching tool. */
    color:inherit;text-decoration:none;cursor:pointer;
    /* Reveal state — animated in by the .is-in class from JS/IO. */
    opacity:0;transform:translateY(16px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1),
               box-shadow .18s ease, border-color .18s ease;
}
/* Hover lift — scoped under .is-in so it outranks the reveal's transform:none. */
.v2-hero-dash.is-in .v2-dash-tile:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
    box-shadow:0 18px 34px -18px rgba(10,10,10,.6);
}
.v2-hero-dash.is-in .v2-dash-tile:hover .v2-dash-go{color:var(--accent-deep);transform:translateX(3px)}
.v2-hero-dash.is-in .v2-dash-tile{opacity:1;transform:none}
/* Staggered reveal — kept in CSS so no inline style attrs are needed. */
.v2-hero-dash.is-in .v2-dash-tile:nth-child(1){transition-delay:.04s}
.v2-hero-dash.is-in .v2-dash-tile:nth-child(2){transition-delay:.12s}
.v2-hero-dash.is-in .v2-dash-tile:nth-child(3){transition-delay:.20s}
.v2-hero-dash.is-in .v2-dash-tile:nth-child(4){transition-delay:.28s}
.v2-hero-dash.is-in .v2-dash-tile:nth-child(5){transition-delay:.36s}

.v2-dash-tile-top{display:flex;align-items:center;gap:.55rem;min-width:0}
.v2-dash-ic{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;flex:0 0 34px;
    color:var(--accent-deep);
    background:var(--accent-soft);
    border-radius:8px;
}
.v2-dash-ic svg{width:20px;height:20px;display:block}
.v2-dash-label{
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Subtle "open the tool" arrow, pushed to the tile's top-right. */
.v2-dash-go{
    margin-left:auto;flex:0 0 auto;
    font-size:.95rem;font-weight:700;line-height:1;
    color:var(--rule-strong);
    transition:color .15s ease, transform .15s ease;
}

/* Value sits low in the card so the tile reads as filled, not top-heavy. */
.v2-dash-tile-val{
    display:flex;align-items:baseline;gap:.4rem;line-height:1;
    margin-top:auto;
}
.v2-dash-num{
    font-family:'Fraunces','Source Serif Pro',Georgia,serif;
    font-size:2.35rem;font-weight:800;letter-spacing:-.02em;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    font-feature-settings:"ss01";
}
.v2-dash-den{
    font-size:.875rem;font-weight:600;color:var(--muted);
    font-variant-numeric:tabular-nums;
}
/* Score reads as a scoreline: the two numbers sit over Home / Away with the
   dash centered between them (both rows are full-width space-between). */
.v2-dash-score{justify-content:space-between;gap:.25rem;width:100%}
.v2-dash-score-sep{
    font-family:'Fraunces',Georgia,serif;font-size:1.6rem;font-weight:400;
    color:var(--accent-deep);align-self:center;flex:0 0 auto;
}
.v2-dash-tile-sub{
    font-size:.75rem;font-weight:500;color:var(--muted);
    letter-spacing:.01em;
}
/* Home / Away spread under the two score numbers (edges align with 3 … 2). */
.v2-dash-score-sub{
    display:flex;justify-content:space-between;width:100%;
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:0;
}

/* ---- Track-style progress bar (Inventory / Attendance / Swimmers) ---- */
.v2-dash-bar{
    height:4px;width:100%;border-radius:2px;
    background:color-mix(in srgb, var(--muted) 22%, transparent);
    overflow:hidden;
}
.v2-dash-bar-fill{
    display:block;height:100%;width:0;border-radius:2px;
    background:linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
    transition:width 1.1s cubic-bezier(.2,.7,.2,1);
    transition-delay:.35s;
}

/* ============================================================
   TRUST LINE — slim replacement for the old 3-column stat block
   so the hero isn't carrying two rows of big numbers.
   ============================================================ */
.v2-hero-trust{
    display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
    margin:0;padding-top:1.25rem;border-top:1px solid var(--rule);
    font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:var(--muted);
}
.v2-hero-trust-star{color:var(--accent-deep);font-size:.9rem;line-height:1}

/* ============================================================
   DESKTOP FIT — keep the whole hero (dashboard included) inside
   one viewport on two-column desktop (>980px), where the strip
   was dropping below the fold. Scoped to >980 so the stacked
   tablet layout and the mobile scroll-rail are untouched.
   ============================================================ */
@media(min-width:981px){
    .v2-hero.has-dash h1{font-size:clamp(2.75rem,4.6vw,4.5rem)}
    .v2-hero.has-dash .v2-hero-grid{padding-top:1.5rem;padding-bottom:1.75rem}
    .v2-hero.has-dash .v2-hero-text > *+*{margin-top:1.35rem}
    .v2-hero.has-dash .v2-hero-text > h1+.v2-hero-deck{margin-top:1.1rem}
    .v2-hero.has-dash .v2-hero-deck{max-width:500px}

    /* Counter sized down so it and the strip share one screen. */
    .v2-hero.has-dash .v2-hero-counter{gap:.75rem}
    .v2-hero.has-dash .v2-hero-counter .counter-progress-ring{width:232px !important;height:232px !important}
    .v2-hero.has-dash .v2-hero-counter .progress-ring-content .counter-value{font-size:3.6rem}
    .v2-hero.has-dash .v2-hero-counter .counter-controls{gap:.75rem;margin-top:.75rem}
    .v2-hero.has-dash .v2-hero-counter .counter-btn{height:54px;font-size:1.35rem}

    /* Strip stays tidy at desktop, but the tiles keep real presence. */
    .v2-hero-dash{padding:1rem 0 1.15rem}
    .v2-hero-dash-inner{gap:.85rem}
    .v2-dash-tile{padding:.95rem 1.05rem 1rem;min-height:140px}
}

/* Shorter laptop viewports — trim the counter (not the tiles) so nothing clips. */
@media(min-width:981px) and (max-height:820px){
    .v2-hero.has-dash .v2-hero-grid{padding-top:1rem;padding-bottom:1.25rem}
    .v2-hero.has-dash .v2-hero-text > *+*{margin-top:1.1rem}
    .v2-hero.has-dash h1{font-size:clamp(2.5rem,4vw,3.9rem)}
    .v2-hero.has-dash .v2-hero-counter .counter-progress-ring{width:206px !important;height:206px !important}
    .v2-hero.has-dash .v2-hero-counter .progress-ring-content .counter-value{font-size:3.1rem}
    .v2-hero.has-dash .v2-hero-counter .counter-btn{height:48px;font-size:1.2rem}
    .v2-hero-dash{padding:.75rem 0 .9rem}
    .v2-dash-tile{min-height:122px}
    .v2-dash-num{font-size:2rem}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
    .v2-hero.has-dash .v2-hero-grid{padding-bottom:2rem}
    .v2-hero-dash-tiles{grid-template-columns:repeat(5,minmax(140px,1fr))}
}

/* Tablet / phone: the tile row becomes a horizontal scroll-snap
   rail (allowed inner overflow-x — the page body never scrolls). */
@media(max-width:820px){
    .v2-hero.has-dash{overflow:visible}
    .v2-hero-dash-caption{margin-left:0;flex-basis:100%;order:3}
    .v2-hero-dash-tiles{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:.6rem;
        margin:0 -1.5rem;padding:0 1.5rem .25rem;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .v2-hero-dash-tiles::-webkit-scrollbar{display:none}
    .v2-dash-tile{
        flex:0 0 auto;width:min(46vw,190px);
        scroll-snap-align:start;
    }
}

@media(max-width:640px){
    .v2-hero-dash{padding:1rem 0 1.15rem}
    .v2-hero-dash-inner{padding:0 1rem;gap:.85rem}
    .v2-hero-dash-tiles{margin:0 -1rem;padding:0 1rem .25rem}
    .v2-dash-num{font-size:1.65rem}
    .v2-dash-tile{width:min(56vw,180px);padding:.75rem .8rem .8rem}
}

/* ============================================================
   DARK — the strip's own background needs a touch more contrast
   than the flat token flip gives it.
   ============================================================ */
[data-theme="dark"] .v2-hero-dash{
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-glow) 40%, transparent) 0%, transparent 70%),
        var(--paper);
}
[data-theme="dark"] .v2-dash-tile{
    background:linear-gradient(180deg, color-mix(in srgb, var(--paper-soft) 70%, #ffffff) 0%, var(--paper-soft) 100%);
    box-shadow:0 10px 24px -18px rgba(0,0,0,.7);
}

/* ============================================================
   REDUCED MOTION — no slide/count/bar animation; show finals.
   (JS also short-circuits the count-up.)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    .v2-dash-tile{opacity:1;transform:none;transition:none}
    .v2-dash-bar-fill{transition:none}
}