/* ═══════════════════════════════════════════════════════════════
   hero-fit.css — keeps every page hero well-framed at any zoom level
   or screen size. Loaded after the page stylesheet (see layouts/app.php).

   • height grows with width (up to a cap) so the crop stays consistent
   • on ultra-wide / zoomed-out screens the artwork stops stretching: it
     stays centered at a fixed max width and fades out at both sides
   • on narrow / zoomed-in screens the artwork is capped in height so it
     is not blown up behind stacked content
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px){
  .ch-landing__hero,
  .lb-landing__hero,
  .rf-landing__hero,
  .sc-landing__hero,
  .se-landing__hero{ min-height: clamp(440px, 28vw, 680px); }
  .home-landing__hero{ min-height: clamp(520px, 32vw, 720px); }
}

@media (min-width: 2100px){
.home-landing__hero::before,
.ch-landing__hero::before,
.lb-landing__hero::before,
.rf-landing__hero::before,
.sc-landing__hero::before,
.se-landing__hero::before,
.orv-landing__hero::before{
    left: 50%;
    right: auto;
    width: 2100px;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.82) 67%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.22) 89%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.82) 67%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.22) 89%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-composite: intersect;
  }
  .blg-landing__stage{
    width: 2100px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 26%, #000 72%, rgba(0,0,0,.6) 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 26%, #000 72%, rgba(0,0,0,.6) 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-composite: intersect;
  }
}

@media (max-width: 900px){
.home-landing__hero::before,
.ch-landing__hero::before,
.lb-landing__hero::before,
.rf-landing__hero::before,
.sc-landing__hero::before,
.se-landing__hero::before,
.orv-landing__hero::before{
    bottom: auto;
    height: min(100%, 640px);
  }
}