/*
 * Hero banner — logo a text nikdy neprekryté.
 *
 * screen.min.css polohuje .hero-banner__logo (top: 62%/70%) a
 * .hero-banner__content (bottom: 1.875rem) nezávisle na sebe, absolútne.
 * Výška .hero-banner sa pritom odvíja od pomeru strán nahratej fotky
 * (alebo je na mobile fixovaná cez 100vh), takže priestor medzi nimi nie je
 * konštantný — pri dlhšom nadpise (viac riadkov) alebo nižšom banneri sa
 * logo a text vedeli reálne prekryť.
 *
 * Tu ich namiesto toho posadíme do jedného flex stĺpca (viď
 * .hero-banner__overlay v template-parts/hero-banner.php) zarovnaného na
 * spodok s pevnou medzerou — logo je tak vždy nad textom, s rovnakým
 * odstupom, bez ohľadu na dĺžku nadpisu alebo výšku bannera.
 */

.hero-banner .hero-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.875rem;
  padding-bottom: 1.875rem;
  pointer-events: none;
}

.hero-banner .hero-banner__overlay > * {
  pointer-events: auto;
}

/* Zrušiť pôvodné nezávislé absolútne polohovanie zo screen.min.css —
   logo aj text sú teraz obyčajné flex položky. transform treba zrušiť
   výslovne: na rozdiel od top/left/bottom funguje aj na position: static,
   takže by logo aj po vypnutí position:absolute stále posúval o polovicu
   jeho vlastnej šírky/výšky (screen.min.css malo translate(-50%, -50%)
   pre centrovanie cez left: 50%, ktoré už nepoužívame). */
.hero-banner .hero-banner__logo,
.hero-banner .hero-banner__content {
  position: static;
  top: auto;
  left: auto;
  transform: none;
}

.hero-banner .hero-banner__logo img {
  height: auto;
}

/* Domovská stránka: bez odznaku nad textom a bez stmavenia fotky.
   Obmedzené na body.home — tá istá šablóna je aj v článkoch a stmavenie
   (#00000033 v screen.min.css) zdieľa s .item-overlay. */
body.home .hero-banner .hero-banner__logo {
  display: none;
}

body.home .hero-banner__background .hero-banner_overlay {
  background: none;
}