/* ---------- 2026 Softball Creative case study (Figma 206:1152 → 206:1437) ----------
   Page-specific layouts on top of css/case-study.css. Same rhythm as the
   other case studies: 96px between sections in the 1196px column. */

/* Hero — full bleed 16:9 game day graphic, 48px under the intro (same as the
   Forever 10 and Purdue heroes); phones swap to the 4:5 version */
.sb-hero { margin: 48px 0 0; }
.sb-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Source photography — two stacked photos beside two tall ones */
.sb-sources {
  display: grid;
  grid-template-columns: 385fr 449fr 343fr;
  gap: var(--space-md);
}
.sb-sources-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.cs-section .sb-sources-stack img { flex: 1 1 0; min-height: 0; height: 100%; object-fit: cover; }
.sb-sources .s3 { aspect-ratio: 449 / 556; object-fit: cover; }
.sb-sources .s4 { aspect-ratio: 343 / 556; object-fit: cover; }

/* Floral text — with / without the gradient overlay, side by side */
.sb-floral { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) 30px; align-items: center; }

/* Palette — swatch strips in a hairline frame, Display/S title + Body/M note */
.sb-palette { display: flex; flex-direction: column; gap: 48px; }
.sb-palette-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 56px;
}
.sb-swatches {
  display: flex;
  justify-self: start;
  width: max-content; /* frame hugs the swatches */
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--neutral-surface);
}
.sb-swatches li { position: relative; }
.sb-swatch { display: block; width: 114px; height: 114px; }
.sb-swatches figcaption,
.sb-hex {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: var(--neutral-hairline);
}
.sb-palette-row--labelled { padding-bottom: 34px; } /* room for the hex labels */
.sb-palette-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  color: var(--neutral-surface);
}
.sb-palette-copy { margin: 4px 0 0; font-size: 16px; line-height: 26px; color: var(--neutral-hairline); }

/* Season poster — standalone visual in the 1196 column, Body/M caption 8px below */

@media (max-width: 960px) {
  .sb-palette-row { gap: var(--space-lg); }
}

@media (max-width: 640px) {
  .sb-hero img { aspect-ratio: 4 / 5; }
  .sb-sources { grid-template-columns: 1fr 1fr; }
  .sb-sources-stack { grid-column: 1 / -1; flex-direction: row; }
  .cs-section .sb-sources-stack img { height: auto; aspect-ratio: 4 / 3; }
  .sb-floral { grid-template-columns: 1fr; }
  .sb-palette-row { grid-template-columns: 1fr; gap: var(--space-md); }
  .sb-swatch { width: 72px; height: 72px; }
  .sb-hex { font-size: 13px; line-height: 20px; }
  .sb-palette-row--labelled { padding-bottom: 0; }
  .sb-palette-row--labelled .sb-swatches { margin-bottom: 24px; }
}