/* ============================================================
   PAGE: Baby spa tretman — putovanje kroz tretman
   Signature: ogromni brojevi koraka 01/02/03 + aqua spojna
   linija + kap-markeri. Sve boje preko var(--...) tokena.
   ============================================================ */

/* ---------- HERO: kap-markeri koji lebde ---------- */
.tretman-hero{position:relative}
.tretman-drops{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.tretman-drops .td{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;
  transform:rotate(45deg);opacity:.0;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),
    color-mix(in srgb,var(--aqua-bright) 60%,transparent) 62%,transparent);
  animation:tj-float 9s ease-in-out infinite}
.tretman-drops .td1{left:12%;top:26%;animation-delay:0s}
.tretman-drops .td2{left:22%;top:62%;width:10px;height:10px;animation-delay:1.4s}
.tretman-drops .td3{right:30%;top:20%;width:18px;height:18px;animation-delay:.7s}
.tretman-drops .td4{right:16%;top:70%;animation-delay:2.1s}
.tretman-drops .td5{left:46%;top:82%;width:9px;height:9px;animation-delay:3s}
@keyframes tj-float{
  0%{transform:rotate(45deg) translateY(10px);opacity:0}
  20%{opacity:.6}
  50%{transform:rotate(45deg) translateY(-14px);opacity:.9}
  80%{opacity:.5}
  100%{transform:rotate(45deg) translateY(10px);opacity:0}}

/* velika cifra/akcenat na hero medijumu */
.tretman-count{position:absolute;right:-6px;bottom:6%;z-index:5;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:.9rem 1.15rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;line-height:1;text-align:center}
.tretman-count b{font-family:'Fraunces';font-weight:600;font-size:2.4rem;color:var(--aqua);
  font-variant-numeric:tabular-nums}
.tretman-count span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.25rem}

/* ---------- SIGNATURE: JOURNEY / KORACI ---------- */
.tj-list{list-style:none;padding:0;margin:3rem 0 0;position:relative;
  display:flex;flex-direction:column;gap:clamp(3rem,7vw,6rem)}
/* vertikalna spojna nit kroz sve korake */
.tj-list::before{content:"";position:absolute;left:calc(clamp(3.2rem,7vw,5.5rem) / 2 + 0px);
  top:1.2rem;bottom:1.2rem;width:2px;
  background:linear-gradient(180deg,transparent,
    color-mix(in srgb,var(--aqua) 55%,transparent) 8% 92%,transparent);
  z-index:0}

.tj-step{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.8rem,5vw,4rem);align-items:center;z-index:1}
.tj-step.tj-rev .tj-media{order:2}
.tj-step.tj-rev .tj-copy{order:1}

.tj-media{position:relative;padding-left:clamp(3.4rem,7vw,5.8rem)}
.tj-blob{aspect-ratio:4/3}

/* ogromni broj koraka */
.tj-num{position:absolute;left:-.15rem;top:-2.4rem;z-index:2;
  font-family:'Fraunces';font-weight:600;font-style:italic;
  font-size:clamp(6rem,16vw,12rem);line-height:.8;font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--aqua) 42%,transparent);
  text-stroke:2px color-mix(in srgb,var(--aqua) 42%,transparent);
  opacity:.9;pointer-events:none;letter-spacing:-.02em}

/* kap-marker na spojnoj niti */
.tj-dot{position:absolute;left:calc(clamp(3.4rem,7vw,5.8rem) / 2 - clamp(3.4rem,7vw,5.8rem) + clamp(3.4rem,7vw,5.8rem)/2);
  left:calc(clamp(3.4rem,7vw,5.8rem)/2 - 9px);top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50% 50% 50% 0;rotate:45deg;z-index:3;
  background:var(--aqua);box-shadow:0 0 0 6px color-mix(in srgb,var(--aqua) 18%,transparent),
    0 6px 14px -6px color-mix(in srgb,var(--aqua) 70%,transparent);
  animation:tj-pulse 3.2s ease-in-out infinite}
@keyframes tj-pulse{
  0%,100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--aqua) 18%,transparent),0 6px 14px -6px color-mix(in srgb,var(--aqua) 70%,transparent)}
  50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--aqua) 8%,transparent),0 6px 14px -6px color-mix(in srgb,var(--aqua) 70%,transparent)}}

.tj-copy{max-width:52ch}
.tj-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.tj-copy h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.7rem}
.tj-copy p{color:var(--muted);margin-bottom:1.1rem}
.tj-facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.tj-facts li{display:flex;gap:.6rem;font-size:.95rem;color:var(--fg)}
.tj-facts svg{width:18px;height:18px;color:var(--aqua);flex:none;margin-top:.2rem}

