/* =========================================================
   SECTION — Home case-studies shelf (COLLINS-style)
   A section head + a horizontal row of case cards that drifts
   left as the section scrolls through (main.js initHomeCases).
   Falls back to a normal scrollable row without JS/motion.
   ========================================================= */

.home-cases {
  overflow: hidden;
  padding-top: var(--space-section-y-after-pin);
}

/* Lime eyebrow on the dark Case Studies section. */
.home-cases .pr-kicker {
  color: var(--pr-lime);
}

.home-cases-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-row-lg) var(--space-page-x-tablet);
  margin-bottom: var(--space-section-head);
}

.home-cases-head h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
  max-width: 18ch;
}

.home-cases-track {
  display: flex;
  align-items: flex-end;
  gap: var(--space-grid-md);
  overflow-x: auto;
  /* Free scroll like COLLINS (no snap), so the row never jumps off-axis. */
  scroll-snap-type: none;
  scrollbar-width: thin;
  /* Full-bleed scroller: the track spans the whole viewport so cards slide all
     the way to the screen edges. The gutter lives as INNER padding, so the
     first card still lines up with the header but nothing clips at the margin
     while sliding. */
  padding-left: var(--full-bleed-gutter);
  padding-right: var(--full-bleed-gutter);
  padding-bottom: var(--space-form-pad);
  padding-top: clamp(24px, 5vw, 80px);
  /* 3D scene for the cards' lay-down -> stand-up entrance. */
  perspective: 1400px;
  perspective-origin: center bottom;
  scrollbar-width: none;
}

.home-cases-track::-webkit-scrollbar {
  display: none;
}

.hc-card {
  transform-origin: center bottom;
}

.hc-card:focus-visible {
  outline: 2px solid var(--pr-lime);
  outline-offset: 6px;
  border-radius: var(--radius-focus);
}

/* COLLINS-proportion cards: portrait, ~360px wide, sitting on a common bottom
   baseline. Heights follow a tall / medium / short / tall rhythm (BOSE-tall,
   then shorter middles, then tall again) — matched to the reference. */
.hc-card:nth-child(4n + 1) .hc-media {
  aspect-ratio: 0.69; /* tall  ~520 */
}

.hc-card:nth-child(4n + 2) .hc-media {
  aspect-ratio: 0.78; /* medium ~462 */
}

.hc-card:nth-child(4n + 3) .hc-media {
  aspect-ratio: 0.83; /* short ~434 */
}

.hc-card:nth-child(4n + 4) .hc-media {
  aspect-ratio: 0.69; /* tall  ~520 */
}

.hc-card {
  flex: 0 0 auto;
  width: clamp(300px, 26vw, 366px);
  text-decoration: none;
  color: inherit;
}

.hc-media {
  aspect-ratio: 0.7;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--page-fg), transparent 86%);
}

.hc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001); /* promote to its own layer for a crisp zoom */
  transition: transform 0.7s var(--ease-out);
}

/* Subtle COLLINS-style hover: a slow, gentle image zoom. */
.hc-card:hover .hc-media img,
.hc-card:focus-visible .hc-media img {
  transform: scale(1.06);
}