/* Dečji rođendani: his playroom set leads; play comes from scale and rhythm, not from props. */

/* ============ hero: the title huge, a portrait locked beside it, then one landscape across both halves ============ */
.kh{align-items:start;padding-top:112px}
.kh-h{grid-column:m 1/m 9;grid-row:1;--span:8;--fmax:250px;letter-spacing:-.015em;line-height:.96}
.kh-r{grid-column:m 1/m 7;grid-row:2;margin-top:clamp(26px,3vw,46px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.kh-r p{font-size:var(--body);font-weight:500;line-height:1.5;max-width:26em}
.kh-p{grid-column:m 9/m-end;grid-row:1/3;aspect-ratio:2/3;overflow:hidden;background:var(--band)}
.kh-w{grid-column:full-start/full-end;grid-row:3;margin-top:clamp(40px,4.6vw,80px);aspect-ratio:21/9;max-height:calc(100lvh - 60px);overflow:hidden;background:var(--band)}
@media (max-width:899px){
  .kh{padding-top:96px}
  .kh-h{grid-column:m 1/m-end;--span:12;--fmaxm:120px}
  .kh-p{grid-column:m 7/m-end;grid-row:2;margin-top:26px;aspect-ratio:3/4}
  .kh-r{grid-column:m 1/m 7;grid-row:2;align-self:end;flex-direction:column;align-items:flex-start;gap:18px;padding-right:4px}
  .kh-r p{font-size:16px}
  .kh-r .btn{padding:0 16px;font-size:15px}
  .kh-w{aspect-ratio:3/2;margin-top:36px}
}
@media (max-width:420px){
  .kh-r{grid-column:m 1/m-end;grid-row:3;align-self:start;margin-top:24px}
  .kh-p{grid-column:m 4/m-end}
  .kh-w{grid-row:4}
}

/* ============ Pet kadrova: one frame, tap through the party ============ */
.k5{background:var(--band);padding:clamp(110px,11vw,180px) 0;align-items:center;margin-bottom:clamp(110px,11vw,180px)}
.k5-t{grid-column:m 1/m 5;grid-row:1;min-width:0;padding-right:var(--gut)}
.k5-h{--span:4;--fmax:150px;line-height:.98}
/* .k5-t pads one gutter on the right, so four columns minus that (the full four cut the stop of „frames.") */
@media (min-width:900px){.k5-h{--w:calc((var(--main) - 11 * var(--gut)) * 4 / 12 + 3 * var(--gut) - var(--gut))}}
.k5-hint{margin-top:26px;font-size:var(--body);font-weight:500;max-width:16em}
.k5-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:34px}
.k5-dots{display:flex;margin-left:-8px}
.k5-dot{position:relative;width:30px;height:44px}
.k5-dot::before,.k5-dot i{content:"";position:absolute;left:9px;top:16px;width:12px;height:12px;background:var(--grey)}
.k5-dot i{background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.k5-dot.is-on i{transform:scaleX(1);transition:transform .45s var(--e2)}
.k5-arw{display:flex;gap:8px}
.k5-arw button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;transition:background-color .3s,transform .4s var(--e2)}
.k5-arw button:hover{background:var(--band2)}
.k5-st{background:var(--band2)}
.k5-arw svg{width:20px;height:20px}
.k5-st{grid-column:m 5/full-end;grid-row:1;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--band);cursor:pointer;outline-offset:-4px}
.k5-f{position:absolute;inset:0;clip-path:inset(0 0 0 100%)}
.k5-f.is-on{clip-path:inset(0 0 0 0);z-index:2}
.k5-f.is-prev{clip-path:inset(0 0 0 0);z-index:1}
.k5-f.is-anim{transition:clip-path 1.05s var(--e1)}
.k5-f.from-l{clip-path:inset(0 100% 0 0)}
.k5-f.from-l.is-on{clip-path:inset(0 0 0 0)}
@media (max-width:899px){
  .k5{align-items:start}
  .k5-t{display:contents}
  .k5-h{grid-column:m 1/m-end;grid-row:1;--span:12;--fmaxm:100px}
  .k5-hint{grid-column:m 1/m-end;grid-row:2;margin-top:18px}
  .k5-st{grid-column:full-start/full-end;grid-row:3;aspect-ratio:4/5;margin-top:28px}
  .k5-ctl{grid-column:m 1/m-end;grid-row:4;margin-top:16px}
}

/* ============ a trio, asymmetric, nothing written on it ============ */
.kt{padding:0 0 clamp(110px,11vw,180px);align-items:start}
.kt-a{grid-column:m 1/m 6;grid-row:1;aspect-ratio:4/5;overflow:hidden;background:var(--band)}
.kt-b{grid-column:m 6/m 10;grid-row:1;aspect-ratio:3/4;overflow:hidden;background:var(--band);margin-top:clamp(90px,11vw,200px)}
.kt-c{grid-column:m 10/m-end;grid-row:1;aspect-ratio:1/1;overflow:hidden;background:var(--band);margin-top:clamp(40px,4vw,70px)}
.kt-b{transition-delay:.12s}.kt-c{transition-delay:.24s}
@media (max-width:899px){
  .kt-a{grid-column:full-start/full-end;grid-row:1}
  .kt-b{grid-column:m 1/m 7;grid-row:2;margin-top:var(--gut)}
  .kt-c{grid-column:m 7/m-end;grid-row:2;align-self:end;margin-top:0}
}

/* ============ what is certain, and the ask ============ */
.kf{padding:clamp(30px,4vw,70px) 0 clamp(110px,11vw,180px)}
.kf-g{align-items:start;row-gap:0}
.kf-n{grid-column:1/7;grid-row:1;--span:6;--fmax:104px;--fmaxm:64px;line-height:1}
.kf-c{grid-column:1/7;grid-row:2;margin-top:24px;font-size:clamp(22px,2.2vw,36px)}
.kf-c .chip-xl{font-size:1em;padding:.36em .9em .42em .74em;white-space:normal}
.kf-x{grid-column:8/13;grid-row:1;align-self:end;font-weight:600;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.005em;line-height:1.14;text-wrap:balance}
.kf-l{grid-column:8/13;grid-row:2;margin-top:22px;font-size:var(--body);font-weight:500;line-height:1.45}
.kf-l li{display:flex;gap:12px;padding:4px 0}
.kf-l li::before{content:"";width:8px;height:8px;flex:none;margin-top:.55em;background:var(--ink)}
.kf-cta{grid-column:1/-1;grid-row:3;margin-top:clamp(40px,4vw,70px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.kf-cta p{font-size:var(--body);font-weight:500;max-width:28em}
@media (max-width:899px){
  .kf-n,.kf-c,.kf-x,.kf-l,.kf-cta{grid-column:1/-1;grid-row:auto}
  .kf-c{font-size:20px}
  .kf-x{margin-top:30px;font-size:clamp(22px,6vw,28px)}
}