/* ==========================================================================
   SAVNA N°001 — dodatki iz druge izdaje (7. 10. 2026, Mitja: V1 ostane, iz V2 dve stvari)
   1) VRATA iz lamel, za njima film teksture vode in besedilo »Tekstura« (namesto besede »Občutek«)
   2) PREHOD render → podoba (»toplotni rob«) v poglavju Izvor (namesto treh renderjev)
   Predpona .sv- (v V1 prosta). Skripta: savna-dodatki.js — main.js ostane nedotaknjen.
   Brez gibanja (reduced motion / brez GSAP): vrata skrita, film in besedilo vidna,
   prehodi mirujejo na polovici (pol renderja, pol podobe).
   ========================================================================== */

/* ---------- skupno: toplotni rob ---------- */
.sv-rob {
  position: absolute; left: 0; right: 0; top: var(--sv-meja, 50%);
  height: 22%;
  transform: translateY(-100%);
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    rgba(255, 196, 140, 0) 0%, rgba(255, 196, 140, 0.10) 55%,
    rgba(255, 196, 140, 0.30) 92%, rgba(255, 196, 140, 0.55) 100%);
}
.sv-rob::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255, 196, 140, 0.9);
  box-shadow: 0 0 18px 2px rgba(255, 196, 140, 0.55);
}
html.sv-gib .sv-rob { opacity: var(--sv-rob-o, 0); }

/* ==========================================================================
   1 · VRATA — div med odseki (ne section: ozadja .page-section se štejejo po vrsti)
   ========================================================================== */
.sv-vrata__pin { position: relative; height: 100vh; height: 100lvh; }
html.sv-gib .sv-vrata__pin { height: 240vh; height: 240lvh; }
.sv-vrata__oder { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #050607; }
.sv-vrata__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.sv-gib .sv-vrata__film { will-change: transform; }
.sv-vrata__oder::after {                 /* rahla vinjeta, film ostane čist */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 70% at 50% 50%, rgba(5, 6, 7, 0) 55%, rgba(5, 6, 7, 0.55) 100%);
}

/* Vsebina za vrati: ležeč film čez cel zaslon (1920 × 1080), besedilo levo spodaj na prelivu. */
.sv-vrata__vsebina { position: absolute; inset: 0; }
.sv-vrata__okno { position: absolute; inset: 0; overflow: hidden; }
.sv-vrata__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.sv-vrata__vsebina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.9) 0%, rgba(5, 6, 7, 0.72) 30%, rgba(5, 6, 7, 0.2) 52%, rgba(5, 6, 7, 0) 66%),
    linear-gradient(180deg, rgba(5, 6, 7, 0.35) 0%, rgba(5, 6, 7, 0) 22%, rgba(5, 6, 7, 0) 60%, rgba(5, 6, 7, 0.7) 100%);
}
.sv-vrata__besedilo {
  position: absolute; z-index: 1;
  left: var(--container-pad); bottom: clamp(2.5rem, 10svh, 6.5rem);
  bottom: calc(100lvh - 100svh + clamp(2.5rem, 10svh, 6.5rem));
  max-width: 32rem;
}
.sv-vrata__oznaka { color: var(--color-accent); }
.sv-vrata__naslov {
  margin: var(--space-xs) 0 0;
  font: 600 clamp(2rem, 2.6vw + 1rem, 4.2rem)/1.02 var(--font-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}
.sv-vrata__tekst {
  margin: var(--space-xs) 0 0;
  font-size: var(--size-lead); line-height: 1.7;
  color: rgba(245, 244, 242, 0.8);
  max-width: 30rem;
}
html.sv-gib .sv-vrata__besedilo { will-change: opacity, transform; }

.sv-vrata__krila { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html:not(.sv-gib) .sv-vrata__krila { display: none; }
.sv-vrata__krilo {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: repeating-linear-gradient(90deg, #0d0f10 0 16px, #131617 16px 18px);
  will-change: transform;
}
.sv-vrata__krilo--l { left: 0; box-shadow: inset -1px 0 0 rgba(177, 146, 111, 0.45); }
.sv-vrata__krilo--d { right: 0; box-shadow: inset 1px 0 0 rgba(177, 146, 111, 0.45); }
.sv-vrata__reza {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: var(--color-accent-soft);
  box-shadow: 0 0 34px 4px rgba(201, 171, 134, 0.32);
  will-change: opacity, transform;
}

/* ==========================================================================
   2 · PREHOD — trije pari: osrednji prostor ležeče, savni pokončno
   ========================================================================== */
.sv-prehod { max-width: var(--container-max); margin: var(--space-xl) auto 0; padding-inline: var(--container-pad); }
.sv-prehod__head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end; gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
}
.sv-prehod__title {
  margin-top: var(--space-sm);
  font-family: var(--font-display); font-size: var(--size-h2); font-weight: 600;
  line-height: 1.04; letter-spacing: var(--tracking-tight); text-transform: uppercase;
}
.sv-prehod__text { font-size: var(--size-lead); line-height: 1.7; color: var(--color-ink-dim); max-width: 34rem; text-wrap: pretty; }

.sv-par { margin: 0; }
.sv-par__okno { position: relative; overflow: hidden; background: #111315; aspect-ratio: 2 / 3; }
.sv-par--lezec .sv-par__okno { aspect-ratio: 3 / 2; }
.sv-par__okno img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-par__podoba { clip-path: inset(50% 0 0 0); }
html.sv-gib .sv-par__podoba { clip-path: inset(var(--sv-meja, 100%) 0 0 0); }
.sv-par__oznaka {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0;
  font: 500 var(--size-label)/1 var(--font-display);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--color-ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.sv-par__oznaka b { font-weight: 500; color: rgb(255, 196, 140); }
.sv-par__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.2rem;
  margin-top: 1rem;
  font-family: var(--font-display); text-transform: uppercase;
}
.sv-par__n { font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-accent); }
.sv-par__t { font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.35rem); font-weight: 600; letter-spacing: 0.01em; }
.sv-par__k { font-size: var(--size-label); letter-spacing: var(--tracking-wide); color: var(--color-ink-faint); }

/* ležeči par: cel na zaslonu (3 : 2 pri 84 % višine) */
.sv-par--lezec { width: min(100%, 126vh); margin-inline: auto; }
.sv-prehod__dva {
  display: grid; grid-template-columns: repeat(2, minmax(0, 56vh));
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 5rem) clamp(2rem, 8vw, 10rem);
  align-items: start;
  margin-top: var(--space-lg);
}
.sv-prehod__dva > :nth-child(2) { margin-top: 18vh; }

