/* ═══════════════════════════════════════════════════════════════════════
   BOKA ACADEMY · stranica PROGRAMI
   Nadogradnja na site.css. Header, footer i talasi ostaju nepromijenjeni.
   Ritam i kompozicija po referenci; tipografija ostaje Chillax, uz
   Georgia Italic kao povremeni akcenat.
   ═══════════════════════════════════════════════════════════════════════ */

.programi-rich{scroll-behavior:smooth}
.programi-rich section[id]{scroll-margin-top:104px}

:root{
  --akc:Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* jedinstven vertikalni ritam stranice */
  --sp-sec:clamp(66px, 7.4vw, 104px);   /* razmak sekcije */
  --sp-blk:clamp(34px, 4.2vw, 62px);    /* razmak izmedju blokova */
  --sp-el:clamp(16px, 1.6vw, 22px);     /* razmak elemenata */
}

/* Georgia italic - samo kao akcenat u naslovu ili kratkoj napomeni */
.ak{font-family:var(--akc); font-style:italic; font-weight:400; letter-spacing:-.005em}
h1 .ak, h2 .ak{letter-spacing:-.012em}

/* ── zajednički ritam sekcija ─────────────────────────────────────────── */
.psec > .wrap{padding-top:var(--sp-sec); padding-bottom:var(--sp-sec)}
.psec-head{max-width:64ch}
.psec h2{font-size:clamp(1.95rem,3.5vw,2.9rem); line-height:1.08; margin-top:14px}
.psec .lede{margin-top:var(--sp-el); font-size:clamp(1.02rem,1.25vw,1.2rem); line-height:1.6}
.psec .lede b{color:var(--noc); font-weight:600}
.b-night .psec .lede b{color:var(--deep-fg)}
.pcopy{margin-top:var(--sp-el); font-size:.95rem; line-height:1.78; color:var(--kamen); max-width:58ch}
.b-night .pcopy{color:var(--deep-muted)}

/* broj sekcije + nadnaslov, poravnati po osnovnoj liniji */
.kicker{display:flex; gap:14px; align-items:center}
.kicker .num{flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--rub); color:var(--zlato);
  font-family:var(--display); font-weight:700; font-size:.82rem}
.b-night .kicker .num{border-color:var(--deep-line); color:var(--sunce)}
.kicker .eyebrow{margin:0}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.rich-hero{padding:clamp(124px,14.5vh,178px) 0 clamp(64px,8vh,104px)}
.rich-hero .phero-in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4.6vw,72px); align-items:center}
.rich-hero .crumbs{margin-bottom:20px}
.rich-hero h1{max-width:15ch; font-size:clamp(2.15rem,4.7vw,3.5rem); line-height:1.04; margin-top:14px}
.rich-hero .lede{margin-top:20px; max-width:44ch; font-size:clamp(1rem,1.2vw,1.14rem)}
.rich-hero .phero-cta{margin-top:30px}
.hero-fine{margin-top:20px; font-size:.78rem; color:var(--kamen)}

/* kolaž fotografija u heroju */
/* ── KOLAŽ U HEROJU: djeca iskaču iz krugova ───────────────────────────
   Kadrove priprema build/lica.py: glava stoji na 12% visine kadra, dno se
   meko utapa, i dijete stane unutar kruga po širini. Zato se ovdje ništa ne
   isijeca - maska je već u samoj slici. Vrijednosti --disk i --disk-top ulaze
   u taj proračun, pa se mijenjaju na oba mjesta ili ni na jednom. */
.pcol{position:relative; width:100%; max-width:520px; aspect-ratio:1/.94;
  margin-inline:auto; --disk:76%; --disk-top:24%}

.pcol-orbit{position:absolute; inset:3% 4% 3% -4%; z-index:0;
  color:rgba(23,50,46,.28); animation:pcolOrbit 90s linear infinite}
.pcol-orbit svg{width:100%; height:100%; display:block}
@keyframes pcolOrbit{to{transform:rotate(360deg)}}

.pbub{position:absolute; z-index:2; width:var(--w); aspect-ratio:1;
  transition:translate .6s var(--ease);
  animation:pbubUlaz .8s var(--zad) var(--ease) both}
@keyframes pbubUlaz{from{opacity:0; transform:translateY(22px) scale(.9)} to{opacity:1; transform:none}}

/* krug iza djeteta */
.pbub::before{content:""; position:absolute; left:50%; top:var(--disk-top);
  translate:-50% 0; width:var(--disk); aspect-ratio:1; border-radius:50%;
  background:var(--c); box-shadow:0 22px 40px -24px rgba(4,18,15,.38)}
.pbub img{position:relative; width:100%; height:auto; display:block;
  filter:drop-shadow(0 10px 12px rgba(4,18,15,.22))}

/* njihanje, svaki svojim ritmom */
.pbub::before, .pbub img{animation:pbubNjih var(--tempo) var(--zad) ease-in-out infinite}
@keyframes pbubNjih{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}

.pbub-1{--w:54%; --zad:60ms;  --tempo:7.2s; left:3%;  top:5%}
.pbub-2{--w:39%; --zad:220ms; --tempo:8.6s; right:1%; top:24%}
.pbub-3{--w:36%; --zad:380ms; --tempo:6.4s; left:20%; bottom:1%}

/* na hover se grupa malo razmakne */
.pcol:hover .pbub-1{translate:-7px -6px}
.pcol:hover .pbub-2{translate:8px -4px}
.pcol:hover .pbub-3{translate:-4px 9px}

.pcol-sun{position:absolute; right:-2%; top:-6%; z-index:1; width:clamp(64px,7vw,96px)}
.pcol-sun img{width:100%; height:auto; display:block; animation:pcolSunce 46s linear infinite}
@keyframes pcolSunce{to{transform:rotate(360deg)}}

.pcol .badge-note{position:absolute; left:-4%; bottom:12%; z-index:4; transform:rotate(-5deg);
  padding:13px 19px; border-radius:18px; background:var(--sunce); color:var(--noc);
  font-family:var(--display); font-weight:700; font-size:.86rem; line-height:1.4;
  box-shadow:0 10px 26px rgba(4,18,15,.35)}
.pcol .badge-note em{display:block; font-family:var(--akc); font-style:italic; font-weight:400}

@media (max-width:1040px){
  .pcol{max-width:430px}
  .pcol .badge-note{font-size:.8rem; padding:11px 16px}
}
@media (max-width:620px){
  .pcol{max-width:340px}
  .pcol .badge-note{left:-5%; bottom:10%; font-size:.76rem; padding:10px 14px}
  .pcol-sun{width:56px}
}
@media (prefers-reduced-motion:reduce){
  .pcol *, .pcol *::before{animation:none !important}
  .pcol:hover .pbub-1, .pcol:hover .pbub-2, .pcol:hover .pbub-3{translate:none}
}

/* ── TRAKA PROGRAMA (svijetla, odmah ispod heroja) ────────────────────── */
.pstrip{background:var(--pijesak)}
.pstrip > .wrap{padding-top:clamp(30px,3.4vw,46px); padding-bottom:clamp(30px,3.4vw,46px)}
.pstrip-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border:1px solid var(--linija); border-radius:var(--r-lg); overflow:hidden;
  background:var(--krecnjak); box-shadow:var(--shadow-1)}
.pcell{position:relative; display:grid; grid-template-rows:auto auto auto; gap:8px;
  padding:clamp(20px,2.2vw,30px); text-decoration:none; color:inherit; isolation:isolate;
  transition:background .4s var(--ease)}
.pcell + .pcell{border-left:1px solid var(--linija)}
.pcell:hover{background:var(--zaliv-soft)}
.pcell-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pcell-n{font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--kamen)}
.pcell-arw{width:26px; height:26px; color:var(--duboko); transition:transform .4s var(--ease)}
.pcell:hover .pcell-arw{transform:translate(4px,-4px)}
.pcell h3{font-size:clamp(1.05rem,1.5vw,1.32rem); line-height:1.22; color:var(--noc)}
.pcell .p{font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--zlato)}
.pcell .p small{font-weight:500; color:var(--kamen); font-size:.8rem}
.pcell::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:-1;
  background:var(--sunce); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease)}
.pcell:hover::after{transform:scaleX(1)}
.pcell:nth-child(2)::after{background:var(--zaliv)}
.pcell:nth-child(3)::after{background:var(--oleander)}

/* ── PROGRAM: tekst + klaster fotografija ─────────────────────────────── */
.pgrid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.4vw,70px); align-items:center}
.pgrid.rev > :first-child{order:2}

.pfig{position:relative; padding:0 0 46px}
.pfig-main{position:relative; margin:0; border-radius:var(--r-xl); overflow:hidden;
  background:var(--deep-card); box-shadow:0 30px 56px -34px rgba(4,18,15,.7)}
.pfig-main img{display:block; width:100%; height:clamp(340px,40vw,470px); object-fit:cover;
  object-position:64% 26%; transition:transform 1.5s cubic-bezier(.16,.7,.2,1)}
.pfig:hover .pfig-main img{transform:scale(1.05)}
.pfig-main figcaption{position:absolute; inset:auto 0 0; padding:64px 24px 22px;
  background:linear-gradient(transparent, rgba(16,47,40,.94));
  color:var(--deep-fg); font-family:var(--display); font-weight:600; font-size:.9rem;
  display:flex; gap:9px; align-items:center; padding-right:44%}
.dot-s{flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--sunce)}

/* rukom pisana napomena uz fotografiju */
.hand-note{position:absolute; z-index:3; right:-6px; bottom:0; max-width:215px;
  padding:16px 22px; border-radius:18px; transform:rotate(3.5deg);
  background:var(--sunce-soft); border:1px solid rgba(233,180,76,.45); color:var(--zlato);
  font-family:var(--akc); font-style:italic; font-size:.92rem; line-height:1.5;
  box-shadow:var(--shadow-1)}
.pfig-ico{position:absolute; z-index:3; top:20px; left:-16px; padding:12px; line-height:0;
  border-radius:20px; background:var(--zaliv); color:var(--noc);
  border:5px solid var(--pijesak); transform:rotate(-9deg)}
.pfig-ico svg{width:34px; height:34px}

/* brojke uz tekst */
.pfacts{display:flex; gap:26px; margin-top:var(--sp-blk)}
.pfacts > div{display:flex; gap:13px; align-items:center}
.pfacts > div + div{padding-left:26px; border-left:1px solid var(--rub)}
.b-night .pfacts > div + div{border-color:var(--deep-line)}
.pfacts b{font-family:var(--display); font-weight:700; font-size:2.3rem; line-height:1; color:var(--duboko)}
.b-night .pfacts b{color:var(--sunce)}
.pfacts span{font-size:.76rem; line-height:1.45; color:var(--kamen)}
.b-night .pfacts span{color:var(--deep-muted)}

/* rasklapanje "a ako..." */
.qdrop{margin-top:var(--sp-blk); border-top:1px solid var(--linija); border-bottom:1px solid var(--linija)}
.qdrop summary{list-style:none; cursor:pointer; padding:15px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.92rem; font-weight:600; color:var(--noc)}
.qdrop summary::-webkit-details-marker{display:none}
.qdrop summary::after{content:"+"; font-family:var(--display); font-size:1.3rem; color:var(--duboko);
  transition:transform .35s var(--ease)}
.qdrop[open] summary::after{content:"−"; transform:rotate(180deg)}
.qdrop p{font-size:.88rem; line-height:1.75; color:var(--kamen); padding-bottom:16px; max-width:56ch}

/* ── PANEL: šta ulazi u cijenu ────────────────────────────────────────── */
.inclp{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,3vw,44px); margin-top:var(--sp-blk);
  background:var(--krecnjak); border:1px solid var(--linija); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,38px); box-shadow:var(--shadow-1)}
.inclp h3{margin-top:10px; font-size:1.3rem}
.inclp ul{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px;
  margin:20px 0 0; padding:0}
.inclp li{display:flex; gap:10px; font-size:.86rem; line-height:1.55; color:var(--kamen)}
.inclp li::before{content:"✓"; color:var(--duboko); font-weight:700; flex:0 0 auto}
.inclp .fine{margin-top:18px; font-size:.76rem; color:var(--kamen); line-height:1.6}
.inclp-price{display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding-left:clamp(20px,2.4vw,34px); border-left:1px solid var(--linija)}
.inclp-price > span{font-size:.78rem; color:var(--kamen)}
.inclp-price .num{font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1.1; color:var(--zlato)}
.inclp-price .num small{font-family:var(--body); font-weight:500; font-size:.82rem; color:var(--kamen)}
.inclp-price .btn{align-self:flex-start; margin-top:6px}
.inclp-price .after{font-family:var(--akc); font-style:italic; font-size:.84rem; color:var(--kamen)}

