/* df-flow.dev — mozaika hero (§4).
   Tło: spikselowana ortofotomapa Lubuskiego (otwarte dane Geoportal/GUGiK),
   28 px szerokości bazowej — kwadraty rysuje przeglądarka przez
   image-rendering: pixelated. Regeneracja: tools/hero-mosaic.py. */

#hero {
  background-image: url("../assets/hero-mosaic.png");
  background-position: center;
  background-size: cover;
  display: flex;
  image-rendering: pixelated;
  overflow: hidden;
  position: relative;
}

@media (min-width: 48rem) {
  #hero {
    min-height: min(50vw, 45rem);
  }
}

/* lekka nakładka ujednolicająca — nad mozaiką, pod treścią;
   czytelność tekstu zapewnia panel, nie nakładka */
#hero::after {
  background: rgb(16 24 6 / 18%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* panel pod tekstem hero — AA niezależnie od jasności kadru */

.hero__panel {
  align-items: flex-start;
  background: rgb(16 24 6 / 55%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-4);
  width: fit-content;
}

.hero .eyebrow {
  color: var(--lime-soft);
}