/**
 * The page title band.
 *
 * The band is its own stacking context so a video or an image can sit behind
 * the words without the words needing a z-index of their own everywhere.
 */

.ds-title{ position:relative; isolation:isolate; display:grid;
  background:var(--ds-bg,#0b0b0c) center/cover no-repeat;
  color:var(--ds-heading,#fff); overflow:hidden }

/* Nothing painted at all, so the band sits on whatever the page already is.
   A separate rule rather than a value on .ds-title above: the shorthand there
   also carries the sizing, and overriding only the color would leave the band
   painting the page background anyway. */
.ds-titlebg-transparent{ background:none }

.ds-titlefit-contain{ background-size:contain }
.ds-titlefit-fill{ background-size:100% 100% }

/* One dim layer, so an image and a video read the same. */
.ds-titlebg-image::before,.ds-titlebg-video::before{ content:''; position:absolute;
  inset:0; z-index:1; background:#000; opacity:var(--ds-title-dim,.4) }

.ds-title-video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0 }

/* The moving layer is taller than the band by the distance it travels, so its
   edges never come into view at either end of the drift. */
.ds-title-para{ position:absolute; left:0; right:0;
  top:calc(var(--ds-para,20%) / -2); bottom:calc(var(--ds-para,20%) / -2);
  height:auto; background-size:cover; background-position:center;
  background-repeat:no-repeat; z-index:0; will-change:transform }
.ds-titlefit-contain .ds-title-para{ background-size:contain }
.ds-titlefit-fill .ds-title-para{ background-size:100% 100% }

/* Without the script - or with reduced motion - it is simply a picture. */
@media (prefers-reduced-motion: reduce){
  .ds-title-para{ transform:none !important }
}
/* The picture's fit, for a title whose video was set before it had a fit of
   its own. A video that has one writes it on the element, which wins. */
.ds-titlefit-contain .ds-title-video{ object-fit:contain }
.ds-titlefit-fill .ds-title-video{ object-fit:fill }

/* Held back so the words stay readable.
 *
 * A layer over the video rather than opacity on the video itself - fading the
 * clip would fade whatever is behind it too, and the words sit on top at
 * z-index 2, so this has to land between the two. Black, because dimming is
 * darkening; a title that wants a colour over it has the gradient mode. */
.ds-title-videodim{ position:absolute; inset:0; z-index:1;
  background:#000; pointer-events:none }

.ds-title-in{ position:relative; z-index:2; width:100%;
  /* Set on Page titles, or the fluid figure this was fixed at. */
  padding-top:var(--ds-title-pt, clamp(28px,5vw,64px));
  padding-bottom:var(--ds-title-pb, clamp(28px,5vw,64px));
  /* minmax(0,1fr), not the auto a grid column defaults to.
     An auto track is as wide as its widest item, and Fit to width sets the
     heading to nowrap before sizing it - so the h1 grew the track, the track
     grew the room the fitter measured, and the fitter grew the h1 again. It
     reached two thousand pixels of type in a column it thought was nine and
     a half thousand wide. */
  /* No gap of its own.

     Fourteen pixels of grid gap sat between the trail and the title, and a
     margin of nought could not touch it - there was no way to close the
     space from the panel at all, because the space was not a margin. The
     two margins govern it now: one space, one control. */
  display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-content:center }

.ds-titlev-top .ds-title-in{ align-content:start }
.ds-titlev-bottom .ds-title-in{ align-content:end }

.ds-title-left  .ds-title-in{ text-align:left }
.ds-title-center .ds-title-in{ text-align:center }
.ds-title-right .ds-title-in{ text-align:right }

/* Inherited, so the Colour on Page titles reaches the heading.

   The band carries the colour as an inline style and the title is an h1,
   and the theme sets a colour on every h1 - a colour declared on an element
   beats one it would have inherited, so the swatch did nothing. */
.ds-title-text{ color:inherit; margin:var(--ds-title-margin,0); line-height:1.04;
/* Whatever the settings worked out - one figure, or a clamp between two.
     The 5vw that used to sit in the middle here made the Size box a ceiling
     rather than a size, and one the page only reached at 2400px wide. */
  font-size:var(--ds-title-font, var(--ds-title-size,56px));
  /* The band's own case, from Page titles - not h1's, because a title
     band is art direction and is as often set in caps as the headings in
     the page under it are not. */
  text-transform:var(--ds-title-case,none) }

/* The trail on the same line as the title. Baseline rather than center, so a
   small trail sits on the title's own line rather than floating beside it. */
.ds-title-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px }
.ds-title-center .ds-title-row{ justify-content:center }
.ds-title-right  .ds-title-row{ justify-content:flex-end }

/* ---- the trail ---- */
.ds-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:var(--ds-crumb-size,13px); text-transform:var(--ds-crumb-case,none);
  /* Its own face when one is chosen, and the page's when it is not - inherit
     rather than a stack written twice. */
  font-family:var(--ds-crumb-font, inherit);
  margin:var(--ds-crumb-margin,0);
  letter-spacing:.02em }
.ds-crumbs-center{ justify-content:center }
.ds-crumbs-right{ justify-content:flex-end }
.ds-crumbs a{ color:inherit; text-decoration:none }
/* Only where the trail was told to. A link in a breadcrumb is understood
   to be one from where it sits, so the rule under it is a choice. */
.ds-crumbs-ul a:hover{ text-decoration:underline }
.ds-crumbs i{ font-style:normal }

/* Full width text.

   The band's inside is a .ds-shell, which is what holds every other part of the
   site to the content column. Set full width, the heading takes the window
   instead - for a title set large, where the column makes it wrap early and
   read as boxed in. The gutter stays, or the words touch the glass. */
.ds-title-full .ds-title-in{ max-width:none }