/* Vinarija 4 praseta - Galerija: album u pet poglavlja (urednički photo-essay, ne grid sa filterima). */
.str-galerija main{overflow-x:clip}

/* ===== 1. UVOD - ilustracija kao page header (obrazac sa shop strane) + sadržaj albuma ===== */
/* Ivan r8: visina kao page header na shop strani (~pola ekrana) */
.ga-glava{position:relative;overflow:hidden;min-height:clamp(330px,46vh,450px);padding:calc(var(--hdr) + 26px) var(--ram) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:end;gap:30px}
.ga-ilu{position:absolute;inset:0}
.ga-ilu img{width:100%;height:120%;object-fit:cover;object-position:center 40%}
.ga-glava::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0,rgba(239,229,211,.94) 28%,rgba(239,229,211,.4) 58%,rgba(239,229,211,.55) 100%),linear-gradient(0deg,var(--bg) 0,rgba(239,229,211,.8) 24%,rgba(239,229,211,0) 62%)}
.ga-glava-t,.ga-sadrzaj{position:relative;z-index:2}
.ga-glava-t{max-width:600px;align-self:start}
.ga-glava h1{font-family:var(--fd);font-size:clamp(2.7rem,4.6vw,4.3rem);line-height:1.02;color:var(--ink);margin-bottom:16px}
.ga-glava-t p{max-width:46ch;color:var(--ink2);font-size:1.04rem}
.ga-sadrzaj{list-style:none;counter-reset:p;padding:10px 6px;border-radius:18px;background:rgba(247,240,227,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 20px 40px -30px rgba(34,23,20,.45)}
.ga-sadrzaj a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:10px;padding:7px 14px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .3s,color .3s}
.ga-sadrzaj li+li a{box-shadow:0 -1px 0 var(--line)}
.ga-sadrzaj i{font:normal 400 1rem/1 var(--fd);color:var(--acc);letter-spacing:.04em}
.ga-sadrzaj span{font:400 1.12rem/1.2 var(--fd)}
.ga-sadrzaj small{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ga-sadrzaj a:hover{background:var(--acc);color:var(--on);box-shadow:none}
.ga-sadrzaj a:hover i,.ga-sadrzaj a:hover small{color:var(--on)}

/* ===== POGLAVLJE ===== */
.pog{position:relative;padding:clamp(70px,9vw,140px) var(--ram) clamp(60px,7vw,110px);scroll-margin-top:40px}
.ga-glava + .pog{padding-top:clamp(40px,5vw,70px)}
.pog-glava{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(18px,3vw,48px);max-width:1380px;margin:0 auto clamp(48px,6vw,90px)}
.pog-glava--obrnuto{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto}
.pog-glava--obrnuto .pog-razvij{order:-1}
.pog-br{font:400 clamp(5.5rem,11vw,10.5rem)/.8 var(--fd);color:var(--acc);opacity:.9;align-self:start;letter-spacing:-.02em}
.pog-t p:not(.nad){color:var(--ink2);max-width:42ch}
.pog-t .h2{margin-bottom:18px}
/* Ivan r8: bez lukova - pravougaonik 3:2 sa diskretnim svetlim okvirom unutra */
.pog-razvij{aspect-ratio:3/2;border-radius:4px;box-shadow:0 34px 60px -40px rgba(34,23,20,.55)}
.pog-razvij::after{content:"";position:absolute;inset:12px;z-index:3;border:1px solid rgba(246,239,226,.6);pointer-events:none}
.pog .sil-loza{top:40px;right:-8vw;--o:.09}

/* kompozicija: 12 kolona, svaka fotografija nosi svoje mesto (--g), oblik (--ar) i pomak (--mt) */
.kmp{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,30px);row-gap:clamp(18px,3vw,46px);max-width:1380px;margin:0 auto;align-items:start;grid-auto-flow:row dense}
.gt{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--bg2);grid-column:var(--g);grid-row:var(--gr,auto);aspect-ratio:var(--ar,3/2);margin-top:var(--mt,0);cursor:zoom-in;isolation:isolate;outline-offset:4px}
.gt img,.gt video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.gt::after{content:attr(data-cap);position:absolute;left:12px;bottom:12px;z-index:2;max-width:calc(100% - 24px);padding:7px 14px;border-radius:999px;font-size:.78rem;line-height:1.3;color:var(--ink);
  background:linear-gradient(140deg,rgba(255,255,255,.7),rgba(247,240,227,.45));-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);box-shadow:inset 0 1px 1px rgba(255,255,255,.9);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none}
