/* Page layouts: hero, Blitz pages, F15 home, teams, team, stats, sponsors, articles. */

/* ---------- Hero (both brands, after the owner's Canva) ---------- */
.hero {
  min-height: calc(100svh - var(--top-h));
  display: grid; grid-template-rows: 1fr auto; align-items: center;
  padding-block: var(--s-6) var(--s-7);
}
.hero__stage {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6);
  padding-top: var(--s-5);
}
.upnext-wrap { display: flex; flex-direction: column; align-items: center; justify-self: end; }

.ball-slot { position: relative; aspect-ratio: 1; }
.ball-slot--hero { width: clamp(220px, 31vw, 460px); margin-left: clamp(0px, 3vw, 56px); }
.ball-static {
  all: unset; cursor: pointer; display: block; width: 100%; height: 100%; border-radius: 50%;
  position: relative; -webkit-tap-highlight-color: transparent;
  animation: ball-float 6s ease-in-out infinite;
}
.ball-static img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); transition: transform 700ms var(--ease-back); user-select: none; -webkit-user-drag: none; }
.ball-static:hover img { transform: rotate(-8deg) scale(1.03); }
.ball-static:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.ball-slot::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -9%; height: 9%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
  filter: blur(6px); z-index: -1; animation: ball-shadow 6s ease-in-out infinite;
}
@keyframes ball-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ball-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }

.hero-line {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--accent); margin-top: calc(var(--fs-hero) * -0.35);
  position: relative; z-index: 2; pointer-events: none;
  text-shadow: 0 0 60px rgba(var(--accent-rgb), .18);
}
.hero-line__a { font-size: calc(var(--fs-hero) * .62); line-height: 1; }
.hero-line__b { font-size: var(--fs-hero); line-height: 1; letter-spacing: .03em; }

@media (max-width: 760px) {
  .hero { min-height: auto; padding-block: var(--s-6) var(--s-5); grid-template-rows: auto; gap: var(--s-6); }
  .hero__stage { grid-template-columns: 1fr; justify-items: center; gap: var(--s-7); padding-top: 0; }
  .ball-slot--hero { width: min(62vw, 260px); margin: 0; }
  .upnext-wrap { justify-self: center; order: 3; }
  .hero-line { margin-top: 0; order: 2; }
  .hero { display: flex; flex-direction: column; }
  .hero__stage { display: contents; }
  .hero-line__a { font-size: clamp(36px, 12vw, 56px); }
  .hero-line__b { font-size: clamp(48px, 15.5vw, 80px); }
}

/* ---------- Blitz home doors ---------- */
.door {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-3); min-height: 300px; overflow: hidden;
  padding: var(--card-pad); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.door:hover { border-color: rgba(var(--accent-rgb), .45); background: var(--card-hi); transform: translateY(-3px); }
.door:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door__art { height: 84px; width: auto; max-width: 70%; object-fit: contain; object-position: left; margin-bottom: auto; transition: transform 600ms var(--ease-back); }
.door:hover .door__art { transform: translateY(-4px) scale(1.04); }
.door__art--b { height: 96px; }
.door .card__title { margin-top: var(--s-4); }