/* ── TAMNA TRAKA: boravak + edukativni centar ─────────────────────────── */
.duo{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.4vw,66px); align-items:start; margin-top:var(--sp-blk)}
.duo-card{position:relative; border-radius:var(--r-xl); overflow:hidden; margin:0;
  box-shadow:0 30px 56px -34px rgba(0,0,0,.8)}
.duo-card img{display:block; width:100%; height:clamp(330px,38vw,440px); object-fit:cover;
  object-position:60% 34%; transition:transform 1.5s cubic-bezier(.16,.7,.2,1)}
.duo-card:hover img{transform:scale(1.05)}
.duo-over{position:absolute; inset:auto 0 0; padding:74px 26px 26px;
  background:linear-gradient(transparent, rgba(6,26,22,.95))}
.duo-over h3{font-size:clamp(1.25rem,1.9vw,1.6rem); color:#FFFCF6}
.duo-over p{margin-top:6px; font-size:.86rem; color:var(--deep-muted)}
.duo-over .row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px}
.duo-over .num{font-family:var(--display); font-weight:700; font-size:1.7rem; color:var(--sunce)}
.duo-over .num small{font-family:var(--body); font-weight:500; font-size:.76rem; color:var(--deep-muted)}
.duo-go{flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--sunce); color:var(--noc); transition:transform .4s var(--ease)}
.duo-go:hover{transform:translateX(4px)}
.duo-go svg{width:20px; height:20px}

/* Djevojčica u praznom uglu kolone Edukativnog centra. Isti jezik kao kolaž
   u heroju: dijete iskače iz kruga. Ispod 900px se sklanja - tamo kolone
   postaju jedna ispod druge i ugao koji je popunjavala više ne postoji. */
#centar{position:relative}
.cdec{position:absolute; right:-2%; bottom:-86px; width:clamp(116px,24%,160px); z-index:2;
  animation:cdecNjih 8s ease-in-out infinite}
.cdec::before{content:""; position:absolute; left:50%; top:22%; translate:-50% 0;
  width:86%; aspect-ratio:1; border-radius:50%; background:var(--zaliv);
  box-shadow:0 24px 42px -20px rgba(4,18,15,.75)}
.cdec img{position:relative; width:100%; height:auto; display:block; max-width:none;
  filter:drop-shadow(0 10px 12px rgba(4,18,15,.35))}
@keyframes cdecNjih{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
/* Ispod 1040px .duo postaje jedna kolona, kolona se rasteže preko cijele
   širine i ugla koji je djevojčica popunjavala više nema. */
@media (max-width:1040px){ .cdec{display:none} }
/* Posljednji red teksta ne smije da uđe pod nju kad je kolona uža. */
@media (min-width:1041px){ #centar > .pcopy:last-of-type{padding-right:150px} }
@media (prefers-reduced-motion:reduce){ .cdec{animation:none} }

/* spisak predmeta - dva stupca, linija raste na hover */
.subjects{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(20px,2.6vw,40px); margin-top:26px}
.subj{position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 2px; color:var(--deep-fg); text-decoration:none;
  border-bottom:1px solid var(--deep-line); min-height:56px}
.subj span{font-family:var(--display); font-weight:600; font-size:1rem}
.subj svg{width:19px; height:19px; color:var(--zaliv); transition:transform .4s var(--ease)}
.subj::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--sunce); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease)}
.subj:hover::after{transform:scaleX(1)}
.subj:hover svg{transform:translate(4px,-4px); color:var(--sunce)}
.subj:hover span{color:#FFFCF6}

/* popodnevna linija */
.aline{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  margin-top:var(--sp-blk); padding-top:24px; border-top:1px solid var(--deep-line)}
.aline > div{position:relative; padding-left:19px}
.aline > div::before{content:""; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-radius:50%; background:var(--sunce)}
.aline span{display:block; font-size:.72rem; color:var(--deep-muted); margin-bottom:6px}
.aline b{font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--deep-fg)}

