/* ==========================================================================
   GRIDIRON — assets/css/teams.css
   Component internals for the TEAM block family (includes/blocks-team.php):
   team-hero, team-record, team-roster, team-schedule, team-grid, team-leaders,
   team-strip — plus the shared `.sfgi-team-cell` atom that standings.php emits.
   --------------------------------------------------------------------------
   LOADS AFTER assets/gridiron.css AND DEPENDS ON IT.
   gridiron.css owns the tokens (:root --sfgi-*), the base resets, the depth
   ladder, and the shared atoms (.sfgi-card .sfgi-panel .sfgi-crest .sfgi-face
   .sfgi-chip .sfgi-record .sfgi-table .sfgi-scroll .sfgi-strip .sfgi-grid …).
   NOTHING here re-states a working rule from that file. This sheet only fills
   in the component internals the block callbacks actually emit, and overrides
   gridiron.css in the two places where the markup drifted away from it:

     1. `.sfgi-bar` — gridiron.css styles it as the FILL inside `.sfgi-track`
        (`width: var(--sfgi-pct, 0%)`), but stepfox_gi_p3_bar() emits it as the
        TRACK, with a `.sfgi-bar-fill` child carrying an inline width. Left
        alone the win-pct bars render 0px wide. Re-stated as a track ONLY on
        the two bars this family owns (.sfgi-card-bar, .sfgi-record-bar);
        `.sfgi-bar-fill` itself belongs to another sheet and is not touched.
     2. `.sfgi-strip__track / __item` in gridiron.css never match: the PHP
        emits the hyphenated `.sfgi-strip-track / -item` inside a
        `.sfgi-strip-viewport` that gridiron.css does not know about at all.

   RULES OBEYED (mirrors the header of gridiron.css)
   -------------------------------------------------
   * Colour ONLY through `--sfgi-*` tokens or `color-mix()` of them. There is
     not one literal hex, rgb() or hsl() in this file — the site has a working
     visitor light/dark toggle (`html.sfgi-light`) and every literal would be a
     light-mode bug. Team livery arrives per-card as the inline `--sfgi-team` /
     `--sfgi-team-2` custom properties and is used for BACKGROUNDS, edges and
     glows only, never painted onto text (gridiron.css rule 2).
   * Depth is the `--sfgi-d0…d4` ladder plus `--sfgi-ring` inset rings. No
     component here declares a 1px border.
   * Mobile-first: every base rule is safe at 390px. Layout widens at
     `min-width: 600px`, `769px` and `1025px`. Wide tables scroll inside
     `.sfgi-scroll`; the page never scrolls sideways.
   * Motion is scoped under `body.sfgi-fx` (added by assets/fx.js), pointer
     effects additionally under `(pointer: fine)`, and everything that moves is
     switched off under `prefers-reduced-motion: reduce`.

   COOPERATION WITH assets/fx.js
   -----------------------------
   fx.js writes `--rx --ry --mx --my --lift` on `.sfgi-tilt`, `--mx --my --holo`
   on `.sfgi-holo`, `--z --px --py` on `.sfgi-layer[data-depth]`, `--i --fxd` on
   `.sfgi-reveal`, and toggles `.is-tilting` / `.is-foiled` / `.is-in`.
   gridiron.css never got as far as declaring those four hook classes, so this
   sheet consumes them — but ONLY scoped to the components in this family
   (`.sfgi-team-hero`, `.sfgi-card--team`, `.sfgi-team-leader-link`), never as
   a bare global `.sfgi-tilt {}`, which is shared territory.
   `.sfgi-reveal`'s hidden start state is gated on `body.sfgi-fx-reveal`, never
   on `sfgi-fx` alone, so a browser without IntersectionObserver is never left
   with a blank page.
   The marquee: fx.js translates `.sfgi-strip-viewport` and measures the loop
   as `track[1].offsetLeft - track[0].offsetLeft`, so the viewport carries NO
   gap of its own — the seam spacing comes from each track's own horizontal
   padding (half the item gap on each side). No @keyframes here: an animation
   on the track would make fx.js hand the marquee back to CSS and only pause it
   on hover, which loses the intersection/visibility throttling.

   @package stepfox-gridiron-stats
   ========================================================================== */

/* ==========================================================================
   1. TEAM-HERO — the broadcast lower-third, blown up to full width
   Markup: .sfgi-team-hero.sfgi-reveal.sfgi-tilt[style="--sfgi-team;--sfgi-team-2"]
             > span.sfgi-team-hero-glow        (decorative, aria-hidden)
             > span.sfgi-team-hero-mark        (giant abbr watermark)
             > div.sfgi-team-hero-inner
                 > div.sfgi-team-hero-crest.sfgi-layer[data-depth=3]
                     > span.sfgi-ring  +  span.sfgi-crest--xl
                 > div.sfgi-team-hero-body.sfgi-layer[data-depth=1]
                     > p.sfgi-eyebrow.sfgi-team-hero-eyebrow
                     > h1.sfgi-team-hero-name
                         > span.sfgi-team-hero-city + span.sfgi-team-hero-nick
                     > div.sfgi-team-hero-record
                         > .sfgi-record .sfgi-team-hero-pct .sfgi-streak
                           .sfgi-seed .sfgi-badge
                     > div.sfgi-chips.sfgi-team-hero-chips
                     > a.sfgi-next …
   ========================================================================== */

.sfgi-team-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 22px 18px 24px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	color: var(--sfgi-ink);
	transition: box-shadow var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-roster .sfgi-scroll > .sfgi-roster-table {
	min-width: 664px;
}

/* ==========================================================================
   5. TEAM-GRID — the 32-crest filterable card wall on /teams/
   Markup: .sfgi-grid.sfgi-grid--teams > .sfgi-filters
             > .sfgi-cards.sfgi-cards--teams[data-grid][style="--sfgi-cols"]
                 > a.sfgi-card.sfgi-tilt.sfgi-reveal.sfgi-holo.sfgi-card--team
                     [style="--sfgi-team;--sfgi-team-2;--i"][data-*]
                     > span.sfgi-card-edge
                     > span.sfgi-card-glow
                     > span.sfgi-card-crest.sfgi-layer[data-depth=3] > .sfgi-crest--lg
                     > span.sfgi-card-body.sfgi-layer[data-depth=1]
                         > .sfgi-card-city + .sfgi-card-nick
                         + .sfgi-card-record (> b.sfgi-record + .sfgi-card-pct)
                         + span.sfgi-bar.sfgi-card-bar > .sfgi-bar-fill
                         + .sfgi-card-splits > .sfgi-split …
                     > span.sfgi-card-abbr
   ========================================================================== */

/* The second selector exists only to out-specify `.sfgi-grid [data-grid]`
   (0,2,0) in gridiron.css, which hard-codes two columns at every width. */
.sfgi-cards,
.sfgi-grid .sfgi-cards[data-grid] {
	display: grid;
	gap: var(--sfgi-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
	align-items: stretch;
	min-width: 0;
}
.sfgi-grid .sfgi-cards--teams[data-grid],
.sfgi-grid .sfgi-cards--players[data-grid] {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sfgi-card-min, 148px)), 1fr));
}

/* ==========================================================================
   8. TEAM-STRIP — the crest marquee above the footer
   Markup: .sfgi-strip[data-speed][style="--sfgi-strip-speed"]
             > .sfgi-strip-viewport
                 > .sfgi-strip-track           > a|span.sfgi-strip-item …
                 > .sfgi-strip-track[aria-hidden]  (the duplicate for the loop)
   `.sfgi-strip` itself (overflow + edge mask) already works in gridiron.css.
   fx.js translates the VIEWPORT, so the viewport must lay both tracks out in
   one unwrapped row at their natural width and carry no gap of its own.
   ========================================================================== */

.sfgi-strip-viewport {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.sfgi-strip-viewport::-webkit-scrollbar {
	display: none;
}
/* Once fx.js is driving, the row must be its natural width and must not clip
   or scroll — `.sfgi-strip` does the clipping. */
body.sfgi-fx .sfgi-strip-viewport {
	width: max-content;
	overflow: visible;
}

.sfgi-strip-track {
	--sfgi-strip-gap: clamp(18px, 4vw, 30px);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--sfgi-strip-gap);
	width: max-content;
	/* Half the gap on each side, so the seam between the two tracks measures
	   exactly one gap and the loop is invisible. */
	padding: 6px calc(var(--sfgi-strip-gap) / 2);
}

.sfgi-strip-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--sfgi-muted);
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-strip-item img,
.sfgi-strip-item .sfgi-crest {
	filter: grayscale(1);
	opacity: 0.66;
	transition: filter var(--sfgi-t-fast) var(--sfgi-ease), opacity var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-strip-item:hover,
.sfgi-strip-item:focus-visible {
	color: var(--sfgi-ink);
}
.sfgi-strip-item:hover img,
.sfgi-strip-item:hover .sfgi-crest,
.sfgi-strip-item:focus-visible img,
.sfgi-strip-item:focus-visible .sfgi-crest {
	filter: none;
	opacity: 1;
}

/* A thin separator between crests, drawn on the item so the markup needs no
   extra element. The negative left margin pulls it back into the middle of
   the track gap, and the right margin cancels the item's own 9px gap, so the
   rule sits exactly halfway between two crests at every clamp value. */
.sfgi-strip-item + .sfgi-strip-item::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 1px;
	height: 14px;
	margin-left: calc(var(--sfgi-strip-gap, 24px) * -0.5);
	margin-right: calc(var(--sfgi-strip-gap, 24px) / 2 - 9px);
	background: var(--sfgi-line);
}

/* ==========================================================================
   9. FX COOPERATION — consuming the custom properties assets/fx.js writes.
   Scoped to this family's components only; the bare hook classes
   (.sfgi-tilt / .sfgi-holo / .sfgi-reveal / .sfgi-layer) are shared territory
   and are never declared here on their own.
   ========================================================================== */

/* ---- scroll reveal ----------------------------------------------------- */
/* Gated on `sfgi-fx-reveal`, which fx.js only adds when the observer will
   actually run. Without it these elements are simply visible.

   The rise uses the INDEPENDENT `translate` property, not `transform`, and
   that is load-bearing: the same elements are also `.sfgi-tilt`, and a
   `transform` here would out-specify the tilt rule below — `…is-in` is
   (0,4,1) against the tilt's (0,3,1) — so every card that had scrolled into
   view would stop tilting for good. `translate` composes with `transform`
   instead of replacing it. */
body.sfgi-fx-reveal .sfgi-team-hero.sfgi-reveal,
body.sfgi-fx-reveal .sfgi-record-panel.sfgi-reveal,
body.sfgi-fx-reveal .sfgi-team-leaders.sfgi-reveal,
body.sfgi-fx-reveal .sfgi-team-leader.sfgi-reveal,
body.sfgi-fx-reveal .sfgi-card--team.sfgi-reveal {
	opacity: 0;
	translate: 0 14px;
	transition:
		opacity 0.5s var(--sfgi-ease) var(--fxd, 0ms),
		translate 0.5s var(--sfgi-ease) var(--fxd, 0ms);
}
body.sfgi-fx-reveal .sfgi-team-hero.sfgi-reveal.is-in,
body.sfgi-fx-reveal .sfgi-record-panel.sfgi-reveal.is-in,
body.sfgi-fx-reveal .sfgi-team-leaders.sfgi-reveal.is-in,
body.sfgi-fx-reveal .sfgi-team-leader.sfgi-reveal.is-in,
body.sfgi-fx-reveal .sfgi-card--team.sfgi-reveal.is-in {
	opacity: 1;
	translate: none;
}

/* ---- pointer tilt ------------------------------------------------------ */
/* fx.js clamps --rx / --ry to +/-7deg. The hero is an enormous slab, so it
   takes a little under half of that; the small cards take it all. */
@media (pointer: fine) {
	body.sfgi-fx .sfgi-card--team.sfgi-tilt {
		transform:
			perspective(var(--sfgi-persp))
			rotateX(var(--rx, 0deg))
			rotateY(var(--ry, 0deg))
			translate3d(0, var(--lift, 0px), 0);
		transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
	}
	body.sfgi-fx .sfgi-card--team.sfgi-tilt.is-tilting {
		box-shadow: var(--sfgi-d3-hi);
		will-change: transform;
	}

	/* The parallax layers. fx.js also writes --z, but the card clips its
	   watermark with `overflow: hidden`, which forces `transform-style: flat`
	   — so the depth is carried by the 2D --px / --py shift instead, which is
	   what actually reads on a card this size. */
	body.sfgi-fx .sfgi-card--team .sfgi-layer,
	body.sfgi-fx .sfgi-team-hero .sfgi-layer {
		transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
		transition: transform var(--sfgi-t) var(--sfgi-ease);
	}
}

/* The hero tilts only where there is room for it to read as depth rather than
   as wobble. */
@media (pointer: fine) and (min-width: 1025px) {
	body.sfgi-fx .sfgi-team-hero.sfgi-tilt {
		transform:
			perspective(var(--sfgi-persp))
			rotateX(calc(var(--rx, 0deg) * 0.4))
			rotateY(calc(var(--ry, 0deg) * 0.4))
			translate3d(0, calc(var(--lift, 0px) * 0.5), 0);
		transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
	}
	body.sfgi-fx .sfgi-team-hero.sfgi-tilt.is-tilting {
		box-shadow: var(--sfgi-d4), var(--sfgi-ring-hot);
		will-change: transform;
	}
}

