/* Alcedo film: landing, postaje, oznake na kanuju, reka ob robu, pop-upa. */

/* ---------- landing: canvas -> napis -> ospredje -> meni ---------- */
.film-on .landing{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:2;left:0;right:0;top:var(--alcedo-top,40svh);transform:translateY(-100%);pointer-events:none;will-change:opacity}
.landing__canoeing{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.6em;padding-left:.6em;color:#fff}
.landing__alcedo{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(160px,20vw,320px);line-height:.74;letter-spacing:-.02em;color:#fff}
.film-on .st--landing{display:block;padding:0}
.film-on .landing__txt{position:absolute;left:48px;bottom:56px;width:440px;color:#fff;text-shadow:0 1px 12px rgb(10 28 24/.6);will-change:opacity}
.film-on .landing__sub{font-size:32px}
@media (max-width:767px),(orientation:portrait){
  .landing__alcedo{font-size:min(128px,30vw)}
  .landing__canoeing{font-size:15px}
  .film-on .landing__txt{left:24px;right:24px;width:auto;bottom:calc(18px + env(safe-area-inset-bottom))}
  .film-on .landing__sub{font-size:21px;line-height:1.2}
  .film-on .landing__teme{margin-top:6px;font-size:13px}
}

/* ---------- senca pod besedilom ---------- */
.shade{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:opacity var(--t-out,150ms) linear}
.stage[data-shade~="top"] .shade,.stage[data-shade~="bottom"] .shade,.stage[data-shade~="left"] .shade{transition:opacity var(--t-in,300ms) var(--ease)}
/* telefon: višino sence nastavi site.js glede na blok besedila (+45 px mehkega roba) */
.shade--top{inset:0 0 auto 0;height:var(--shade-top,370px);background:linear-gradient(to bottom,rgb(10 28 24/.82),rgb(10 28 24/.76) calc(100% - 45px),rgb(10 28 24/.3) calc(100% - 15px),transparent)}
.shade--bottom{inset:auto 0 0 0;height:var(--shade-bottom,330px);background:linear-gradient(to top,rgb(10 28 24/.82),rgb(10 28 24/.76) calc(100% - 45px),rgb(10 28 24/.3) calc(100% - 15px),transparent)}
.shade--left{inset:0 auto 0 0;width:54vw;background:linear-gradient(to right,rgb(10 28 24/.8),rgb(10 28 24/.78) 74%,transparent)}
.stage[data-shade~="top"] .shade--top,.stage[data-shade~="bottom"] .shade--bottom,.stage[data-shade~="left"] .shade--left{opacity:1}

/* ---------- postaje: razdelek je okvir zaslona; .st__box zgoraj, .st__foot spodaj (telefon) ---------- */
.film-on .st{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:calc(var(--menu-h) + 14px) var(--pad) calc(18px + env(safe-area-inset-bottom))}
/* fade + 16 px dvig: ven --t-out, noter --t-in */
.film-on .st__box,.film-on .st__foot,.film-on .pismo,.film-on .pismo__title{opacity:0;transform:translate3d(0,16px,0);visibility:hidden;pointer-events:none;transition:opacity var(--t-out,150ms) linear,transform var(--t-out,150ms) linear,visibility 0s linear var(--t-out,150ms)}
.film-on .is-on>.st__box,.film-on .is-on>.st__foot,.film-on .is-on>.pismo,.film-on .pismo__title.is-on{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity var(--t-in,300ms) var(--ease),transform var(--t-in,300ms) var(--ease),visibility 0s}
.film-on .st__box,.film-on .st__foot{text-shadow:0 1px 10px rgb(10 28 24/.55)}
.film-on .zap-kartice,.film-on .cipi{text-shadow:none}
/* obrazec mora biti dosegljiv s tipkovnico tudi, ko še ni na vrsti */
.film-on .pismo{visibility:visible}

/* kanuji, telefon: manjši naslov, da blok ostane nad ptico */
.film-on .st--kanuji .title--big{font-size:44px}
.film-on .st--kanuji .st__box>.body+.body{margin-top:6px}
.film-on .st--kanuji .stevilke{margin-top:14px;gap:14px}
.film-on .st--kanuji .stevilke span{white-space:nowrap}
.film-on .st--kanuji .znaki{margin-top:12px;padding-top:10px}

/* poti, telefon: 3 vrstice + „še 2“, kartici zapiskov v vodoravnem drsniku */
.film-on .poti li:nth-child(n+4){display:none}
.film-on .poti__vec{display:inline-flex}
.film-on .zap-kartice{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);scrollbar-width:none}
.film-on .zap-kartice::-webkit-scrollbar{display:none}
.film-on .zap-kartice li{flex:0 0 74%;scroll-snap-align:start}

/* pristan: obrazec na temni plošči, telefon spodaj čez celo širino */
.film-on .pismo{position:absolute;left:0;right:0;bottom:0;padding:16px 20px calc(12px + env(safe-area-inset-bottom));background:rgb(10 28 24/.86);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgb(0 0 0/.25)}
.film-on .pismo__title{font-size:24px;margin-bottom:2px}
.film-on .pismo__uvod{font-size:15px;line-height:1.4}
.film-on .pismo form{margin-top:8px}
.film-on .noga{margin-top:8px}

/* ---------- telefon (dizajn tel-v2, 12. 11.): besedilo v zgornjem ali spodnjem pasu, kanu s ptico v sredini prost ---------- */
@media (max-width:767px),(orientation:portrait){
  /* »Brez animacij« je na telefonu samo v nogi */
  .menu__anim{display:none}
  /* landing ostane kot zdaj: podnaslov pod menijem (spodaj bi pri vrstici stal čez trup) */
  .film-on .landing__txt{top:calc(var(--menu-h) + env(safe-area-inset-top) + 8px);bottom:auto}
  /* aljoša: fotka in dva podatka spodaj, čez odsev (tudi v mirnem načinu) */
  .st__foot--aljosa{display:flex;align-items:flex-end;gap:16px}
  .st__foot--aljosa .mini{width:110px;height:116px}
  .st__foot--aljosa .podatki{flex:1;flex-direction:column;margin:0}
  .st__foot--aljosa .podatki li{padding:0}
  .st__foot--aljosa .podatki li+li{margin-top:10px;padding-top:10px;border-left:0;border-top:1px solid rgb(243 239 230/.35)}
  /* kanuji: blok zgoraj; številke in legenda 2×2 spodaj; oder se med odsekom 287 → 430 pomanjša na celo širino slike (site.js) */
  .film-on .st--kanuji .znaki{display:none}
  .film-on .st--kanuji .stevilke{margin:0;gap:12px}
  .film-on .st--kanuji .stevilke li{flex:1}
  .film-on .st--kanuji .stevilke b{font-size:26px}
  .film-on .st--kanuji .stevilke span{margin-top:4px;font-size:13px}
  .film-on .st--kanuji .ozn-leg{margin-top:14px}
  .film-on .st--kanuji.is-tel .ozn-list{display:none}
  .film-on .st--kanuji.is-tel .ozn-leg{display:grid}
  .film-on .st--kanuji.is-tel .ozn__dot{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:12px}
  /* vesla: citat zgoraj pod stavkom, fotka nošenja spodaj; .st__box in .st__row sta display:contents */
  .film-on #vesla{justify-content:flex-start;gap:0}
  .film-on #vesla .st__box,.film-on #vesla .st__row{display:contents}
  .film-on #vesla .st__col{flex:none;margin-top:12px}
  .film-on #vesla .st__foot{order:1;margin-top:16px}
  .film-on #vesla .kartica{order:2;margin-top:auto;display:flex;align-items:flex-end;gap:16px;width:auto}
  .film-on #vesla .kartica .mini{width:78px;height:96px}
  .film-on #vesla .kartica__opis{margin:0 0 4px;font-size:15px;line-height:1.4;color:var(--ink)}
  .film-on #vesla .kicker,.film-on #vesla .st__col,.film-on #vesla .kartica{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--t-out,150ms) linear,transform var(--t-out,150ms) linear}
  .film-on #vesla.is-on .kicker,.film-on #vesla.is-on .st__col,.film-on #vesla.is-on .kartica{opacity:1;transform:none;transition:opacity var(--t-in,300ms) var(--ease),transform var(--t-in,300ms) var(--ease)}
  /* poti: vseh 5 v eni vrstici (opis skrajšan), zapiska kot majhni kartici z ikono, dva gumba po 48 px */
  .film-on .poti li:nth-child(n+4){display:block}
  .film-on .poti__vec{display:none}
  .film-on #poti .poti{margin-top:12px}
  .film-on #poti .poti a{grid-template-columns:36px auto minmax(0,1fr);align-items:baseline;min-height:32px;padding:3px 0}
  .film-on #poti .poti__leto{grid-row:auto;padding:0;font-size:13px}
  .film-on #poti .poti b{font-size:15px;white-space:nowrap}
  .film-on #poti .poti__opis{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
  .film-on .zap-kartice li{flex:0 0 auto}
  .film-on .zap-kartice a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:8px}
  .film-on .zap-kartice b{font-family:var(--text);font-weight:500;font-size:14px;white-space:nowrap}
  .film-on .zap-kartice span{display:none}
  .film-on .zap-ikona{display:block}
  .film-on #poti .st__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .film-on #poti .st__btns .btn{justify-content:center;min-height:48px;padding:0 8px}
  /* pristan: obrazec brez plošče v spodnji polovici (senca pod njim), ptica na premcu ostane vidna zgoraj */
  .film-on .pismo{padding:0 var(--pad) calc(10px + env(safe-area-inset-bottom));background:none;border-radius:0;box-shadow:none}
  .film-on .pismo__title{font-size:28px;line-height:1.1}
  .film-on .pismo__uvod{margin-top:8px}
  .film-on .pismo form{gap:8px 16px}
  .film-on .pismo .f textarea{height:48px;min-height:48px}
  .film-on .pismo .cta{justify-self:stretch;justify-content:center;min-height:48px;margin-top:4px}
  .film-on .pismo__status.is-opomba{display:none}
  .film-on .noga{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
  /* nizek telefon (100svh < 740 px, site.js): kanu sega skoraj do dna, zato so spodnji bloki strnjeni */
  .film-on.is-nizek .st{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .film-on.is-nizek .st__foot--aljosa .mini{width:96px;height:96px}
  .film-on.is-nizek .st__foot--aljosa .podatki{font-size:13px}
  .film-on.is-nizek #poti .zap-kartice a{min-height:36px}
  .film-on.is-nizek #poti .st__btns{margin-top:8px}
}
@media (max-width:370px){
  /* ozki telefoni (360 px): manjši naslovi, da bloki ostanejo nad ptico */
  .film-on .st .title{font-size:30px}
  .film-on .st--kanuji .title--big{font-size:40px}
  .film-on .st .body{font-size:16px}
  .film-on .st .lede{font-size:20px}
}
/* --lift: dvig na pristanu (telefon); --zk/--zx/--zy: pomanjšanje na koraku Kanuji (telefon), nastavi site.js */
.stage__canvas,.stage__still{transform:translate3d(var(--zx,0px),calc(var(--zy,0px) + var(--lift,0px)),0) scale(var(--zk,1));transform-origin:0 0}
.stage__still{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;pointer-events:none}
/* koraki: vsak je en zaslon, en poteg = en korak */
html.film-on{scroll-snap-type:y mandatory}
.film-on .step{height:100svh;scroll-snap-align:start;scroll-snap-stop:always}

/* ---------- oznake na razstavljenem kanuju (film): pozicije v px nastavi site.js ---------- */
.film-on .still-wrap{display:contents}
.film-on .oznake{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity var(--t-out,150ms) linear,visibility 0s linear var(--t-out,150ms)}
.film-on .oznake.is-on{opacity:1;visibility:visible;transition:none}
/* ob odhodu se vse skrije v --t-out, nato se otroci tiho ponastavijo */
.film-on .ozn__dot{opacity:0;transform:scale(.6);transition:opacity 0s var(--t-out,150ms),transform 0s var(--t-out,150ms)}
.film-on .oznake.is-on .ozn__dot{opacity:1;transform:none;transition:opacity 250ms var(--ease) calc(var(--i) * 100ms),transform 250ms var(--ease) calc(var(--i) * 100ms)}
.film-on .oznake__crte line{transition:stroke-dashoffset 0s var(--t-out,150ms)}
.film-on .oznake.is-on .oznake__crte line{stroke-dashoffset:0;transition:stroke-dashoffset 300ms var(--ease) calc(var(--i) * 100ms + 250ms)}
.oznake__crte line:nth-child(2){--i:1}.oznake__crte line:nth-child(3){--i:2}.oznake__crte line:nth-child(4){--i:3}
.film-on .ozn__label{opacity:0;transform:translate3d(0,8px,0);transition:opacity 0s var(--t-out,150ms),transform 0s var(--t-out,150ms)}
.film-on .oznake.is-on .ozn__label{opacity:1;transform:none;transition:opacity 250ms var(--ease) calc(var(--i) * 100ms + 550ms),transform 250ms var(--ease) calc(var(--i) * 100ms + 550ms)}
/* desktop: obroč z rdečo sredino, črta, oznaka (kot na skici) */
.film-on .st--kanuji:not(.is-kompakt) .oznake__crte{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.oznake__crte line{stroke:rgb(243 239 230/.75);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;--i:0}
.film-on .st--kanuji:not(.is-kompakt) .ozn__dot{width:18px;height:18px;margin:-9px 0 0 -9px;background:rgb(10 28 24/.25);border:2px solid #f3efe6}
.film-on .st--kanuji:not(.is-kompakt) .ozn__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#C8372D}
.film-on .st--kanuji:not(.is-kompakt) .ozn__dot b{display:none}
.film-on .st--kanuji:not(.is-kompakt) .ozn__label{display:block;position:absolute;left:0;top:0;width:max-content;max-width:280px;text-shadow:0 1px 8px rgb(10 28 24/.9),0 0 2px rgb(10 28 24/.6)}
/* mehak temen oblak pod oznako: kontrast tudi na svetli megli */
.film-on .st--kanuji:not(.is-kompakt) .ozn__label::before{content:"";position:absolute;z-index:-1;inset:-10px -18px;border-radius:24px;background:rgb(10 28 24/.78);filter:blur(12px)}
.film-on .st--kanuji:not(.is-kompakt) .ozn-list{display:none}

/* ---------- reka ob robu ---------- */
.film-on .rail-film{display:block;position:fixed;z-index:30;left:10px;top:120px;bottom:120px;width:20px;margin-left:-10px;opacity:0;pointer-events:none;transition:opacity var(--t-in,300ms) var(--ease)}
.rail-film.is-on{opacity:1;pointer-events:auto}
.rail-film__line{position:absolute;left:9px;top:0;bottom:0;width:2px;background:rgb(243 239 230/.35)}
.rail-film__line i{position:absolute;inset:0;background:#C8372D;transform-origin:50% 0;transform:scaleY(var(--fill,0));transition:transform var(--t-in,300ms) var(--ease)}
.rail-film ol{list-style:none;margin:0;padding:0}
.rail-film li{position:absolute;left:10px;width:0;height:0}
.rail-film li:nth-child(1){top:0}.rail-film li:nth-child(2){top:20%}.rail-film li:nth-child(3){top:40%}.rail-film li:nth-child(4){top:60%}.rail-film li:nth-child(5){top:80%}.rail-film li:nth-child(6){top:100%}
.rail-film a{position:absolute;left:-22px;top:-22px;width:44px;height:44px;display:block}
.rail-film a::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;box-sizing:border-box;border:2px solid #f3efe6;background:#0a1c18}
.rail-film a.is-done::before{background:#C8372D;border-color:#C8372D}
.rail-film span{position:absolute;left:34px;top:50%;translate:0 -50%;white-space:nowrap;padding:3px 10px;border-radius:6px;background:rgb(10 28 24/.9);font-family:var(--display);font-size:14px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity 160ms var(--ease)}
.rail-film a:focus-visible span{opacity:1}

/* ---------- desktop: vse postaje v levi tretjini, navpično na sredini ---------- */
@media (min-width:768px) and (orientation:landscape){
  .film-on .st{justify-content:center;align-items:flex-start;gap:28px;padding:calc(var(--menu-h) + 20px) 40px 40px 96px}
  .film-on .st__box,.film-on .st__foot{width:min(33vw,460px)}
  .film-on .st--kanuji .st__box,.film-on .st--kanuji .st__foot{width:var(--kanuji-w,min(33vw,460px))}
  .film-on .st--kanuji .title--big{font-size:min(96px,calc(var(--kanuji-w,460px) / 4.3))}
  .film-on .st--kanuji .st__box>.body+.body{margin-top:12px}
  /* številke so prve v .st__foot: razmik 28 px (gap) - 2 = 26 px pod stavkom, kot prej */
  .film-on .st--kanuji .stevilke{margin-top:-2px;gap:24px}
  .film-on .st--kanuji .stevilke b{font-size:min(44px,calc(var(--kanuji-w,460px) / 8.2))}
  .film-on .st--kanuji .stevilke span{white-space:normal}
  .film-on .st--kanuji .znaki{margin-top:18px;padding-top:14px}
  .film-on .st--kanuji .znaki+.ozn-list{margin-top:14px}
  .film-on .poti li:nth-child(n+4){display:block}
  .film-on .poti__vec{display:none}
  /* aljoša: fotka in podatka sta v .st__foot; razmiki kot prej (vrstica 20 px, podatki 16 px) */
  .film-on #aljosa{gap:20px}
  .film-on #aljosa .st__box>.body{margin-top:10px}
  .film-on #aljosa .podatki{margin-top:16px}
  .film-on .zap-kartice{display:grid;overflow:visible;margin-right:0;padding-right:0}
  /* brez drsnika kartice ne smejo postati točke pripenjanja cele strani */
  .film-on .zap-kartice li{scroll-snap-align:none}
  .film-on .pismo{left:96px;right:auto;bottom:auto;top:50%;width:min(33vw,440px);padding:24px 28px;border-radius:14px;transform:translate3d(0,calc(-50% + 16px),0)}
  .film-on .is-on>.pismo{transform:translate3d(0,-50%,0)}
  .film-on .pismo__title{font-size:30px}
  .film-on .pismo__uvod{font-size:17px}
  .film-on .rail-film{left:44px}
  .rail-film__line{width:3px;left:8.5px}
  .rail-film a::before{width:14px;height:14px;margin:-7px}
}
@media (min-width:768px) and (orientation:landscape) and (hover:hover) and (pointer:fine){.rail-film a:hover span{opacity:1}}

/* ---------- pop-upa ---------- */
.pop{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--ink)}
.pop::backdrop{background:rgb(6 16 14/.72)}
.pop__panel{position:absolute;box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
.pop__close{position:absolute;z-index:2;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:rgb(10 28 24/.75);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.pop--posnetki .pop__panel{inset:auto 0 0 0;max-height:92svh;padding:56px 16px 20px;background:#0f2622;border-radius:16px 16px 0 0}
.pop__player .yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:10px;overflow:hidden;background:#000;cursor:pointer}
.pop__player .yt img{width:100%;height:100%;object-fit:cover}
.pop__player .yt::after{content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px;border-radius:50%;background:#C8372D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/28px no-repeat}
.pop__player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px}
.pop__list{list-style:none;margin:14px 0 0;padding:0}
.pop__list button{display:block;width:100%;min-height:44px;padding:10px 12px;text-align:left;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.pop__list button[aria-pressed="true"]{background:rgb(200 55 45/.22);box-shadow:inset 3px 0 0 #C8372D}
.pop__list b{display:block;font-family:var(--display);font-weight:500;font-size:16px}
.pop__list span{display:block;font-size:14px;color:var(--ink-soft)}
.pop--zapiski .pop__panel{inset:4svh 8px 0 8px;padding:56px 22px 28px;background:#F4F0E8;color:#17312a;border-radius:16px 16px 0 0}
.pop--zapiski .pop__close{background:#17312a}
.pop--zapiski .title{color:#17312a}
.pz-items{list-style:none;margin:16px 0 0;padding:0}
.pz-items li{border-top:1px solid rgb(23 49 42/.25)}
.pz-items a{display:block;padding:16px 0;color:#17312a;text-decoration:none}
.pz-items strong{display:block;font-family:var(--display);font-weight:500;font-size:22px}
.pz-items span{display:block;margin-top:4px;color:#44564c;font-size:15px}
.pz-back{min-height:44px;padding:0 14px;border:1.5px solid #17312a;border-radius:8px;background:transparent;color:#17312a;font:inherit;cursor:pointer}
.pz-body{margin-top:18px;font-size:17px;line-height:1.6}
.pz-body h1{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.1;margin:0 0 16px}
.pz-body img{width:100%;height:auto;border-radius:8px}
.pz-body .ph{margin:18px 0;display:grid;gap:10px}
.pz-body a{color:#17312a}
@media (min-width:768px) and (orientation:landscape){
  .pop--posnetki .pop__panel{left:48px;right:48px;top:50%;bottom:auto;transform:translateY(-50%);max-height:84svh;display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start;padding:56px 28px 28px;border-radius:16px}
  .pop__list{margin:0}
  .pop--zapiski .pop__panel{inset:0 0 0 auto;width:660px;border-radius:0;padding:64px 44px 40px;animation:pz-in 320ms var(--ease)}
}
@keyframes pz-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pop--zapiski .pop__panel{animation:none}}