/* ============================================================
   Skola Golmana S.G., one-page home: sections in reading order
   ============================================================ */

/* photos that fill a fixed-ratio frame */
.hero__media picture,.drill__f picture,.coach__main picture,.coach__inset picture,
.quote__media picture,.fields__pics picture,.gal__a picture{display:block;width:100%;height:100%}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;isolation:isolate}
.hero::before{
  /* the ring from the live site's hero artwork, as a quiet background shape (desktop only) */
  content:none;position:absolute;z-index:-1;pointer-events:none;
  width:560px;height:560px;left:-220px;bottom:-300px;border-radius:50%;
  border:34px solid rgba(255,255,255,.035);
}
.hero__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 50%);animation:heroIn 1.4s var(--ease-out) both}
.hero__media::after{
  /* the headline overlaps the photo by 58px on phones: this makes that strip near-solid ink */
  content:'';position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(27,37,47,0) 0%,rgba(27,37,47,.9) 55%,var(--ink) 80%);
}
@keyframes heroIn{from{transform:scale(1.07);opacity:.6}to{transform:none;opacity:1}}

.sticker{
  position:absolute;z-index:2;top:14px;left:var(--gut);
  width:94px;height:94px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;
  background:var(--amber);color:var(--ink);
  outline:2px dashed rgba(27,37,47,.45);outline-offset:-8px;
  transform:rotate(-10deg);box-shadow:0 10px 26px rgba(0,0,0,.3);
  animation:stickIn .8s .5s var(--ease-out) both;
}
.sticker span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.sticker b{font-family:var(--f-disp);font-weight:400;font-size:15px;text-transform:uppercase;margin-top:4px}
@keyframes stickIn{from{transform:rotate(-30deg) scale(.4);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:1}}

.hero__body{position:relative;z-index:1;margin-top:-58px;padding:0 var(--gut) 48px}
.kicker{font-family:var(--f-disp);text-transform:uppercase;color:var(--amber);font-size:clamp(17px,2.2vw,22px);letter-spacing:.02em;line-height:1.2}
.hero__h{margin-top:14px;color:#fff;font-size:clamp(38px,10.6vw,74px);line-height:.96}
.hero__h span{color:var(--amber)}
.hero__lede{margin-top:16px;font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--on-ink);max-width:36em}
.hero__lede b{color:#fff}
.hero__cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.ticks{display:grid;gap:10px;margin-top:24px}
.ticks li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.4;color:var(--on-ink)}
.ticks .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(255,168,0,.16);color:var(--amber);margin-top:-1px}

@media (min-width:520px){
  .hero__cta{flex-direction:row;flex-wrap:wrap}
}
@media (min-width:600px){
  .hero__media{aspect-ratio:16/10}
}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(800px,calc(100svh - var(--hdr)))}
  .hero::before{content:''}
  .hero__media{grid-column:2;grid-row:1;aspect-ratio:auto;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
  .hero__media picture{position:absolute;inset:0}
  .hero__media img{object-position:var(--pos,50% 50%)}
  .hero__media::after{display:none}
  .sticker{top:auto;left:auto;bottom:40px;right:40px;width:128px;height:128px;outline-offset:-10px}
  .sticker span{font-size:13px}
  .sticker b{font-size:21px}
  .hero__body{
    grid-column:1;grid-row:1;align-self:center;margin:0;
    padding:56px 8px 64px max(var(--gut),calc(100% - 600px + var(--gut)));
  }
  .hero__h{font-size:clamp(46px,5.2vw,74px)}
  .ticks{margin-top:30px}
}

/* ---------- prijava ---------- */
.join__in{display:grid;gap:28px;grid-template-areas:"intro" "form" "steps"}
.join__intro{grid-area:intro}
.join__form{grid-area:form}
.steps{grid-area:steps}
.join__intro h2{margin-top:12px}
.join__intro .lede{margin-top:14px;max-width:34em}

