/*
 * Paginile de program (/programs/{slug}) — și prima pagină, care le primește din layouts/base.twig.
 * În original secțiunile erau animate la scroll (GSAP); aici sunt așezate static.
 */

.program { display: block; }

/* ---------------------------------------------------------------- caruselul de sus */
.program-hero { z-index: 31; } /* cartea roșie iese peste secțiunea serviciilor */
/* discul cu cele 4 lumi: centrat orizontal, puțin ridicat (ca în original) */
.program-hero-disc { transform: translate(-50%, -8.95%); }
.program-hero-wheel { transition: transform 1.4s var(--ease-out); }
.program-hero-world { transform-origin: center bottom; opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s .7s; }
/* se vede doar lumea activă (celelalte sunt pe sferturile ascunse ale discului) */
.program-hero-world.is-active { z-index: 10; opacity: 1; visibility: visible; transition: opacity .7s .3s, visibility 0s; }
/* balonul din lumea „adolescenți” (în original era tras cu mouse-ul) */
.program-hero-balloon { left: 63.9%; top: 39.05%; transform: translate(-50%, -50%) rotate(0.2deg); }
.program-hero-cloud { bottom: 19.5rem; }

/* cartea roșie: pe prima pagină sunt 4 suprapuse, se vede doar cea activă */
/* centrul cărții cade pe marginea de jos a ecranului, ca în original */
.program-hero-card { top: 50svh; }
.program-hero-slide { opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .5s, transform .6s var(--ease-out), visibility 0s .6s; }
.program-hero-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .25s, transform .6s var(--ease-out) .25s, visibility 0s; }

/* ---------------------------------------------------------------- serviciile (cărțile) */
.program-services { padding: 18rem 3.125rem 12rem; }
.program-services-grid {
  display: grid; grid-template-columns: repeat(2, max-content); justify-content: center;
  gap: 4rem 6rem;
}
.program-service { transition: opacity .8s var(--ease-out), transform .5s var(--ease-back); }
/* decalajul pe verticală e cu top, nu în transform: altfel hover-ul anula translateY, cartea urca de sub cursor
   și pierdea hover-ul, apoi cobora înapoi sub cursor — pâlpâia la marginea de jos */
.program-service { position: relative; }
.program-service:nth-child(1) { transform: rotate(-5deg); }
.program-service:nth-child(2) { transform: rotate(4deg); top: 4rem; }
.program-service:nth-child(3) { transform: rotate(3deg); }
.program-service:nth-child(4) { transform: rotate(-6deg); top: 4rem; }
.program-service:hover { transform: rotate(0deg) scale(1.03); }
/* iconițele animate sunt mărite (svg-scale-up-*) și pot ieși peste text: textul rămâne deasupra */
.program-service ._program-service-card-text_j4aeg_2 { position: relative; z-index: 1; }

.program-services-cloud-1 { top: 18rem; right: -3.5625rem; }
.program-services-cloud-2 { top: 50rem; left: -10rem; }
.program-services-cloud-3 { top: 88rem; left: 10.0625rem; }
.program-services-cloud-4 { bottom: 6rem; right: 10.5625rem; }
/* mobil: o singură coloană (două cărți de ~21rem nu încap în ~23rem), fără decalajul pe verticală */
@media (max-width: 1024px) {
  .program-services { padding: 14rem 1.25rem 6rem; }
  .program-services-grid { grid-template-columns: max-content; gap: 2.5rem; }
  .program-service:nth-child(2) { transform: rotate(3deg); top: 0; }
  .program-service:nth-child(4) { transform: rotate(-4deg); top: 0; }
  .program-services-cloud-2 { top: 40rem; }
  .program-services-cloud-3 { top: 70rem; left: auto; right: -2rem; }
  /* norul de deasupra frazei mari ar cădea peste ultima carte */
  .program-statement-cloud { top: -4rem; }
}

/* ---------------------------------------------------------------- fraza mare */
.program-statement { padding-top: 14rem; }
/* al doilea nor stătea în spatele cuvintelor mari (scoase); acum urcă lângă frază, iar pe mobil ar acoperi textul */
.program-statement-cloud-2 { top: 0; }
@media (max-width: 1024px) { .program-statement-cloud-2 { display: none; } }

/* ---------------------------------------------------------------- butoane colorate după program */
/* în original fundalul era un SVG (pastilă care se transformă în inimă); culorile: CSS-ul compilat */
._background-0-to-3_k8pjy_2 .cta-program,
._background-3-to-18_k8pjy_2 .cta-program { background: var(--color-yellow); }
._background-18-to-65_k8pjy_2 .cta-program { background: var(--color-pink); }
._background-65-and-plus_k8pjy_2 .cta-program { background: var(--color-red-dark); }
._program-next-0_11ii3_2 .cta-program { background: var(--color-red); }
._program-next-1_11ii3_2 .cta-program { background: var(--color-green-dark); }
._program-next-2_11ii3_2 .cta-program,
._program-next-3_11ii3_2 .cta-program { background: var(--color-blue-dark, #314c95); }

/* ---------------------------------------------------------------- pașii */
.program-step-desc { min-width: 0; }
.program-step .program-step-icon { flex-shrink: 0; }

/* ---------------------------------------------------------------- „Următorul pas” */
/* în original norii apăreau crescând (GSAP); aici rămân mai mici, ca să nu acopere textul alb */
.program-next-cloud { transform: scale(.6); transform-origin: left bottom; }