/* ---- holographic foil on the crest cards ------------------------------- */
/* fx.js writes --mx / --my (cursor position, %) and --holo (0-200%) and
   toggles `.is-foiled`. */
@media (pointer: fine) {
	.sfgi-card--team.sfgi-holo::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 4;
		pointer-events: none;
		border-radius: inherit;
		opacity: 0;
		mix-blend-mode: overlay;
		background:
			radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sfgi-ink) 34%, transparent), transparent 62%),
			linear-gradient(115deg,
				transparent 0%,
				color-mix(in srgb, var(--sfgi-neon) 34%, transparent) calc(var(--holo, 50%) * 0.45),
				color-mix(in srgb, var(--sfgi-violet) 30%, transparent) calc(var(--holo, 50%) * 0.7 + 12%),
				color-mix(in srgb, var(--sfgi-accent) 30%, transparent) calc(var(--holo, 50%) * 0.9 + 24%),
				transparent 100%);
		transition: opacity var(--sfgi-t) var(--sfgi-ease);
	}
	body.sfgi-fx .sfgi-card--team.sfgi-holo.is-foiled::after {
		opacity: 0.85;
	}
}

@media (min-width: 1025px) {

	/* Above the tablet breakpoint, honour the author's column count. The two
	   modifier selectors are repeated so this beats the (0,3,0) auto-fill
	   rules above on specificity, not merely on source order. */
	.sfgi-grid .sfgi-cards[data-grid],
	.sfgi-grid .sfgi-cards--teams[data-grid],
	.sfgi-grid .sfgi-cards--players[data-grid] {
		grid-template-columns: repeat(var(--sfgi-cols, 4), minmax(0, 1fr));
	}
}

/* ==========================================================================
   11. FOCUS — the interactive elements this family adds.
   gridiron.css already rings every `a` / `button` inside an `sfgi-` subtree;
   these rules only restore the correct radius so the ring hugs the shape
   instead of the generic `--sfgi-r-sm`.
   ========================================================================== */

.sfgi-next:focus-visible,
.sfgi-schedule-opp:focus-visible,
.sfgi-team-cell:focus-visible,
.sfgi-roster-player:focus-visible,
.sfgi-team-leader-link:focus-visible,
.sfgi-strip-item:focus-visible,
.sfgi-card--team:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 3px;
}
.sfgi-strip-item:focus-visible {
	border-radius: var(--sfgi-r-sm);
	outline-offset: 4px;
}

/* ==========================================================================
   12. REDUCED MOTION — everything that moves, stops.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sfgi-team-hero,
	.sfgi-record-panel,
	.sfgi-team-leaders,
	.sfgi-team-leader,
	.sfgi-team-leader-link,
	.sfgi-team-leader-name,
	.sfgi-card--team,
	.sfgi-card--team .sfgi-layer,
	.sfgi-team-hero .sfgi-layer,
	.sfgi-next,
	.sfgi-schedule-row,
	.sfgi-schedule-name,
	.sfgi-roster-row,
	.sfgi-roster-name,
	.sfgi-team-nick,
	.sfgi-strip-item,
	.sfgi-strip-item img,
	.sfgi-strip-item .sfgi-crest {
		transition: none !important;
		animation: none !important;
	}

	body.sfgi-fx .sfgi-team-hero.sfgi-tilt,
	body.sfgi-fx .sfgi-card--team.sfgi-tilt,
	body.sfgi-fx .sfgi-card--team .sfgi-layer,
	body.sfgi-fx .sfgi-team-hero .sfgi-layer {
		transform: none !important;
	}

	body.sfgi-fx-reveal .sfgi-team-hero.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-record-panel.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-team-leaders.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-team-leader.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-card--team.sfgi-reveal {
		opacity: 1;
		translate: none;
	}

	.sfgi-card--team.sfgi-holo::after {
		display: none;
	}

	/* fx.js does not drive the marquee under reduced motion, so the strip
	   becomes a plain horizontal scroller and the duplicate track — which
	   exists only to make the loop seamless — is dropped. */
	body.sfgi-fx .sfgi-strip-viewport {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
	}
	.sfgi-strip-track[aria-hidden="true"] {
		display: none;
	}
}