/**
 * MSBela – Universální Page Hero  v1.0.0
 *
 * Sdílená `.pageHero` komponenta pro generické stránky, single posty a archivy.
 * Specializované šablony (kontaktHero, proRodiceHero, skolkaHero) jsou nezávislé.
 *
 * Barvy (CSS modifier třídy):
 *   .pageHero--teal    – výchozí #1D8A7D → #26B5A5
 *   .pageHero--apricot – meruňková #D4700A → #F5A623
 *   .pageHero--sky     – modrá #2B6CB0 → #7EC8E3
 *   .pageHero--red     – červená #C62828 → #E84040
 *   .pageHero--yellow  – žlutá #A16207 → #FFD23F
 *
 * Závislosti: --ds-* a --space-* CSS custom properties z main.css :root.
 *
 * @package MSBela
 * @since   2.55.0
 */

/* ==========================================================================
   1. TOKENS – color palette per variant
   ========================================================================== */

.pageHero--teal {
  --pageHero-from:  #1D8A7D;
  --pageHero-to:    #26B5A5;
  --pageHero-angle: 135deg;
}

.pageHero--apricot {
  --pageHero-from:  #D4700A;
  --pageHero-to:    #F5A623;
  --pageHero-angle: 135deg;
}

.pageHero--sky {
  --pageHero-from:  #2B6CB0;
  --pageHero-to:    #7EC8E3;
  --pageHero-angle: 135deg;
}

.pageHero--red {
  --pageHero-from:  #C62828;
  --pageHero-to:    #E84040;
  --pageHero-angle: 135deg;
}

.pageHero--yellow {
  --pageHero-from:  #A16207;
  --pageHero-to:    #D4A017;
  --pageHero-angle: 135deg;
}

/* ==========================================================================
   2. SECTION – wrapper
   ========================================================================== */

.pageHero {
  background: linear-gradient(
    var(--pageHero-angle, 135deg),
    var(--pageHero-from, #1D8A7D) 0%,
    var(--pageHero-to,   #26B5A5) 100%
  );
  color: var(--ds-white, #fff);
  position: relative;
  overflow: hidden;

  /* Padding: kompenzuje .site-main padding-top (--space-4),
     plus vlastní breathing room nad textem. */
  margin-top: calc(-1 * var(--space-4, 1rem));
  padding-top: calc(var(--space-4, 1rem) + var(--space-4, 1rem));

  /* Spodní padding zvýšený o výšku wave separátoru (48px),
     aby obsah nebyl překrytý vlnou. */
  padding-bottom: calc(var(--space-12, 6rem) + 48px);
}

/* Kontejner – omezení šířky + boční padding */
.pageHero .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   3. BREADCRUMB – dark mode override
   ========================================================================== */

.pageHero .msbela-breadcrumb,
.pageHero .msbela-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0;
}

.pageHero .msbela-breadcrumb__link,
.pageHero .msbela-breadcrumb__item,
.pageHero .msbela-breadcrumb__item--current {
  color: rgba(255, 255, 255, 0.85);
}

.pageHero .msbela-breadcrumb__item + .msbela-breadcrumb__item::before {
  color: rgba(255, 255, 255, 0.5);
}

.pageHero .msbela-breadcrumb__link {
  color: rgba(255, 255, 255, 0.85);
}

.pageHero .msbela-breadcrumb__link:hover {
  color: var(--ds-white, #fff);
}

.pageHero .msbela-breadcrumb__link:focus-visible {
  outline-color: var(--ds-white, #fff);
}

/* ==========================================================================
   4. TYPOGRAPHY – title + subtitle
   ========================================================================== */

.pageHero__title {
  font-family: var(--font-display, 'Fredoka One', cursive);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 400;
  color: var(--ds-white, #fff);
  margin: var(--space-2, 0.5rem) 0 var(--space-2, 0.5rem);
  line-height: 1.15;
}

.pageHero__subtitle {
  font-size: 1.05rem;
  opacity: 0.88;
  max-width: 540px;
  margin: 0 0 var(--space-5, 1.5rem);
  line-height: 1.55;
}

/* ==========================================================================
   5. CTA PILLS – action nav
   ========================================================================== */

.pageHero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
}

.pageHero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full, 9999px);
  color: var(--ds-white, #fff);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.pageHero__pill:hover,
.pageHero__pill:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  color: var(--ds-white, #fff);
  text-decoration: none;
}

.pageHero__pill:focus-visible {
  outline: 2px solid var(--ds-white, #fff);
  outline-offset: 2px;
}

/* ==========================================================================
   6. WAVE SEPARATOR – dekorativní vlna na spodu hero
   ========================================================================== */

.pageHero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--ds-cream, #FFF8F0);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

/* ==========================================================================
   7. RESPONSIVE – mobile
   ========================================================================== */

@media (max-width: 639px) {
  .pageHero {
    padding-top: calc(var(--space-4, 1rem) + var(--space-3, 0.75rem));
    padding-bottom: calc(var(--space-10, 4rem) + 48px);
  }

  .pageHero__title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  .pageHero__subtitle {
    font-size: 0.95rem;
  }

  .pageHero__actions {
    gap: var(--space-2, 0.5rem);
  }

  .pageHero__pill {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  .pageHero__wave {
    height: 36px;
  }
}

/* ==========================================================================
   9. CONTEXT – obsah za hero v .site-main
   ========================================================================== */

/*
 * Stránky s pageHero nemají třídu container na .site-main (hero musí být
 * full-width). Obsah je zabalen v .container uvnitř .site-main.
 * Přidáme horní padding aby nebyl obsah přímo na vlně.
 */
.site-main > .container:first-of-type,
.site-main > .container {
  padding-top: var(--space-8, 3rem);
}


@media print {
  .pageHero {
    background: none !important;
    color: #000 !important;
    padding: 1rem 0 !important;
    margin-top: 0 !important;
  }

  .pageHero .msbela-breadcrumb,
  .pageHero .msbela-breadcrumb a,
  .pageHero .msbela-breadcrumb__link,
  .pageHero .msbela-breadcrumb__item,
  .pageHero .msbela-breadcrumb__item--current {
    color: #000 !important;
  }

  .pageHero__title { color: #000 !important; }
  .pageHero__subtitle { color: #333 !important; }
  .pageHero__pill { border: 1px solid #000 !important; color: #000 !important; background: none !important; }
  .pageHero__wave { display: none !important; }
}