/* The Dial case study — only what differs from the shared case-study components.
   Components: case.css · chrome and type scale: site.css */

:root {
  --col: 810px;   /* the case-study column, measured off the Framer page at 1440 */
}

/* Meta column offsets measured off the original (Timeline 0, Team 136, Tools 539).
   The fourth field, Award, wraps onto a second row under Timeline. Guarded so
   it cannot outrank the stacked mobile grid in case.css, which this file would
   otherwise win on source order alone. */
@media (min-width: 761px) {
  .meta { grid-template-columns: 136px 403px auto; gap: 18px 0; }
}

/* The hero clip has its own light-grey surround baked in. It is set on the
   element, so it outranks the dark default case.css puts on :root — dark has
   to be stated here or this one well stays a bright band across the page. */
.frame-hero { --frame-bg: rgb(240, 240, 240); }
:root[data-theme="dark"] .frame-hero { --frame-bg: rgb(34, 34, 36); }

/* The process embed is wider than 16:9 on the original. */
.process-embed { --ratio: 0.506; }

/* The gallery cards are different heights, so the two columns run
   independently rather than locking into rows. */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 28px 0 0;
}
.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 760px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
}