/* ---------- MAMBOBABY SPEC ---------- */
.tretman-spec-media{aspect-ratio:4/3}
.tretman-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0}
.tretman-spec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.15rem 1.2rem;box-shadow:var(--shadow-sm)}
.tretman-spec .ts-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:.7rem;background:color-mix(in srgb,var(--aqua) 13%,transparent);color:var(--aqua)}
.tretman-spec .ts-ico svg{width:22px;height:22px}
.tretman-spec b{display:block;font-family:'Fraunces';font-weight:600;font-size:1.02rem;
  color:var(--fg);margin-bottom:.2rem}
.tretman-spec span{font-size:.88rem;color:var(--muted)}

/* ---------- ŠTA PONETI — cek-lista ---------- */
.tretman-checklist{list-style:none;padding:0;margin:2.6rem 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.tretman-check{display:flex;gap:1rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);padding:1.35rem 1.4rem;
  box-shadow:var(--shadow-sm)}
.tc-mark{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--aqua) 14%,transparent);color:var(--aqua)}
.tc-mark svg{width:20px;height:20px}
.tretman-check b{display:block;font-family:'Fraunces';font-weight:600;font-size:1.08rem;
  color:var(--fg);margin-bottom:.15rem}
.tretman-check span{font-size:.92rem;color:var(--muted)}

/* ---------- TOK TERMINA / TRAJANJE ---------- */
.tretman-flow{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
.tf-time{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:clamp(2.4rem,5vw,3.4rem) 1.5rem;
  border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  background:radial-gradient(120% 120% at 50% 0%,
    color-mix(in srgb,var(--mist) 70%,var(--card)),var(--card));overflow:hidden}
.tf-time::before{content:"";position:absolute;inset:auto -30% -60% -30%;height:80%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--aqua) 22%,transparent),transparent);
  filter:blur(20px);animation:tj-glow 6s ease-in-out infinite alternate}
@keyframes tj-glow{from{opacity:.5;transform:translateY(6px)}to{opacity:.95;transform:translateY(-6px)}}
.tf-num{position:relative;z-index:1;font-family:'Fraunces';font-weight:600;
  font-size:clamp(3.6rem,9vw,5.6rem);line-height:.9;color:var(--aqua);
  font-variant-numeric:tabular-nums}
.tf-unit{position:relative;z-index:1;font-family:'Fraunces';font-style:italic;font-weight:400;
  font-size:1.4rem;color:var(--fg);margin-top:.2rem}
.tf-label{position:relative;z-index:1;font-size:.8rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:.9rem;max-width:20ch}

.tf-steps{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:1rem}
.tf-steps li{display:flex;gap:1rem;align-items:flex-start}
.tf-step-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:'Fraunces';font-weight:600;font-size:1rem;
  background:color-mix(in srgb,var(--aqua) 14%,transparent);color:var(--aqua)}
.tf-steps b{display:block;font-family:'Fraunces';font-weight:600;font-size:1.08rem;
  color:var(--fg);margin-bottom:.1rem}
.tf-steps span{font-size:.94rem;color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .tj-step,.tj-step.tj-rev{grid-template-columns:1fr;gap:1.4rem}
  .tj-step.tj-rev .tj-media,.tj-step.tj-rev .tj-copy{order:0}
  .tj-list::before{left:calc(clamp(2.8rem,10vw,4rem)/2)}
  .tj-media{padding-left:clamp(2.8rem,10vw,4rem)}
  .tj-num{font-size:clamp(4.5rem,20vw,8rem);top:-1.8rem}
  .tj-dot{left:calc(clamp(2.8rem,10vw,4rem)/2 - 9px)}
  .tretman-spec-media{order:-1}
  .tretman-flow{grid-template-columns:1fr}
  .tf-time{order:-1}
}
@media (max-width:760px){
  .tretman-spec-grid{grid-template-columns:1fr}
  .tretman-checklist{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tretman-count{right:0;bottom:2%;padding:.7rem .9rem}
  .tretman-count b{font-size:1.9rem}
  .tj-num{font-size:clamp(4rem,24vw,6.5rem)}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .tretman-drops .td,.tj-dot,.tf-time::before{animation:none!important}
  .tretman-drops{display:none}
  .tj-dot{box-shadow:0 0 0 6px color-mix(in srgb,var(--aqua) 16%,transparent)}
}