/* Komponente: glava, meni, povezave, noga, prehodi */

.preskoci { position: absolute; left: var(--sp-5); top: -100px; z-index: 100; background: var(--ink); color: #000; padding: var(--sp-4) var(--sp-5); }
.preskoci:focus { top: var(--sp-5); }

/* ---------- Glava: prosojna nad fotografijo, črna ob pomiku ---------- */
.glava { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform var(--d-5) var(--e-out), background var(--d-4); }
.glava.je-polna { background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.glava.je-polna::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line-soft); }
.glava.je-dol { transform: translateY(-100%); }
.glava__trak { height: var(--top-h); }
.glava__trak .wrap { height: 100%; display: flex; align-items: center; gap: var(--sp-8); }
.glava__druzbena { order: 3; display: flex; }
.glava__druzbena a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-70); transition: color var(--d-3); }
.glava__druzbena a:hover { color: var(--ink); }
.glava__druzbena svg { width: 18px; height: 18px; }
.glava__desno { display: none; }
.glava__meni { position: absolute; top: 0; right: calc(var(--gutter) + 60px); height: var(--top-h); display: flex; align-items: center; }
.glava__meni ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(var(--sp-6), 2.6vw, var(--sp-8)); }
.glava__meni a {
  min-height: 44px; display: inline-flex; align-items: center; position: relative;
  font: 400 var(--fs-small)/1 var(--b); color: var(--ink-70); text-decoration: none; transition: color var(--d-3);
}
.glava__meni a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-4) var(--e-out); }
.glava__meni a:hover, .glava__meni a[aria-current="page"] { color: var(--ink); }
.glava__meni a:hover::after, .glava__meni a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.glava__druzbena { margin-left: auto; }

.logo {
  display: inline-flex; align-items: center; gap: .55em; text-decoration: none; min-height: 44px;
  font: 500 1rem/1 var(--h); font-stretch: var(--siroko); letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.logo svg { width: 1.1em; height: 1.1em; flex: none; }

.hamburger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; margin-left: auto; position: relative; }
.hamburger span { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ink); transition: transform var(--d-4) var(--e-out), opacity var(--d-3); }
.hamburger span:nth-child(1) { top: 17px; } .hamburger span:nth-child(2) { top: 22px; } .hamburger span:nth-child(3) { top: 27px; }
.meni-odprt .hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.meni-odprt .hamburger span:nth-child(2) { opacity: 0; }
.meni-odprt .hamburger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobilni-meni {
  position: fixed; inset: 0; z-index: 45; background: #000;
  display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--top-h) + var(--sp-7)) var(--gutter) var(--sp-10);
  opacity: 0; visibility: hidden; transition: opacity var(--d-5) var(--e-out), visibility 0s linear var(--d-5);
}
.meni-odprt .mobilni-meni { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobilni-meni ol { list-style: none; margin: 0; padding: 0; }
.mobilni-meni li { border-top: 1px solid var(--line); }
.mobilni-meni a { display: block; padding: var(--sp-5) 0; text-decoration: none; font: 400 clamp(2rem, 1.4rem + 3vw, 3rem)/1.05 var(--h); font-stretch: var(--siroko); letter-spacing: -.02em; }
.mobilni-meni .eyebrow { margin-top: var(--sp-8); }

@media (max-width: 860px) {
  .glava__meni, .glava__druzbena { display: none; }
  .hamburger { display: block; }
  .meni-odprt .glava { transform: none !important; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 861px) { .mobilni-meni { display: none; } }

/* ---------- Povezava "Odkrij" ---------- */
.odkrij { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 44px; font: 500 var(--fs-small)/1 var(--b); text-decoration: none; }
.odkrij__krog { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-30); display: grid; place-items: center; transition: background var(--d-4) var(--e-out), color var(--d-4) var(--e-out), border-color var(--d-4); }
.odkrij__krog svg { width: 14px; height: 14px; }
.odkrij:hover .odkrij__krog { background: var(--ink); border-color: var(--ink); color: #000; }
.svetlo .odkrij__krog { border-color: var(--line-dark); }
.svetlo .odkrij:hover .odkrij__krog { background: #000; color: var(--bg-light); }

/* ---------- Naslov podstrani ---------- */
.naslov-strani { position: relative; min-height: 76svh; display: flex; align-items: flex-end; overflow: hidden; padding-top: var(--top-h); }
.naslov-strani__slika { position: absolute; inset: 0; }
.naslov-strani__slika img { width: 100%; height: 100%; object-fit: cover; }
.naslov-strani__slika::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 60%, #000 100%); }
.naslov-strani .wrap { position: relative; width: 100%; padding-bottom: var(--sp-10); }
.naslov-strani h1 { font-size: min(var(--fs-display), 10.5vw); font-weight: 300; text-transform: uppercase; letter-spacing: -.035em; line-height: .88; margin-top: var(--sp-5); }
.naslov-strani .lead { margin-top: var(--sp-7); }
.naslov-strani--kratek { min-height: 0; padding-top: calc(var(--top-h) + var(--sp-12)); }
@media (max-width: 860px) { .naslov-strani--kratek { padding-top: calc(var(--top-h) + var(--sp-10)); } }

/* ---------- Poziv ---------- */
.poziv .wrap { display: grid; justify-items: start; }
.poziv h2 { font-size: var(--fs-h1); max-width: 14ch; }
.poziv .lead { margin-top: var(--sp-7); }
.poziv__gumbi { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-9); }
.znacka { display: inline-block; margin-top: var(--sp-6); font: 400 var(--fs-caption)/1.5 var(--b); color: var(--ink-50); }

/* ---------- Noga ---------- */
.noga { padding-block: var(--sp-11) var(--sp-7); overflow: hidden; }
.noga__mreza { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-9); }
.noga .logo { color: #000; }
.noga__opis { margin-top: var(--sp-4); max-width: 32ch; color: var(--ink-dark-70); font-size: var(--fs-small); }
.noga h3 { font: 500 var(--fs-caption)/1.4 var(--b); font-stretch: 100%; letter-spacing: 0; color: var(--ink-dark-70); margin-bottom: var(--sp-3); }
.noga ul { list-style: none; margin: 0; padding: 0; display: grid; }
.noga ul a, .noga address a { display: inline-flex; min-height: 40px; align-items: center; text-decoration: none; font-size: var(--fs-small); }
.noga ul a:hover, .noga address a:hover { text-decoration: underline; text-underline-offset: 4px; }
.noga address { font-style: normal; font-size: var(--fs-small); display: grid; align-items: center; }
.noga address span { min-height: 40px; display: flex; align-items: center; }
.noga__beseda { margin: var(--sp-11) 0 0; font: 300 min(13.4vw, 198px)/.8 var(--h); font-stretch: var(--siroko); letter-spacing: -.055em; margin-left: -.04em; text-transform: uppercase; color: #000; white-space: nowrap; }
.noga__dno {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  font: 400 var(--fs-caption)/1.6 var(--b); color: var(--ink-dark-70);
}
@media (max-width: 860px) {
  .noga__mreza { grid-template-columns: 1fr 1fr; }
  .noga__mreza > :first-child { grid-column: 1 / -1; }
  .noga { padding-bottom: calc(var(--sp-11) + var(--sp-5)); }
}

/* ---------- Lepljiv poziv na telefonu ---------- */
.lepljiv-poziv { display: none; }
@media (max-width: 860px) {
  .lepljiv-poziv {
    display: flex; position: fixed; left: var(--sp-5); right: var(--sp-5); bottom: max(var(--sp-5), env(safe-area-inset-bottom)); z-index: 40;
    min-height: 52px; transition: transform var(--d-5) var(--e-out), opacity var(--d-4);
  }
  .lepljiv-poziv.je-skrit, .meni-odprt .lepljiv-poziv { transform: translateY(140%); opacity: 0; }
}

/* ---------- Napredek drsenja ---------- */
.napredek-strani { position: fixed; inset: 0 0 auto; height: 1px; z-index: 60; pointer-events: none; }
.napredek-strani span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* ---------- Razcepljeni naslovi ---------- */
.beseda { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.crka { display: inline-block; will-change: transform; }

/* ---------- Zavesa za prehode med stranmi ---------- */
.zavesa { position: fixed; inset: 0; z-index: 90; background: #000; pointer-events: none; transform: scaleY(0); transform-origin: bottom; }
.no-motion .zavesa { display: none; }

/* ---------- Nalagalnik (samo prvi obisk) ---------- */
.nalagalnik { position: fixed; inset: 0; z-index: 95; background: #000; display: none; padding: var(--sp-5) var(--gutter) var(--gutter); }
.js .nalagalnik.je-aktiven { display: flex; flex-direction: column; justify-content: space-between; }
.nalagalnik__logo { display: flex; align-items: center; gap: .55em; min-height: 44px; font: 500 1rem/1 var(--h); font-stretch: var(--siroko); text-transform: uppercase; letter-spacing: .02em; }
.nalagalnik__logo svg { width: 1.1em; height: 1.1em; animation: vrti 2.4s linear infinite; }
@keyframes vrti { to { transform: rotate(360deg); } }
.nalagalnik__st { align-self: flex-end; font: 200 clamp(4rem, 2rem + 12vw, 14rem)/.8 var(--h); font-stretch: var(--siroko); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.naslov-strani h1.dolg { font-size: min(var(--fs-display), 7.2vw); }

/* ---------- Nalagalnik kot zaslonka fotoaparata ---------- */
.nalagalnik { background: none; --r: 0px; isolation: isolate; }
.nalagalnik::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: #000;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
}
.zaslonka { position: absolute; z-index: -1; left: 50%; top: 50%; width: 260vmax; height: 260vmax; translate: -50% -50%; pointer-events: none; overflow: visible; }

.nalagalnik__napis { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + .4em); font-size: var(--fs-small); color: var(--ink-50); }