.form{
  position:relative;display:grid;gap:14px;
  background:#fff;border-radius:18px;box-shadow:var(--sh-l);
  padding:24px clamp(16px,4vw,32px) 22px;border-top:6px solid var(--amber);
}
.form__h{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(22px,3vw,28px);line-height:1.05;color:var(--ink)}
.form__sub{margin-top:10px;font-size:15px;line-height:1.5;color:var(--text-dim)}
.form__sub a{color:var(--blue);font-weight:700;white-space:nowrap;display:inline-block;padding-block:11px;margin-block:-11px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fld{display:grid;gap:6px}
.fld__k{font-size:14.5px;font-weight:700;color:var(--ink)}
.fld__k i{font-style:normal;font-weight:400;color:var(--text-dim)}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:52px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper-2);border:2px solid var(--line);border-radius:10px;padding:12px 14px;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.fld textarea{min-height:84px;resize:vertical;line-height:1.45}
.fld select{
  -webkit-appearance:none;appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231B252F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;
}
.fld input::placeholder,.fld textarea::placeholder{color:#5F6B77}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 4px rgba(10,28,191,.14)}
.fld input:user-invalid{border-color:#C42B1C}
.fld2{display:grid;gap:14px}
.form__btn{margin-top:4px}
.form__btn[disabled]{opacity:.7;pointer-events:none}
.form__fine{font-size:14px;color:var(--text-dim);text-align:center}

.steps{display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.step__n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-family:var(--f-disp);font-size:20px}
.step h3{font-size:17px;color:var(--ink);line-height:1.3;margin-top:1px}
.step p{margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--text-dim)}
.step a{color:var(--blue);font-weight:700;white-space:nowrap;display:inline-block;padding-block:11px;margin-block:-11px}

@media (min-width:480px){ .fld2{grid-template-columns:1fr 1fr} }
@media (min-width:720px) and (max-width:1023px){
  .join__form{max-width:640px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{flex-direction:column}
}
@media (min-width:1024px){
  .join__in{grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"intro form" "steps form";column-gap:64px;row-gap:32px;align-items:start}
  .join__form{align-self:center}
  .steps{align-self:start}
}

/* ---------- treninzi ---------- */
.rot{
  margin-top:20px;display:inline-flex;align-items:baseline;justify-content:center;gap:.32em;
  font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(21px,4vw,34px);line-height:1.15;
  color:#fff;background:var(--ink-3);padding:10px 20px;border-radius:12px;
}
.rot__w{display:inline-grid;color:var(--amber);justify-items:end}
.rot__w span{grid-area:1/1;opacity:0;transform:translateY(55%);animation:rotw 7.5s var(--ease) infinite}
.rot__w span:nth-child(2){animation-delay:2.5s}
.rot__w span:nth-child(3){animation-delay:5s}
@keyframes rotw{
  0%{opacity:0;transform:translateY(55%)}
  5%,28%{opacity:1;transform:none}
  33%,100%{opacity:0;transform:translateY(-55%)}
}
.rot--dark{background:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .rot{display:inline-block}
  .rot__w{display:inline}
  .rot__w span{animation:none!important;opacity:1;transform:none}
  .rot__w span+span::before{content:', '}
}

.drill{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drill__f{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--ink-3)}
.drill__f--wide{grid-column:1/-1}
.drill__f img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 50%);transition:transform .7s var(--ease)}
.drill__f:hover img{transform:scale(1.04)}

.skills{display:grid;gap:12px;margin-top:clamp(28px,4vw,48px)}
.skill{
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;
  background:var(--ink-3);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px 18px 20px;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.skill:hover{transform:translateY(-4px);border-color:rgba(255,168,0,.45)}
.skill__i{grid-row:1/3;width:48px;height:48px;padding:11px;border-radius:12px;background:rgba(255,168,0,.14);color:var(--amber)}
.skill h3{font-size:18px;line-height:1.3;color:#fff;margin-top:2px}
.skill p{margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--on-ink-dim)}

@media (min-width:600px){ .skills{grid-template-columns:1fr 1fr} }
@media (min-width:900px){
  .drill{grid-template-columns:repeat(3,1fr);gap:20px}
  .drill__f--wide{grid-column:auto}
  .drill__f img{object-position:var(--pos,50% 50%)}
  .skills{grid-template-columns:repeat(3,1fr);gap:18px}
}

/* ---------- uzrasti ---------- */
.agecards{display:grid;gap:12px}
.agecard{
  display:grid;grid-template-columns:72px 1fr;column-gap:16px;align-items:center;
  background:var(--paper-2);border-radius:16px;padding:16px 18px;border-left:5px solid var(--blue);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.agecard picture{grid-row:1/3}
.agecard img{width:72px;height:72px}
.agecard h3{font-size:26px;color:var(--ink);align-self:end;line-height:1}
.agecard p{margin-top:8px;color:var(--text);font-size:16.5px;line-height:1.4;align-self:start}
.agecard:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.ages__cta{margin-top:32px;text-align:center}
@media (min-width:720px){
  .agecards{grid-template-columns:repeat(3,1fr);gap:22px}
  .agecard{grid-template-columns:1fr;text-align:center;justify-items:center;padding:30px 22px 28px;border-left:0;border-bottom:5px solid var(--blue)}
  .agecard picture{grid-row:auto}
  .agecard img{width:84px;height:84px}
  .agecard h3{margin-top:16px;font-size:32px}
  .agecard p{margin-top:8px;font-size:17px}
}

/* ---------- trener ---------- */
.coach__in{display:grid;gap:40px}
.coach__media{position:relative;width:100%;max-width:440px;margin-inline:auto;padding-bottom:48px}
.coach__main{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--ink-3);box-shadow:var(--sh-l)}
.coach__main img,.coach__inset img{width:100%;height:100%;object-fit:cover}
.coach__inset{
  position:absolute;right:0;bottom:0;width:45%;aspect-ratio:1;
  border-radius:14px;overflow:hidden;border:5px solid var(--ink-2);box-shadow:var(--sh-l);background:var(--ink-3);
}
.coach__tag{
  position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:3px;line-height:1.25;
  background:rgba(19,27,35,.9);border-left:4px solid var(--amber);border-radius:8px;padding:9px 13px;
}
.coach__tag b{color:#fff;font-size:15px}
.coach__tag span{color:var(--amber);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.coach__body h2{margin-top:14px}
.coach__lead{margin-top:20px;font-size:clamp(18px,2vw,21px);line-height:1.55;color:#fff;border-left:4px solid var(--amber);padding-left:16px}
.coach__lead b{color:var(--amber)}
.tl{display:grid;gap:28px;margin-top:32px}
.tl__h{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.tl ul{border-left:2px solid var(--ink-4);margin-left:6px}
.tl li{position:relative;padding:0 0 18px 20px;font-size:15.5px;line-height:1.5;color:var(--on-ink-dim)}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--ink-2);border:2px solid var(--amber)}
.tl li b{display:block;color:#fff;font-size:16px;margin-bottom:2px}
.coach__mentors{margin-top:32px;padding:20px;border-radius:14px;background:var(--ink-3)}
.coach__mentors p{font-size:15.5px;line-height:1.55;color:var(--on-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips li{padding:8px 14px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;line-height:1.3}
.coach__cta{margin-top:32px}

@media (min-width:640px) and (max-width:1023px),(min-width:1180px){ .tl{grid-template-columns:1fr 1fr;gap:32px} }
@media (min-width:1024px){
  .coach__in{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:start}
  .coach__media{position:sticky;top:calc(var(--hdr) + 32px);margin:0}
  .coach__inset{right:-20px;width:180px}
}

/* ---------- brojke ---------- */
.stats{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding-block:clamp(48px,6vw,76px)}
.stats::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-62deg,rgba(255,255,255,.045) 0 16px,transparent 16px 46px);
}
.stats .wrap{position:relative}
.stats__h{text-align:center;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:26px}
.stats__list{display:grid;gap:22px}
.stat{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:center}
.stat picture{grid-row:1/3}
.stat img{width:64px;height:64px}
.stat__n{font-family:var(--f-disp);font-size:clamp(42px,6vw,60px);line-height:1;color:#fff;align-self:end}
.stat__k{margin-top:10px;font-size:16.5px;color:#E4E8FF;align-self:start}
@media (min-width:720px){
  .stats__list{grid-template-columns:repeat(3,1fr)}
  .stat{grid-template-columns:1fr;justify-items:center;text-align:center}
  .stat picture{grid-row:auto}
  .stat__n{margin-top:14px}
}

/* ---------- tereni i lokacije ---------- */
.fields__top{display:grid;gap:32px;align-items:center}
.fields .shead{margin-bottom:0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.facts li{
  display:flex;align-items:center;gap:10px;min-height:56px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);
}
.facts .ic{width:24px;height:24px;color:var(--blue)}
.fields__pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields__pics figure{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-3)}
.fields__pics img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 50%)}
.fields__h{margin-top:clamp(40px,6vw,64px);font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3vw,30px);color:var(--ink)}
.locs{display:grid;gap:12px;margin-top:16px}
.loc{
  display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;
  background:#fff;border-radius:14px;padding:16px;box-shadow:var(--sh-s);border-left:5px solid var(--amber);
}
.loc__i{width:42px;height:42px;padding:9px;border-radius:10px;background:rgba(10,28,191,.08);color:var(--blue)}
.loc__tx b{display:block;color:var(--ink);font-size:18px;line-height:1.3}
.loc__tx span{display:block;margin-top:2px;color:var(--text-dim);font-size:15.5px;line-height:1.4}
.loc .btn{grid-column:1/-1;min-height:44px;padding:8px 16px;font-size:15px}
.loc .btn .ic{width:18px;height:18px}
.fields__note{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:15.5px;color:var(--text)}
.fields__note .ic{width:22px;height:22px;color:var(--blue)}
.fields__note a{color:var(--blue);font-weight:700;white-space:nowrap;display:inline-block;padding-block:10px}

@media (min-width:420px){
  .loc{grid-template-columns:auto 1fr auto}
  .loc .btn{grid-column:auto}
}
@media (min-width:720px){ .locs{grid-template-columns:1fr 1fr;gap:18px} }
@media (min-width:900px){
  .fields__top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px}
  .fields__pics img{object-position:var(--pos,50% 50%)}
  .fields__pics figure:nth-child(2){margin-top:48px}
}

/* ---------- citat ---------- */
.quote{position:relative;display:grid;overflow:hidden;background:var(--ink);color:#fff}
.quote__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.quote__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 50%)}
.quote__body{padding:36px var(--gut) 60px}
.quote__pre{font-size:clamp(18px,2.2vw,24px);font-style:italic;color:var(--amber)}
.quote__main{margin-top:10px;font-size:clamp(42px,11vw,76px);line-height:.95;color:#fff}
.quote .btn{margin-top:28px}
@media (min-width:900px){
  .quote{grid-template-columns:55% 45%;min-height:560px}
  .quote__media{aspect-ratio:auto;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
  .quote__media picture{position:absolute;inset:0}
  .quote__media img{object-position:var(--pos,50% 50%)}
  .quote__body{align-self:center;padding:64px max(var(--gut),calc(111.1% - 600px + var(--gut))) 64px 16px}
  .quote__main{font-size:clamp(46px,5.6vw,76px)}
}

/* ---------- cene ---------- */
.price-free,.price-grid,.incl{max-width:980px;margin-inline:auto}
.price-free{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  background:var(--amber);color:var(--ink);border-radius:18px;padding:24px;
}
.price-free::after{
  content:'';position:absolute;z-index:-1;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  border:26px solid rgba(27,37,47,.08);pointer-events:none;
}
.price-free__k{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.price-free__v{margin-top:12px;font-size:clamp(44px,8vw,68px);line-height:.95;color:var(--ink)}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.price{background:var(--paper-2);border:2px solid var(--line);border-radius:18px;padding:22px 12px 24px;text-align:center}
.price__k{font-size:15px;font-weight:700;line-height:1.3;color:var(--text)}
.price__v{display:flex;justify-content:center;align-items:flex-start;gap:4px;margin-top:20px;color:var(--ink)}
.price__v .disp{font-size:clamp(66px,13vw,108px);line-height:.88}
.price__cur{font-family:var(--f-disp);font-size:clamp(28px,4vw,42px);line-height:1;margin-top:4px}
.price__per{
  display:inline-block;margin-top:14px;padding:6px 12px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.price--blue{background:var(--blue);border-color:var(--blue)}
.price--blue .price__k{color:#E4E8FF}
.price--blue .price__v{color:#fff}
.price--blue .price__per{background:var(--amber);color:var(--ink)}
.incl{margin-top:12px;background:var(--ink);color:var(--on-ink);border-radius:18px;padding:24px clamp(18px,4vw,36px) 28px}
.incl__h{font-size:18px;color:#fff}
.incl__list{display:grid;gap:10px;margin-top:16px}
.incl__list li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.45}
.incl__list .ic{width:20px;height:20px;margin-top:1px;color:var(--amber)}
.incl__note{margin-top:18px;font-size:15px;color:var(--amber)}
.incl__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.incl__cta .btn{flex:1 1 240px}
@media (min-width:600px){
  .incl__list{grid-template-columns:1fr 1fr;column-gap:28px}
}
@media (min-width:720px){
  .price-free{flex-direction:row;align-items:center;justify-content:space-between;padding:28px 36px}
  .price-grid{gap:18px;margin-top:18px}
  .incl{margin-top:18px}
  .incl__cta .btn{flex:0 1 auto}
}

/* ---------- utisci ---------- */
.revs{display:grid;gap:16px}
.rev{display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:#fff;border-radius:18px;border-top:5px solid var(--amber);padding:24px 22px 20px;box-shadow:var(--sh-s)}
.rev__q p{font-size:17px;line-height:1.6;color:var(--text)}
.rev__q p+p{margin-top:12px}
.rev__q cite{font-style:normal;font-weight:700;color:var(--ink);white-space:nowrap}
.rev__q cite::before{content:'\00a0'}
.rev__who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.rev__who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.rev__who b{font-size:16px;color:var(--ink)}
.rev--blue{background:var(--blue)}
.rev--blue .rev__q p{color:#fff}
.rev--blue .rev__who{border-color:rgba(255,255,255,.22)}
.rev--blue .rev__who b{color:#fff}
@media (min-width:900px){ .revs{grid-template-columns:repeat(3,1fr);gap:20px} }

/* ---------- galerija ---------- */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal li{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--ink-3)}
.gal__a{position:relative;display:block;width:100%;height:100%}
.gal__a img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 50%);transition:transform .7s var(--ease)}
.gal__a::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(19,27,35,.45),rgba(19,27,35,0) 55%);opacity:0;transition:opacity .3s}
.gal__a:hover img{transform:scale(1.05)}
.gal__a:hover::after{opacity:1}
.follow{margin-top:28px;text-align:center}
.follow p{color:var(--on-ink);font-size:16px}
.follow__list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
.follow__list a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;
  border:2px solid rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:15px;
  transition:border-color .2s,background-color .2s,transform .2s var(--ease);
}
.follow__list a:hover{border-color:var(--amber);background:rgba(255,168,0,.1);transform:translateY(-2px)}
.follow__list .ic{width:20px;height:20px;color:var(--amber)}
@media (min-width:900px){
  .gal{grid-template-columns:repeat(3,1fr);gap:16px}
  .gal__a img{object-position:var(--pos,50% 50%)}
}

/* ---------- pitanja ---------- */
.faq__in{display:grid;gap:30px}
.faq .shead{margin-bottom:0}
.faq .lede a{color:var(--blue);font-weight:700;white-space:nowrap;display:inline-block;padding-block:8px;margin-block:-8px}
.qa{display:grid;gap:10px}
.q{background:var(--paper-2);border:1px solid transparent;border-radius:14px;transition:background-color .2s,border-color .2s,box-shadow .2s}
.q[open]{background:#fff;border-color:var(--line);box-shadow:var(--sh-s)}
.q summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:58px;padding:14px 16px 14px 18px;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink);
}
.q summary::-webkit-details-marker{display:none}
.q summary .ic{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .25s var(--ease),background-color .2s}
.q[open] summary .ic{transform:rotate(45deg);background:var(--amber);color:var(--ink)}
.q__a{padding:0 18px 18px;font-size:16.5px;line-height:1.6;color:var(--text)}
.q__a ul{display:grid;gap:8px}
.q__a li{position:relative;padding-left:20px}
.q__a li::before{content:'';position:absolute;left:1px;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--amber);transform:rotate(45deg)}
.q__a b{color:var(--ink)}
@media (min-width:960px){
  .faq__in{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:64px;align-items:start}
  .faq .shead{position:sticky;top:calc(var(--hdr) + 32px)}
}

/* ---------- zavrsni poziv ---------- */
.final{position:relative;overflow:hidden;isolation:isolate;background:var(--amber);color:var(--ink);padding-block:clamp(52px,7vw,84px)}
.final::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:-140px;top:50%;width:440px;height:440px;margin-top:-220px;border-radius:50%;
  border:42px solid rgba(27,37,47,.07);
}
.final__in{display:grid;gap:24px;align-items:center}
.final h2.final__h{font-size:clamp(32px,5vw,54px);color:var(--ink)}
.final__p{margin-top:12px;font-size:18px;line-height:1.5;color:var(--ink)}
.final__cta{display:flex;flex-wrap:wrap;gap:12px}
.final__cta .btn{flex:1 1 240px}
@media (min-width:900px){
  .final__in{grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .final__cta .btn{flex:0 1 auto}
}

/* ---------- lightbox ---------- */
.lb{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.lb::backdrop{background:rgba(10,14,19,.93)}
.lb[open]{display:block}
.lb__fig{width:100%;height:100%;display:grid;place-items:center;padding:68px 12px}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb__btn{position:fixed;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;transition:background-color .2s}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__btn .ic{width:24px;height:24px}
.lb__close{top:12px;right:12px}
.lb__prev,.lb__next{bottom:12px}
.lb__prev{left:calc(50% - 60px)}
.lb__next{left:calc(50% + 12px)}
@media (min-width:760px){
  .lb__fig{padding:40px 84px}
  .lb__prev,.lb__next{bottom:auto;top:50%;margin-top:-24px}
  .lb__prev{left:18px}
  .lb__next{left:auto;right:18px}
}

/* ---------- kondicija (video) ---------- */
/* Seven phone clips: two portrait (9:16) next to the intro, five landscape (16:9) in a
   strip. Every box reserves the clip's true ratio, so nothing shifts when the video
   attaches and no portrait clip is ever squeezed into a landscape frame. */
.kond__top{display:grid;gap:28px}
.kfacts{display:grid;gap:12px;margin-top:22px}
.kfacts li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.kfacts .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(10,28,191,.08);color:var(--blue)}
.kfacts span{font-size:16px;line-height:1.45;color:var(--text)}
.kfacts b{display:block;color:var(--ink);font-size:17px;line-height:1.3}

.clips{list-style:none;margin:0;padding:0}
.clips--port{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.clip figure{margin:0}
.clip__box{
  position:relative;overflow:hidden;border-radius:14px;background:var(--ink-3);
  aspect-ratio:16/9;box-shadow:var(--sh-s);
}
.clip__box--port{aspect-ratio:9/16}
.clip__v,.clip__poster,.clip__poster img{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
}
.clip__poster{transition:opacity .35s var(--ease);pointer-events:none}
.clip__box.is-playing .clip__poster{opacity:0}
.clip__btn{
  position:absolute;left:12px;bottom:12px;z-index:2;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--amber);color:var(--ink);box-shadow:var(--sh-amber);
  transition:transform .2s var(--ease),background-color .2s;
}
.clip__btn:hover{background:var(--amber-2);transform:translateY(-2px)}
.clip__btn .ic{width:22px;height:22px}
.clip__btn .ic--pause{display:none}
.clip__box.is-playing .clip__btn .ic--play{display:none}
.clip__box.is-playing .clip__btn .ic--pause{display:block}
.clip__cap{margin-top:10px;font-size:15px;line-height:1.4;font-weight:600;color:var(--ink)}

/* landscape strip */
.kond__strip{margin-top:clamp(36px,5vw,56px)}
.strip__hd{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;margin-bottom:16px}
.strip__h{font-size:clamp(20px,2.4vw,26px);line-height:1.2;color:var(--ink)}
.strip__hint{grid-column:1;font-size:14px;color:var(--text-dim)}
.strip__nav{grid-column:2;grid-row:1/3;display:flex;gap:8px}
.strip__b{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--line-2);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s,transform .2s var(--ease);
}
.strip__b:hover{border-color:var(--blue);transform:translateY(-2px)}
.strip__b .ic{width:20px;height:20px}
.clips--land{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
  scrollbar-width:none;
}
.clips--land::-webkit-scrollbar{display:none}
.clips--land .clip{flex:0 0 min(78vw,420px);scroll-snap-align:start}