/* ---------- Faces of Blitz ---------- */
.view--faces { overflow: hidden; padding-bottom: 0; }
.faces { position: relative; min-height: calc(100svh - var(--top-h)); display: flex; align-items: flex-end; padding-bottom: var(--s-8); }
.faces__stage { position: absolute; inset: 0; pointer-events: none; }
.faces__layer { position: absolute; will-change: transform; }
.faces__glow { inset: 10% 5% 0 30%; background: radial-gradient(closest-side, rgba(255, 170, 60, .28), transparent 70%); filter: blur(10px); }
.faces__b { right: 14%; top: 4%; height: 78%; width: auto; opacity: .96; }
.faces__player { right: 19%; bottom: -30%; height: 112%; width: auto; filter: drop-shadow(0 20px 60px rgba(0,0,0,.6)); }
.faces__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.faces__copy h1 { text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.faces__soon { align-self: flex-end; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: .02em; color: var(--text); margin-top: var(--s-1); }
@media (max-width: 760px) {
  .faces { min-height: 78svh; }
  .faces__b { right: -6%; height: 58%; top: 8%; }
  .faces__player { right: 8%; height: 92%; bottom: -22%; }
}

/* ---------- Media Production ---------- */
.media-hero {
  min-height: min(72svh, 720px); display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: var(--s-6);
  padding-top: var(--s-8);
}
.media-hero__copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.media-hero__with { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; margin-top: var(--s-2); }
.media-hero__logo { width: 100%; max-width: 520px; justify-self: end; filter: drop-shadow(0 20px 50px rgba(0,0,0,.5)); }
.media-body { align-items: center; }
.spec-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.spec-list div { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.spec-list dt { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.spec-list dd { margin: 0; color: var(--text-2); }
.media-body .btn { align-self: flex-start; }
@media (max-width: 760px) {
  .media-hero { grid-template-columns: 1fr; min-height: auto; padding-top: var(--s-7); }
  .media-hero__copy { align-items: flex-start; text-align: left; }
  .media-hero__logo { justify-self: start; max-width: 320px; }
  .spec-list div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------- Catalogue ---------- */
.cat-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.cat-count { color: var(--text-2); font-size: 18px; }
.cat-stage { position: relative; height: clamp(380px, 66vh, 760px); perspective: 1800px; user-select: none; touch-action: pan-y; }
.cat-pages { position: absolute; inset: 0; transform-style: preserve-3d; }
.cat-page {
  position: absolute; left: 50%; top: 50%; height: 100%; width: auto; max-width: min(78%, 620px); object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translate(-50%, -50%) translateX(calc(var(--off, 0) * 62%)) rotateY(calc(var(--off, 0) * -24deg)) scale(calc(1 - var(--abs, 0) * .16));
  transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out), filter 500ms;
  filter: brightness(calc(1 - var(--abs, 0) * .35));
  cursor: pointer;
}
.cat-page.is-current { cursor: default; }
.cat-nav {
  position: absolute; top: 50%; z-index: 200; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(10,9,12,.7); backdrop-filter: var(--blur); color: var(--text); font-size: 20px;
  transition: border-color var(--t-fast), opacity var(--t-fast);
}
.cat-nav:hover { border-color: var(--accent); }
.cat-nav:disabled { opacity: .25; pointer-events: none; }
.cat-nav--prev { left: 0; }
.cat-nav--next { right: 0; }
@media (max-width: 760px) { .cat-stage { height: 62vh; } .cat-nav { width: 48px; height: 48px; } .cat-page { max-width: 82%; } }

/* ---------- About ---------- */
.about-champs { display: flex; flex-direction: column; gap: var(--s-3); background: linear-gradient(120deg, rgba(var(--accent-rgb), .12), transparent 60%), var(--card); }
.about-groups__h { margin-bottom: var(--s-4); }
.about-table th, .about-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; font-size: 15px; line-height: var(--lh-ui); }
.about-table th { font-weight: 500; color: var(--text-3); width: 34%; }
.about-table td:nth-child(2) { font-weight: 600; }
.about-table td:last-child { display: none; }
.about-join { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); }

/* ---------- F15 home ---------- */
.live-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-5) var(--card-pad);
}
.live-strip__team { display: inline-flex; align-items: center; gap: var(--s-3); }
.live-strip__name { font-weight: 700; font-size: 18px; }
.live-strip__score { font-size: 40px; line-height: 1; color: var(--text); }
.live-strip__team--b { font-size: 15px; }
.live-strip__sit { font-size: 15px; }
.live-strip__sit b { color: var(--text); font-size: 20px; }
.live-strip .link-arrow { margin-left: auto; }
a.live-strip:hover .link-arrow { color: var(--accent); }
.live-strip--idle .link-arrow { margin-left: auto; }


.partner-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap); }
.partner-rail__item {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); min-height: 150px;
  padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--t);
}
.partner-rail__item img { height: 52px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.partner-rail__item:hover { border-color: rgba(var(--accent-rgb), .45); }
.partner-rail__item--slot { border-style: dashed; border-color: var(--line-2); background: transparent; }
.partner-rail__item--slot .eyebrow { color: var(--text-2); }
.partner-rail__plus { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--accent); }

