/* ============================================================================
   NYU Athletics — a custom wall (no Instagram embed chrome)
   Each item is a locally-hosted cover frame that links out to the reel, so we
   control everything: no headers, no like/comment bars, no rounded corners,
   fully responsive. The pinned reel is a full-viewport hero; scroll for the
   rest. Loaded AFTER styles.css. Generated by tools/build-projects.js.
   ========================================================================== */

.athletics {
  --nyu-violet:   #7d2ae8;
  --nyu-violet-2: #b56bff;
  --nyu-ink:      #0b0614;
  background: var(--nyu-ink);
  color: var(--text);
  overflow-x: hidden;               /* nothing spills sideways */
}
.athletics-page { width: 100%; }
.athletics *, .athletics *::before, .athletics *::after { border-radius: 0 !important; }

/* shared play glyph — a bare triangle, no rounded container */
.ath-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.65));
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* ── PINNED HERO — the whole first screen ─────────────────────────── */
.ath-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 34vw);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(96px, 13vh, 150px) var(--pad) clamp(80px, 12vh, 120px);
  max-width: var(--container);
  margin: 0 auto;
  isolation: isolate;
}
/* blurred, dimmed cover as an immersive backdrop */
.ath-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ath-hero-img, none) center / cover no-repeat;
  filter: blur(42px) brightness(0.32) saturate(1.15);
  transform: scale(1.12);
}
.ath-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(125, 42, 232, 0.32), transparent 60%),
    linear-gradient(90deg, rgba(11, 6, 20, 0.92) 0%, rgba(11, 6, 20, 0.55) 55%, rgba(11, 6, 20, 0.35) 100%);
}

.ath-hero-copy { max-width: 620px; }
.ath-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nyu-violet-2);
  padding: 6px 14px;
  border: 1px solid rgba(181, 107, 255, 0.45);
  margin-bottom: 22px;
}
.ath-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  padding-right: 0.18em;          /* keep the skewed final letter off the edge */
  color: #fff;
  transform: skewX(-4deg);
  overflow-wrap: normal;          /* never split a word (keeps "Athletics" whole) */
}
.ath-sub {
  margin: 24px 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-muted);
}
.ath-back {
  display: inline-block;
  margin-top: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--nyu-violet-2);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ath-back:hover { color: #fff; transform: translateX(-3px); }

/* the crisp portrait "player" for the pinned reel */
.ath-hero-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 76vh;
  justify-self: end;
  background: var(--ath-hero-img, #1a0f2e) center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(181, 107, 255, 0.25);
  overflow: hidden;
  transition: transform 0.4s var(--ease-spring, ease);
}
.ath-hero-media:hover { transform: translateY(-4px); }
.ath-hero-media:hover .ath-play { transform: translate(-40%, -50%) scale(1.12); }
.ath-hero-media.ath-no-cover {
  background: linear-gradient(150deg, #2a0f4d, #4b188a);
}

.ath-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.ath-scroll span {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: ath-bob 1.6s ease-in-out infinite;
}
@keyframes ath-bob { 0%,100% { transform: rotate(45deg) translate(0,0);} 50% { transform: rotate(45deg) translate(3px,3px);} }
.ath-scroll:hover { color: #fff; }

/* ── THE WALL — everything after the pinned reel ──────────────────── */
.ath-wall {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--pad) clamp(72px, 12vh, 130px);
}
.ath-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
}
.ath-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #170c28;
  isolation: isolate;
}
.ath-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-spring, ease), filter 0.3s ease;
}
.ath-tile .ath-play { opacity: 0; }
.ath-tile:hover img { transform: scale(1.05); filter: brightness(0.72); }
.ath-tile:hover .ath-play { opacity: 1; transform: translate(-40%, -50%) scale(1.1); }
.ath-tile.ath-no-cover {
  background: linear-gradient(150deg, #241038, #3a1470);
}
.ath-tile.ath-no-cover .ath-play { opacity: 0.85; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ath-hero {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: clamp(28px, 6vh, 48px);
    min-height: auto;
    padding-bottom: clamp(90px, 14vh, 130px);
  }
  .ath-hero-media {
    justify-self: stretch;
    max-height: 70vh;
    max-width: 420px;
  }
}
@media (max-width: 520px) {
  .ath-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}