/* ==========================================================================
   blocks/hero/hero.css
   ========================================================================== */

/* Slika, temni prelivni sloj in besedilo so vsi v ISTI grid celici
   (grid-stacking) — vrstica se samodejno razteza na VIŠJEGA od dveh:
   naravno višino slike ALI višino, ki jo potrebuje besedilo. Tako slika
   nikoli ni obrezana, besedilo pa nikoli ne uide iz okvirja (kar se je
   dogajalo pri position:absolute, ker takrat slika ni več vplivala na
   višino bloka). */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  display: grid;
  min-height: 220px;
}

.hero__bg,
.hero__overlay,
.hero__content {
  grid-area: 1 / 1;
}

/* Mobilno: slika v celoti zapolni isti prostor kot besedilo (h1 blok) —
   height:100% + object-fit:cover, tako da banner ni tanek trak na vrhu,
   ampak pravo ozadje za celoten naslovni blok. Ker gre za % višino, slika
   NE vpliva na avtomatsko višino grid vrstice (to določa .hero__content),
   zato besedilo ostane vedno v celoti vidno. */
.hero__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-self: stretch;
  z-index: 0;
}

.hero__overlay {
  background: linear-gradient(90deg, rgba(20, 18, 18, 0.85) 0%, rgba(20, 18, 18, 0.55) 60%, rgba(20, 18, 18, 0.35) 100%);
  z-index: 1;
}

.hero__content {
  align-self: center;
  z-index: 2;
  padding-block: 32px;
  max-width: 760px;
}

.hero__title {
  margin-bottom: 16px;
}

.hero__subtitle {
  color: var(--color-white);
  font-size: clamp(15px, 1.6vw, 18px);
  margin-bottom: 28px;
  max-width: 620px;
}

.hero__cta {
  padding-inline: 32px;
}

/* Desktop: pri širokih slikah (najpogostejše razmerje bannerjev) naravna
   višina sama itak ne preseže max-height, zato ostanejo popolnoma
   neobrezane; le pri zelo "kvadratnih" slikah (npr. stran /app/) se rahlo
   obreže, da banner ni pretirano visok. */
@media (min-width: 768px) {
  .hero {
    min-height: 280px;
  }

  .hero__bg {
    height: auto;
    max-height: 460px;
    align-self: center;
  }
}