/* ---------- Teams ---------- */
.teams-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.teams-grid .crest { max-width: 100%; height: auto !important; aspect-ratio: 1; }

/* ---------- Team page ---------- */
.team-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-7);
  min-height: calc(100svh - var(--top-h) - 40px); padding-top: var(--s-6);
}
.team-hero__art { position: relative; display: grid; place-items: center; min-height: 440px; }
.team-hero__spot {
  position: absolute; inset: -10%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--team) 34%, transparent), transparent 75%);
  filter: blur(20px);
}
.team-hero__crest { width: min(100%, 380px) !important; height: auto !important; aspect-ratio: 1; }
.team-hero__owner { position: absolute; right: -4%; bottom: -6%; height: 70%; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.team-hero__info { display: flex; flex-direction: column; gap: var(--s-5); }
.team-hero__info h1 { color: var(--text); }
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: "←"; transition: transform var(--t); }
.link-arrow--back:hover::before { transform: translateX(-4px); }
.team-facts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.team-facts div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); align-items: baseline; }
.team-facts dt { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.team-facts dd { margin: 0; font-size: 19px; font-weight: 600; }
.team-facts dd a:hover { color: var(--team); }
.team-sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.team-sponsor .eyebrow { color: var(--text-2); }
.team-sponsor img { height: 44px; width: auto; }
.team-sponsor__slot { color: var(--text-3); border: 1px dashed var(--line-2); border-radius: var(--r-pill); padding: 10px 18px; font-size: var(--fs-sm); transition: color var(--t-fast), border-color var(--t-fast); }
.team-sponsor__slot:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 900px) {
  .team-hero { grid-template-columns: 1fr; min-height: auto; gap: var(--s-6); }
  .team-hero__art { min-height: 320px; }
  .team-hero__crest { width: min(70vw, 300px) !important; }
}

.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); }
.squad-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-md); }
.squad-card__role { color: var(--text-3); font-size: 11px; }
.squad-card__name { font-size: 18px; font-weight: 700; line-height: 1.3; }
.squad-card__stats { font-size: var(--fs-sm); }
.squad-card__stats b { color: var(--text-2); font-size: 16px; }

/* ---------- Stats ---------- */
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.leader-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--card-pad); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--t), background var(--t), transform var(--t); }
.leader-card:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-3px); }
.leader-card.is-active { border-color: var(--accent); background: linear-gradient(140deg, rgba(var(--accent-rgb), .12), transparent 60%), var(--card); }
.leader-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 960px) { .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .leaders { grid-template-columns: 1fr; } }

.dir-filters { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.field {
  height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--text); font-size: 15px; min-width: 0;
}
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select.field { padding-right: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
select.field option { background: #111; }
@media (max-width: 760px) { .section-head { flex-direction: column; align-items: flex-start; } .dir-filters { width: 100%; } .dir-filters .field { flex: 1; } }

/* ---------- Sponsors ---------- */
.reach { font-size: clamp(18px, 1.6vw, 22px); color: var(--text-2); letter-spacing: .04em; }
.partner--featured { min-height: 280px; background: linear-gradient(150deg, rgba(var(--accent-rgb), .08), transparent 55%), var(--card); }
.partner--featured .partner__logo { height: 84px; }
.partner__slot-title { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: var(--track-display); }

/* ---------- Articles ---------- */
.articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
.article { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.article--lead { grid-column: 1 / -1; }
.article__title { font-size: var(--fs-h3); line-height: 1.25; }
.article--lead .article__title { font-family: var(--font-display); font-size: var(--fs-h2); text-transform: uppercase; }
@media (max-width: 760px) { .articles { grid-template-columns: 1fr; } }

/* ---------- Team reveal (crest from particles, owner into the spotlight) ---------- */
.team-hero__crest img { transition: opacity 450ms var(--ease-out), transform 700ms var(--ease-out); }
.team-hero__owner { transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out); }
.view--team.is-revealing .team-hero__crest img { opacity: 0; transform: scale(.96); }
.view--team.is-revealing.is-crest-in .team-hero__crest img { opacity: 1; transform: none; }
.view--team.is-revealing .team-hero__owner { opacity: 0; transform: translateY(70px); }
.view--team.is-revealing .team-hero__spot { opacity: .25; }
.team-hero__spot { transition: opacity 900ms var(--ease-out); }

.team-hero__beam {
  position: absolute; z-index: 0; pointer-events: none; top: -30%; left: 50%; width: 120%; height: 150%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, color-mix(in srgb, var(--team) 34%, transparent) 180deg, transparent 198deg);
  filter: blur(14px); opacity: 0; transition: opacity 1100ms var(--ease-out) 150ms;
  mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
}
.team-hero__beam--owner { left: 78%; width: 90%; }
.view--team.is-revealed .team-hero__beam { opacity: 1; }
.team-hero__crest, .team-hero__owner { position: relative; z-index: 1; }
.team-hero__owner { position: absolute; }

/* ---------- Merch ---------- */
.merch-tile { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: border-color var(--t), transform var(--t); }
.merch-tile:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-3px); }
.merch-tile__art {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(var(--accent-rgb), .16), transparent 65%), repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 14px);
  border-bottom: 1px solid var(--line);
}
.merch-tile__art img { width: 34%; opacity: .5; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); transition: opacity var(--t), transform 600ms var(--ease-back); }
.merch-tile:hover .merch-tile__art img { opacity: .8; transform: scale(1.06) rotate(-4deg); }
.merch-tile__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--card-pad); }

