/* ─── HutchConnect Fantasy page art ──────────────────────────────────────────
   Hero treatment for the public Fantasy pages (/fantasy, /fantasy/leaderboard,
   /fantasy/how-it-works, /fantasy/p/{token}).

   Layered as a MODIFIER on top of the shared .es-hero rather than editing it.
   .es-hero is the generic intake-form hero used by Get Listed, garage sales, pet
   reports, Buy/Sell/Trade and every other public form -- restyling it to make
   Fantasy look good would silently change a dozen pages nobody is looking at.
   So Fantasy pages carry BOTH classes and only the Fantasy one is defined here.

   Shipped as a GLOBAL stylesheet from this RCL's wwwroot, NOT a scoped .razor.css:
   a scoped bundle never aggregates into the host's {HostAssembly}.styles.css across
   a cross-repo ProjectReference, so the page would return 200 with every fty-* class
   unstyled. That exact failure is HC.Module #97, and trunk-or-treat.css carries the
   same note for the same reason.

   NO CSS `filter` anywhere in this file, deliberately. A filter on a layer that is
   transformed or scrolled forces the compositor to re-rasterise it every frame, and
   mobile GPUs bail -- that is what broke the Trunk-or-Treat map on phones (#657).
   Gradients and overlays composite cheaply; filters do not.
   ─────────────────────────────────────────────────────────────────────────── */

/* Mobile-first: the 1200px art (67 KB) is the default, and only screens wide
   enough to show it swap up to the 2400px version (205 KB). A phone on a Hutchinson
   cell connection never downloads the desktop image. */
.fty-hero {
    position: relative;
    background-image:
        linear-gradient(180deg,
            rgba(4, 47, 46, .78) 0%,
            rgba(4, 47, 46, .52) 45%,
            rgba(4, 47, 46, .90) 100%),
        url("images/fantasy/fantasy-hero-sm.jpg");
    background-size: cover;
    background-position: center 64%;
    background-repeat: no-repeat;
    padding: 3.25rem 1.5rem 2.75rem;
}

@media (min-width: 701px) {
    .fty-hero {
        background-image:
            linear-gradient(180deg,
                rgba(4, 47, 46, .78) 0%,
                rgba(4, 47, 46, .52) 45%,
                rgba(4, 47, 46, .90) 100%),
            url("images/fantasy/fantasy-hero.jpg");
        padding: 4.5rem 1.5rem 4rem;
    }
}

/* The art already carries its own dark falloff, but the scrim above is what
   guarantees contrast. The shadow is the belt-and-braces for the brightest
   part of the image (the stadium lights, upper left) drifting under the H1 at
   an aspect ratio we did not anticipate. */
