/* ═══════════════════════════════════════════════════════════════════════
   BOKA ACADEMY · stranica Pitanja — hero sa fotografijom
   Studio Piksel · dizajn sistem „Zaliv"
   Dijete iskače iz kruga, lišće prolazi iza talasa.
   ═══════════════════════════════════════════════════════════════════════ */

/* Traka drži i hero i talase. Lišće živi ovdje, između pozadine i talasa,
   pa nema oštrog reza na dnu heroja — grane ulaze u talas i nestaju iza njega. */
.qband{position:relative; isolation:isolate; overflow:hidden; background:var(--pijesak)}
.qband > .qdec{z-index:1}
.qband > .wavesep{position:relative; z-index:2; background:linear-gradient(to bottom, transparent 0 calc(100% - 3px), var(--to) calc(100% - 3px) 100%)}

.qhero{
  position:relative; overflow:hidden;   /* bez z-index: sadržaj ostaje iznad lišća */
  background:transparent; color:var(--noc);
  padding:clamp(112px,13.5vh,164px) 0 clamp(52px,7.5vh,86px);
  --stage:clamp(300px, 37vw, 545px);
}
.qhero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(820px 380px at 74% -12%, rgba(124,191,178,.30), transparent 64%),
    radial-gradient(660px 320px at 4% 108%, rgba(233,180,76,.26), transparent 60%)}
.qhero > .wrap{position:relative; z-index:3}

.qhero-in{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(20px,3vw,44px); align-items:center}
.qhero-in > *{min-width:0}

/* ── lijeva kolona ─────────────────────────────────────────────────── */
.qhero .crumbs{margin-bottom:10px}
.qhero .eyebrow{color:var(--duboko)}
.qhero h1{margin-top:12px; max-width:13ch; color:var(--noc);
  font-size:clamp(2.1rem,4.9vw,3.55rem); line-height:1.02}
.qhero .lede{margin-top:18px; max-width:44ch; color:var(--kamen)}

/* podvučeni dio naslova — rukom povučena žuta linija */
.ql{position:relative; display:inline-block; white-space:nowrap}
.ql::after{content:""; position:absolute; left:-.06em; right:-.06em; bottom:-.06em;
  height:.36em; z-index:-1; border-radius:99px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12C58 4 122 3 178 7c40 3 78 6 118 3' fill='none' stroke='%23E9B44C' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform:scaleX(0); transform-origin:left center;
  animation:qLine .8s .55s var(--ease) forwards}
@keyframes qLine{to{transform:scaleX(1)}}

.qhero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:30px}
.qhero-cta .btn-ghost{color:var(--noc); text-decoration-color:var(--sunce)}
.qhero-cta .btn svg, .qhero-cta .btn-ghost svg{width:17px; height:17px; flex:0 0 auto}
.qhero-cta .btn-ghost svg{transition:transform .25s var(--ease)}
.qhero-cta .btn-ghost:hover svg{transform:translateX(4px)}
.qhero-cta .btn-sun svg{transition:transform .25s var(--ease)}
.qhero-cta .btn-sun:hover svg{transform:translateY(3px)}

/* ── desna kolona: dijete iskače iz kruga ──────────────────────────────
   Dvije iste fotografije: donja je zatvorena u krug (overflow:hidden), gornja
   je maskirana iznad reza i prelazi preko ivice. Rez je postavljen tamo gdje
   tijelo ionako stoji unutar kruga, pa spoj nigdje ne pravi šav.
   Geometrija je izvedena iz same fotografije (710 x 800):
   krug r=297 sa centrom (355, 493) -> vrh 196, dno 790; rez na y=430.        */
.qfoto{position:relative; margin:0; justify-self:end; width:100%;
  max-width:var(--stage); animation:qUp 1s .12s var(--ease) both}
@keyframes qUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.qstage{position:relative; display:block; width:100%; aspect-ratio:710/800;
  animation:qBob 9s ease-in-out infinite}
@keyframes qBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}

/* Krug je ranije bio svijetao na tamnoj podlozi. Na kremastoj se utapao, pa je
   dobio tirkizni ton - dijete i dalje "iskače" iz njega. */