/* ---------- CSC F15 hub ---------- */
.hub-section { padding-top: var(--s-8); }
.hub-section--first { padding-top: var(--s-7); }
.view--hub { padding-bottom: var(--section); }
.hub-live .live-strip { padding: var(--s-6) var(--card-pad); background: linear-gradient(100deg, color-mix(in srgb, var(--team) 14%, transparent), transparent 45%), var(--glass); }
.hub-live .live-strip__score { font-size: clamp(44px, 5vw, 64px); }


/* Podium: 2nd, 1st, 3rd on rising pillars */
.podium-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--s-4); min-height: 440px; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.podium-col__team { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.podium-col__name { font-family: var(--font-display); font-size: clamp(13px, 1.3vw, 17px); text-transform: uppercase; letter-spacing: var(--track-display); line-height: 1.2; }
.podium-col__team:hover .podium-col__name { color: var(--team); }
.podium-col__pillar {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  padding-top: var(--s-5); border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--team) 30%, transparent), rgba(255,255,255,.02) 85%);
  border: 1px solid color-mix(in srgb, var(--team) 40%, transparent); border-bottom: 0;
}
.podium-col--1 .podium-col__pillar { height: 220px; }
.podium-col--2 .podium-col__pillar { height: 160px; }
.podium-col--3 .podium-col__pillar { height: 120px; }
.podium-col__place { font-size: clamp(44px, 5vw, 64px); line-height: 1; font-weight: 700; color: rgba(255,255,255,.9); }
.podium-col--1 .podium-col__place { color: var(--accent); text-shadow: 0 0 30px rgba(var(--accent-rgb), .5); }
.podium-col__pts { color: var(--text-2); font-size: 14px; }
.podium-col__pts b { color: var(--text); font-size: 22px; }
.podium-col__meta { color: var(--text-3); font-size: 13px; }
@media (max-width: 600px) {
  .podium-stage { gap: var(--s-2); min-height: 360px; }
  .podium-col .crest { width: 60px !important; height: 60px !important; }
  .podium-col--1 .crest { width: 76px !important; height: 76px !important; }
  .podium-col__meta { display: none; }
}

/* Team strip */
.hub-teams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.hub-team {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-3);
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card);
  font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--text-2);
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.hub-team .crest { max-width: 100%; height: auto !important; aspect-ratio: 1; transition: transform 500ms var(--ease-back); }
.hub-team:hover { border-color: color-mix(in srgb, var(--team) 60%, transparent); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--team) 22%, transparent), transparent 70%), var(--card); color: var(--text); transform: translateY(-4px); }
.hub-team:hover .crest { transform: scale(1.08) rotate(-3deg); }
@media (max-width: 760px) { .hub-teams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }