/* Family service pages (sport dla dzieci, sala zabaw, urodziny, półkolonie) built from the /fitness blocks in fitness.css.
   body.story swaps the neon night palette for the warm TILO colours: deep plum, sunny yellow and candy pink. */

body.story .fx-shade {
  background:
    linear-gradient(90deg, transparent 49.9%, #1f1430b3 50%, transparent 56%),
    linear-gradient(0deg, #1f1430 0%, transparent 16%),
    radial-gradient(700px 480px at 6% 90%, #f6d36b2b, transparent 70%),
    radial-gradient(600px 420px at 40% 0%, #f2a2bf2b, transparent 70%);
}

@media (max-width: 760px) {
  body.story .fx-shade {
    background:
      linear-gradient(0deg, #1f1430 calc(100% - 62vw), #1f1430d9 calc(100% - 62vw + 40px), transparent calc(100% - 40vw)),
      radial-gradient(500px 360px at 0% 100%, #f6d36b2b, transparent 70%);
  }
}

body.story .fx-live {
  background: #1f143099;
}

body.story .fx-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 0 #f6d36baa;
  animation-name: story-pulse;
}

@keyframes story-pulse {
  70% {
    box-shadow: 0 0 0 10px #f6d36b00;
  }
  100% {
    box-shadow: 0 0 0 0 #f6d36b00;
  }
}

body.story .fx-stats span,
body.story .fx-head p,
body.story .fx-mood p,
body.story .fx-steps li {
  color: var(--lilac);
}

body.story .fx-marquee {
  background: linear-gradient(90deg, var(--yellow), var(--pink));
  color: var(--ink);
  box-shadow: 0 20px 60px #f6d36b40;
}

body.story .fx-track span:nth-child(even) {
  -webkit-text-stroke-color: var(--ink);
}

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

body.story .fx-mood::after {
  background: linear-gradient(0deg, #1f1430f2 0%, #1f1430b3 34%, transparent 62%);
}

body.story .fx-mood .fx-tag {
  color: var(--ink);
}

body.story .fx-why .fx-head p,
body.story .fx-reason p {
  color: var(--muted);
}

body.story .fx-phone {
  box-shadow: 0 30px 70px -30px #7d5ea399;
}

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

body.story .fx-cta .fx-phone {
  border-color: var(--ink-2);
  box-shadow:
    0 0 0 1px #f6d36b66,
    0 40px 90px -30px #f6d36b99;
}

body.story .fx-sound {
  background: #1f1430cc;
}

body.story .fx-sound[aria-pressed='true'] {
  background: var(--yellow);
  color: var(--ink);
}

body.story .fx-steps li::before {
  border-color: var(--yellow);
  color: var(--yellow);
}

body.story .fx-fine {
  color: #bfb3cf;
}

/* A parent's question opens each block: "Czego szukasz?" */

.fx-ask {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--yellow);
  font: 700 15px/1.3 var(--display);
}

/* Age finder and countdown moved under the hero keep their card look on the dark band */

.story-tool {
  background: var(--ink);
  color: #fff;
  padding-block: 70px 30px;
}

.story-tool .countdown {
  max-width: 760px;
  margin-inline: auto;
}

/* Bobasy price cards: first visit, 4 weeks (highlighted), single entry */

.bb-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.bb-price {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
}

.bb-price b {
  font: 800 44px/1 var(--display);
}

.bb-price span {
  color: var(--muted);
}

.bb-price .btn {
  margin-top: 8px;
}

.bb-price-label {
  color: var(--lilac);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-price-main {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 30px 60px -30px #1f143099;
}

.bb-price-main span {
  color: #cfc4de;
}

.bb-price-main .bb-price-label {
  color: var(--yellow);
}

.bb-price-main .btn-dark {
  background: var(--yellow);
  color: var(--ink);
}

@media (max-width: 760px) {
  .bb-prices {
    grid-template-columns: 1fr;
  }
}