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

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

/* Meta column offsets measured off the original (Timeline 0, Team 326, Tools 434).
   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: 326px 108px auto; gap: 8px 0; }
}

/* The hero clip is near-square rather than 16:9, letterboxed against black. */
.hero-embed { --ratio: 0.976; }

/* The three Fusion360 renders are different heights and sit on a shared
   centre line rather than a shared top edge. */
.renders { align-items: center; }

/* The four process photos run as one unbroken strip, edges butted. They share
   case.css's --photo-radius but not its per-image rounding: only the outer
   corners of the stack are curved, never the seams between panels. */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 28px 0 0;
  font-size: 0;
}
.strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* In reading order: the first image carries the top edge, the last the bottom.
   When the strip runs across in one row, that same rule is turned sideways —
   left edge on the first, right edge on the last — so the seams stay square. */
.strip img:first-child {
  border-top-left-radius: var(--photo-radius);
  border-top-right-radius: var(--photo-radius);
}
.strip img:last-child {
  border-bottom-left-radius: var(--photo-radius);
  border-bottom-right-radius: var(--photo-radius);
}
@media (min-width: 761px) {
  .strip img:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--photo-radius);
  }
  .strip img:last-child {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--photo-radius);
  }
}

@media (max-width: 760px) {
  /* two-by-two keeps the strip readable once it can no longer run across */
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Each corner of the grid owns one outer corner of the stack. */
  .strip img:first-child { border-top-right-radius: 0; }
  .strip img:last-child { border-bottom-left-radius: 0; }
  .strip img:nth-child(2) { border-top-right-radius: var(--photo-radius); }
  .strip img:nth-child(3) { border-bottom-left-radius: var(--photo-radius); }
}