@media (min-width:600px){
  .clips--port{gap:16px}
  .clips--land .clip{flex-basis:min(46vw,420px)}
}
@media (min-width:900px){
  .kond__top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,64px);align-items:center}
  .strip__hint,.strip__nav{display:none}
  .strip__hd{grid-template-columns:1fr}
  /* five landscape clips as a grid: the two big ones share the first row */
  .clips--land{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;overflow:visible;margin-inline:0;padding-inline:0;padding-bottom:0}
  .clips--land .clip{flex:none;grid-column:span 2}
  .clips--land .clip--big{grid-column:span 3}
}
@media (prefers-reduced-motion:reduce){
  .clip__poster{transition:none}
}

/* Hero on desktop: the grid lives on .hero, but the markup wraps the two halves in
   .wrap.hero__in. display:contents lifts .hero__body and .hero__media into the grid, so
   the photo column gets its height again (it collapsed to 0px before). */
@media (min-width:900px){ .hero__in{display:contents} }

/* link from the drills to the conditioning section (was unstyled, 20px tall) */
.more{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;min-height:52px;
  padding:12px 18px 12px 14px;border-radius:999px;
  border:2px solid rgba(255,168,0,.45);background:rgba(255,168,0,.08);color:#fff;
  font-weight:700;font-size:15.5px;line-height:1.35;text-decoration:none;
  transition:border-color .2s,background-color .2s,transform .2s var(--ease);
}
.more:hover{border-color:var(--amber);background:rgba(255,168,0,.16);transform:translateY(-2px)}
.more .ic{width:22px;height:22px;color:var(--amber)}
.more__go{margin-left:auto;transition:transform .2s var(--ease)}
.more:hover .more__go{transform:translateX(3px)}
@media (max-width:599px){ .more{width:100%} }