/* ── ZAVRŠNI POZIV ───────────────────────────────────────────────────── */
.meet > .wrap{padding-top:var(--sp-sec); padding-bottom:var(--sp-sec)}
.meet-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,3.4vw,54px);
  align-items:center}
.meet h2{font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; max-width:16ch}
.meet p{margin-top:14px; font-size:1rem; color:var(--kamen); max-width:46ch}
.meet .side{position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:20px; padding-top:6px}
.meet .side .hand{position:static; white-space:normal;
  font-family:var(--akc); font-style:italic; font-size:.95rem; color:var(--kamen);
  transform:rotate(-4deg); text-align:right; line-height:1.5}

/* ── MASKIRANI ULAZ (isti jezik kao kartice na naslovnoj) ─────────────── */
/* Okidac je .mkhost: isjecen element clip-path-om ne "vidi" ga
   IntersectionObserver, pa maska nikad ne bi krenula. */
.js .mkhost .mk{clip-path:inset(0 100% 0 0 round 26px); opacity:.001;
  transition:clip-path 1.05s cubic-bezier(.2,.82,.24,1) var(--d,0ms),
             opacity .5s var(--ease) var(--d,0ms)}
.js .mkhost .mk.from-r{clip-path:inset(0 0 0 100% round 26px)}
.js .mkhost .mk.from-b{clip-path:inset(100% 0 0 0 round 26px)}
.js .mkhost.in .mk{clip-path:inset(0 0 0 0 round 26px); opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .mkhost .mk, .js .mkhost.in .mk{clip-path:none; opacity:1; transition:none}
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .pgrid, .duo{grid-template-columns:1fr; gap:var(--sp-blk)}
  .pgrid.rev > :first-child{order:0}
  .inclp{grid-template-columns:1fr}
  .inclp-price{border-left:0; border-top:1px solid var(--linija); padding-left:0; padding-top:22px}
  .rich-hero .phero-in{grid-template-columns:1fr; gap:var(--sp-blk)}
  .collage{max-width:440px}
  .aline{grid-template-columns:1fr 1fr; gap:26px 20px}
}
@media (max-width:720px){
  .pstrip-grid{grid-template-columns:1fr}
  .pcell + .pcell{border-left:0; border-top:1px solid var(--linija)}
  .subjects{grid-template-columns:1fr}
  .inclp ul{grid-template-columns:1fr}
  .pfacts{gap:18px}
  .pfacts > div + div{padding-left:18px}
  .pfacts b{font-size:2rem}
  .hand-note{right:0; max-width:190px; font-size:.84rem; padding:13px 17px}
  .pfig-ico{left:-4px}
  .meet-in{grid-template-columns:1fr}
  .meet .side{align-items:flex-start}
  .meet .side .hand{text-align:left}
  .collage .sun{width:56px}
  .collage .badge-note{font-size:.78rem; padding:11px 15px}
}

/* ═══════════════════════════════════════════════════════════════════════
   RUNDA 2 - izmjene po komentarima
   ═══════════════════════════════════════════════════════════════════════ */

/* ── dugmad u heroju: primarno u kontri, sekundarno sa talasom ────────── */
.phero .btn-primary{background:var(--sunce); color:#17322E;
  box-shadow:0 4px 0 rgba(4,18,15,.5)}
