/* Vinarija 4 praseta - strana Naša vinarija. Tokeni i komponente iz hp.css (header, footer, dugmad, razvij). */
.str-vinarija main{overflow-x:clip}
.str-vinarija .sec-pad{padding:clamp(90px,10vw,150px) var(--ram)}

/* ===== 1. HERO: let -> papir -> kontura -> akvarel ===== */
.vh{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--bg)}
.vh-scena,.vh-scena>*{position:absolute;inset:0;width:100%;height:100%}
.vh-ilu img,.vh-video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.vh-ilu{opacity:0;transition:opacity .4s}
.vh-video{background:#2a2420 url(media/vin/let-r6-prvi.jpg) center/cover no-repeat}
.vh-platno{pointer-events:none}
.vh.gotovo .vh-ilu{opacity:1}
.vh.gotovo .vh-video,.vh.gotovo .vh-platno{visibility:hidden}
/* tekst bez kontejnera, dole levo u ravni sa logom; čitljivost = meka senka slike odozdo-levo:
   video -> tamna senka + svetao tekst, ilustracija -> papirni veo + tamno mastilo */
.vh::before,.vh::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity 1.2s var(--ease)}
.vh::before{background:radial-gradient(ellipse 62% 58% at 0% 100%,rgba(22,15,11,.62) 0,rgba(22,15,11,.34) 45%,rgba(22,15,11,0) 100%),linear-gradient(0deg,rgba(22,15,11,.3) 0,rgba(22,15,11,0) 32%)}
.vh::after{opacity:0;background:radial-gradient(ellipse 60% 56% at 0% 100%,rgba(239,229,211,.94) 0,rgba(239,229,211,.76) 44%,rgba(239,229,211,0) 100%),linear-gradient(0deg,var(--bg) 0,rgba(239,229,211,0) 16%)}
.vh.kraj::before{opacity:0}
.vh.kraj::after{opacity:1}
.vh-t{position:absolute;z-index:3;left:var(--ram);right:var(--ram);bottom:clamp(64px,11vh,120px);max-width:640px;color:#fff}
.vh-t h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.7rem,5.2vw,4.8rem);line-height:1.02;letter-spacing:-.005em;margin-bottom:16px}
.vh-t p{max-width:42ch;font-size:1.08rem;opacity:.92}
.vh-t .mrv,.vh-t .mrv a{color:inherit}
.vh-t,.vh-t h1{text-shadow:0 1px 18px rgba(20,12,8,.35);transition:color .8s var(--ease),text-shadow .8s}
.vh.kraj .vh-t{color:var(--ink2);text-shadow:none}
.vh.kraj .vh-t h1{color:var(--ink);text-shadow:none}
.vh.kraj .vh-t .mrv a{color:var(--acc)}
.mrv{display:flex;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.vh-preskoci{position:absolute;z-index:3;right:calc(var(--ram) + 96px);bottom:22px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(247,240,227,.86);padding:10px 16px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .4s,background .3s,color .3s}
.vh-preskoci:hover{background:var(--acc);color:var(--on)}
.vh.kraj .vh-preskoci,.vh.gotovo .vh-preskoci{opacity:0;pointer-events:none}
.vh-dole{position:absolute;z-index:3;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:1.5px solid var(--ink2);border-radius:20px;opacity:0;transition:opacity .8s .6s}
.vh-dole i{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--acc);animation:vhDole 1.8s infinite var(--ease)}
.vh.gotovo .vh-dole{opacity:.8}
@keyframes vhDole{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ===== 2. OD ČETIRI PRASETA ===== */
.vp{position:relative;padding:clamp(70px,8vw,130px) var(--ram) clamp(90px,10vw,150px)}
/* akvarel vinograda u pozadini - diskretno, pretapa se u papir */
.vp{overflow:hidden}
.vp-ilu{position:absolute;z-index:0;left:-4%;bottom:-6%;width:min(1100px,78%);height:auto;opacity:.22;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 60% 58% at 45% 55%,#000 30%,transparent 72%);mask:radial-gradient(ellipse 60% 58% at 45% 55%,#000 30%,transparent 72%)}
.vp-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"t luk" "citat citat";column-gap:clamp(40px,6vw,100px);row-gap:clamp(44px,5vw,70px);align-items:center}
.vp-t{grid-area:t;max-width:540px}
.vp-t p:not(.nad){color:var(--ink2);margin-bottom:14px}
.vp-t p:last-child{font-family:var(--fd);font-size:1.3rem;color:var(--ink)}
/* crtež kao drvorez: preko cele desne kolone (i do ivice ekrana), blago nakrivljen; linije -> tuš -> drvo (vinarija.js) */
.vp-luk{grid-area:luk;margin:0 calc(-1 * min(var(--ram),70px)) 0 0;align-self:stretch;display:flex;align-items:center}
.vp-slika{position:relative;width:100%;aspect-ratio:704/276;transform:rotate(-3deg);filter:drop-shadow(0 26px 30px rgba(60,40,25,.14))}
.vp-linije,.vp-slika svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.vp-rez use{fill:#665750}
.vp-rez path{fill:none;stroke:#665750;stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
#vpDeblje path{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.vp-drvo{mix-blend-mode:multiply}
.ceka .vp-slika{visibility:hidden}
.vp-citat{grid-area:citat;position:relative;text-wrap:balance;padding-top:30px;border-top:1px solid var(--line)}
.vp-citat p{font-family:var(--fd);font-size:clamp(1.45rem,2.7vw,2.55rem);line-height:1.24;color:var(--acc)}
.vp-citat footer{margin-top:22px;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* ===== 3. TRI GENERACIJE ===== */
.vg{position:relative;background:var(--card);padding:clamp(90px,10vw,150px) var(--ram)}
.vg-glava{max-width:1240px;margin:0 auto clamp(40px,5vw,70px)}
.vg-glava .h2{max-width:18ch;margin-bottom:0}
.vg-niz{position:relative;max-width:1240px;margin:0 auto;--slika:clamp(150px,15vw,210px)}
.vg-crta{position:absolute;left:0;right:0;width:100%;height:40px;overflow:visible}
.vg-crta path{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vg-lista{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.vg-st{position:relative;padding-top:0}
.vg-slika{position:relative;height:var(--slika);border-radius:4px;overflow:hidden;background:var(--bg2);margin-bottom:58px}
.vg-slika img,.vg-slika video{width:100%;height:100%;object-fit:cover}
.vg-ph{position:absolute;left:8px;bottom:8px;font-size:.62rem}
.vg-tacka{position:absolute;z-index:2;left:0;top:calc(var(--slika) + 24px);width:16px;height:16px;border-radius:50%;background:var(--card);border:1.6px solid var(--acc);transition:background .5s,transform .5s var(--ease)}
.vg-st.on .vg-tacka{background:var(--acc);transform:scale(1.15)}
.vg-st h3{font:400 clamp(1.4rem,1.9vw,1.75rem)/1.12 var(--fd);margin-bottom:10px}
.vg-st p{font-size:.95rem;color:var(--ink2)}
.vg-st p .ph-napomena{margin-top:8px}
.vg-crta{top:calc(var(--slika) + 12px)}
.vg--nova{z-index:3} /* klizi preko videa koji se gasi (vinarija.js, 3b) */
.vg-nova{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
/* karusel arhivskih kadrova (mehanika Druga priča / O nama): pretapanje + spor Ken Burns, strelice, prevlačenje */
.vk{margin:0;max-width:600px}
.vk-f{position:relative;background:#fff;padding:12px;box-shadow:0 24px 50px -24px rgba(34,23,20,.45);transform:rotate(-1.6deg)}
.vk-s{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2);touch-action:pan-y}
.vk-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;animation:vk-kb 18s ease-in-out infinite alternate}
.vk-s img.on{opacity:1}
.vk-s img:nth-child(2n){animation-delay:-6s;transform-origin:30% 60%}
.vk-s img:nth-child(3n){animation-delay:-12s;transform-origin:70% 40%}
@keyframes vk-kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.vk-b{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(34,23,20,.1);background:rgba(251,247,239,.92);color:var(--acc);cursor:pointer;
  box-shadow:inset 0 1px 0 #fff,0 6px 20px rgba(34,23,20,.16);transition:background .35s var(--ease),color .35s var(--ease),scale .35s var(--ease)}
.vk-b:hover{background:var(--acc);color:var(--on)}
.vk-b:active{scale:.94}
.vk-b:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.vk-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vk-b.p{left:24px}
.vk-b.p svg{transform:rotate(180deg)}
.vk-b.n{right:24px}
.vk figcaption{display:flex;gap:14px;align-items:baseline;margin-top:20px;padding-left:6px}
.vk-br{flex:none;font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--acc);font-variant-numeric:tabular-nums}
.vk figcaption span{font:400 1.05rem/1.35 var(--fd);color:var(--ink);transition:opacity .6s}
.vg-nova-t .nad{margin-bottom:14px}
.vg-veliko{font:400 clamp(1.7rem,2.9vw,2.6rem)/1.15 var(--fd);color:var(--ink);margin-bottom:22px}
.vg-nova-t>p:not(.vg-veliko){color:var(--ink2);max-width:48ch}

/* ===== 3b. VIDEO: kontejner -> pun ekran -> poruke -> zatvaranje (pin + clip-path iz vinarija.js; mehanika Druga priča) ===== */
.vx{position:relative;background:var(--card);overflow:hidden}
/* dok je video preko celog ekrana header klizne gore (vinarija.js, klasa vx-u na <html>) */
.str-vinarija .hdr{transition:height .5s var(--ease),color .5s,transform .6s var(--ease),opacity .45s}
.vx-u .hdr{transform:translateY(-110%);opacity:0;pointer-events:none}
.vx-st{position:relative;height:100vh;height:100svh;min-height:560px}
.vx-m{position:absolute;inset:0;margin:0;background:#2a2420;overflow:hidden;
  clip-path:inset(18% max(var(--ram),calc((100% - 1240px)/2)) 18% max(var(--ram),calc((100% - 1240px)/2)));will-change:clip-path}
.vx-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.vx-msg{position:absolute;inset:0;display:grid;place-items:end start;z-index:2;pointer-events:none;padding:0 max(24px,calc((100% - 1240px)/2)) clamp(40px,8vh,80px)}
.vx-msg span{grid-area:1/1;padding:.4em .7em;font:400 clamp(1.6rem,2.8vw,2.6rem)/1.12 var(--fd);color:#F6EFE2;max-width:20ch;
  text-shadow:0 1px 18px rgba(20,12,10,.6),0 1px 3px rgba(20,12,10,.4);background:radial-gradient(closest-side,rgba(20,12,10,.3),rgba(20,12,10,0));visibility:hidden}

/* ===== 5. ZA STOLOM ===== */
.vt{position:relative;padding:clamp(70px,8vw,120px) var(--ram) clamp(100px,11vw,170px)}
.vt-in{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,100px);align-items:center}
.vt-slika{aspect-ratio:16/11;box-shadow:0 40px 70px -40px rgba(34,23,20,.55)}
.vt-furuna{position:absolute;z-index:2;left:clamp(-30px,-2vw,0px);bottom:clamp(-90px,-6vw,-40px);width:clamp(150px,17vw,250px);mix-blend-mode:multiply;transform:rotate(-4deg);pointer-events:none}
.vt-t{position:relative}
.vt-t>p:not(.nad){color:var(--ink2);margin-bottom:26px;max-width:42ch}
.vt-lista{border-top:1px solid var(--line)}
.vt-lista div{padding:14px 0;border-bottom:1px solid var(--line)}
.vt-lista dt{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.vt-lista dd{font:400 1.15rem/1.35 var(--fd);color:var(--ink)}
/* naslov + ilustracije u ravni: prvo vino (gore levo), pa bajadere (dole desno, u ravni sa „suvo") */
.vt-naslov{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 clamp(8px,1.2vw,18px)}
.vt-naslov .h2{margin-bottom:0}
.vt-ilu{position:relative;display:block;width:clamp(160px,13vw,195px);aspect-ratio:1.2;margin:-40px -10px -30px 0;pointer-events:none}
/* -papir ilustracije: rub papira se meko utapa u pozadinu sekcije */
.vt-ilu img{position:absolute;width:80%;height:auto;mix-blend-mode:multiply;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}
.vt-vino{left:0;top:0;transform:rotate(-6deg)}
.vt-jelo{right:0;bottom:0;transform:rotate(6deg)}
.vt-naslov+p{margin-top:26px}

/* ===== 6. DOMAĆINI ===== */
.vd{position:relative;overflow:hidden;background:var(--acc);color:var(--on);padding:clamp(100px,11vw,170px) var(--ram)}
.vd-prasici{position:absolute;width:min(760px,70vw);right:-8vw;bottom:-6vw;color:var(--on);opacity:.06}
.vd-in{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:clamp(40px,6vw,100px);align-items:end}
.vd-in>.nad,.vd-red{grid-column:1}
.vd-red{font:400 clamp(2.3rem,5.2vw,4.9rem)/1.06 var(--fd);color:var(--on)}
.vd-red{overflow:hidden;padding-bottom:.06em}
.vd-red span{display:inline-block}
.vd-red--tiho{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.3;color:#E9C9B4;margin-top:28px;max-width:26ch}
.vd-foto{position:relative;grid-column:2;grid-row:1 / span 4;align-self:center;aspect-ratio:4/5;border-radius:4px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(0,0,0,.6)}
.vd-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vd-foto::after{content:"";position:absolute;inset:12px;border:1px solid rgba(246,239,226,.55);pointer-events:none}
.vd-foto .ph-napomena{position:absolute;left:20px;bottom:20px;right:20px}

/* ===== 7. PROSTOR: mozaik, akvarel mrlja otvara fotografiju ===== */
.vm{position:relative;padding:clamp(90px,10vw,150px) var(--ram)}
.vm-glava{max-width:1240px;margin:0 auto clamp(36px,4vw,60px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 60px;align-items:end}
.vm-glava .nad{grid-column:1 / -1;margin-bottom:0}
.vm-glava .h2{margin-bottom:0}
.vm-glava p:not(.nad){color:var(--ink2);max-width:46ch}
.vm-mozaik{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(90px,9vw,130px);gap:clamp(10px,1.2vw,18px)}
.vm-p{position:relative;overflow:hidden;border-radius:4px;background:var(--bg2)}
.vm-p img,.vm-p video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vm-a{grid-column:1 / 8;grid-row:span 4}
.vm-b{grid-column:8 / 13;grid-row:span 3}
.vm-c{grid-column:8 / 10;grid-row:span 3}
.vm-d{grid-column:10 / 13;grid-row:span 3}
.vm-e{grid-column:1 / 8;grid-row:span 2}
.vm-e img{object-position:50% 60%}
.mrlja-otvori>img,.mrlja-otvori>video{-webkit-mask:url(media/b-mrlja-1.png) center/var(--m,0%) no-repeat;mask:url(media/b-mrlja-1.png) center/var(--m,0%) no-repeat}
.mrlja-otvori.pun>img,.mrlja-otvori.pun>video{-webkit-mask:none;mask:none}

/* ===== 8. POZIV ===== */
.vc{position:relative;overflow:hidden;padding:clamp(80px,9vw,140px) var(--ram) 0;text-align:center}
.vc-t{position:relative;z-index:2;max-width:640px;margin:0 auto}
.vc-t>p:not(.nad):not(.vc-tel){color:var(--ink2);margin:-8px 0 30px}
.vc-t .dugmad{justify-content:center}
.vc-tel{margin-top:22px;font-size:.92rem;color:var(--ink2)}
.vc-tel a{color:var(--acc)}
.vc-krov{position:relative;height:clamp(220px,30vw,420px);margin:clamp(-20px,-2vw,0px) calc(-1 * var(--ram)) 0;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 55%);mask:linear-gradient(180deg,transparent 0,#000 55%)}
.vc-krov img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .vp-in{grid-template-columns:1fr;grid-template-areas:"t" "luk" "citat"}
  .vp-luk{margin:0 6px}
  .vg-lista{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:50px}
  .vg-crta{display:none}
  .vg-nova,.vt-in,.vd-in,.vm-glava{grid-template-columns:1fr}
  .vd-foto{grid-column:1;grid-row:auto;margin-top:40px;width:min(320px,80%)}
}
@media (max-width:760px){
  .vh{min-height:600px}
  .vh::before{background:linear-gradient(0deg,rgba(22,15,11,.7) 0,rgba(22,15,11,.4) 28%,rgba(22,15,11,0) 55%)}
  .vh::after{background:linear-gradient(0deg,var(--bg) 0,rgba(239,229,211,.9) 22%,rgba(239,229,211,.5) 38%,rgba(239,229,211,0) 54%)}
  .vh-t{bottom:40px}
  .vh-t h1{font-size:2.5rem;margin-bottom:12px}
  .vh-t p{font-size:1rem}
  .mrv{margin-bottom:12px}
  .vh-preskoci{right:var(--ram);top:calc(var(--hdr) + 10px);bottom:auto}
  .vh-dole{display:none}
  .vp-ilu{width:160%;left:-30%;bottom:auto;top:30%;opacity:.16}
  .vx-st{height:100vh;height:100lvh;min-height:520px} /* otvoren video = ceo ekran, i kad se traka browsera sakrije */
  .vx{background:transparent;pointer-events:none}
  .vx-msg{padding:0 var(--ram) 48px}
  .vx-msg span{font-size:min(1.6rem,7vw)}
  /* generacije: uspravna linija levo, stanice jedna ispod druge */
  .vg-lista{grid-template-columns:1fr;row-gap:44px;padding-left:34px;position:relative}
  .vg-lista::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1.6px;background:linear-gradient(var(--acc) var(--vgp,0%),rgba(109,29,42,.18) var(--vgp,0%))}
  .vg-tacka{left:-34px;top:2px}
  .vg-slika{height:auto;aspect-ratio:16/10;margin-bottom:18px}
  .vk{max-width:none}
  .vk-f{padding:8px}
  .vk-b{width:42px;height:42px;margin-top:-21px}
  .vk-b.p{left:16px}
  .vk-b.n{right:16px}
  .vt-furuna{width:120px;left:-6px;bottom:-56px}
  .vt-ilu{width:150px;margin:-24px -8px -16px 0}
  .vt-t{margin-top:30px}
  .vd-red{font-size:2.2rem}
  .vm-mozaik{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:120px}
  .vm-a{grid-column:1 / 3;grid-row:span 2}
  .vm-b{grid-column:1 / 2;grid-row:span 2}
  .vm-c{grid-column:2 / 3;grid-row:span 2}
  .vm-d,.vm-e{grid-column:1 / 3;grid-row:span 2}
  .vc-t .dugmad{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .mrlja-otvori>img,.mrlja-otvori>video{-webkit-mask:none;mask:none}
  .vx-st{height:auto;min-height:0;padding:clamp(60px,8vw,110px) var(--ram);display:flex;justify-content:center}
  .vx-m{position:relative;inset:auto;width:min(1240px,100%);aspect-ratio:16/9;clip-path:none;border-radius:4px}
  .vx-msg{display:none}
  .vk-s img{animation:none;transition:none}
}