/* procena: two SMALL assessment photos beside the text, never large (they show a child
   without a shirt; they belong only where the assessment itself is explained) */
.assess{
  margin-top:clamp(36px,5vw,56px);display:grid;gap:22px;
  padding:clamp(20px,3vw,32px);border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-s);
}
.assess__pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:320px}
.assess__fig{margin:0}
.assess__fig picture,.assess__fig img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:10px;background:var(--paper-3)}
.assess__fig figcaption{margin-top:7px;font-size:13px;line-height:1.35;color:var(--text-dim)}
.assess__h{font-size:clamp(21px,2.4vw,26px);line-height:1.2;color:var(--ink)}
.assess__tx p{margin-top:10px;font-size:16.5px;line-height:1.55;color:var(--text)}
.assess__tx .btn{margin-top:18px}
@media (min-width:720px){
  .assess{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,44px)}
}

/* ---------- mesecni paketi ---------- */
.pkgs{display:grid;gap:14px;max-width:980px;margin-inline:auto}
.pkg{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper-2);border:2px solid var(--line);border-radius:18px;padding:24px 20px 22px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.pkg__k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.pkg__h{margin-top:4px;font-size:clamp(28px,4vw,36px);line-height:1;color:var(--ink)}
.pkg__sub{margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--text)}
.pkg__v{display:flex;align-items:flex-start;gap:8px;margin-top:20px;color:var(--ink)}
.pkg__n{font-size:clamp(56px,11vw,76px);line-height:.9}
.pkg__cur{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-family:var(--f-disp);font-size:22px;line-height:1}
.pkg__cur small{font-family:var(--f);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.pkg__per{
  align-self:flex-start;margin-top:16px;padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:15px;color:var(--text);
}
.pkg__per b{color:var(--ink)}
.pkg .btn{margin-top:22px}
/* the 2x package is the one to steer towards: blue card, amber button */
.pkg--hi{background:var(--blue);border-color:var(--blue);color:#fff}
.pkg--hi .pkg__k{color:#C9D0FF}
.pkg--hi .pkg__h,.pkg--hi .pkg__v{color:#fff}
.pkg--hi .pkg__sub{color:#E4E8FF}
.pkg--hi .pkg__cur small{color:#C9D0FF}
.pkg--hi .pkg__per{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.pkg--hi .pkg__per b{color:var(--ink)}
.pkg--hi::before{
  content:'Bolja cena po treningu';position:absolute;top:-13px;right:18px;
  padding:5px 12px;border-radius:999px;background:var(--amber);color:var(--ink);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.incl__staff{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);font-size:15.5px;line-height:1.5;color:#fff;
}
.incl__staff .ic{width:22px;height:22px;flex:none;margin-top:2px;color:var(--amber)}
.price-free__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.price-free__cta .btn{flex:1 1 220px}
@media (min-width:600px){
  .pkgs{grid-template-columns:1fr 1fr;gap:18px}
  .pkg{padding:28px 26px 26px}
}
@media (min-width:720px){
  .price-free__cta{margin-top:0;flex:0 0 auto}
  .price-free__cta .btn{flex:0 0 auto}
}

/* At 600-899px the two package cards sit side by side and "12.000" at 76px was wider than
   half the screen, so the grid grew 18px past the viewport. Columns can no longer grow past
   their share, and the number scales with the width in that band. */
.pkgs{grid-template-columns:minmax(0,1fr)}
.pkg__v{flex-wrap:wrap}
@media (min-width:600px){ .pkgs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (min-width:600px) and (max-width:899px){ .pkg__n{font-size:clamp(44px,7.4vw,60px)} }

/* ---------- spacing pass (owner: "obrati paznju na margine, padding i na responsive") ----------
   Measured ink-to-ink at 320/375/414/768/1024/1280/1440; every pair below was 0 to 5px. */
.kond__intro h2{margin-top:14px}
.kond__intro .lede{margin-top:16px}
.hero__h{margin-top:20px}
.quote__pre + p{margin-top:12px}
.pkg__h{margin-top:8px}
.price-free__v{margin-top:16px}
.agecard p{margin-top:12px}
.stat__k{margin-top:14px}
.loc__tx span{margin-top:4px}
.faq .shead .lede{margin-top:20px}
.logo__tx{gap:3px}
/* long lines on desktop: nothing wider than a comfortable measure */
.fields__note{max-width:70ch}
.incl__staff{max-width:72ch}
.follow p{max-width:60ch;margin-inline:auto}
.coach__tag{gap:6px}
.ftr__loc{display:inline-flex;align-items:flex-start;gap:8px}
.ftr__loc .ic{flex:none;margin-top:2px}
.final__loc{margin-top:10px}
.final__p,.final__loc{max-width:60ch}
.quote__pre + p{margin-top:16px}
.pkg__v{row-gap:6px}
/* brojke: the school photo had no rules at all; photo above the numbers on phones,
   beside them from 900px */
.stats__pic{margin:0 0 28px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08)}
.stats__pic img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,50% 40%);aspect-ratio:16/10}
@media (min-width:900px){
  .stats__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,56px);align-items:center}
  .stats__pic{margin:0;height:100%}
  .stats__pic img{aspect-ratio:auto;object-position:var(--pos,50% 40%)}
  .stats__h{text-align:left}
  .stat{grid-template-columns:64px 1fr;justify-items:start;text-align:left}
  .stat picture{grid-row:1/3}
  .stat__n{margin-top:0}
}
/* age cards on wide screens: an 84px thumbnail in a 350px card read as an icon; give the
   photo real presence */
@media (min-width:720px){ .agecard img{width:112px;height:112px} }

/* lokacija: the single team photo (class .fields__pic since the rebuild) had no rules and
   kept the browser's default figure margins */
.fields__pic{margin:0;border-radius:14px;overflow:hidden;background:var(--paper-3);box-shadow:var(--sh-s)}
.fields__pic picture,.fields__pic img{display:block;width:100%;height:auto}
@media (min-width:900px){
  .fields__pic{height:100%;min-height:360px}
  .fields__pic picture{height:100%}
  .fields__pic img{height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
}

/* final CTA: the photo column collapsed to 74px because the text column was "auto" */
.final__pic{margin:0;border-radius:14px;overflow:hidden;background:rgba(27,37,47,.12);box-shadow:var(--sh-m)}
.final__pic picture,.final__pic img{display:block;width:100%;height:auto}
.final__pic img{aspect-ratio:4/3;object-fit:cover;object-position:var(--pos-m,50% 30%)}
@media (min-width:900px){
  .final__in{grid-template-columns:minmax(280px,.85fr) minmax(0,1.5fr);gap:clamp(32px,4vw,56px)}
  .final__pic img{aspect-ratio:4/5;object-position:var(--pos,50% 30%)}
}

/* lokacija on wide screens: text left, team photo right, instead of a 1100px photo band */
@media (min-width:900px){
  #lokacija .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,56px);align-items:stretch}
  .fields__pic{min-height:420px}
}
/* 320px: "12.000" at 56px wrapped its unit onto a touching second line; 48px keeps them on one row */
.pkg__n{font-size:clamp(48px,11vw,76px)}
.pkg__v{row-gap:10px}

/* cenovnik: the three stacked blocks (packages, what is included, free first training) sat
   6 to 12px apart and read as one glued mass; the included list was cramped in two columns */
.pkgs{margin-bottom:0}
.incl{margin-top:28px;padding:30px clamp(22px,4vw,40px) 32px}
.incl__h{font-size:19px}
.incl__list{margin-top:20px;gap:14px 40px;align-items:start}
.incl__list li{line-height:1.5}
.incl__staff{margin-top:24px;padding-top:20px}
.price-free{margin-top:28px}
@media (min-width:720px){
  .incl{margin-top:32px}
  .incl__list{grid-template-columns:1fr 1fr;gap:16px 48px}
  .price-free{margin-top:32px}
}
@media (max-width:719px){
  .incl__list{grid-template-columns:1fr}
}

/* ============================================================
   Spacing scale pass (owner: "nisi popravio margine i paddinge"). The block-to-block audit
   found 66 stacked pairs under 16px on phones and 65 under 24px on desktop: cards, list rows,
   form fields, and headline-to-lede all sat at 10 to 14px. One consistent scale instead:
   list rows 16, cards 16/20, headline to lede 20/24, blocks inside a section 24 to 32.
   ============================================================ */
.ticks{gap:14px;margin-top:28px}
.hero__lede{margin-top:22px}
.hero__cta{margin-top:32px}
.join__in{gap:32px}
.join__intro h2{margin-top:14px}
.join__intro .lede{margin-top:20px}
.form{gap:18px}
.form__hd{margin-bottom:6px}
.form__sub{margin-top:12px}
.form .btn{margin-top:6px}
.steps{gap:16px}
.drill{gap:16px}
.skills{gap:16px}
.kfacts{gap:16px;margin-top:28px}
.kond__intro .lede{margin-top:20px}
.clip__cap{margin-top:12px}
.strip__hd{margin-bottom:22px}
.assess__h + p{margin-top:14px}
.agecards{gap:16px}
.agecard p{margin-top:14px}
.coach__lead{margin-top:24px}
.coach__mentors{margin-top:36px;padding:22px 22px 24px}
.chips{margin-top:16px}
.staff{margin-top:20px;display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:rgba(255,168,0,.08);border:1px solid rgba(255,168,0,.28)}
.staff .ic{width:24px;height:24px;flex:none;margin-top:2px;color:var(--amber)}
.staff p{margin:0;font-size:15.5px;line-height:1.55;color:var(--on-ink)}
.staff b{color:#fff}
.stat__k{margin-top:14px}
.facts{gap:12px;margin-top:28px}
.fields__tx .loc{margin-top:20px}
.fields__note{margin-top:24px}
.revs{gap:18px}
.shead .lede{margin-top:20px}
@media (max-width:899px){ .fields__pic{margin-top:28px} }
@media (min-width:720px){
  .steps{gap:18px}
  .skills{gap:20px}
  .agecards{gap:20px}
  .revs{gap:22px}
  .drill{gap:18px}
  .kfacts{gap:18px}
}
@media (min-width:900px){
  .shead .lede,.join__intro .lede,.kond__intro .lede{margin-top:24px}
  .hero__lede{margin-top:26px}
  .coach__lead{margin-top:28px}
  .form{gap:20px}
}
/* FAQ and reviews: last rows still at 8 to 12px */
.qa{gap:14px}
.q__a{padding:2px 18px 20px}
.q__a ul{gap:10px}
.q__a ul + p,.q__a p + p{margin-top:12px}
.rev__q p + p{margin-top:14px}
.follow__list{margin-top:16px}
@media (min-width:720px){ .qa{gap:16px} }
/* scroll-snap pulled the strip 17px left on load, hiding the gutter before the first clip */
.clips--land{scroll-padding-inline:var(--gut)}

/* Phone hero: .hero__body carried margin-top:-58px from a layout where the photo sat above
   the text and the headline overlapped its lower edge. The text now comes first, so that
   margin pulled the kicker and the top of the H1 under the sticky header. */
@media (max-width:899px){
  .hero__body{margin-top:0;padding-top:clamp(28px,7vw,40px)}
  .hero__media::after{display:none}
  .hero__media{margin-top:8px}
}