/* ═══════════════════════════════════════════════════════════════════════
   BOKA ACADEMY · DAN I HRANA - svijetla varijanta heroja
   Ostatak stranice ostaje nepromijenjen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── svijetli hero ──────────────────────────────────────────────────────
   Traka drži i hero i talase, a mekani oblici žive u njoj: iznad pozadine,
   ispod talasa. Tako ne stoje odsječeni na dnu heroja nego ulaze u separator
   i nestaju iza njega.                                                      */
.lband{position:relative; isolation:isolate; overflow:hidden;
  background:var(--krecnjak)}
.lband > .wavesep{position:relative; z-index:2; background:linear-gradient(to bottom, transparent 0 calc(100% - 3px), var(--to) calc(100% - 3px) 100%)}

.lhero{position:relative; z-index:1; background:transparent;
  padding:clamp(122px,14vh,172px) 0 clamp(56px,7vh,92px)}

/* mekani oblici u pozadini, dolje lijevo i gore desno */
.lhero .blob{position:absolute; z-index:-1; pointer-events:none;
  border-radius:52% 48% 44% 56% / 48% 52% 48% 52%}
.lhero .blob.b1{left:-9%; bottom:-30%; width:clamp(230px,28vw,390px); aspect-ratio:1/.88;
  background:var(--oleander-soft); opacity:.7}
.lhero .blob.b2{left:2%; bottom:-36%; width:clamp(150px,17vw,240px); aspect-ratio:1/.86;
  background:var(--zaliv-soft); opacity:.7}
.lhero .blob.b3{right:-9%; top:-20%; width:clamp(210px,24vw,340px); aspect-ratio:1;
  background:var(--sunce-soft); opacity:.7}

.lhero-in{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.6vw,66px); align-items:center}
.lhero .eyebrow{color:var(--kamen)}
.lhero h1{margin-top:14px; max-width:14ch; color:var(--noc);
  font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.06}
.lhero .lede{margin-top:18px; max-width:42ch; color:var(--kamen)}
.lhero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.lhero-fine{margin-top:20px; font-size:.78rem; color:var(--kamen)}

/* sekundarno dugme: obrisna pilula */
.btn-line{background:transparent; color:var(--noc);
  border:2px solid var(--rub); box-shadow:none;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease)}
.btn-line:hover{background:var(--zaliv-soft); border-color:var(--duboko); transform:translateY(-2px)}
.btn-line:active{transform:translateY(0)}

/* fotografija sa suncem i rukom pisanom karticom */
.lh-fig{position:relative; width:100%; max-width:520px; margin-inline:auto}
.lh-photo{position:relative; z-index:1; margin:0; border-radius:var(--r-xl); overflow:hidden;
  background:var(--pijesak-2); aspect-ratio:1/.78;
  box-shadow:0 34px 60px -34px rgba(23,50,46,.5)}
.lh-photo img{width:100%; height:100%; object-fit:cover; object-position:56% 42%; display:block;
  transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
.lh-fig:hover .lh-photo img{transform:scale(1.05)}

.lh-sun{position:absolute; z-index:0; left:-9%; top:-13%; width:clamp(96px,12vw,150px);
  color:var(--sunce); pointer-events:none}
.lh-sun svg{width:100%; height:auto; transform-origin:50% 50%;
  animation:sunTurn 38s linear infinite}
.lh-sun .core{animation:sunPulse 6s ease-in-out infinite; transform-origin:50% 50%}

.lh-note{position:absolute; z-index:2; right:-4%; top:9%; max-width:160px;
  padding:15px 19px; border-radius:18px; transform:rotate(3deg);
  background:var(--krecnjak); border:1px solid var(--linija); color:var(--noc);
  font-family:var(--akc); font-style:italic; font-size:.95rem; line-height:1.4;
  box-shadow:0 14px 30px -18px rgba(23,50,46,.55)}
.lh-note em{display:block; font-family:var(--display); font-style:normal; font-weight:700;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--duboko);
  margin-top:7px}

/* talas ispod svijetlog heroja */
.lband > .wavesep .w-far path, .lband > .wavesep .w-back path,
.lband > .wavesep .w-front path{opacity:1}

@media (prefers-reduced-motion:reduce){
  .lh-sun svg, .lh-sun .core{animation:none}
}
@media (max-width:900px){
  .lhero-in{grid-template-columns:1fr; gap:clamp(28px,5vw,44px)}
  .lh-fig{max-width:440px}
  .lhero .blob.b3{display:none}
}
@media (max-width:600px){
  .lh-note{right:0; max-width:135px; font-size:.86rem; padding:12px 15px}
  .lh-sun{width:80px; left:-4%}
}

/* ═══════════════════════════════════════════════════════════════════════
   SATNICA NA ŠINI
   Sekcija se zakači za vrh ekrana, a vertikalni skrol vozi trenutke dana
   u stranu. Dok se svi ne prođu, stranica ne ide dalje.
   Bez JS-a i uz smanjenu animaciju ostaje obična traka za prevlačenje.
   ═══════════════════════════════════════════════════════════════════════ */
.danrail{padding:0; overflow:clip}
.danrail > .dr-wrap{padding:0}
.dr-wrap{position:relative}
.dr-on .dr-wrap, .danrail .dr-on{height:var(--dr-h, auto)}
.dr-stage{display:flex; align-items:center;
  padding:clamp(70px,9vh,104px) 0 clamp(34px,5vh,56px)}
.dr-on .dr-stage{position:sticky; top:0; height:100svh; min-height:560px}

.dr-in{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,54px); align-items:center; width:100%}
.dr-side .eyebrow{margin:0}
.dr-side h2{margin-top:12px; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08}
.dr-side .clockcol{margin-top:clamp(18px,2.4vw,30px)}
.dr-main{min-width:0}

/* ── traka ───────────────────────────────────────────────────────────── */
.dr-view{overflow:hidden; margin-inline:-14px; padding-inline:14px}
.dr-plain .dr-view{overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.dr-plain .dr-view::-webkit-scrollbar{display:none}

.dr-line{display:flex !important; flex-wrap:nowrap; gap:clamp(12px,1.4vw,18px);
  list-style:none; margin:0; padding:10px 0 14px; width:max-content;
  will-change:transform; transition:transform .12s linear}
.dr-plain .dr-line{transition:none}
.dr-snap .dr-line{transition:transform .52s cubic-bezier(.2,.9,.25,1)}
/* rep na kraju: umjesto prazne podloge, rukom pisana završnica */
.dr-line::after{content:"To je jedan dan."; flex:0 0 var(--tail, 0px);
  display:grid; place-items:center; padding:0 18px; text-align:center;
  font-family:"Caveat", var(--display); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.2; color:var(--zlato); opacity:.75}
.dr-plain .dr-line::after{flex-basis:0; padding:0}

/* ── kartica trenutka ───────────────────────────────────────────────── */
.dr-line > li{flex:0 0 clamp(228px,23vw,296px); scroll-snap-align:center;
  display:flex; flex-direction:column; padding:16px 16px 18px; border-radius:var(--r-lg);
  background:var(--krecnjak); border:1px solid var(--linija); box-shadow:var(--shadow-1);
  opacity:.5; transform:scale(.93); transform-origin:50% 60%;
  transition:opacity .45s var(--ease), transform .5s cubic-bezier(.2,.9,.25,1),
             background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)}
.dr-line > li.open{opacity:1; transform:none; background:var(--sunce-soft);
  border-color:rgba(233,180,76,.5); box-shadow:var(--shadow-2)}
.dr-line > li + li{margin-top:0}

/* zaglavlje kartice: nakrivljena pilula, vrijeme i naslov */
.dr-line .day-row{padding:0; width:100%}
.dr-line .head{display:flex; align-items:center; gap:10px; grid-template-columns:none;
  padding:9px 15px; transform:rotate(var(--tilt,0deg)); transform-origin:50% 50%;
  background:var(--krecnjak); border-color:var(--rub)}
.dr-line > li.open .head{transform:rotate(0deg); background:var(--krecnjak);
  border-color:rgba(233,180,76,.7); box-shadow:0 8px 18px -12px rgba(154,107,13,.5)}
