/* Wholly Balls case study.
   Mac Daddy blue carries the accent; the six flavor colors are sampled off the
   pouch pixels in the lineup render, same values the Daymade case uses. */

.case-study.wholly {
  --case-accent: #0a83b4;
  --wb-gold: #f3c45b;
  --wb-navy: #14465f;
}

.theme-carnival .wholly [class*="case-"] {
  --case-paper: #faf1e2;
  --case-ink: #14465f;
}

/* ---- hero ----------------------------------------------------------------
   The lineup is the hero. Every pouch already carries the wordmark, so there
   is no lockup laid over it and no darkening gradient. The stock hero crops to
   a min-height, which at any width would cut El Churrito or The O.G. off the
   ends, so this one keeps the render's own 2:1 frame instead. */
.wholly-hero::after { display: none; }
/* Has to outrank `body > .work-hero` (0,1,1), which pins full-bleed heroes to
   5/6 of the viewport height; with that height fixed, the aspect ratio would
   widen the box past the viewport instead. */
body > .work-hero.wholly-hero {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1774 / 887;
}

/* ---- full-measure images -------------------------------------------------
   The lineup and the guidelines board are both whole compositions; cropping
   either loses a flavor or a page, so they keep their own ratio. */
.wb-full { margin: clamp(84px, 11vw, 170px) 0; }
.wb-full .case-media {
  min-height: 0;
  border-radius: var(--radius);
}
.wb-full .case-media img { height: auto; display: block; }
.wb-full-board .case-media { background: #1a1a1a; }

.wb-cap {
  margin-top: 16px;
  font-family: "Space Mono", monospace;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---- flavors -------------------------------------------------------------- */
.wb-flavors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 22px);
}
.wb-flavor {
  display: grid;
  align-content: space-between;
  gap: clamp(40px, 6vw, 110px);
  min-height: clamp(220px, 22vw, 340px);
  padding: clamp(20px, 2.2vw, 34px);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}
.wb-flavor h3 {
  font-family: var(--sans-display);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.wb-flavor p {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.4;
}
.wb-flavor code {
  display: block;
  margin-top: 10px;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* ---- bento clusters -------------------------------------------------------
   Small-screen first, as on Bright Trip: a plain two-up, with the interlocking
   desktop arrangements added at the bottom. */
.wb-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 22px);
  grid-auto-rows: clamp(150px, 26vw, 260px);
}
.wb-bento .case-media {
  min-height: 0;
  height: 100%;
  border-radius: var(--radius);
}

/* A color tile inside the bento: the topo pattern's line from the guidelines,
   set on El Churrito's lilac with its teal. */
.wb-tile {
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 2vw, 30px);
  border-radius: var(--radius);
  background: #daa7d0;
  color: #1f5856;
}
.wb-tile p {
  font-family: var(--sans-display);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
/* The wheel's tile is short and wide at every size, which crops the wheel
   whichever way it is centred, so the whole render fits inside it (wheel and
   swatch column both) and the tile is filled with the render's own teal
   (sampled) so the letterbox doesn't show. */
.wb-wheel { background: #014353; }
.wb-wheel img { object-fit: contain; }

@media (max-width: 900px) {
  .wb-flavors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Seven tiles two-up leaves a hole after the last one, so it runs across. */
  .wb-bento-world > :last-child { grid-column: 1 / -1; }
}

/* Six full-width cards stacked on a phone ran most of three screens, so the
   flavors stay two-up and just get shorter. */
@media (max-width: 620px) {
  .wb-bento { grid-template-columns: 1fr; }
  .wb-flavor { min-height: 180px; gap: 24px; padding: 16px; }
  .wb-flavor h3 { font-size: 22px; }
  .wb-flavor p { font-size: 14px; }
}

@media (min-width: 901px) {
  .wb-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Identity: the sticker sheet runs wide, merch and the hillside pouch stack
     beside it. */
  .wb-bento-identity { grid-template-rows: repeat(2, clamp(170px, 17vw, 260px)); }
  .wb-bento-identity > :nth-child(1) { grid-column: 1 / 8;  grid-row: 1 / 3; }
  .wb-bento-identity > :nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 2; }
  .wb-bento-identity > :nth-child(3) { grid-column: 8 / 13; grid-row: 2 / 3; }

  /* Pouch: the studio shot leads, the Mac Daddy flat lay runs full height
     beside it. */
  .wb-bento-pouch { grid-template-rows: repeat(2, clamp(170px, 17vw, 260px)); }
  .wb-bento-pouch > :nth-child(1) { grid-column: 1 / 8;  grid-row: 1 / 3; }
  .wb-bento-pouch > :nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }

  /* World: the two pouch shots sit on a diagonal, the O.G. top left and the
     Locha Mocha bottom right, so they never share an edge. The summit frame
     and the scenic route tile over the wheel fill the top right; the meadow
     and the swim fill the bottom left. Every cell is spoken for, so nothing
     auto-places. */
  .wb-bento-world { grid-template-rows: repeat(4, clamp(130px, 13vw, 200px)); }
  .wb-bento-world > :nth-child(1) { grid-column: 1 / 7;   grid-row: 1 / 3; }
  .wb-bento-world > :nth-child(2) { grid-column: 7 / 10;  grid-row: 1 / 3; }
  .wb-bento-world > :nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 2; }
  .wb-bento-world > :nth-child(4) { grid-column: 10 / 13; grid-row: 2 / 3; }
  .wb-bento-world > :nth-child(5) { grid-column: 7 / 13;  grid-row: 3 / 5; }
  .wb-bento-world > :nth-child(6) { grid-column: 1 / 4;   grid-row: 3 / 5; }
  .wb-bento-world > :nth-child(7) { grid-column: 4 / 7;   grid-row: 3 / 5; }
}