/**
 * MŠ a ZŠ Questo — Homepage-only styles.
 *
 * Age bar (3 věkové kategorie) + nízkoprahový CTA proužek na přihlášku
 * (markup: zs_questo_render_age_cta() v functions.php, hooknuto na
 * zs_front_page_after_hero) + decentní dekorace zbytku homepage
 * (matematické symboly + kapkové/listové tvary, brand manuál Questo).
 *
 * Načítá se jen na is_front_page() — viz zs_questo_child_enqueue_styles()
 * ve functions.php — ať ostatní stránky netahají CSS, které nikdy nepoužijí.
 *
 * @package Questo_Child
 */

/* ==========================================================================
   Věková lišta
   ========================================================================== */

/* Dlaždice sedí POD hero sekcí, nezasahují do ní (Marek 17. 8. 2026).
   Do té doby se zápornými okraji vytahovaly nahoru přes spodek videa. Dávalo
   to smysl, dokud přes hero ležel bílý závoj a karty na něm byly jen dalším
   světlým prvkem; po jeho odstranění (viz style.css) přes video přejíždějí
   a ubírají mu záběr. */
.questo-age-bar {
  position: relative;
  z-index: 5;
  /* Nahoře výrazná bílá mezera mezi videem a první řadou karet (Marek 17. 8.:
     „ať je tam větší bílá mezera"). Bílý pruh oddělí pohyblivé video od
     obsahu, aby karty nezačínaly hned pod záběrem. */
  padding-top: var(--space-24);
  /* Dole vzduch, ať se dlaždice nedotýkají barevného pruhu s přepínačem
     (Marek 5. 8.: bílá sekce potřebuje větší vnitřní odsazení dole). */
  padding-bottom: var(--space-16);
}

/* Podnadpis větve (Škola/Školka) v sekci jídelníčku je zbytečný — kterou větev
   zrovna vidíš, určuje přepínač nahoře. */
.menu-branch__title {
  display: none;
}

.questo-age-bar__list {
  display: grid;
  /* 4 dlaždice (DS / MŠ / ZŠ / volnočas — čtvrtá přidána 5. 8. 2026 na přání
     Kottové). Na užších obrazovkách se lámou na 2 sloupce, viz media query. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.questo-age-bar__item {
  margin: 0;
}

/* Karta = ostrá fotka nahoře + barevný pruh s textem pod ní.
   Do 6. 8. 2026 ležel text PŘES fotku a fotka byla přebarvená poloprůhledným
   překryvem ve stupňové barvě. Kottová to na schůzce odmítla („nechala bych
   normálně pestrou fotku, nedávala bych tam tu barevnou mlhu, a pod to bych
   ta okýnka udělala barevná") a nezávisle na ní napsal totéž Braňo Blaas
   (mail 7. 8.: „zabělené obrázky nejsou hezké, šlo by texty dát pod obrázky
   nebo dát pod texty bílý pruh"). Barevný pruh vyhrál nad bílým proto, že
   Kottová u toho chtěla „pestřejší barvy, jak jsou písmenka v logu".
   Kontrast se tím ZLEPŠIL: grafit teď leží na plné barvě stupně
   (korál 6.05:1 · mandarinka 4.98:1 · limetka 6.06:1 · blankyt 6.7:1),
   ne na fotce prosvítající skrz překryv. */
.questo-age-bar__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--questo-grafit);
  background-color: var(--age-solid);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Fotka — poměr stran drží řadu karet zarovnanou i při různě dlouhých
   popiscích. Při najetí se lehce přiblíží; ořez řeší overflow na kartě. */
.questo-age-bar__photo {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

.questo-age-bar__link:hover .questo-age-bar__photo,
.questo-age-bar__link:focus-visible .questo-age-bar__photo {
  transform: scale(1.06);
}

/* Barevný pruh s textem. Vyplňuje zbytek karty, aby všechny čtyři končily
   ve stejné výšce i při zalomení popisku na dva řádky. */
.questo-age-bar__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px 18px;
  background: var(--age-solid);
}