.dr-line .head time{text-align:left; font-size:.9rem}
.dr-line .head .dot{width:9px; height:9px; border-width:2px}
.dr-line .day-row .t{font-size:.98rem !important; letter-spacing:0 !important;
  white-space:normal; line-height:1.2}
.dr-line > li.open .day-row .t{font-size:1.02rem !important}
.dr-line .day-row .d{display:none !important}

/* scena i tekst uvijek stoje, samo se pale na aktivnoj kartici */
.dr-line .detail{display:block; grid-template-rows:none}
.dr-line .detail-in{overflow:visible}
.dr-line .sc{width:100%; max-width:none; margin:14px 0 0; opacity:.9; transform:none}
.dr-line > li.open .sc{opacity:1}
.dr-line .detail-sub{padding:12px 4px 0 4px; margin:0; font-size:.88rem; line-height:1.5;
  opacity:1; transform:none; max-width:none}
.dr-line > li:not(.open) .detail-sub{color:var(--kamen)}

/* ── podnožje: strelice, traka napretka, brojač ─────────────────────── */
.dr-foot{display:flex; align-items:center; gap:14px; margin-top:clamp(14px,2vw,22px)}
.dr-nav{flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid;
  place-items:center; cursor:pointer; border:1.5px solid var(--rub);
  background:var(--krecnjak); color:var(--noc);
  transition:background .3s, color .3s, border-color .3s, transform .25s var(--ease)}
.dr-nav svg{width:19px; height:19px}
.dr-nav:hover{background:var(--duboko); color:var(--krecnjak); border-color:var(--duboko)}
.dr-nav:active{transform:scale(.93)}
.dr-bar{flex:1 1 auto; height:5px; border-radius:99px; background:var(--pijesak-2); overflow:hidden}
.dr-bar span{display:block; height:100%; border-radius:99px; background:var(--duboko);
  transform-origin:0 50%; transform:scaleX(.02); transition:transform .12s linear}
.dr-count{flex:0 0 auto; font-family:var(--display); font-weight:700; font-size:.9rem;
  color:var(--kamen); font-variant-numeric:tabular-nums}
.dr-count b{color:var(--noc); font-size:1.08rem}
.dr-count i{font-style:normal; margin:0 2px; opacity:.5}
.dr-hint{margin-top:12px; text-align:center; font-family:"Caveat", var(--display);
  font-weight:600; font-size:1.12rem; color:var(--zlato)}
.dr-on .dr-hint{animation:drHint 3.4s ease-in-out infinite}
@keyframes drHint{0%,100%{opacity:.6; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}

/* ── uži ekrani ─────────────────────────────────────────────────────── */
@media (max-width:900px){
  .dr-in{grid-template-columns:1fr; gap:clamp(14px,2.4vw,22px); align-content:center}
  .dr-side{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center}
  .dr-side .eyebrow{grid-column:1; grid-row:1}
  .dr-side h2{grid-column:1; grid-row:2; margin-top:4px; font-size:clamp(1.55rem,5.6vw,2rem)}
  .dr-side .clockcol{grid-column:2; grid-row:1 / span 2; margin-top:0; width:clamp(96px,26vw,140px)}
  .dr-side .clockcol .now{font-size:.76rem; margin-top:8px; text-align:center}
  .dr-side .clockcol .now-btn{display:none}
  .dr-line > li{flex:0 0 min(74vw, 300px)}
  .dr-stage{padding-top:clamp(84px,12vh,104px)}
  .dr-view{margin-inline:0; padding-inline:0; overflow:visible; clip-path:inset(-24px -100vw -24px -8px)}
  .dr-side .clockcol .now{max-width:14ch; margin-inline:auto}
}
@media (max-width:560px){
  .dr-line > li{flex:0 0 min(80vw, 290px); padding:14px 14px 16px}
  .dr-line .head{padding:8px 13px; gap:8px}
  .dr-line .day-row .t{font-size:.94rem !important}
  .dr-foot{gap:10px}
  .dr-nav{width:44px; height:44px}
  .dr-count{font-size:.84rem}
  .dr-hint{font-size:1.02rem}
}

@media (prefers-reduced-motion:reduce){
  .dr-hint{animation:none}
  .dr-line > li{opacity:1; transform:none}
}