.fty-hero h1 {
    position: relative;
    font-size: clamp(2rem, 5.5vw, 3rem);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.fty-hero p {
    position: relative;
    color: #ccfbf1;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* The rules link added in #654. Sits on photography now rather than flat teal,
   so it needs its own contrast rather than inheriting the body link colour. */
.fty-hero a {
    position: relative;
    color: #99f6e4;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fty-hero a:hover,
.fty-hero a:focus-visible {
    color: #ffffff;
}

/* Someone who has asked for less motion has not asked for less contrast, so the
   scrim stays. This only drops the parallax-ish fixed attachment if it is ever
   added -- kept here so the intent is recorded before someone adds it. */
@media (prefers-reduced-motion: reduce) {
    .fty-hero { background-attachment: scroll; }
}

/* ─── Hero sizing ────────────────────────────────────────────────────────────
   Shortened ~28% from the first version. The art is personality, not the point --
   the standings are the point, and the taller hero pushed most of the field below
   the fold on a laptop. */
.fty-hero { padding: 2.25rem 1.5rem 2rem; }

@media (min-width: 701px) {
    .fty-hero { padding: 3.25rem 1.5rem 2.75rem; }
}

/* The host layout renders <main style="padding-top:56px">, a leftover from when the
   public nav was fixed. It is NOT fixed any more -- the only position:fixed left in
   hutchconnect.css is the lightbox -- so that padding is now 56px of dead page
   background sitting between the nav and this hero.

   That inline style lives in the HOST repos (HC.Web and Hub), which this module cannot
   edit, so the strip is cancelled here instead. Filed separately to remove it at the
   source; when that lands, delete this rule rather than leaving both. */
.fty-hero { margin-top: -56px; }

/* ─── Standings ──────────────────────────────────────────────────────────── */

.fty-wrap { max-width: 960px; }

.fty-weekline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .85rem;
    margin: 0 0 .85rem;
    font-size: .95rem;
    color: var(--hc-text-secondary, #64748b);
}

.fty-weekline strong { color: var(--hc-primary-darker, #134e4a); font-size: 1.05rem; }

.fty-board {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hc-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    overflow: hidden;
}

/* Rank | medal | name | movement | score, with the team expander on its own row
   beneath. Grid rather than flex so names and points line up as columns down the
   whole board instead of each row wrapping independently. */
.fty-row {
    display: grid;
    grid-template-columns: 2.1rem auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "medal num name move score"
        ".     .   team team  team";
    align-items: center;
    gap: .15rem .6rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--hc-border, #e2e8f0);
}

.fty-row:last-child { border-bottom: 0; }

.fty-row-podium { background: #f8fdfc; }

.fty-row-leader {
    background: linear-gradient(90deg, #ecfdf5 0%, #f8fdfc 60%);
    box-shadow: inset 3px 0 0 var(--hc-primary, #0d9488);
}

.fty-rank { grid-area: medal; font-size: 1.15rem; line-height: 1; }

.fty-rank-num {
    grid-area: num;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--hc-primary, #0d9488);
    min-width: 1.6rem;
}

.fty-name {
    grid-area: name;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--hc-text-heading, #1e293b);
    overflow-wrap: anywhere;
    min-width: 0;
}

.fty-move {
    grid-area: move;
    font-size: .82rem;
    font-weight: 700;
    min-width: 2.4rem;
    text-align: right;
}

.fty-move-up { color: #15803d; }
.fty-move-down { color: #b91c1c; }

.fty-score {
    grid-area: score;
    text-align: right;
    font-size: .82rem;
    color: var(--hc-text-secondary, #64748b);
    line-height: 1.25;
    /* Safe to keep: this string is "NNN season pts", a width we control, unlike the
       data-derived breakdown text below. */
    white-space: nowrap;
}

.fty-score strong {
    display: inline;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--hc-text-heading, #1e293b);
}

.fty-week-pts { display: block; }

/* ─── "View team" expander ───────────────────────────────────────────────── */

.fty-team { grid-area: team; margin-top: .3rem; }

.fty-team > summary {
    display: inline-block;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hc-primary-dark, #0f766e);
    padding: .15rem .1rem;
    list-style: none;
}

.fty-team > summary::-webkit-details-marker { display: none; }
.fty-team > summary::before { content: "\25B8\00a0"; }
.fty-team[open] > summary::before { content: "\25BE\00a0"; }
.fty-team > summary:hover { text-decoration: underline; }

.fty-team-body {
    margin: .4rem 0 .35rem;
    border-top: 1px dashed var(--hc-border, #e2e8f0);
    padding-top: .45rem;
}

.fty-team-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* Wrap, so a long business name and a long breakdown stack instead of forcing
       the row wider than its container. */
    flex-wrap: wrap;
    gap: .15rem .75rem;
    padding: .28rem 0;
    text-decoration: none;
    color: inherit;
    font-size: .86rem;
    min-width: 0;
}

.fty-team-row:hover .fty-team-name { text-decoration: underline; }

.fty-team-name {
    font-weight: 600;
    color: var(--hc-primary-dark, #0f766e);
    /* A grid/flex child defaults to min-width:auto and refuses to shrink below its
       content, which is the other half of how this row overflowed. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* NO white-space:nowrap here, deliberately. This text is data-derived and runs to
   62 characters at its longest ("3 active days + field goal = 6 this week (season:
   29 pts)"). nowrap on a string that long inside a flex row forced the whole page
   wider than a phone screen -- the team panel ran off the side and the page would
   not scroll to reach it. Anything whose length comes from DATA must be allowed to
   wrap; nowrap is only ever safe on a string whose maximum width you control. */
.fty-team-detail {
    color: var(--hc-text-secondary, #64748b);
    text-align: right;
    min-width: 0;
}

.fty-team-referrals {
    margin: .4rem 0 0;
    font-size: .82rem;
    color: var(--hc-text-secondary, #64748b);
}

.fty-foot {
    margin: .9rem 0 0;
    font-size: .85rem;
    color: var(--hc-text-secondary, #64748b);
}

/* Visually hidden, still read aloud. The movement arrows are glyphs; this is the
   sentence a screen reader gets instead. */
.fty-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Phone ──────────────────────────────────────────────────────────────────
   Movement drops to the score column's row so a long name is never squeezed into a
   sliver. Nothing is hidden -- a phone reader gets the same facts. */
@media (max-width: 560px) {
    .fty-row {
        grid-template-columns: 1.9rem auto minmax(0, 1fr) auto;
        /* "team" spans ALL FOUR columns. It previously spanned only the right two,
           so the expanded panel started ~2.5rem in and had barely any width to work
           with -- which is what turned a long breakdown string into a page that ran
           off the side of the phone. */
        grid-template-areas:
            "medal num  name  score"
            ".     .    move  score"
            "team  team team  team";
        padding: .65rem .8rem;
    }

    .fty-move { text-align: left; }

    /* Name over breakdown, left-aligned. At 360px there is no room for a
       space-between row, and stacked is the more readable shape regardless. */
    .fty-team-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        padding: .4rem 0;
    }

    .fty-team-detail {
        font-size: .8rem;
        text-align: left;
    }
}