/* Large image: a large image used as a hero to single out a highlight. It is wider than the main container (up to 1800px, never wider than the screen
   less a gutter each side) and always centred on the page, breaking out of the 1220px container. The container takes the picture's own shape: the full image
   is shown, never cropped or stretched, so use any proportion. A title sits above it, in the Subtitle
   style (Medium 18 / 28, built into the component), and an optional caption under it; both line up with the main container's left edge.
   <figure class="large-image">
     <p class="large-image__title">Title of the highlight</p>
     <img src="…" alt="…" width="2000" height="939">          (the picture's pixel size, so the page does not jump while it loads)
     <figcaption class="large-image__caption t-body">Optional caption</figcaption>
   </figure>
   Set --large-image-w on the figure to change the width (default 1800px).
   Put it inside a section's content container. The section needs overflow-x: clip (the light sections have it) so the full-width bleed never adds a sideways scrollbar. */
.large-image {
  --large-image-size: min(var(--large-image-w, 1800px), calc(100vw - 2 * var(--gutter)));
  width: var(--large-image-size); margin: 0 0 0 calc(50% - var(--large-image-size) / 2);   /* 50% = half the container: centred on the page */
}
.large-image > img, .large-image > video { display: block; width: 100%; height: auto; }   /* (a recording works the same as a picture) */
.large-image__title {   /* the Subtitle type style, built in: no extra class needed */
  width: min(var(--container), 100%); margin: 0 auto var(--space-5); color: var(--color-headline); text-box: trim-both cap alphabetic;
  font: var(--weight-medium) var(--fs-subtitle)/var(--lh-subtitle) var(--font-text);
}
.large-image__caption { width: min(var(--container), 100%); margin: var(--space-5) auto 0; color: var(--color-ink); }

/* Band (.large-image--band): a picture at a FIXED height (--large-image-band-h, 400px) across the full width of the screen. It keeps its shape: wider than the screen, it is centred and its ends run off both sides.
   On desktop it just sits there (no dragging). On narrow screens and touch devices it becomes a continuous slider: swipe it along, freely, no snapping.
   <figure class="large-image large-image--band"><img src="…" alt="…" width="3140" height="700"></figure> */
.large-image--band { width: 100vw; margin: 0 0 0 calc(50% - 50vw); height: var(--large-image-band-h, 400px); overflow: hidden; display: flex; justify-content: center; }
.large-image--band > img { flex: none; width: auto; max-width: none; height: 100%; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .large-image--band { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; padding-inline: var(--gutter); box-sizing: border-box; }
  .large-image--band::-webkit-scrollbar { display: none; }
  .large-image--band > img { pointer-events: auto; }
}
/* Centred title (.large-image--center): the title sits over the middle of the picture or video (it follows the figure's width). Rounded (.large-image--rounded): 20px corners on the picture or video. */
.large-image--center > .large-image__title { width: 100%; text-align: center; }
.large-image--rounded > img, .large-image--rounded > video { border-radius: 20px; }

/* Wide pictures on phones (<= 900px): a very wide, detailed picture (a journey board, a flow, a screens strip) would be squashed to the screen width and unreadable, so it is shown at a readable
   height (--large-image-pan-h, 360px) and swiped sideways, like the attribute band. js/large-image-pan.js wraps such a picture in .large-image__pan on narrow screens (and unwraps it on wide ones);
   a picture that already fits is left alone. */
.large-image__pan { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.large-image__pan::-webkit-scrollbar { display: none; }
.large-image__pan > img { display: block; width: auto; max-width: none; height: var(--large-image-pan-h, 360px); }
.large-image--pan { width: 100vw; margin-left: calc(50% - 50vw); }   /* the strip runs edge to edge; its title still lines up with the page (below) */
.large-image--pan > .large-image__title { padding-inline: var(--gutter); box-sizing: border-box; }
.large-image--pan > .large-image__pan { padding-inline: var(--gutter); }
.large-image__pan > .large-image__stack { width: max-content; }   /* a toggle's pictures (Haven's before / after) pan together; the toggle above them is not part of the strip */
.large-image__pan .large-image__stack > img { width: auto; max-width: none; height: var(--large-image-pan-h, 360px); }
.large-image--pan > .toggle { width: min(456px, calc(100% - 2 * var(--gutter))); }