/* ==========================================================================
   LANDING.CSS
   Štýly výhradne pre verejný web (úvodná stránka, prihlásenie, registrácia).
   Dashboard má vlastný súbor dashboard.css.
   ========================================================================== */

/* ==========================================================================
   HLAVIČKA
   Prilepená k vrchu (sticky) s priesvitným pozadím a rozmazaním.
   ========================================================================== */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 237, 225, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
/* Triedu .je-odscrolovana pridáva JS po odscrolovaní - vytvorí oddelenie */
.hlavicka.je-odscrolovana {
  border-bottom-color: var(--ciara);
  box-shadow: var(--tien-s);
}

.hlavicka__obsah {
  display: flex;
  align-items: center;
  gap: var(--r6);
  height: 72px;
}

/* --- Logo -------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: var(--r2);
  font-weight: 700;
  font-size: var(--v-m);
  color: var(--text);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo__znak { width: 30px; height: 30px; flex-shrink: 0; }
/* Koncovka ".sk" nenápadnejšie - wordmark tak pôsobí vyváženejšie */
.logo__koncovka { color: var(--text-slabsi); font-weight: 500; }

/* --- Navigácia --------------------------------------------------------- */
.navigacia { display: flex; gap: var(--r5); margin-right: auto; }
.navigacia__odkaz {
  color: var(--text-jemny);
  font-weight: 500;
  padding-block: var(--r2);
  transition: color var(--prechod);
}
.navigacia__odkaz:hover { color: var(--text); text-decoration: none; }

.hlavicka__akcie { display: flex; align-items: center; gap: var(--r3); }

/* Tlačidlo hamburger menu - viditeľné len na mobile */
.hamburger {
  display: none;
  background: none;
  border: 1px solid var(--ciara-silna);
  border-radius: var(--oblenie-m);
  padding: var(--r2) var(--r3);
  cursor: pointer;
}

@media (max-width: 900px) {
  .navigacia, .hlavicka__akcie { display: none; }
  .hamburger { display: block; margin-left: auto; }

  /* Po kliknutí na hamburger JS pridá .je-otvorene na .hlavicka */
  .hlavicka.je-otvorene .navigacia,
  .hlavicka.je-otvorene .hlavicka__akcie {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--r3);
    padding-bottom: var(--r4);
  }
  .hlavicka.je-otvorene .hlavicka__obsah {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding-block: var(--r4);
  }
}

/* ==========================================================================
   HERO
   Dva stĺpce: text vľavo, vizuál (naskladané hárky) vpravo.
   ========================================================================== */
.hero { padding-block: var(--r9) var(--r8); }

.hero__mriezka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r8);
  align-items: center;
}

.hero__nadpis { margin-block: var(--r3) var(--r4); max-width: 12ch; }
.hero__text {
  font-size: var(--v-m);
  color: var(--text-jemny);
  max-width: 44ch;
  margin-bottom: var(--r5);
}
.hero__akcie { display: flex; gap: var(--r3); flex-wrap: wrap; }

/* Riadok s odrážkami pod tlačidlami */
.hero__ubezpecenie {
  display: flex;
  align-items: center;
  gap: var(--r2);
  margin-top: var(--r4);
  font-size: var(--v-xs);
  color: var(--text-jemny);
}
.hero__fajka { color: var(--zelena); font-weight: 700; }

/* --- Vizuál: ilustrácia učiteľky ----------------------------------------
   PNG s priehľadným pozadím. Zlatý "oblak" za ňou je čisté CSS -
   organický tvar cez border-radius, aby hero nepôsobil prázdno. */
.hero__vizual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__vizual::before {
  content: "";
  position: absolute;
  inset: 6% 4% 10% 8%;
  background: linear-gradient(160deg, var(--zlata) 0%, #DCA14E 100%);
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  opacity: 0.28;
  z-index: 0;
}
.hero__ilustracia {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(92, 64, 22, 0.14));
}

@media (max-width: 900px) {
  .hero__mriezka { grid-template-columns: 1fr; gap: var(--r6); }
  .hero__nadpis { max-width: none; }
  .hero__vizual { max-width: 520px; margin-inline: auto; }
}

/* ==========================================================================
   PREDNOSTI
   Tri biele karty pod hero sekciou s pastelovými ikonovými odznakmi.
   Karty "prečnievajú" z hero do ďalšej sekcie (záporný spodný okraj).
   ========================================================================== */
.sekcia--prednosti { padding-bottom: var(--r8); }
.prednosti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r5);
}
.prednost {
  display: flex;
  align-items: center;
  gap: var(--r4);
  padding: var(--r5) var(--r6);
  background: var(--papier);
  border-radius: var(--oblenie-xl);
  box-shadow: var(--tien-m);
  font-size: var(--v-l);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  transition: box-shadow var(--prechod), transform var(--prechod);
}
.prednost:hover {
  text-decoration: none;
  box-shadow: var(--tien-l);
  transform: translateY(-3px);
}
.prednost__nazov { display: block; }
.prednost__ikona {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex-shrink: 0;
}
/* Pastelové podklady odznakov - jediné miesto, kde landing opúšťa
   základnú paletu; zámerne tlmené, aby ladili s pieskovou. */
