/**
 * 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
   ========================================================================== */

.questo-age-bar {
  position: relative;
  padding-bottom: var(--space-4);
}

.questo-age-bar__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

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

.questo-age-bar__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--questo-grafit);
  background: var(--primary-light); /* Korálová — výchozí (DS) */
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mandarinka (MŠ) a Limetka (ZŠ) — grafit text má na obou i na výchozí
   Korálové kontrast 4.5:1+ (WCAG AA), ověřeno výpočtem (6.05 / 4.98 / 6.06). */
.questo-age-bar__link--mandarin {
  background: var(--primary-green-light);
}

.questo-age-bar__link--lime {
  background: var(--accent-yellow);
}

.questo-age-bar__link:hover,
.questo-age-bar__link:focus-visible {
  transform: translateY(-3px);
  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;
}

.questo-age-bar__symbol {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--white);
  font-family: var(--font-heading), system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.questo-age-bar__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
}

.questo-age-bar__age {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
}

.questo-age-bar__dot {
  opacity: 0.6;
}

.questo-age-bar__label {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .questo-age-bar__list {
    grid-template-columns: 1fr;
  }

  .questo-age-bar__text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .questo-age-bar__dot {
    display: none;
  }
}

/* ==========================================================================
   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 tichý vodoznak */
.questo-age-bar::after {
  content: '=';
  left: -10px;
  bottom: -30px;
  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;
  }
}