/* "Rodziny, dzień": daytime palette for the family pages (sport dla dzieci, aerial, Bobasy, sala zabaw, urodziny,
   półkolonie, przedszkola). Loaded after story.css on pages with body.story.day.
   The playroom and the classes happen in daylight, so the hero, the needs cards and the sign-up reel sit on warm cream
   instead of the night plum. TILO violet stays in the menu and the footer, so every page still reads as one brand.
   Nocowanki keep body.story without .day: a night out is the one place where the dark plum fits.
   Yellow and teal are fills for buttons and badges; text on cream uses the ink or the deep teal. */

body.day {
  --day-bg: #fff8ee;
  --day-soft: #fdeed6;
  --day-mint: #e6f5f2;
  --day-teal: #1fa59a;
  --day-teal-ink: #137a72;
  --day-coral: #ff7a5c;
  --day-coral-ink: #c9472b;
  --day-ink: #1f1430;
  --day-muted: #5f5668;
  --lilac: #fdeed6;
  --violet: #137a72;
}

/* Party pages swap teal for balloon colours: berry, gold and sky. */
body.day.party {
  --day-bg: #fff3f6;
  --day-soft: #ffe3ea;
  --day-mint: #fdebf1;
  --day-teal: #e8457a;
  --day-teal-ink: #b52a5c;
  --day-coral: #f4b740;
  --day-coral-ink: #b97a0b;
  --lilac: #ffe3ea;
  --violet: #b52a5c;
}

