/* V5 banner art direction.
   Rule for every image-only Home banner:
   - desktop/tablet use a deliberately wide master, normally 2400x600 (4:1);
   - mobile uses a recomposed 1200x675 (16:9) master;
   - the original <img> stays below as a fallback if a named art-directed file
     does not exist yet.

   JS sets these custom properties on each .feature-banner--image-only:
   --feature-banner-desktop-image = /assets/banners/<base>-desktop.<ext>
   --feature-banner-mobile-image = /assets/banners/<base>-mobile.<ext>

   Do not solve a bad crop with object-position. Regenerate/recompose the
   desktop/mobile asset so the essential objects live in the central area. */

html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only{
  width:100%;
  height:clamp(300px,25vw,400px);
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  overflow:hidden;
}

html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only .feature-banner__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only .feature-banner__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:none;
}

/* The pseudo-element is the art-directed layer. If an authored file is not
   present, a failed CSS background is transparent and the existing <img>
   remains visible below it. */
html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only .feature-banner__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-image:var(--feature-banner-desktop-image,none);
}

/* Tablet keeps the desktop composition but lowers the strip height. The
   desktop master must therefore keep all essential subjects inside the
   central 50% of the canvas. */
@media (min-width:600px) and (max-width:1023px){
  html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only{
    height:clamp(230px,30vw,300px);
  }
}

/* Mobile uses a different composition rather than zooming the desktop one. */
@media (max-width:599px){
  html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only{
    height:clamp(190px,56vw,240px);
  }
  html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only .feature-banner__media::after{
    background-image:var(--feature-banner-mobile-image,var(--feature-banner-desktop-image,none));
  }
}

@media (max-width:349px){
  html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only{
    height:185px;
  }
}

@media (prefers-reduced-motion:reduce){
  html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only .feature-banner__media,
  html.v1[data-lrb-home="true"] .editorial-home-flow .feature-banner--image-only .feature-banner__media::after{transition:none}
}