/* ==========================================================================
   Case Studies — page-specific composition only.
   ========================================================================== */

/* Hero: three equal clear spaces — edge | text | phone | edge. */
.case-index__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--section-gap);
  padding-inline: var(--gutter);
}
@media (min-width: 48em) {
  .case-index__grid {
    justify-content: space-evenly;
    gap: 0;
    padding-inline: 0;
  }
  .case-index__phone { order: 0; }
}

.case-index__intro { width: min(100%, 46rem); }
.case-index__intro > * + * { margin-block-start: var(--intro-gap); }
.case-index__intro .lead { max-width: var(--measure); }

/* The 4° tilt throws the corners ~12px past the box; padding puts the layout
   box back around what you actually see, so the gaps either side read equal. */
.case-index__phone {
  order: -1; /* stacked: the phone leads, the words follow */
  padding-inline: 12px;
  padding-block-end: var(--space-6);
}