.gt:not([data-cap])::after{content:none}
@media (hover:hover){
  .gt:hover img,.gt:hover video{transform:scale(1.045)}
  .gt:hover::after{opacity:1;transform:none}
}
/* video ćelija: pečat sa play znakom */
.gt-play{position:absolute;right:14px;top:14px;z-index:2;width:52px;height:52px;border-radius:50%;background:var(--acc);display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(34,23,20,.6);transition:transform .5s var(--ease)}
.gt-play::before{content:"";width:0;height:0;border-left:13px solid var(--on);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.gt-play::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(246,239,226,.6);animation:talas 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.gt--v:hover .gt-play{transform:scale(1.12)}

/* ===== II. TRAKA (vodoravno putovanje) ===== */
.traka{position:relative;z-index:1}
.traka-niz{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding:0 var(--ram);height:min(68vh,620px);width:max-content}
.traka-niz .gt{flex:none;width:calc(var(--w) * 1vw);aspect-ratio:var(--ar);align-self:var(--al);max-height:100%}
.traka-dno{display:flex;align-items:center;gap:16px;max-width:1380px;margin:34px auto 0;padding:0 var(--ram)}
.traka-linija{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.traka-linija i{display:block;height:100%;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.traka-hint{display:none;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

/* ===== IV. PODRUM (tamno) - r10: duboka zelena boce, tamnija varijanta Masline #4F5B3C ===== */
.pog--tamno{background:#1F271A;color:var(--on);overflow:hidden}
.pog--tamno .h2{color:var(--on)}
.pog--tamno .pog-t p:not(.nad){color:rgba(246,239,226,.74)}
.pog--tamno .pog-br{color:#C8705F}
.pog--tamno .gt{background:#2B3524}
/* Ivan 15.10: bez fotografije u glavi i bez papirne loze - samo diskretna loza u pozadini desno */
.pog-glava--bez{grid-template-columns:auto minmax(0,1fr)}
.pog--tamno .sil-loza{--c:var(--on);--o:.07}
.pog--tamno .gt-play{background:var(--on)}
.pog--tamno .gt-play::before{border-left-color:var(--acc)}

/* ===== KRAJ ALBUMA ===== */
.ga-kraj{position:relative;overflow:hidden;padding:clamp(90px,11vw,170px) var(--ram);display:grid;place-items:center;text-align:center}
.ga-kraj-ilu{position:absolute;inset:0}
.ga-kraj-ilu img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.55}
.ga-kraj::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 70% at 50% 50%,rgba(239,229,211,.96),rgba(239,229,211,.7) 60%,rgba(239,229,211,.25))}
.ga-kraj-t{position:relative;z-index:2;max-width:620px}
.ga-kraj-t p:not(.nad){color:var(--ink2);margin-bottom:30px}
.ga-kraj .dugmad{justify-content:center}

/* ===== tablet ===== */
@media (max-width:1000px){
  .ga-glava{grid-template-columns:1fr;align-items:start;padding-bottom:70px}
  .ga-sadrzaj{max-width:460px}
  .pog-glava,.pog-glava--obrnuto{grid-template-columns:auto minmax(0,1fr)}
  .pog-glava .pog-razvij,.pog-glava--obrnuto .pog-razvij{grid-column:1/-1;order:2}
}

/* ===== telefon: 2 kolone, kadrovi se smenjuju pun-pola-pola, traka je swipe ===== */
@media (max-width:760px){
  .ga-glava{min-height:0;padding:calc(var(--hdr) + 10px) var(--ram) 28px;gap:18px}
  .ga-glava::before{background:linear-gradient(0deg,var(--bg) 0,rgba(239,229,211,.9) 45%,rgba(239,229,211,.55) 100%)}
  .ga-glava h1{font-size:2.6rem;margin-bottom:10px}
  .ga-glava-t p{font-size:.98rem}
  .ga-sadrzaj{display:flex;overflow-x:auto;gap:8px;padding:0;margin:0 calc(var(--ram) * -1);padding:0 var(--ram) 4px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;scrollbar-width:none;max-width:none}
  .ga-sadrzaj::-webkit-scrollbar{display:none}
  .ga-sadrzaj li{flex:none}
  .ga-sadrzaj a,.ga-sadrzaj li+li a{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(247,240,227,.92);box-shadow:inset 0 0 0 1px var(--line)}
  .ga-sadrzaj span{font-size:1rem;white-space:nowrap}
  .ga-sadrzaj small{display:none}
  .pog{padding:64px var(--ram) 56px}
  .pog-glava,.pog-glava--obrnuto{gap:14px 16px;margin-bottom:34px}
  .pog-br{font-size:4.6rem}
  .pog-razvij{aspect-ratio:4/3}
  .kmp{grid-template-columns:1fr 1fr;column-gap:10px;row-gap:10px}
  .gt{grid-column:var(--gm,1/-1);grid-row:auto;aspect-ratio:var(--arm,var(--ar));margin-top:0}
  .gt[style*="--ar:auto"]{aspect-ratio:var(--arm)}
  .gt::after{content:none}
  .gt-play{width:42px;height:42px;right:10px;top:10px}
  .traka{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .traka::-webkit-scrollbar{display:none}
  .traka-niz{height:auto;align-items:center;padding:0 var(--ram);gap:12px}
  .traka-niz .gt{width:min(82vw,calc(var(--w) * 2.2vw));max-height:none;scroll-snap-align:center;align-self:center}
  .traka-niz .gt[style*="--ar:4/5"]{width:62vw}
  .traka-hint{display:block}
  .traka-dno{margin-top:18px}
  .ga-kraj{padding:80px var(--ram) 90px}
}
@media (prefers-reduced-motion:reduce){.gt-play::after{animation:none}}
