/* Domovská Mňamka.
   Rozmery aj typografia sú namerané na origináli (extract-layout.js, text-mapa.js). */

/* ---------- Hero, video cez celú šírku a výšku okna ----------
   Elementor (c58753c): min-height 100vh, na mobile 80vh; obsah pri spodku
   (column-reverse), odsadenie zdola 3 %. Na mobile navyše 3 % po bokoch.

   Zvislé percentá Elementor počíta zo šírky obsahu PO odrátaní bočného
   odsadenia (namerané na všetkých sekciách: tradícia má hore 30 % z 1411,2 =
   423,36 pri okne 1440, nie z 1440). Preto sú tu dve vrstvy: sekcia nesie
   bočné %, vnútro zvislé %, percento sa potom počíta z tej istej šírky. */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;               /* Elementor: 100vh */
  overflow: hidden;
  color: var(--biela);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stmavenie videa, v origináli ::before s čiernym pozadím a opacity 0,2
   (odčítané z computed štýlov) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cierna);
  opacity: 0.2;
}

/* Pod nadpisom je v origináli PRÁZDNY JetEngine listing (zvyšok po zrušenom
   obsahu): 40 px, nad ním medzera 5. Nič nezobrazuje, takže ho neprepisujeme
   ale text musí sedieť tam, kam ho posúva: 3 % + 45 px od spodku. */
.hero__obsah {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;                        /* Elementor: medzera 5 */
  margin-bottom: calc(3% + 45px);  /* Elementor: 3 % + prázdny listing 40 + 5 */
  text-align: center;
}

.hero__maly {
  margin: 0;
  font-size: 18px;                 /* Elementor: 18 px, váha 300 */
  font-weight: 300;
  line-height: 25.2px;
}

.hero__velky {
  margin: 0;
  font-size: 36px;                 /* Elementor: 36 px, váha 800 */
  font-weight: 800;
  line-height: 50.4px;
  text-transform: uppercase;
}

/* Aktívne sviatky pod tlačidlom (nové, v origináli nie je). Ležia
   absolútne v prázdnom mieste pod ním (5 + 40 px, viď vyššie), aby
   zobrazenie neposunulo text hero. Písmo ako „MŇAMKA cukrárenská výroba“
   (tenké), len verzálkami s riedkym rozostupom. */
.hero__sviatky {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 5px 0 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero__sviatky a { color: inherit; }

.hero__sviatky-oddelovac {
  display: inline-block;
  margin-inline: 0.4em 0.7em;      /* rozostup písmen je aj za posledným písmenom */
  letter-spacing: 0;
}

/* ---------- Úvodný text (ac46b0b) ----------
   Boxed 1200, odsadenie 4 % zhora a zdola; na mobile 4 % dookola. */

.uvod .obal {
  max-width: 1200px;               /* Elementor: content-width 1200 */
  padding: 4% 0;                   /* Elementor: 4 % */
}

.uvod__text {
  margin: 0;
  font-size: 22px;                 /* Elementor: 22 px / 40 px, váha 300 */
  font-weight: 300;
  line-height: 40px;
  color: var(--vinova-svetla);
  text-align: center;
}

/* ---------- Štyri hlavné sekcie (e0d9556) ----------
   Boxed 1200, zdola 4 %; listing 4 stĺpce s medzerou 30 (na mobile 2 a 15).
   Karta: fotka 4 : 5 na celú šírku, názov, popis (rozlozenie.css). */

.sekcie .obal {
  max-width: 1200px;               /* Elementor: content-width 1200 */
  padding: 0 0 4%;                 /* Elementor: 4 % zdola */
}

/* ---------- Tradícia a Tím, fotka na pozadí (9e52397, 0250c59) ----------
   Elementor: odsadenie 30 % zhora, 2 % zdola, 2 % zľava; na mobile 35 % / 5 %
   / 5 % po bokoch. Vnútro boxed 1140 (kit). Výška sekcie z toho vyplýva
   (614 pri 1440, 764 pri 1920). */

.tradicia,
.tim {
  position: relative;
  padding-left: 2%;                /* Elementor: 2 % zľava */
  background: url('/img/IMG_6790.webp') center center / cover no-repeat;
  color: var(--biela);
}

.tim { background-image: url('/img/candy.webp'); }

/* Stmavenie fotky, v origináli ::before s čiernym pozadím a opacity 0,3
   (odčítané z computed štýlov, nie odhadnuté z pixelov) */
.tradicia::before,
.tim::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cierna);
  opacity: 0.3;
}

.tradicia__obal,
.tim__obal {
  position: relative;
  max-width: var(--kontajner-uzky);   /* Elementor kit: 1140 */
  margin-inline: auto;
  padding: 30% 0 2%;                  /* Elementor: 30 % zhora, 2 % zdola */
}