/* Korálová (DS 2–3) */
.questo-age-bar__link {
  --age-solid: var(--questo-koral);
}
.questo-age-bar__link .questo-age-bar__photo {
  background-image: url("../img/age-2-3.jpg");
  background-image: image-set(url("../img/age-2-3.webp") type("image/webp"), url("../img/age-2-3.jpg") type("image/jpeg"));
}

/* Mandarinka (MŠ 3–6) */
.questo-age-bar__link--mandarin {
  --age-solid: var(--questo-mandarinka);
}
.questo-age-bar__link--mandarin .questo-age-bar__photo {
  background-image: url("../img/age-3-6.jpg");
  background-image: image-set(url("../img/age-3-6.webp") type("image/webp"), url("../img/age-3-6.jpg") type("image/jpeg"));
}

/* Limetka (ZŠ 6–15) */
.questo-age-bar__link--lime {
  --age-solid: var(--questo-limetka);
}
.questo-age-bar__link--lime .questo-age-bar__photo {
  background-image: url("../img/age-6-15.jpg");
  background-image: image-set(url("../img/age-6-15.webp") type("image/webp"), url("../img/age-6-15.jpg") type("image/jpeg"));
}

/* Blankytná (volnočasové aktivity) — čtvrtá dlaždice. Fotka je snímek z promo
   videa školy (děti u 3D tiskárny), takže sedí do stejné vizuální řady jako
   ostatní tři a nemusí se na ni čekat od klienta. */
.questo-age-bar__link--sky {
  --age-solid: var(--questo-blankyt);
}
.questo-age-bar__link--sky .questo-age-bar__photo {
  background-image: url("../img/age-volnocas.jpg");
  background-image: image-set(url("../img/age-volnocas.webp") type("image/webp"), url("../img/age-volnocas.jpg") type("image/jpeg"));
}

.questo-age-bar__link:hover,
.questo-age-bar__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  color: var(--questo-grafit);
}

.questo-age-bar__link:focus-visible {
  outline: 3px solid var(--primary-green-dark);
  outline-offset: 3px;
}

/* Věk = nadřazený řádek nad názvem stupně. Dřív to byla pilulka v plné barvě
   stupně, což na barevném pruhu splynulo — proto jen text.
   POZOR: velikosti jsou tu schválně natvrdo. Generovaný font-scale.css
   (písmo +15 %) tyhle třídy nezná, takže by nová komponenta zůstala
   v základní velikosti a působila v okolním textu drobně. */
.questo-age-bar__age {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--questo-grafit);
}

/* Název stupně = hlavní sdělení karty. */
.questo-age-bar__label {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--questo-grafit);
}

/* Se čtyřmi dlaždicemi jsou pod ~1100px karty moc úzké na dva řádky textu →
   dva sloupce, na mobilu jeden. */
@media (max-width: 1100px) {
  .questo-age-bar__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 767, ne 768: iPad na výšku má přesně 768 px a spadl by do mobilního
   jednosloupce, přestože se tam dva sloupce v pohodě vejdou. */
@media (max-width: 767px) {
  .questo-age-bar__list {
    grid-template-columns: 1fr;
  }

  /* Jeden sloupec = fotka přes celou šířku. Ve 4:3 by karta zabrala skoro
     celou obrazovku a rodič by musel scrollovat přes čtyři takové, proto
     je snímek na mobilu nižší. */
  .questo-age-bar__photo {
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   Proužek s CTA na přihlášku
   ========================================================================== */

.questo-enroll-strip {
  position: relative;
  background: var(--gray-50);
}

.questo-enroll-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.questo-enroll-strip__lead {
  flex: 1 1 380px;
  margin: 0;
  font-size: 17px;
}

.questo-enroll-strip__cta {
  flex-shrink: 0;
}

.questo-enroll-strip__details {
  position: relative;
  z-index: 1;
  margin-top: var(--space-4);
  max-width: 640px;
}

.questo-enroll-strip__details summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--questo-grafit);
  list-style: none;
}

.questo-enroll-strip__details summary::-webkit-details-marker {
  display: none;
}

.questo-enroll-strip__details summary::marker {
  content: '';
}

.questo-enroll-strip__details summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--questo-grafit);
  font-family: var(--font-heading), system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.questo-enroll-strip__details[open] summary::before {
  content: '−';
}

