/* ==========================================================================
   NFL web prototype components — built on nfl-tokens.css (load that first).
   Every pattern traces back to the playbook; see references/*.md for the why.
   Class prefix: .nfl-
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nfl-sideline-white);
  color: var(--nfl-gridiron-black);
  font: 400 var(--nfl-size-body)/var(--nfl-leading-sans) var(--nfl-font-sans);
  letter-spacing: var(--nfl-tracking-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
p { margin: 0 0 1em; max-width: var(--nfl-measure); text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

/* Display width follows canvas width: C wide, B medium, A narrow (p23). */
:root { --nfl-font-display: var(--nfl-font-display-c); }
@media (max-width: 1023px) { :root { --nfl-font-display: var(--nfl-font-display-b); } }
@media (max-width: 639px)  { :root { --nfl-font-display: var(--nfl-font-display-a); } }
.nfl-display-a { font-family: var(--nfl-font-display-a) !important; }
.nfl-display-b { font-family: var(--nfl-font-display-b) !important; }
.nfl-display-c { font-family: var(--nfl-font-display-c) !important; }

/* ---------- Type roles (p38) ---------- */
.nfl-hero {            /* All caps headline · Display Bold · < 10 words */
  font: 700 var(--nfl-size-hero)/var(--nfl-leading-display-caps) var(--nfl-font-display);
  text-transform: uppercase;
  letter-spacing: var(--nfl-tracking-display-tight);
}
.nfl-h1 {              /* Sentence case headline · Display Bold · < 24 words */
  font: 700 var(--nfl-size-h1)/var(--nfl-leading-display-sentence) var(--nfl-font-display);
}
.nfl-sub {             /* Subhead · Display Medium caps · never heavier than the header */
  font: 500 var(--nfl-size-h2)/1.05 var(--nfl-font-display);
  text-transform: uppercase;
}
.nfl-h3 { font: 700 var(--nfl-size-h3)/1.05 var(--nfl-font-display); }
.nfl-body { font: 400 var(--nfl-size-body)/var(--nfl-leading-sans) var(--nfl-font-sans); }
.nfl-body-large {      /* Sans > 24px: 110% leading, -1% tracking (p34/35) */
  font: 400 clamp(1.5rem, 2vw, 2rem)/var(--nfl-leading-sans-large) var(--nfl-font-sans);
  letter-spacing: var(--nfl-tracking-sans-large);
}
.nfl-label {           /* Informative copy · Sans Medium caps */
  font: 500 var(--nfl-size-small)/1.2 var(--nfl-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nfl-caption { font: 400 var(--nfl-size-caption)/1.2 var(--nfl-font-sans); }

/* Expressions (p40–43) */
.nfl-amplify { font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .86; letter-spacing: -0.01em; }
.nfl-dynamic {         /* headline bleeds off the canvas: wrap in .nfl-bleed */
  font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .82;
  white-space: nowrap; font-size: clamp(5rem, 22vw, 22rem); letter-spacing: -0.015em;
}
.nfl-bleed { overflow: hidden; position: relative; }

/* ---------- Buttons & links (p38) ---------- */
.nfl-btn {
  --btn-fg: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .55em 1.5em .5em;
  border: 2px solid var(--btn-fg); border-radius: var(--nfl-radius-pill);
  background: transparent; color: var(--btn-fg);
  font: 700 var(--nfl-size-cta)/1 var(--nfl-font-display); text-transform: uppercase;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background var(--nfl-dur-fast) var(--nfl-ease-shift), color var(--nfl-dur-fast) var(--nfl-ease-shift), border-color var(--nfl-dur-fast);
}
.nfl-btn:hover { background: var(--nfl-gridiron-black); border-color: var(--nfl-gridiron-black); color: var(--nfl-sideline-white); }
.nfl-on-dark .nfl-btn:hover, .nfl-btn.nfl-on-dark:hover { background: var(--nfl-sideline-white); border-color: var(--nfl-sideline-white); color: var(--nfl-gridiron-black); }
.nfl-btn--red  { background: var(--nfl-shield-red);  border-color: var(--nfl-shield-red);  color: var(--nfl-sideline-white); }
.nfl-btn--red:hover  { background: var(--nfl-unity-red); border-color: var(--nfl-unity-red); color: var(--nfl-sideline-white); }
.nfl-btn--blue { background: var(--nfl-impact-blue); border-color: var(--nfl-impact-blue); color: var(--nfl-sideline-white); }
.nfl-btn--blue:hover { background: var(--nfl-shield-blue); border-color: var(--nfl-shield-blue); color: var(--nfl-sideline-white); }
.nfl-btn--black { background: var(--nfl-gridiron-black); border-color: var(--nfl-gridiron-black); color: var(--nfl-sideline-white); }
.nfl-btn--black:hover { background: var(--nfl-legacy-blue); border-color: var(--nfl-legacy-blue); }
.nfl-btn--small { min-height: 36px; font-size: .875rem; padding: .45em 1.1em .4em; }
.nfl-btn:focus-visible, .nfl-link:focus-visible { outline: 3px solid var(--nfl-impact-blue); outline-offset: 3px; }

.nfl-link {
  font: 700 var(--nfl-size-link)/1.2 var(--nfl-font-display); text-transform: uppercase;
  letter-spacing: .02em; color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.nfl-link:hover { color: var(--nfl-impact-blue); }

/* ---------- Shield (p14–16) ---------- */
.nfl-shield { display: inline-block; height: var(--shield-h, 64px); width: auto; flex: none; }
.nfl-shield img { height: 100%; width: auto; }
.nfl-shield--clear { padding: calc(var(--shield-h, 64px) * .5); }        /* large-scale clear space */
.nfl-shield--clear-small { padding: var(--shield-h, 64px); }             /* small-scale clear space */
/* never: filter, shadow, transform on the Shield */
.nfl-shield, .nfl-shield img { filter: none !important; box-shadow: none !important; transform: none !important; }

/* ---------- Layout ---------- */
.nfl-container { width: 100%; padding-inline: var(--nfl-margin); margin-inline: auto; max-width: 1680px; }
.nfl-grid {
  display: grid; gap: var(--nfl-gutter);
  grid-template-columns: repeat(var(--nfl-columns), minmax(0, 1fr));
}
:root { --nfl-columns: 8; }
@media (max-width: 1279px) { :root { --nfl-columns: 6; } }
@media (max-width: 1023px) { :root { --nfl-columns: 4; } }
@media (max-width: 639px)  { :root { --nfl-columns: 2; } }

.nfl-split-half, .nfl-split-third { display: grid; position: relative; }
.nfl-split-half  { grid-template-columns: 1fr 1fr; }
.nfl-split-third { grid-template-columns: 2fr 1fr; }          /* 66/33 */
.nfl-split-third.is-reversed { grid-template-columns: 1fr 2fr; }
.nfl-split-half > *, .nfl-split-third > * { min-width: 0; }
@media (max-width: 767px) {
  .nfl-split-half, .nfl-split-third, .nfl-split-third.is-reversed { grid-template-columns: 1fr; }
}
/* Shield on the seam of a split (p75–78, p68). Put <span class="nfl-seam-shield"><img …></span> inside the split. */
.nfl-seam-shield {
  position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%;
  height: var(--shield-h, 72px);
}
.nfl-split-third > .nfl-seam-shield { left: 66.666%; }
.nfl-split-third.is-reversed > .nfl-seam-shield { left: 33.333%; }
.nfl-seam-shield img { height: 100%; width: auto; }
@media (max-width: 767px) {            /* stacked: Shield sits on the horizontal seam between panels */
  .nfl-split-half > :first-child, .nfl-split-third > :first-child { order: 0; }
  .nfl-split-half > *, .nfl-split-third > * { order: 2; }
  .nfl-split-half > .nfl-seam-shield, .nfl-split-third > .nfl-seam-shield,
  .nfl-split-third.is-reversed > .nfl-seam-shield {
    order: 1; position: relative; top: auto; left: auto; translate: none; justify-self: center;
    margin-block: calc(var(--shield-h, 72px) * -.5);
  }
}

.nfl-section { padding-block: clamp(48px, 8vw, 128px); }
.nfl-on-dark { color: var(--nfl-sideline-white); }

/* ---------- Backgrounds ---------- */
.nfl-bg-black  { background: var(--nfl-gridiron-black); color: var(--nfl-sideline-white); }
.nfl-bg-white  { background: var(--nfl-sideline-white); color: var(--nfl-gridiron-black); }
.nfl-bg-panel  { background: var(--nfl-panel); }
.nfl-bg-legacy-blue { background: var(--nfl-legacy-blue); color: var(--nfl-sideline-white); }
.nfl-bg-shield-blue { background: var(--nfl-shield-blue); color: var(--nfl-sideline-white); }
.nfl-bg-impact-blue { background: var(--nfl-impact-blue); color: var(--nfl-sideline-white); }
.nfl-bg-legacy-red  { background: var(--nfl-legacy-red);  color: var(--nfl-sideline-white); }
.nfl-bg-unity-red   { background: var(--nfl-unity-red);   color: var(--nfl-sideline-white); }
.nfl-bg-shield-red  { background: var(--nfl-shield-red);  color: var(--nfl-sideline-white); }
.nfl-depth-blue  { background: var(--nfl-depth-blue);  color: var(--nfl-sideline-white); }
.nfl-depth-red   { background: var(--nfl-depth-red);   color: var(--nfl-sideline-white); }
.nfl-depth-black { background: var(--nfl-depth-black); }
.nfl-depth-green { background: var(--nfl-depth-green); color: var(--nfl-sideline-white); }
.nfl-depth-yellow{ background: var(--nfl-depth-yellow); }
.nfl-depth-orange{ background: var(--nfl-depth-orange); color: var(--nfl-sideline-white); }
.nfl-depth-blue-deep { background: var(--nfl-depth-blue-deep); color: var(--nfl-sideline-white); }
.nfl-depth-red-deep  { background: var(--nfl-depth-red-deep);  color: var(--nfl-sideline-white); }

/* Club theming: set --club-base / --club-shape / --club-dark / --club-mid / --club-bright
   from assets/clubs.json, e.g. style="--club-base:#4F2683;--club-shape:#281342;…" */
.nfl-club-tonal    { background: var(--club-base); color: var(--nfl-sideline-white); }
.nfl-club-gradient { background: linear-gradient(180deg, var(--club-dark), var(--club-mid, var(--club-dark)) 50%, var(--club-bright)); color: var(--nfl-sideline-white); }
.nfl-backdrop { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ---------- Typography wall backdrop (p81–83) ---------- */
.nfl-typewall { position: relative; overflow: hidden; isolation: isolate; }
.nfl-typewall__word {
  position: absolute; inset: 0 auto 0 0; z-index: -1;
  font: 900 italic calc(var(--wall-h, 100cqh) * 1.12)/0.8 var(--nfl-font-display);
  text-transform: uppercase; white-space: nowrap; letter-spacing: -0.02em;
  display: flex; align-items: center;
  background: var(--wall-fill, linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none;
}
.nfl-typewall { container-type: size; }

/* ---------- Cards ---------- */
.nfl-card {                     /* partnership content card (p143) */
  background: var(--nfl-sideline-white); color: var(--nfl-gridiron-black);
  border-radius: var(--nfl-radius-m); overflow: hidden; display: flex; flex-direction: column;
}
.nfl-card__media { aspect-ratio: 16 / 11; position: relative; }
.nfl-card__body { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 12px; }
.nfl-card__title { font: 700 var(--nfl-size-h3)/1.05 var(--nfl-font-display); }
.nfl-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }

.nfl-game-card {                /* schedule row (p138) */
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  background: var(--nfl-impact-blue); color: var(--nfl-sideline-white);
  border-radius: var(--nfl-radius-s); padding: 14px 18px; min-height: 96px;
}
.nfl-game-card__teams { font: 700 clamp(1.25rem, 2vw, 1.75rem)/.95 var(--nfl-font-display); text-transform: uppercase; }
.nfl-game-card__meta { font: 500 .8125rem/1.2 var(--nfl-font-sans); margin-top: 6px; }
.nfl-game-card__side { text-align: right; font: 700 1.25rem/1 var(--nfl-font-display); text-transform: uppercase; }
.nfl-tag {                      /* black "ON SALE" label (p138) */
  display: inline-block; background: var(--nfl-gridiron-black); color: var(--nfl-sideline-white);
  font: 700 .9375rem/1 var(--nfl-font-display); text-transform: uppercase; letter-spacing: .02em;
  padding: .35em .5em .3em; margin-bottom: 6px;
}

/* ---------- Header (p137 / p142) ---------- */
.nfl-header {
  position: sticky; top: 0; z-index: 50; background: var(--nfl-sideline-white);
  border-bottom: 1px solid var(--nfl-black-10);
}
.nfl-header__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 72px; }
.nfl-header .nfl-shield { --shield-h: 48px; }          /* ≥ 45px digital minimum */
.nfl-nav { display: flex; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; }
.nfl-nav a {
  font: 700 .9375rem/1 var(--nfl-font-display); text-transform: uppercase; letter-spacing: .02em;
  color: inherit; text-decoration: none; padding-block: 8px; border-bottom: 2px solid transparent;
}
.nfl-nav a:hover, .nfl-nav a[aria-current="page"] { border-bottom-color: var(--nfl-shield-red); }
.nfl-promo-bar { background: var(--nfl-impact-blue); color: var(--nfl-sideline-white); text-align: center; padding: 8px var(--nfl-margin); font: 700 .8125rem/1.2 var(--nfl-font-display); text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Diptych (p68) ---------- */
.nfl-diptych { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.nfl-diptych > img, .nfl-diptych > .nfl-photo { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.nfl-diptych > .nfl-seam-shield { left: 50%; }

/* ---------- Photos ----------
   Real images: img.nfl-img with src = a file in nfl/photos/ and object-position = its focus from photos.json.
   Placeholder (when no suitable photo exists): div.nfl-photo with a data-shot description. */
.nfl-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nfl-img.is-bw { filter: grayscale(1) contrast(1.15); }   /* B&W treatment for prototypes */
.nfl-scrim { position: relative; isolation: isolate; }
.nfl-scrim::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }  /* Gridiron Black tint for legible type on photos */

/* ---------- Photo placeholder ---------- */
.nfl-photo {
  position: relative; background: var(--nfl-depth-blue); min-height: 240px;
  display: flex; align-items: flex-start; padding: 16px; overflow: hidden;   /* label top-left, clear of overlaid copy */
}
.nfl-photo::after {
  content: attr(data-shot);
  font: 500 .75rem/1.25 var(--nfl-font-sans); text-transform: uppercase; letter-spacing: .06em;
  color: var(--nfl-white-70); max-width: 32ch;
}
.nfl-photo.is-bw { background: linear-gradient(180deg, #111 0%, #555 100%); }

/* ---------- Motion (p89) ---------- */
@keyframes nfl-shift-in   { from { transform: translateX(var(--shift-from, -12%)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nfl-unify-left { from { transform: translateX(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nfl-unify-right{ from { transform: translateX(60%);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nfl-snap-scale { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nfl-orbit      { to { transform: rotate(1turn); } }
@keyframes nfl-marquee    { to { transform: translateX(-50%); } }
.nfl-anim-shift   { animation: nfl-shift-in var(--nfl-dur-base) var(--nfl-ease-shift) both; }
.nfl-anim-unify-l { animation: nfl-unify-left var(--nfl-dur-slow) var(--nfl-ease-unifier) both; }
.nfl-anim-unify-r { animation: nfl-unify-right var(--nfl-dur-slow) var(--nfl-ease-unifier) both; }
.nfl-anim-snap    { animation: nfl-snap-scale var(--nfl-dur-base) var(--nfl-ease-unifier) both; }
.nfl-anim-orbit   { animation: nfl-orbit 1.2s var(--nfl-ease-ball) infinite; }
.nfl-marquee { overflow: hidden; white-space: nowrap; }
.nfl-marquee__track { display: inline-flex; animation: nfl-marquee 18s linear infinite; }
.nfl-marquee.is-reverse .nfl-marquee__track { animation-direction: reverse; }
/* Measured rhythm of the delivered motion files: stepped jumps, then long holds; staccato exits. */
@keyframes nfl-step-x { from { transform: translateX(var(--from, -24%)); } to { transform: none; } }
.nfl-steps-in { animation: nfl-step-x 600ms steps(3, jump-end) both; }       /* 3 jumps ≈ the Shift titles */
@keyframes nfl-cut-out { to { opacity: 0; } }
.nfl-staccato-out > * { animation: nfl-cut-out 1ms linear forwards; }       /* add the class to start the exit */
.nfl-staccato-out > :nth-child(2) { animation-delay: 50ms; }
.nfl-staccato-out > :nth-child(3) { animation-delay: 100ms; }
.nfl-staccato-out > :nth-child(4) { animation-delay: 150ms; }
.nfl-staccato-out > :nth-child(5) { animation-delay: 200ms; }
.nfl-staccato-out > :nth-child(6) { animation-delay: 250ms; }

/* ---------- Video background (delivered motion loops, motion/backgrounds/*.mp4) ---------- */
.nfl-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.nfl-video-bg + * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .nfl-video-bg { display: none; } }

/* ---------- Typo backdrop / type wall (assets/typo/*.svg, p81–83) ----------
   The SVG height = cap height → descender, so height:100% fills the frame like a wall
   and the word bleeds off the right edge. {ABBR}.svg carries its own gradient band;
   {ABBR}-type.svg is letters only (put it on the club gradient or a photo). */
.nfl-typo-wall { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; z-index: 0; pointer-events: none; }
.nfl-typo-wall > img { height: 100%; width: auto; max-width: none; flex: none; }
.nfl-typo-wall.is-centered { justify-content: center; }
.nfl-typo-band { display: block; width: 100%; height: auto; }   /* the full name as a horizontal band */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}