.phero .btn-primary:hover{box-shadow:0 6px 0 rgba(4,18,15,.5)}
.phero .btn-primary .arw{color:#17322E}

.phero .btn-ghost{position:relative; color:var(--noc); text-decoration:none; padding:15px 6px}
.phero .btn-ghost::after{content:""; position:absolute; left:4px; right:4px; bottom:7px; height:5px;
  background-repeat:repeat-x; background-size:18px 5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='5' viewBox='0 0 18 5'%3E%3Cpath d='M0 3 C2.4 0.4 4 0.4 6.4 3 S11 5.6 13.4 3 S18 0.4 18 3' fill='none' stroke='%23E9B44C' stroke-width='1.6'/%3E%3C/svg%3E");
  opacity:0; transform:translateY(4px);
  transition:opacity .28s, transform .3s var(--ease)}
.phero .btn-ghost:hover::after, .phero .btn-ghost:focus-visible::after{
  opacity:1; transform:none; animation:tide 1.1s linear infinite}

/* ── traka programa: bez brojeva, čitljivija cijena ──────────────────── */
.pcell-top{justify-content:flex-end}
.pcell .p{color:var(--duboko); font-size:1.08rem}
.pcell .p small{color:var(--kamen)}

/* ── ukras umjesto broja sekcije: nagnuta pilula ─────────────────────── */
.tagpill{display:inline-flex; align-items:center; gap:10px; padding:9px 19px; border-radius:99px;
  background:var(--krecnjak); border:1.5px solid var(--linija); color:var(--noc);
  font-family:var(--display); font-weight:700; font-size:.76rem; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.2;
  box-shadow:0 8px 20px -14px rgba(23,50,46,.4);
  transform:rotate(var(--tilt,-1.1deg));
  transition:transform .45s var(--ease), background .35s, border-color .35s}
.tagpill:hover{transform:rotate(0deg); background:var(--zaliv-soft); border-color:rgba(14,106,90,.28)}
.tagpill i{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--c,var(--sunce))}
.b-night .tagpill{background:var(--deep-card); border-color:var(--deep-line); color:var(--deep-fg)}
.b-night .tagpill:hover{background:#25504a; border-color:var(--zaliv)}

/* ── panel cijene: dvije zone, jasno poravnanje ──────────────────────── */
.inclp{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  padding:0; overflow:hidden; gap:0; align-items:stretch}
.inclp-body{padding:clamp(26px,3vw,40px)}
.inclp h3{margin-top:10px; font-size:clamp(1.18rem,1.7vw,1.42rem)}
.inclp ul{grid-template-columns:1fr 1fr; gap:14px 26px; margin-top:22px}
.inclp li{align-items:flex-start}
.inclp .fine{margin-top:22px; padding-top:16px; border-top:1px solid var(--linija)}
.inclp-price{justify-content:center; align-items:flex-start; gap:12px;
  padding:clamp(26px,3vw,40px); border-left:1px solid var(--linija);
  background:var(--zaliv-soft)}
.inclp-price > span{font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--kamen); font-weight:600}
.inclp-price .num{font-size:clamp(2.2rem,3vw,2.9rem); color:var(--duboko); margin:0}
.inclp-price .num small{display:block; margin-top:2px}
.inclp-price .btn{align-self:stretch; text-align:center; justify-content:center; margin-top:8px}
.inclp-price .after{margin-top:2px}

/* ── koraci upisa: ukrasi izlaze na hover, kao na vaspitačima ────────── */
.steps .step{position:relative; overflow:visible}
.sdood{position:absolute; inset:-14px -10px; pointer-events:none; z-index:3}
.sdood .dd{position:absolute; color:var(--c); opacity:0; line-height:0;
  transform:scale(.3) rotate(var(--r0,-24deg));
  transition:opacity .28s ease, transform .42s cubic-bezier(.2,1.55,.4,1)}
.sdood .dd svg{display:block; width:100%; height:auto;
  filter:drop-shadow(0 3px 9px rgba(6,20,17,.28))}
.step:hover .sdood .dd, .step:focus-within .sdood .dd{
  opacity:1; transform:scale(1) rotate(var(--r1,0deg)); transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){ .sdood .dd{transition:opacity .2s ease} }

/* ── maska ne smije da sječe ono što viri iz okvira ──────────────────── */
.js .mkhost.in .mk{clip-path:inset(-70px round 26px)}

/* ── FAQ pilula unutar sekcije programa ──────────────────────────────── */
.psec .faq{margin:var(--sp-blk) 0 0; max-width:none}
.psec .faq .qa-q{font-size:.96rem}

@media (max-width:1040px){
  .inclp{grid-template-columns:1fr}
  .inclp-price{border-left:0; border-top:1px solid var(--linija)}
}
@media (max-width:720px){
  .inclp ul{grid-template-columns:1fr}
}

/* .js .reveal.in{transform:none} nadjačava .step:hover, pa dižemo specifičnost */
.js .steps .step.reveal.in:hover{transform:translateY(-5px)}
.js .steps .step.reveal.in{transition:opacity .75s var(--ease), transform .45s var(--ease)}
.sdood .dd svg{filter:drop-shadow(0 4px 10px rgba(6,20,17,.3))}

/* traka: naslov i strelica u istom redu */
.pcell{grid-template-rows:auto auto; gap:10px}
.pcell-top{display:flex; align-items:center; justify-content:space-between; gap:14px}
.pcell-top h3{margin:0}

