/* PP Kids story slider — playful, polished and mobile-first. */
body.page-home .hero-slider {
  --story-ink: #17364b;
  --story-coral: #ef8f72;
  --story-yellow: #f8c85e;
  --story-mint: #95c8b6;
  width: min(1260px, calc(100% - 2.5rem)) !important;
  height: clamp(470px, 41vw, 560px) !important;
  min-height: 0 !important;
  margin: 1.25rem auto 0 !important;
  border: 8px solid #fff !important;
  border-radius: 36px !important;
  background: #f8eee4 !important;
  box-shadow: 0 26px 70px rgba(23, 54, 75, .12) !important;
  isolation: isolate;
}
body.page-home .hero-slider::before,
body.page-home .hero-slider::after {
  content: "";
  position: absolute;
  z-index: 4;
  border-radius: 999px;
  pointer-events: none;
}
body.page-home .hero-slider::before {
  width: 84px;
  height: 84px;
  inset-inline-end: -30px;
  top: 38px;
  background: var(--story-yellow);
  opacity: .9;
}
body.page-home .hero-slider::after {
  width: 28px;
  height: 28px;
  inset-inline-end: 62px;
  top: 24px;
  background: var(--story-mint);
}
body.page-home .hero-slider .slide { --slide-accent: var(--story-coral); }
body.page-home .hero-slider .slide-story-2 { --slide-accent: #5f91b4; }
body.page-home .hero-slider .slide-story-3 { --slide-accent: #9879aa; }
body.page-home .hero-slider .slide-bg img {
  object-position: left center !important;
  filter: saturate(1.02) contrast(1.015);
}
body.page-home .hero-slider .slide-content .container {
  width: 100%;
  max-width: 1260px;
  padding-inline: clamp(2rem, 5vw, 4.75rem);
}
body.page-home .hero-slider .slide-inner {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  height: 100%;
  padding: 2rem 0 !important;
}
body.page-home .hero-slider .slide-text {
  position: relative;
  width: min(470px, 43%) !important;
  padding: 2.1rem 2.15rem 1.95rem !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 29px !important;
  background: rgba(255, 253, 249, .88) !important;
  box-shadow: 0 20px 55px rgba(23, 54, 75, .12) !important;
  color: var(--story-ink) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}
html[dir="rtl"] body.page-home .hero-slider .slide-text {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}
html[dir="ltr"] body.page-home .hero-slider .slide-text {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}
body.page-home .hero-slider .slide-text::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--slide-accent);
  box-shadow: 20px 0 0 var(--story-yellow), 40px 0 0 var(--story-mint);
}
[dir="rtl"] body.page-home .hero-slider .slide-text::before {
  box-shadow: -20px 0 0 var(--story-yellow), -40px 0 0 var(--story-mint);
}
body.page-home .hero-slider .slide-title {
  max-width: 12ch;
  margin: 0 0 .8rem !important;
  color: var(--story-ink) !important;
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em;
  text-shadow: none !important;
}
body.page-home .hero-slider .slide-desc {
  max-width: 40ch !important;
  margin: 0 0 1.35rem !important;
  color: #526a78 !important;
  font-size: .98rem !important;
  font-weight: 650;
  line-height: 1.85 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body.page-home .hero-slider .slide-actions { gap: .6rem !important; }
body.page-home .hero-slider .slide.active .reveal {
  opacity: 1 !important;
  transform: none !important;
}
body.page-home .hero-slider .slide-actions .btn-primary {
  min-height: 50px;
  padding: .8rem 1.25rem !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--story-ink) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(23,54,75,.18) !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
}
body.page-home .hero-slider .slide-actions .btn-primary:hover {
  transform: translateY(-2px) !important;
  background: #214c67 !important;
}
body.page-home .hero-slider .slider-btn {
  top: auto !important;
  bottom: 1rem !important;
  transform: none !important;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(23,54,75,.09);
  background: rgba(255,255,255,.86);
  color: var(--story-ink);
  box-shadow: 0 8px 24px rgba(23,54,75,.12);
  backdrop-filter: blur(8px);
}
body.page-home .hero-slider .slider-btn:hover {
  border-color: transparent;
  background: var(--story-ink);
  color: #fff;
}
body.page-home .hero-slider .slider-dots {
  display: flex !important;
  bottom: 1rem;
  gap: .42rem;
  padding: .42rem .55rem;
  border: 1px solid rgba(23,54,75,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 22px rgba(23,54,75,.09);
  backdrop-filter: blur(8px);
}
body.page-home .hero-slider .slider-dot {
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #bdc9cf !important;
}
body.page-home .hero-slider .slider-dot.active {
  width: 27px !important;
  min-width: 27px !important;
  border-radius: 999px !important;
  background: var(--story-coral) !important;
}
body.page-home .hero-slider .slider-dot::before,
body.page-home .hero-slider .slider-dot::after { display: none !important; }
body.page-home .hero-slider .slider-progress { height: 3px; background: transparent; }
body.page-home .hero-slider .slider-progress-bar { background: var(--story-coral); }

@media (max-width: 767px) {
  body.page-home .hero-slider {
    width: calc(100% - 1rem) !important;
    height: 510px !important;
    margin-top: .55rem !important;
    border-width: 5px !important;
    border-radius: 25px !important;
    background: #fffdf9 !important;
    box-shadow: 0 16px 42px rgba(23,54,75,.1) !important;
  }
  body.page-home .hero-slider::before { width: 58px; height: 58px; top: 12px; inset-inline-end: -22px; }
  body.page-home .hero-slider::after { width: 20px; height: 20px; top: 8px; inset-inline-end: 36px; }
  body.page-home .hero-slider .slide-bg { inset: 0 0 auto !important; height: 286px !important; }
  body.page-home .hero-slider .slide-bg img { object-position: 28% center !important; }
  body.page-home .hero-slider .slide-content {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  body.page-home .hero-slider .slide-content .container {
    width: 100%;
    padding: 0 !important;
  }
  body.page-home .hero-slider .slide-inner {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  body.page-home .hero-slider .slide-text {
    width: 100% !important;
    min-height: 224px;
    padding: 1.15rem 1.15rem 1.05rem !important;
    border: 0 !important;
    border-radius: 25px 25px 0 0 !important;
    background: #fffdf9 !important;
    box-shadow: 0 -12px 30px rgba(23,54,75,.06) !important;
    backdrop-filter: none !important;
    margin: 0 !important;
  }
  html[dir] body.page-home .hero-slider .slide-text {
    margin-inline: 0 !important;
  }
  body.page-home .hero-slider .slide-text::before {
    width: 8px;
    height: 8px;
    margin-bottom: .58rem;
    box-shadow: 15px 0 0 var(--story-yellow), 30px 0 0 var(--story-mint);
  }
  [dir="rtl"] body.page-home .hero-slider .slide-text::before {
    box-shadow: -15px 0 0 var(--story-yellow), -30px 0 0 var(--story-mint);
  }
  body.page-home .hero-slider .slide-title {
    max-width: none;
    margin-bottom: .42rem !important;
    font-size: 1.55rem !important;
    line-height: 1.16 !important;
  }
  body.page-home .hero-slider .slide-desc {
    display: -webkit-box !important;
    margin-bottom: .72rem !important;
    overflow: hidden;
    font-size: .78rem !important;
    line-height: 1.6 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body.page-home .hero-slider .slide-actions .btn-primary {
    min-height: 42px;
    padding: .62rem .86rem !important;
    border-radius: 12px !important;
    font-size: .74rem !important;
  }
  body.page-home .hero-slider .slider-btn {
    top: 142px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 40px;
    height: 40px;
  }
  body.page-home .hero-slider .slider-prev { inset-inline-start: .65rem; }
  body.page-home .hero-slider .slider-next { inset-inline-end: .65rem; }
  body.page-home .hero-slider .slider-dots {
    bottom: 211px;
    padding: .35rem .48rem;
  }
}

@media (max-width: 390px) {
  body.page-home .hero-slider { height: 490px !important; }
  body.page-home .hero-slider .slide-bg { height: 270px !important; }
  body.page-home .hero-slider .slide-text { min-height: 220px; }
  body.page-home .hero-slider .slider-btn { top: 134px !important; }
  body.page-home .hero-slider .slider-dots { bottom: 207px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .hero-slider .slide,
  body.page-home .hero-slider .slider-progress-bar { transition: none !important; }
}
