/* Media — V0.1 News Article (62:2662) and Case Studies (62:2929).
   Widths: full = edge to edge, wide = content (1180), contained = text column,
   pair = two equal (article: 480+20+480 inset 100 from content; portraits in the text
   column), pair-tall = staggered 480 small + 550 tall, 150 apart, centred on each other. */
.block--media .media-block__items { display: grid; gap: 20px; align-items: center; }
.block--media .media > img,
.block--media .media > video { height: auto; }
.block--media .media[style*="aspect-ratio"] > img { height: 100%; }
.block--media .media-block__caption { margin-top: var(--space-12); }

.block--media.media-layout--pair .media-block__items { grid-template-columns: 1fr 1fr; }
/* Article sets --media-pair-inset to pull landscape pairs in from the content edge. */
.block--media.media-layout--pair .media-block:not(.media-block--portrait) { margin-inline: var(--media-pair-inset, 0px); }

/* V0.1: 150px gutter between the small and the tall image. */
.block--media.media-layout--pair-tall .media-block__items { grid-template-columns: 480fr 550fr; column-gap: clamp(var(--space-24), 11.7vw, 150px); }
.block--media.media-layout--pair-tall .media-block--tall-first .media-block__items { grid-template-columns: 550fr 480fr; }

/* Reveal: the frame opens from the bottom while the picture settles from a slight zoom. */
.block--media .media-block__item .media { clip-path: inset(0 0 14% 0); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.block--media .media-block__item .media > * { transform: scale(1.08); transition: transform 1.6s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.block--media .media-block__item.is-in .media { clip-path: inset(0); }
.block--media .media-block__item.is-in .media > * { transform: none; }
.no-js .block--media .media-block__item .media { clip-path: none; }
.no-js .block--media .media-block__item .media > * { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .block--media .media-block__item .media { clip-path: none; }
  .block--media .media-block__item .media > * { transform: none; }
}

@media (max-width: 767px) {
  /* A pair is a two-up swipe, the rail (base.css): each image 84% wide, the second peeking in
     from the right, the row snapping, so the pair stays a pair (mobile experience, 2026-09-30).
     The grid rule above outranks the primitive's display and gap, so they're restated. */
  .block--media .media-block__items.rail { display: flex; gap: var(--space-12); --rail-item: 84%; --rail-snap: mandatory; }
}