.prednost__ikona--levandula { background: #EDE6F4; }
.prednost__ikona--nebo      { background: #E4EDF9; }
.prednost__ikona--broskyna  { background: #F9E6DC; }

@media (max-width: 900px) {
  .prednosti { grid-template-columns: 1fr; gap: var(--r3); }
  .prednost { padding: var(--r4) var(--r5); font-size: var(--v-m); }
  .prednost__nazov { display: block; }
.prednost__ikona { width: 46px; height: 46px; }
}

/* ==========================================================================
   HLAVIČKA SEKCIE (nadpis + podnadpis nad mriežkou)
   ========================================================================== */
.sekcia__hlavicka { text-align: center; margin-bottom: var(--r7); }
.sekcia__podnadpis {
  margin-top: var(--r2);
  color: var(--text-jemny);
  font-size: var(--v-m);
}

/* ==========================================================================
   MRIEŽKA MATERIÁLOV
   auto-fill + minmax = počet stĺpcov sa prispôsobí sám, bez media queries.
   ========================================================================== */
.materialy-mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--r4);
}

.material {
  display: flex;
  flex-direction: column;
  padding: var(--r3);
  background: var(--papier);
  border: 1px solid var(--zlata-svetla);
  border-radius: var(--oblenie-l);
  box-shadow: var(--tien-s);
  transition: box-shadow var(--prechod), transform var(--prechod);
}
.material:hover { box-shadow: var(--tien-l); transform: translateY(-3px); }

/* Náhľad pracovného listu - pomer strán A4 na výšku */
.material__nahlad {
  aspect-ratio: 3 / 4;
  background: var(--podklad-tmavsi);
  border-radius: var(--oblenie-m);
  margin-bottom: var(--r3);
  padding: var(--r3);
  overflow: hidden;
}
/* Zelené podfarbenie náhľadu pre materiály zadarmo */
.material__nahlad--zadarmo { background: var(--zelena-podklad); }

.material__telo { display: flex; flex-direction: column; flex: 1; gap: var(--r2); }
.material__uroven { align-self: flex-start; }
.material__nazov { font-size: var(--v-s); font-weight: 700; line-height: 1.3; }
.material__pata {
  margin-top: auto;
  padding-top: var(--r2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.material__cena { font-weight: 700; font-size: var(--v-m); }

/* ==========================================================================
   SEKCIA "DOKUMENTÁCIA BEZ PAPIEROVANIA"
   ========================================================================== */
.dvojstlpec {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--r8);
  align-items: center;
}
@media (max-width: 900px) { .dvojstlpec { grid-template-columns: 1fr; gap: var(--r6); } }

.zoznam-vyhod { list-style: none; padding: 0; margin: var(--r5) 0; }
.zoznam-vyhod li {
  display: flex;
  gap: var(--r3);
  align-items: flex-start;
  margin-bottom: var(--r3);
  color: var(--text-jemny);
}
.zoznam-vyhod li::before {
  content: "✓";
  color: var(--zelena);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Maketa okna prehliadača -------------------------------------------- */
.okno {
  background: var(--papier);
  border: 1px solid var(--ciara);
  border-radius: var(--oblenie-l);
  overflow: hidden;
  box-shadow: var(--tien-l);
}
.okno__lista {
  display: flex;
  gap: 6px;
  padding: var(--r3) var(--r4);
  background: var(--podklad-tmavsi);
  border-bottom: 1px solid var(--ciara);
}
.okno__bodka { width: 10px; height: 10px; border-radius: 50%; background: var(--ciara-silna); }
.okno__obsah { display: grid; grid-template-columns: 150px 1fr; min-height: 260px; }
.okno__bocny { background: var(--podklad-svetly); border-right: 1px solid var(--ciara); padding: var(--r3); }
.okno__polozka { height: 7px; background: var(--ciara); border-radius: 2px; margin-bottom: var(--r3); }
.okno__polozka--aktivna { background: var(--modra-svetla); height: 18px; }
.okno__formular { padding: var(--r4); }

/* ==========================================================================
   O NÁS + NEWSLETTER
   ========================================================================== */
.onas__foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--oblenie-l);
  background: var(--podklad-tmavsi);
  object-fit: cover;
  margin-bottom: var(--r4);
}
.onas__mena { font-weight: 700; font-size: var(--v-m); }
.onas__role { color: var(--text-jemny); font-size: var(--v-xs); }

.newsletter__formular { display: flex; gap: var(--r2); margin-top: var(--r4); }
.newsletter__formular .pole__vstup { border-radius: 999px; }
@media (max-width: 520px) { .newsletter__formular { flex-direction: column; } }

/* ==========================================================================
   PÄTA
   ========================================================================== */
.pata {
  border-top: 1px solid var(--ciara);
  padding-block: var(--r5);
  background: var(--podklad);
}
.pata__obsah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4);
  flex-wrap: wrap;
}
.pata__odkazy { display: flex; gap: var(--r5); flex-wrap: wrap; }
.pata__odkazy a { color: var(--text-jemny); font-size: var(--v-xs); }

/* ==========================================================================
   STRÁNKY PRIHLÁSENIA A REGISTRÁCIE
   Vycentrovaná karta na plnej výške obrazovky.
   ========================================================================== */
.vstup-stranka {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--r5);
  gap: var(--r5);
}
.vstup-karta {
  width: 100%;
  max-width: 420px;
  background: var(--papier);
  border: 1px solid var(--ciara);
  border-radius: var(--oblenie-xl);
  padding: var(--r7) var(--r6);
  box-shadow: var(--tien-l);
}
.vstup-karta__nadpis { text-align: center; margin-bottom: var(--r2); }
.vstup-karta__text {
  text-align: center;
  color: var(--text-jemny);
  font-size: var(--v-xs);
  margin-bottom: var(--r6);
}
.vstup-karta__pata {
  margin-top: var(--r5);
  padding-top: var(--r4);
  border-top: 1px solid var(--ciara);
  text-align: center;
  font-size: var(--v-xs);
  color: var(--text-jemny);
}