/* ---------- Big Ten Transition case study (Figma 171:822 → 171:1000) ----------
   Page-specific layouts on top of css/case-study.css (shared intro, captions,
   pairs/trios, Next Project, footer spacing). Every section sits 96px below
   the one before it, like Forever 10, in the same 1196px column. */

/* Shared bits for this page */
.bt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-md) 30px;
}
.bt-169 { aspect-ratio: 16 / 9; object-fit: cover; }
.bt-stack > * + * { margin-top: 40px; }
.cs-section .bt-fill { position: relative; }
.cs-section .bt-fill img,
.cs-section .bt-fill video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Collage walls — pair of 720×395 crops (top aligned), fitted to the column */
.bt-wall-pair { display: grid; grid-template-columns: 1fr 1fr; }
.bt-wall-pair img { aspect-ratio: 720 / 394.79; object-fit: cover; object-position: top; }

/* Pike Place photo mosaic — Figma's 1196×990 collage, positioned in % */
.bt-mosaic { position: relative; aspect-ratio: 1196 / 990; }
.cs-section .bt-mosaic img {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: cover;
}
.cs-section .bt-mosaic .m1  { left: 0;      top: 0;      width: 28.6%;  height: 51.01%; }
.cs-section .bt-mosaic .m2  { left: 30.6%;  top: 23.64%; width: 69.4%;  height: 27.37%; object-position: 50% 54%; }
.cs-section .bt-mosaic .m3  { left: 30.6%;  top: 0;      width: 35.2%;  height: 21.21%; }
.cs-section .bt-mosaic .m4  { left: 67.81%; top: 0;      width: 32.19%; height: 21.21%; }
.cs-section .bt-mosaic .m6  { left: 0;      top: 53.43%; width: 59.2%;  height: 46.57%; }
.cs-section .bt-mosaic .m8  { left: 61.2%;  top: 53.64%; width: 38.8%;  height: 22.73%; object-position: 50% 100%; }
.cs-section .bt-mosaic .m9  { left: 61.2%;  top: 78.79%; width: 18.39%; height: 21.21%; }
.cs-section .bt-mosaic .m10 { left: 81.61%; top: 78.79%; width: 18.39%; height: 21.21%; object-position: 100% 50%; }
.bt-mosaic + .cs-cap { margin-top: var(--space-xs); }

/* Texture kit — 2×2 sheet of toolkit pieces, captions share a baseline per row */
.bt-kit {
  display: grid;
  grid-template-columns: 460fr 707fr;
  align-items: end;
  gap: 48px 31px;
}
.bt-kit figure { display: flex; flex-direction: column; justify-content: flex-end; }

/* Launch day — banners (one caption), social trio, carousel strip */
.bt-banners img { aspect-ratio: 4 / 5; object-fit: cover; }
.bt-banners .b2 { object-position: 38.5% 50%; }
.bt-banners .b3 { object-position: 12.4% 50%; }
.bt-launch > * + * { margin-top: 35px; }
.bt-carousel img { aspect-ratio: 1440 / 144.49; object-fit: cover; }

/* 22 sports — 16 profile icons, two X headers, three texture assets */
.bt-icons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 13.8px 12.86px;
}
.bt-headers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.bt-headers img { aspect-ratio: 3 / 1; object-fit: cover; }

/* Football game themes — tall story beside a stack of three banners */
.bt-themes {
  display: grid;
  grid-template-columns: 420fr 736fr;
  gap: 36px;
}
.bt-themes-stack { display: flex; flex-direction: column; gap: 24px; }
.bt-themes-stack .w1 { aspect-ratio: 736 / 244; object-fit: cover; }
.bt-themes-stack .w2 { aspect-ratio: 735.37 / 210.1; object-fit: cover; }
.bt-themes-stack .w3 { aspect-ratio: 735.32 / 245.1; object-fit: cover; }

/* Physical — bus panel + mockup, ticket box + walkthrough video, ticket + cup */
.bt-bus { display: grid; grid-template-columns: 706fr 461fr; gap: 25px; }
.bt-bus .p1 { aspect-ratio: 706 / 240; object-fit: cover; }
.bt-bus .p2 { aspect-ratio: 461 / 240; object-fit: cover; object-position: 50% 100%; }
.bt-box { display: grid; grid-template-columns: 299fr 866fr; align-items: center; gap: 26px; }
.bt-box .dieline { aspect-ratio: 299 / 487; object-fit: cover; }
.bt-video { aspect-ratio: 866 / 487; }
.bt-keepsakes {
  display: grid;
  grid-template-columns: 337fr 337fr 426fr;
  align-items: end;
  column-gap: 31px;
}
.bt-keepsakes .cup { justify-self: end; }
.bt-physical > * + * { margin-top: var(--space-md); }

/* Results — closing line + role, same rhythm as Forever 10's takeaway */
.bt-closing {
  max-width: 954px;
  margin: var(--space-2xl) auto 0;
  padding: 72px var(--space-md);
  box-sizing: content-box;
}
.bt-closing p { margin: 0; }
.bt-closing-line { font-size: 24px; line-height: 30px; color: var(--neutral-surface); }
.bt-closing-role { margin-top: 13px !important; font-size: 16px; line-height: 26px; color: var(--neutral-hairline); }

/* Tablet */
@media (max-width: 960px) {
  .bt-grid-3 { column-gap: var(--space-md); }
  .bt-kit, .bt-themes { column-gap: var(--space-md); }
  .bt-closing-line { font-size: 20px; line-height: 28px; }
}

/* Phone: one column; mosaic and icons become simple grids */
@media (max-width: 640px) {
  .bt-grid-3, .bt-kit, .bt-themes, .bt-bus, .bt-box, .bt-headers { grid-template-columns: 1fr; gap: var(--space-md); }
  .bt-wall-pair { grid-template-columns: 1fr; }
  .bt-mosaic {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense; /* square photos pair up around the two wide ones */
    gap: var(--space-sm);
  }
  .cs-section .bt-mosaic img[class] { position: static; width: 100%; height: auto; aspect-ratio: 1; }
  .cs-section .bt-mosaic img.m2,
  .cs-section .bt-mosaic img.m6 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .bt-icons { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
  .bt-launch > * + * { margin-top: var(--space-lg); }
  .bt-stack > * + * { margin-top: var(--space-lg); }
  .bt-carousel { margin-inline: calc(-1 * var(--space-md)); }
  .bt-carousel .cs-cap { padding-inline: var(--space-md); }
  .bt-themes .bt-fill { width: 62%; margin: 0 auto; aspect-ratio: 420 / 747; }
  .bt-box .dieline { width: 62%; margin: 0 auto; }
  .bt-keepsakes { grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-sm); }
  .bt-keepsakes .cup { grid-column: 1 / -1; justify-self: center; width: 62%; }
  .bt-closing { margin-top: var(--space-xl); padding-block: 0; }
  .bt-closing-line { font-size: 18px; line-height: 26px; }
}

/* First wall pair runs edge to edge (1440 at the design width) */
.cs-section.bt-walls--bleed { max-width: none; margin-top: 48px; padding-inline: 0; } /* hero: 48px under the intro like F10 / Purdue */