.tradicia__nadpis,
.tim__nadpis {
  font-size: 36px;                 /* Elementor: 36 px, váha 800 */
  font-weight: 800;
  line-height: 50.4px;
  color: var(--biela);
  text-transform: uppercase;
}

/* Elementor: text má vpravo odsadenie 60 % (na mobile 0) */
.tradicia__text,
.tim__text {
  margin-top: 0;
  padding-right: 60%;
  font-size: 20px;                 /* Elementor: 20 px, váha 300 */
  font-weight: 300;
  line-height: 28px;
}

/* ---------- Naša ponuka (7e7741f) ----------
   Elementor: odsadenie 5 % zhora a zdola, boxed 1140 (kit; na tablete 1024).
   Listing 3 stĺpce s medzerou 80, karta s odsadením 10 zhora a zdola.
   Na mobile: sekcia 20 % / 7 %, listing 3 % po bokoch, jeden stĺpec, karta
   s odsadením 40 zhora a zdola. */

.ponuka .obal {
  max-width: var(--kontajner-uzky);   /* Elementor kit: 1140 */
  padding: 5% 0;                      /* Elementor: 5 % */
}

.ponuka__mriezka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 80px;                     /* Elementor: medzera stĺpcov 80 */
}

.ponuka-karta {
  display: block;
  padding-block: 10px;             /* JetEngine: odsadenie položky 10 */
  text-align: center;
}
.ponuka-karta:hover { text-decoration: none; }

/* Fotka na celú šírku karty, pomer 4 : 5 (326,7 × 408,3 pri 1440) */
.ponuka-karta__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ponuka-karta__nadpis {
  display: block;
  font-size: 22px;                 /* Elementor: 22 px / 40 px, váha 500, čierna */
  font-weight: 500;
  line-height: 40px;
  color: var(--cierna);
  text-transform: uppercase;
}

.ponuka-karta__nazov {
  display: block;
  font-size: 22px;                 /* Elementor: 22 px / 40 px, vínová */
  font-weight: 500;
  line-height: 40px;
  color: var(--vinova);
  text-transform: uppercase;
}

/* Popis 16 px (riadok 1,4). Karty v riadku sú rovnako vysoké, určuje
   ich najdlhší popis (575,5 pri 1440). */
.ponuka-karta__popis {
  display: block;
  font-size: 16px;
  font-weight: 300;
  line-height: 22.4px;
  color: var(--vinova-svetla);
}

/* ---------- Galéria (926a1b2) ----------
   Elementor: boxed 1200, odsadenie 8 % zhora a zdola (na mobile 6 % dookola).
   Pod nadpisom Elfsight Instagram feed, harness ho z porovnania odstraňuje,
   ostáva po ňom spodná medzera nadpisu 20 (medzera widgetov kitu). */

.galeria .obal {
  max-width: 1200px;               /* Elementor: content-width 1200 */
  padding: 8% 0;                   /* Elementor: 8 % */
}

.galeria__nadpis {
  margin-bottom: 20px;             /* Elementor kit: medzera widgetov 20 */
  font-size: 36px;                 /* Elementor: 36 px, váha 500 */
  font-weight: 500;
  line-height: 50.4px;
  color: var(--vinova-svetla);
}

/* ---------- Tablet (768 až 1024) ----------
   Elementor kit: boxed kontajnery majú na tablete najviac 1024. */
@media (max-width: 1024px) {
  .ponuka .obal { max-width: 1024px; }
}

/* ---------- Mobil (≤767) ---------- */
@media (max-width: 767px) {
  .hero { min-height: 80vh; padding-inline: 3%; }   /* Elementor: 80vh, 3 % po bokoch */
  .hero__sviatky { font-size: 17px; line-height: 24px; letter-spacing: 0.22em; }

  .uvod { padding-inline: 4%; }                     /* Elementor: 4 % dookola */
  .uvod .obal { max-width: 767px; }

  .sekcie { padding-inline: 5%; }                   /* Elementor: 5 % 5 % 0 5 % */
  .sekcie .obal { max-width: 767px; padding: 5% 0 0; }

  .tradicia, .tim { padding-inline: 5%; }           /* Elementor: 35 % 5 % 5 % 5 % */
  .tradicia__obal, .tim__obal { max-width: 767px; padding: 35% 0 5%; }
  .tradicia__text, .tim__text { padding-right: 0; }

  .ponuka { padding-inline: 7%; }                   /* Elementor: 20 % 7 % */
  .ponuka .obal { max-width: 767px; padding: 20% 0; }
  .ponuka__mriezka { grid-template-columns: 1fr; padding-inline: 3%; }   /* listing 3 % */
  .ponuka-karta { padding-block: 40px; }

  .galeria { padding-inline: 6%; }                  /* Elementor: 6 % dookola */
  .galeria .obal { max-width: 767px; padding: 6% 0; }
}