/*
 * Hero band: full-bleed media with a viewport-based height. The width/height
 * trick below keeps the media edge-to-edge even when the component sits
 * inside a padded page container (same as the original Gutenberg block).
 *
 * Three custom properties let every component instance override the look from
 * its inline style without extra CSS files (set in hero.twig):
 *   --ergostil-hero-height     band height; falls back to the responsive
 *                              default (50vh / 50vh / 40vh)
 *   --ergostil-hero-min-height band minimum; set to 0px together with a
 *                              custom height so the editor value wins
 *   --ergostil-hero-fit        object-fit; falls back to cover
 *
 * Mobile-first: the unqualified block is the PHONE cascade (the old
 * max-width: 575px values merged over the desktop rules), min-width: 576px
 * re-declares the 576–991px values, min-width: 992px the desktop values.
 */

.ergostil-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.ergostil-hero .ergostil-hero-media {
  width: 100%;
  /* On phones a custom height is capped by the responsive default: min()
     picks whichever is smaller, so a desktop-sized band never swallows a
     phone screen while a deliberately small band stays small. The cap is
     40vh/220px on phones (base), 50vh/280px from 576px up and removed
     entirely (plain var() fallback) from 992px up. */
  height: min(var(--ergostil-hero-height, 40vh), 40vh);
  min-height: min(var(--ergostil-hero-min-height, 220px), 220px);
  object-fit: var(--ergostil-hero-fit, cover);
  display: block;
  margin: 0;
  padding: 0;
}

.ergostil-hero .ergostil-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #000;
}

/* From 576px (old max-width: 991px block) the cap moves up to the 50vh/280px
   responsive default. */
@media (min-width: 576px) {
  .ergostil-hero .ergostil-hero-media {
    height: min(var(--ergostil-hero-height, 50vh), 50vh);
    min-height: min(var(--ergostil-hero-min-height, 280px), 280px);
  }
}

/* Desktop: no cap at all - the band uses the custom property (or its
   50vh/280px fallback) exactly as declared. */
@media (min-width: 992px) {
  .ergostil-hero .ergostil-hero-media {
    height: var(--ergostil-hero-height, 50vh);
    min-height: var(--ergostil-hero-min-height, 280px);
  }
}