/* ---------- Purdue Athletics case study (Figma 223:801) ----------
   Page-specific layouts on top of css/case-study.css. Same rhythm as Forever
   10 and Big Ten: 96px between sections in the 1196px column; the Our State
   hero runs full bleed 48px under the intro like the Forever 10 hero. */

/* Hero animation (Our State) — full bleed 16:9, Body/M caption 8px below */
.pu-hero { margin-top: 48px; }
.pu-hero .cs-motion { aspect-ratio: 16 / 9; }
.pu-hero .cs-cap { padding: 0 var(--page-margin); }

/* Animation beside a Body/M note (Team USA), like the F10 banner row */
.pu-split {
  display: grid;
  grid-template-columns: 708fr 440fr;
  align-items: center;
  gap: 48px;
}
.pu-split .cs-cap { margin: 0; }
.pu-split .cs-motion { aspect-ratio: 708 / 885; }

/* Chloe Chicoine — five photos, then the graphic with its note */
.pu-photos { display: grid; gap: var(--space-md); }
.pu-photos-row { display: grid; gap: var(--space-md); }
.pu-photos-row--top { grid-template-columns: 446fr 720fr; }
.pu-photos-row--bottom { grid-template-columns: 440fr 391fr 303fr; }
.pu-photos .c1 { aspect-ratio: 1; object-fit: cover; }
.pu-photos .c3 { aspect-ratio: 720 / 446; object-fit: cover; }
.pu-photos .c2 { aspect-ratio: 440 / 276; object-fit: cover; }
.pu-photos .c4 { aspect-ratio: 391 / 276; object-fit: cover; }
.pu-photos .c5 { aspect-ratio: 303 / 276; object-fit: cover; }
.pu-feature {
  display: grid;
  grid-template-columns: 772fr 360fr;
  align-items: center;
  gap: 64px;
  margin-top: var(--space-md);
}
.pu-feature .cs-cap { margin: 0; }

/* Abbey Ellis — two photos stacked beside the graphic */
.pu-abbey {
  display: grid;
  grid-template-columns: 485fr 671fr;
  gap: 32px;
}
.pu-abbey-stack { display: flex; flex-direction: column; gap: 32px; }
.pu-abbey .a1 { aspect-ratio: 484.7 / 483.2; object-fit: cover; }
.pu-abbey .a2 { aspect-ratio: 484.4 / 323; object-fit: cover; }

/* Square and 16:9 animations */
.pu-square { aspect-ratio: 1; }
.pu-wide { aspect-ratio: 16 / 9; }
.pu-motion-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
/* The square game-day animation is capped so it fits a laptop screen */
.pu-solo { max-width: 708px; margin-inline: auto; }

/* Caption link (Layups & Lattes "click here") */
.cs-cap a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
.cs-cap a:hover, .cs-cap a:focus-visible { color: var(--signal-orange); }

@media (max-width: 960px) {
  .pu-hero .cs-cap { padding-inline: var(--space-md); }
  .pu-split, .pu-feature { gap: var(--space-lg); }
}

@media (max-width: 640px) {
  .pu-hero .cs-motion { aspect-ratio: 16 / 9; }
  .pu-split, .pu-feature, .pu-abbey { grid-template-columns: 1fr; gap: var(--space-md); }
  .pu-split .cs-motion { width: 82%; margin: 0 auto; }
  .pu-photos-row--top { grid-template-columns: 1fr; }
  .pu-photos-row--bottom { grid-template-columns: 1fr 1fr; }
  .pu-photos .c5 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .pu-abbey-stack { gap: var(--space-md); }
  .pu-motion-pair { grid-template-columns: 1fr; }
}

/* Intro: no Display/S lede here, so the body sits 16px under the divider */
.cs-body.pu-intro-body { margin-top: var(--space-sm); }