body.day .grad {
  background: linear-gradient(90deg, var(--day-teal-ink), var(--day-coral-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero */

body.day .fx-hero {
  background: var(--day-bg);
  color: var(--day-ink);
}

body.day .fx-wall {
  background: var(--day-bg);
}

body.day .fx-shade {
  background:
    linear-gradient(90deg, transparent 49.9%, #fff8ee66 50%, transparent 54%),
    radial-gradient(700px 480px at 6% 90%, #f6c94540, transparent 70%),
    radial-gradient(600px 420px at 40% 0%, #1fa59a24, transparent 70%);
}

body.day.party .fx-shade {
  background:
    linear-gradient(90deg, transparent 49.9%, #fff3f666 50%, transparent 54%),
    radial-gradient(700px 480px at 6% 90%, #f4b74040, transparent 70%),
    radial-gradient(600px 420px at 40% 0%, #e8457a24, transparent 70%);
}

body.day .fx-hero .lead,
body.day .fx-stats span {
  color: var(--day-muted);
}

body.day .fx-stats b {
  color: var(--day-ink);
}

body.day .fx-live {
  border-color: #1f14301f;
  background: #ffffffcc;
  color: var(--day-ink);
}

body.day .fx-dot {
  background: var(--day-teal);
  box-shadow: 0 0 0 0 #1fa59aaa;
  animation-name: day-pulse;
}

@keyframes day-pulse {
  70% {
    box-shadow: 0 0 0 10px #1fa59a00;
  }
  100% {
    box-shadow: 0 0 0 0 #1fa59a00;
  }
}

body.day .fx-hero .btn-ghost,
body.day .fx-cta .btn-ghost,
body.day .fx-moods .btn-ghost,
body.day .story-tool .btn-ghost {
  border-color: #1f143033;
  color: var(--day-ink);
}

body.day .fx-hero .btn-ghost:hover,
body.day .fx-cta .btn-ghost:hover {
  background: #1f14300d;
}

@media (max-width: 760px) {
  body.day .fx-shade,
  body.day.party .fx-shade {
    background:
      linear-gradient(0deg, var(--day-bg) calc(100% - 62vw), color-mix(in srgb, var(--day-bg) 85%, transparent) calc(100% - 62vw + 40px), transparent calc(100% - 40vw)),
      radial-gradient(500px 360px at 0% 100%, #f6c9452e, transparent 70%);
  }
}

/* Marquee under the hero: yellow into teal (berry into gold on party pages) */

body.day .fx-marquee {
  background: linear-gradient(90deg, #f6c945, #8fd6c9);
  color: var(--day-ink);
  box-shadow: 0 20px 60px #1fa59a26;
}

body.day.party .fx-marquee {
  background: linear-gradient(90deg, #f4b740, #f59ab5);
  box-shadow: 0 20px 60px #e8457a26;
}

/* Needs cards: the photos keep their dark fade so the white card text stays readable; the band around them is light. */

body.day .fx-moods {
  background: var(--day-soft);
  color: var(--day-ink);
}

body.day .fx-moods::before {
  background:
    radial-gradient(600px 400px at 90% 10%, #ffffff99, transparent 70%),
    radial-gradient(600px 400px at 0% 90%, #f6c94533, transparent 70%);
}

body.day .fx-moods .fx-head p,
body.day .fx-cta .fx-head p {
  color: var(--day-muted);
}

body.day .fx-mood {
  color: #fff;
}

body.day .fx-more {
  color: var(--day-teal-ink);
}

body.day .fx-ask {
  color: var(--day-coral-ink);
}

/* Sign-up reel with steps */

body.day .fx-cta {
  background: var(--day-mint);
  color: var(--day-ink);
}

body.day .fx-cta::before {
  background:
    radial-gradient(520px 520px at 22% 50%, #ffffffaa, transparent 70%),
    radial-gradient(600px 400px at 90% 0%, #f6c94533, transparent 70%);
}

body.day .fx-cta .fx-phone {
  border-color: #fff;
  box-shadow:
    0 0 0 1px #1f14301a,
    0 40px 90px -30px #1f143066;
}

body.day .fx-steps li {
  color: var(--day-muted);
}

body.day .fx-steps b {
  color: var(--day-ink);
}

body.day .fx-steps li::before {
  border-color: var(--day-teal);
  color: var(--day-teal-ink);
}

body.day .fx-fine {
  color: var(--day-muted);
}

/* Age finder and birthday countdown band */

body.day .story-tool {
  background: var(--day-soft);
  color: var(--day-ink);
}

/* Kickers on the light bands; the footer keeps the original yellow-pink headline on plum. */

body.day .fx-hero .kicker,
body.day .fx-moods .kicker,
body.day .fx-cta .kicker,
body.day .story-tool .kicker {
  color: var(--day-coral-ink);
}

body.day :is(.final, .pk-safe, .calc-section, .reviews, .pk-signup) .grad {
  background: linear-gradient(90deg, #f6d36b, #f2a2bf);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Birthday promo card and the in-page tabs under the hero */

body.day .promo {
  background: #ffffffb3;
  border-color: #1f14301f;
}

body.day .promo-title .ic,
body.day .promo-timer b {
  color: var(--day-teal-ink);
}

body.day .promo-timer,
body.day .promo-code {
  color: var(--day-muted);
}

body.day .promo-code b {
  color: var(--day-ink);
}

body.day .page-tabs {
  background: var(--day-bg);
  border-bottom-color: #1f143014;
}

body.day .page-tabs p {
  color: var(--day-muted);
}

body.day .page-tabs a {
  border-color: #1f143026;
  color: var(--day-ink);
}

body.day .page-tabs a:hover {
  border-color: var(--day-teal);
  color: var(--day-teal-ink);
}

/* Dark cards that stay dark on day pages keep light step text. */

body.day .pk-signup .fx-steps li {
  color: #ddd3ea;
}

body.day .pk-signup .fx-steps b {
  color: #fff;
}

body.day .pk-signup .fx-steps li::before {
  border-color: #f6d36b;
  color: #f6d36b;
}

/* Aerial: Wednesday 9:00 group for children on the second school shift (lessons from 11:30) */

.ae-shift-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 700;
  color: var(--day-teal-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ae-shift-link .ic {
  width: 16px;
  height: 16px;
}

.ae-morning {
  background: var(--day-mint);
  color: var(--day-ink);
}

.ae-morning-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.ae-morning .kicker {
  color: var(--day-coral-ink);
}

.ae-morning-lead {
  margin-top: 14px;
  color: var(--day-muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 62ch;
}

.ae-day {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ae-day li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  border-radius: 16px;
  background: #ffffffb3;
}

.ae-day time {
  font: 800 18px / 1.2 var(--display);
  color: var(--day-teal-ink);
}

.ae-day span {
  color: var(--day-muted);
}

.ae-day b {
  color: var(--day-ink);
}

.ae-morning-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ae-morning-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 600;
}

.ae-morning-points .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--day-teal-ink);
}

.ae-morning .hero-cta {
  margin-top: 24px;
}

.ae-morning .btn-ghost {
  border-color: #1f143033;
  color: var(--day-ink);
}

@media (max-width: 760px) {
  .ae-morning-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ae-morning .fx-phone {
    order: 2;
    max-width: 200px;
    margin: 0 auto;
  }
}

/* Price packs on phones: one swipeable row instead of three or four full-height cards stacked (urodziny, sport, aerial). */

@media (max-width: 640px) {
  body.day .packs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 6px 16px 14px;
    scrollbar-width: none;
  }

  body.day .packs::-webkit-scrollbar {
    display: none;
  }

  body.day .packs > .pack {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }

  /* Decoration and catering photos on /urodziny: a swipeable strip, the full photo opens on tap */

  body.day .catering .gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  body.day .catering .gallery::-webkit-scrollbar {
    display: none;
  }

  body.day .catering .gallery > .photo {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

/* Sala zabaw photos: a full 3 × 2 grid on desktop, a swipeable strip on phones */

body.day .play-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.day .play-photos .photo img {
  aspect-ratio: 4 / 3;
  height: 100%;
}

@media (max-width: 640px) {
  body.day .play-photos {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  body.day .play-photos::-webkit-scrollbar {
    display: none;
  }

  body.day .play-photos > .photo {
    flex: 0 0 75%;
  }
}