.qring{position:absolute; z-index:1; left:50%; top:24.5%; translate:-50% 0;
  width:83.66%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:radial-gradient(120% 110% at 40% 24%, #CFE6DF 0%, #B9DAD1 56%, #A6CFC5 100%);
  box-shadow:0 26px 52px -30px rgba(6,26,22,.38)}
.qring img{position:absolute; left:-9.76%; top:-32.99%; width:119.53%; max-width:none; height:auto;
  display:block; filter:drop-shadow(0 14px 16px rgba(6,26,22,.30))}

.qkid{position:absolute; z-index:2; left:0; top:0; width:100%; height:auto;
  display:block; filter:drop-shadow(0 14px 16px rgba(6,26,22,.30));
  -webkit-mask-image:linear-gradient(to bottom, #000 0 53%, transparent 54.5%);
          mask-image:linear-gradient(to bottom, #000 0 53%, transparent 54.5%)}

/* oblačići */
.qbub{position:absolute; z-index:3; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; color:var(--noc);
  box-shadow:0 12px 26px -14px rgba(6,26,22,.6)}
.qbub::after{content:""; position:absolute; width:0; height:0; border-style:solid}

.qbub-q{left:-7%; top:16%; width:clamp(62px,7.2vw,90px); height:clamp(62px,7.2vw,90px);
  border-radius:26px 26px 26px 8px; background:var(--zaliv);
  font-size:clamp(2rem,2.9vw,2.7rem); line-height:1;
  animation:qFloat 6.4s ease-in-out infinite}
.qbub-q::after{left:6%; bottom:-14px;
  border-width:16px 14px 0 0; border-color:var(--zaliv) transparent transparent transparent}

.qbub-h{right:-6%; top:54%; width:clamp(52px,6vw,74px); height:clamp(52px,6vw,74px);
  border-radius:24px 24px 8px 24px; background:var(--oleander-soft);
  animation:qFloat 7.8s .9s ease-in-out infinite}
.qbub-h::after{left:8%; bottom:-13px;
  border-width:15px 13px 0 0; border-color:var(--oleander-soft) transparent transparent transparent}
.qbub-h svg{width:46%; height:46%; color:var(--oleander-ink)}

@keyframes qFloat{0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-11px) rotate(2deg)}}

/* isprekidani luk oko glave koja izlazi iz kruga */
.qdash{position:absolute; z-index:0; left:-4%; top:-2%; width:52%; height:40%;
  color:rgba(244,241,232,.34)}
.qdash svg{width:100%; height:100%; display:block; overflow:visible}
.qdash path{stroke-dasharray:6 11; stroke-linecap:round;
  animation:qDash 24s linear infinite}
@keyframes qDash{to{stroke-dashoffset:-340}}

/* rukopisni akcenat — sada stoji na tamnom, van kruga */
.qhw{position:absolute; z-index:4; right:-1%; top:3%; max-width:12ch;
  font-family:"Caveat", var(--display); font-weight:600; line-height:1.18;
  font-size:clamp(1.02rem,1.62vw,1.38rem); color:var(--duboko);
  transform:rotate(-5deg); text-align:left; pointer-events:none;
  animation:qFade 1s .7s var(--ease) both}
.qhw b{display:inline-block; font-weight:600; position:relative; isolation:isolate}
.qhw b::after{content:""; position:absolute; left:-3px; right:-3px; bottom:2px; height:6px;
  z-index:-1; border-radius:99px; background:var(--sunce); opacity:.9;
  transform:scaleX(0); transform-origin:left center;
  animation:qLine .7s 1.15s var(--ease) forwards}
@keyframes qFade{from{opacity:0; transform:rotate(-5deg) translateY(10px)} to{opacity:1}}

/* ── ukrasi u pozadini trake ───────────────────────────────────────── */
.qdec{position:absolute; z-index:0; pointer-events:none; line-height:0}
.qdec img{display:block; width:100%; height:auto}
.qdec.front{z-index:4}

.q-bilje-l{left:-2%; bottom:clamp(22px,3.4vw,48px); width:clamp(190px,22vw,340px);
  animation:qSway 11s ease-in-out infinite}
.q-bilje-d{right:-2%; bottom:clamp(18px,3vw,42px); width:clamp(200px,24vw,370px);
  animation:qSway 13s 1.2s ease-in-out infinite reverse}
@keyframes qSway{0%,100%{transform:rotate(-1.2deg) translateY(0)}
  50%{transform:rotate(1.2deg) translateY(-8px)}}

.q-sunce{right:max(3%, calc((100vw - 1560px) / 2)); top:clamp(88px,11vh,132px); width:clamp(76px,8.6vw,124px); z-index:1}
.q-sunce img{animation:qTurn 46s linear infinite}
@keyframes qTurn{to{transform:rotate(360deg)}}

.q-zvj{width:clamp(18px,2vw,30px); animation:qTwinkle 3.8s ease-in-out infinite}
.q-zvj1{left:46%; top:17%; --d:0s}
.q-zvj2{right:23%; top:32%; width:clamp(14px,1.5vw,22px); --d:1.1s}
.q-zvj3{left:6%; bottom:26%; width:clamp(16px,1.8vw,26px); --d:2.1s}
.q-zvj{animation-delay:var(--d)}
@keyframes qTwinkle{0%,100%{transform:scale(1) rotate(-6deg); opacity:.85}
  50%{transform:scale(1.16) rotate(8deg); opacity:1}}

.q-list{left:25%; bottom:clamp(30px,4.4vw,62px); width:clamp(78px,9vw,132px); opacity:.92;
  animation:qSway 9s .4s ease-in-out infinite}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .qhero{--stage:clamp(280px,36vw,420px)}
  .q-sunce{right:-1%; top:clamp(62px,7.4vh,88px); width:clamp(58px,6.8vw,86px)}
  .qhw{right:0; top:13%; max-width:11ch}
  .qbub-q{left:-9%}
  .qbub-h{right:-8%; top:56%}
}
@media (max-width:940px){
  .qhero{padding-top:clamp(100px,12vh,140px); padding-bottom:clamp(34px,5.5vh,58px);
    --stage:min(360px, 84vw)}
  .qhero-in{grid-template-columns:1fr; gap:clamp(18px,4vw,28px)}
  .qhero h1{max-width:16ch}
  .qhero .lede{max-width:52ch}
  .qfoto{justify-self:center; margin-top:10px}
  .qhw{right:0; top:0; max-width:11ch; font-size:.98rem; line-height:1.16}
  .qbub-q{left:-8%; top:14%; width:56px; height:56px; font-size:1.7rem; border-radius:20px 20px 20px 6px}
  .qbub-q::after{bottom:-11px; border-width:13px 11px 0 0}
  .qbub-h{right:-7%; top:56%; width:48px; height:48px; border-radius:18px 18px 6px 18px}
  .qbub-h::after{bottom:-11px; border-width:12px 10px 0 0}
  .q-sunce{right:4%; top:clamp(92px,11.5vh,128px); width:clamp(56px,16vw,76px)}
  .q-zvj1, .q-zvj2, .q-zvj3, .q-list{display:none}
  .qhero-cta{gap:10px}
  .qhero-cta .btn-sun{padding:14px 22px}
  .qhero-cta .btn-ghost{padding:12px 4px}
  .q-bilje-l{width:150px; left:-7%; bottom:clamp(14px,3vw,26px)}
  .q-bilje-d{width:162px; right:-8%; bottom:clamp(10px,2.4vw,20px)}
}
@media (max-width:420px){
  .qhero .lede{font-size:.98rem}
  .qhero-cta{gap:10px; margin-top:22px}
  .qhero-cta .btn{padding:14px 20px; font-size:.9rem}
  .qhw{font-size:.92rem; right:0}
  .qdash{display:none}
}

@media (prefers-reduced-motion:reduce){
  .qband *, .qband *::after{animation:none !important}
  .ql::after, .qhw b::after{transform:none}
}