/* ==========================================================================
   Materiali: Merch velik, Detajl majhen (Mitja, 7. 10.) — Merch je ležeč, zato 5 : 3 (brez obreza)
   ========================================================================== */
.sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(1) { grid-column: span 8; }
.sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(1) .c-mockup-card__frame { aspect-ratio: 5 / 3; }
.sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(2) { grid-column: span 4; align-self: end; }
.sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(2) .c-mockup-card__frame { aspect-ratio: 4 / 5; }   /* nižji od Mercha — »Detajl na malo« */
@media (max-width: 860px) {
  .sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(1) { grid-column: 1 / span 2 !important; }
  .sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(1) .c-mockup-card__frame { aspect-ratio: 5 / 3 !important; }
  .sv-detajli .c-mockup-grid__list--details .c-mockup-card:nth-child(2) { grid-column: 1 / span 1 !important; }
}

/* ==========================================================================
   Ozek zaslon IN ležeči telefon (max-height: 500px) — ista pravila
   ========================================================================== */
@media (max-width: 767px), (max-height: 500px) {
  .sv-prehod__head { grid-template-columns: minmax(0, 1fr); }
  .sv-prehod__dva { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .sv-prehod .u-eyebrow { flex-wrap: wrap; }
  .sv-prehod__dva > :nth-child(2) { margin-top: 0; }
  .sv-par--lezec { width: 100%; }
}
@media (max-width: 767px) {
  /* telefon: film čez cel zaslon (osrednji izsek), besedilo spodaj na prelivu */
  .sv-vrata__vsebina::after { background: linear-gradient(180deg, rgba(5, 6, 7, 0.3) 0%, rgba(5, 6, 7, 0) 25%); }
  .sv-vrata__besedilo {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
    padding: 30vh var(--container-pad) clamp(2rem, 7svh, 3.5rem);
    padding-bottom: calc(100lvh - 100svh + clamp(2rem, 7svh, 3.5rem));
    background: linear-gradient(180deg, rgba(5, 6, 7, 0) 0%, rgba(5, 6, 7, 0.82) 45%, rgba(5, 6, 7, 0.94) 100%);
  }
  .sv-vrata__tekst { font-size: 0.95rem; line-height: 1.6; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sv-vrata__naslov { font-size: clamp(1.6rem, 4vw, 2.4rem); }
  .sv-vrata__tekst { font-size: 0.9rem; line-height: 1.5; }
  .sv-par:not(.sv-par--lezec) { width: min(100%, 56vh); margin-inline: auto; }
}

/* ==========================================================================
   Kartica XII »Reels« (7. 10. 2026): živ telefon s filmom vode (9:16 = format Reels).
   Mitja: telefon cel, kot prej (črna senca spodaj), brez sija zadaj, malo višji od leve
   fotografije. Višina iz širine mreže (enote vsebnika): mreža 12 stolpcev, razmik g,
   leva kartica 7 stolpcev 3 : 2 → višina (7W − 5g) / 18; telefon 6 % višji.
   Brez transform na telefonu — main.js mu ob vstopu nastavi xPercent.
   ========================================================================== */
.c-mockup-grid__list--bento { container-type: inline-size; }
.sv-reels {
  --sv-tel-h: calc((700cqw - 5 * var(--space-md)) / 18 * 1.06);
  /* dvig do uvodnega odstavka (izmeri JS); največ 88 % višine zaslona — cel telefon je viden naenkrat */
  --sv-tel-v: min(calc(var(--sv-tel-h) + var(--sv-dvig, 0px)), 88vh);
}
/* Telefon je PRIPET na desni spodnji kot okvirja (absolute; right: 0) — desni rob telefona = desni
   rob vizuala pod njim (Mitja, 7. 10.). Okvir je visok kot telefon brez dviga, da napis kartice
   ostane pod telefonom.
   aspect-ratio z !important: v mreži velja močnejše pravilo »:nth-child(2) … { aspect-ratio: 4/3 }«
   (components.css). Safari 26.5 je iz višine okvirja izračunal širino 585 × 4/3 = 781 px namesto
   571 px kartice in telefon je zlezel ~210 px desno čez rob (izmerjeno v Mitjevem Safariju 8. 10.).
   Chromium in Playwright WebKit širino vzameta iz stolpca, zato tam napake ni bilo. */
.sv-reels .c-mockup-card__frame {
  aspect-ratio: auto !important;
  width: 100%;
  overflow: visible;
  background: none;
  box-shadow: none;
  display: block;
  position: relative;
  height: calc(var(--sv-tel-v) - var(--sv-dvig, 0px));
}
.sv-reels:hover .c-mockup-card__frame { box-shadow: none; }
/* Širina iz višine (razmerje zaslona 1290 : 2796). */
.sv-reels .c-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  width: calc(var(--sv-tel-v) * 0.46137);
  height: var(--sv-tel-v);
  border-radius: calc(var(--sv-tel-v) * 0.083);
  padding: calc(var(--sv-tel-v) * 0.009);
}
.sv-reels .c-phone__screen { border-radius: calc(var(--sv-tel-v) * 0.075); }
.sv-reels .c-mockup-card__frame img,
.sv-reels:hover .c-mockup-card__frame img { transform: none; }
@media (max-width: 860px) {
  .sv-reels { --sv-tel-h: clamp(420px, 120vw, 600px); }
  .sv-reels .c-phone { left: 0; margin-inline: auto; }   /* na sredini */
  /* WebKit (Safari, iPhone) je enemu stolpcu 1fr dal širino vsebine kartic (624 px pri 390 px
     zaslona) — stran je bila preširoka. minmax(0, 1fr) stolpec omeji na širino mreže (izmerjeno 7. 10.). */
  .c-mockup-grid__list--bento { grid-template-columns: minmax(0, 1fr); }
}

/* Veliki naslovi odsekov: brez lastnega razmika so podedovali razmik besedila (1,75) — vrstici
   sta bili preveč narazen (Mitja, 7. 10.). Enako kot naslovi poglavij (--leading-tight 1,14). */
.c-hgallery__title,
.c-mockup-grid__title,
.c-video-section__title,
.c-split__title,
.c-timeline__title { line-height: var(--leading-tight); }

/* Motion je od 8. 10. ZA Materiali (Mitja: vrata in Motion preveč skupaj). Ozadja .page-section se
   izmenjujejo po vrstnem redu <section> (page.css :nth-of-type) — Materiali bi s premikom dobili
   temnejše ozadje; obdržijo dvignjeno, kot prej. */
.page-section.sv-detajli { background: var(--color-bg-raised); }   /* (0,2,0) — premaga :nth-of-type */

/* Nadnaslovi poglavij na najožjih telefonih (320 px: iPhone SE, povečan prikaz): »Poglavje 03 —
   Materiali« je bil širok 311 px in je stran razširil na 331 px (izmerjeno 8. 10.). Ožji razmik črk
   (0,32 → 0,17 em) ga spravi v eno vrstico (271 px od 280); prelom ostane le kot varovalka. */
.u-eyebrow { flex-wrap: wrap; }
@media (max-width: 374px) { .u-eyebrow { letter-spacing: 0.17em; } }