.questo-enroll-strip__details summary:focus-visible {
  outline: 3px solid var(--primary-green-dark);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.questo-enroll-strip__details p {
  margin: var(--space-3) 0 0;
  padding-left: 30px;
  font-size: 15px;
}

@media (max-width: 480px) {
  .questo-enroll-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .questo-enroll-strip__cta {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Dekorace — matematické symboly + kapkové/listové tvary.

   Čistě CSS (pseudo-elementy ::before/::after) — žádné obrázky, žádné CDN.
   Matematické znaky jsou textový `content` s font-family fallbackem
   (var(--font-heading), system-ui, sans-serif), kapkové/listové tvary jsou
   klasické CSS "blob" tvary (asymetrický border-radius).

   Přístupnost: generovaný obsah pseudo-elementů NENÍ součástí stromu
   přístupnosti (na rozdíl od aria-hidden na reálném uzlu, který některé
   nástroje mohou za určitých okolností přesto expozovat) — silnější
   záruka než ruční aria-hidden. Navíc `pointer-events: none;` a nízké
   z-index/opacity, aby dekorace nikdy nepřekážela obsahu ani odkazům.
   ========================================================================== */

.questo-age-bar,
.questo-enroll-strip,
.hub-section {
  position: relative;
}

.questo-age-bar::before,
.questo-age-bar::after,
.questo-enroll-strip::before,
.hub-section::before {
  content: '';
  position: absolute;
  z-index: -1; /* vždy za obsahem sekce, i pod bílým pozadím karet */
  pointer-events: none;
}

/* Listový/kapkový tvar za věkovou lištou */
.questo-age-bar::before {
  top: -70px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: var(--info-blue);
  opacity: 0.14;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}

/* Matematický symbol „=" jako vodoznak — VYPNUTO 5. 8. 2026.
   Byl zapuštěný pod okraj sekce (bottom: -30px), takže ho nebylo vidět. Po
   zvětšení spodního odsazení začal vykukovat zpod dlaždic jako šedý pruh
   a působil jako grafická chyba. Brandové znaky nesou dekorace u okrajů
   stránky, kapka za lištou a „÷" v rozcestníku — tenhle byl navíc.
   Kdyby se měl vrátit, musí být celý ve volné ploše, ne pod kartami. */
.questo-age-bar::after {
  content: none;
  left: var(--space-6);
  bottom: var(--space-2);
  font-family: var(--font-heading), system-ui, sans-serif;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: var(--success-green);
  opacity: 0.1;
}

/* Kapkový tvar za CTA proužkem */
.questo-enroll-strip::before {
  right: 6%;
  bottom: -60px;
  width: 170px;
  height: 170px;
  background: var(--primary-green-light);
  opacity: 0.16;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
}

/* Matematický symbol „÷" jako tichý vodoznak v rozcestníku (existující
   parent sekce .hub-section — cílíme jen CSS, bez zásahu do front-page.php) */
.hub-section::before {
  content: '÷';
  top: -10px;
  right: 4%;
  font-family: var(--font-heading), system-ui, sans-serif;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-green-dark);
  opacity: 0.08;
}

/* Jemný, decentní pohyb — vypnuto při prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .questo-age-bar::before {
    animation: questo-blob-float 9s ease-in-out infinite;
  }

  .questo-enroll-strip::before {
    animation: questo-blob-float 11s ease-in-out infinite reverse;
  }
}

@keyframes questo-blob-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
}

/* Menší displeje = klidnější UI. Dekorace jsou čistě volitelné, tiché
   pozadí — jejich skrytí neubírá žádnou informaci ani funkčnost, jen
   snižuje riziko vizuálního přeplácání malé obrazovky. */
@media (max-width: 768px) {
  .questo-age-bar::before,
  .questo-age-bar::after,
  .questo-enroll-strip::before,
  .hub-section::before {
    display: none;
  }
}