/* ═══════════════════════════════════════════════════════════════════════
   POPODNEVNI PUT - četiri stanice na isprekidanoj liniji
   ═══════════════════════════════════════════════════════════════════════ */
.daytrip{position:relative; margin-top:var(--sp-blk); padding:26px 0 8px}
.trip-path{position:absolute; left:2%; right:2%; top:24px; width:96%; height:118px;
  color:rgba(124,191,178,.45); pointer-events:none}
.trip-path path{stroke-dasharray:10 14; stroke-dashoffset:520;
  transition:stroke-dashoffset 2.2s cubic-bezier(.3,.8,.3,1)}
.daytrip.in .trip-path path{stroke-dashoffset:0}

.stops{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stop{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  opacity:0; transform:translateY(16px) scale(.9);
  transition:opacity .55s var(--ease) var(--d,0ms), transform .65s cubic-bezier(.2,1.5,.4,1) var(--d,0ms)}
.daytrip.in .stop{opacity:1; transform:translateY(var(--y,0)) scale(1)}
.stop:nth-child(odd){--y:-20px}
.stop:nth-child(even){--y:20px}

.pin{position:relative; width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background:var(--deep-card); border:2px solid var(--deep-line); color:var(--c,var(--sunce));
  transition:transform .45s cubic-bezier(.2,1.5,.4,1), border-color .35s, background .35s}
.pin svg{width:34px; height:34px}
.pin::before{content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed var(--c,var(--sunce)); opacity:0; transform:scale(.82);
  transition:opacity .4s var(--ease), transform .5s cubic-bezier(.2,1.5,.4,1)}
.stop:hover .pin{transform:translateY(-6px) rotate(-6deg); background:#24504a; border-color:var(--c,var(--sunce))}
.stop:hover .pin::before{opacity:.75; transform:scale(1) rotate(12deg)}

.stop b{font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--c,var(--sunce))}
.stop .lab{font-family:var(--display); font-weight:600; font-size:.95rem; line-height:1.35;
  color:var(--deep-fg); max-width:16ch}

@media (prefers-reduced-motion:reduce){
  .stop{opacity:1; transform:none; transition:none}
  .trip-path path{stroke-dashoffset:0; transition:none}
  .stop:hover .pin{transform:none}
}
@media (max-width:860px){
  .trip-path{display:none}
  .stops{grid-template-columns:1fr 1fr; gap:30px 16px}
  .stop:nth-child(odd), .stop:nth-child(even){--y:0}
  .pin{width:64px; height:64px}
  .pin svg{width:29px; height:29px}
}

/* ── sedam oblasti učenja ─────────────────────────────────────────────────
   Kartice su postojeće .fact iz site.css; ovdje su samo međunaslovi i blok
   "Kako djeca uče". Okvir ima tri osnovne i četiri šire oblasti, pa su i
   mreže dvije - podjela je dio priče, ne samo raspored. */
.curr-h{margin-top:var(--sp-blk); font-size:clamp(1.05rem,1.5vw,1.26rem)}
.curr-h + .curr-sub{margin-top:4px; font-size:.9rem; color:var(--kamen)}
.curr-sub + .meal-facts{margin-top:18px}

.curr-kako{margin-top:var(--sp-blk); padding:clamp(24px,3vw,36px);
  background:var(--krecnjak); border:1px solid var(--linija); border-radius:var(--r-lg)}
.curr-kako > h3{font-size:clamp(1.05rem,1.5vw,1.26rem)}
.curr-kako ul{list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px)}
.curr-kako li{display:flex; flex-direction:column; gap:3px;
  padding-top:14px; border-top:2px solid var(--zaliv)}
.curr-kako li b{font-family:var(--display); font-size:1rem; color:var(--duboko)}
.curr-kako li em{font-style:normal; font-size:.74rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--zlato)}
.curr-kako li span{margin-top:4px; font-size:.89rem; line-height:1.6; color:var(--kamen)}
.curr-zavrsni{margin-top:clamp(20px,2.4vw,28px); font-size:.95rem; line-height:1.68;
  color:var(--kamen); max-width:72ch}
@media (max-width:760px){ .curr-kako ul{grid-template-columns:1fr; gap:18px} }