/* ==========================================================================
   Case highlight card
   ==========================================================================
   The large card for the "Quatre projets" band. The grid card cannot do this
   job: it is locked to a 16:9 cover and carries the smaller type.

   Only a published case links. The 2026-09-08 fallback that sent every card to
   Sortlist's page is gone: a buyer who clicks E.ON and lands on Sortlist has
   been misled, which costs more than an honest inert card.

   The round arrow is decoration, not the mechanism. The whole card is the
   link, so keyboard and screen reader users reach it without ever seeing the
   badge. It stays hover and focus only, and slides up rather than just fading
   in, so it reads as arriving rather than dissolving. Permanently visible, it
   crowded the KPI row when all four cards are on screen at once.

   The story line is clamped to two lines. That is what keeps all four cards
   the same height regardless of copy length: E.ON's sentence alone runs long
   enough to wrap a third line at this width and nothing else here does.
   ========================================================================== */

.highlight-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  transition: transform 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out;
}

a.highlight-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--foreground);
  box-shadow: var(--shadow-xl);
}

@media (prefers-reduced-motion: reduce) {
  .highlight-card { transition: none; }
  a.highlight-card:hover { transform: none; }
}

/* Filled, not letterboxed: the frame carries no white bars. 16:9 because most
   covers already sit near 1.77 and land in it uncropped, which keeps the client
   labels baked into their corners; the two narrower ones lose a little top and
   bottom, where no label sits. The plate stays behind as the colour a cover
   loads onto, not as a mount. */
.highlight-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-neutral-0);
}

/* The hover zoom scales this strip, never the individual stills. Scaling each
   still separately broke the reel twice over: a still parked one frame-height
   below sat 5% taller than its box, so its top edge showed as a band along the
   bottom of the frame, and the two stills in play were no longer edge to edge,
   so a gap of plate swept between them mid-slide. Scaled here, the geometry
   inside stays exact and the whole strip is what zooms. */
.highlight-card__strip {
  position: absolute;
  inset: 0;
  scale: 1;
  transition: scale 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.highlight-card:hover .highlight-card__strip,
a.highlight-card:focus-visible .highlight-card__strip { scale: 1.1; }

@media (prefers-reduced-motion: reduce) {
  .highlight-card__strip { transition: none; }
  a.highlight-card:hover .highlight-card__strip { scale: 1; }
}

/* The still that just lost its turn exits upward past the top edge while the
   new one rides in from below, both in the same beat, which reads as one strip
   sliding up rather than two images dissolving. Everything else parks off
   screen below, ready to be the next arrival. The opacity move alongside is a
   finishing touch, not the mechanism: it softens the clipped edge. */
.highlight-card__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  translate: 0 100%;
  opacity: 0.9;
  transition: translate 900ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.highlight-card__still[data-state="current"] { translate: 0 0; opacity: 1; }
.highlight-card__still[data-state="exiting"] { translate: 0 -100%; opacity: 0; }

/* A still waiting its turn is parked below with no transition, so the one that
   just exited above can be moved back down to the queue without sweeping
   through the frame on its way. Only the two stills in play animate. */
.highlight-card__still[data-state="waiting"] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .highlight-card__still { transition: none; }
}

.highlight-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease-out;
}

.highlight-card__video[data-playing="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .highlight-card__video { transition: none; }
}

.highlight-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

@media (min-width: 768px) { .highlight-card__body { padding: 1.75rem; } }

.highlight-card__client {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

.highlight-card__sector {
  margin-top: 0.25rem;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.highlight-card__story {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
  color: var(--muted-foreground);
}

.highlight-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

/* The reveal arrow follows this card's hover, not the grid card's. */
a.highlight-card:hover .case-arrow--reveal,
a.highlight-card:focus-visible .case-arrow--reveal {
  transform: translateY(0);
  opacity: 1;
}