/* ===== Videška jezera — stylesheet ===== */

:root{
  --bg: #f6f3ec;
  --ink: #182019;
  --forest: #16261e;
  --forest-deep: #0d1712;
  --earth: #8a7355;
  --earth-light: #c9b99a;
  --stone: #b8b2a4;
  --water: #55707a;
  --line: rgba(24,32,25,0.12);
  --max: 1240px;
  --gutter: 24px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
a{ color:inherit; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- Top nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  color:#fff;
  transform:translateY(-100%);
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
  font-size:14px;
  letter-spacing:.04em;
}
.nav.is-visible{ transform:translateY(0); }
.nav.is-scrolled{
  background:rgba(246,243,236,0.92);
  backdrop-filter:blur(6px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.nav__mark{ font-family:var(--serif); font-size:16px; text-transform:uppercase; letter-spacing:.12em; text-decoration:none; color:inherit; }
.nav__right{ display:flex; align-items:center; gap:22px; }
.nav__lang{ display:flex; gap:8px; font-size:13px; }
.nav__lang button{
  background:none; border:none; padding:2px 4px; cursor:pointer; color:inherit;
  font-family:var(--sans); font-size:13px; opacity:.6;
}
.nav__lang button[aria-current="true"]{ opacity:1; border-bottom:1px solid currentColor; }
.nav__lang button:disabled{ cursor:default; }
.nav__toggle{
  background:none; border:1px solid currentColor; color:inherit;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:.85;
}
.nav__toggle:hover{ opacity:1; }

/* Chapter jump menu */
.chapters{
  position:fixed; inset:0; z-index:60;
  background:rgba(13,23,18,0.97);
  color:#f2efe6;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.chapters.is-open{ opacity:1; pointer-events:auto; }
.chapters__list{ list-style:none; margin:0; padding:0; text-align:center; }
.chapters__list li{ margin:10px 0; }
.chapters__list a{
  font-family:var(--serif); font-size:clamp(22px,4vw,34px);
  text-decoration:none; color:inherit; opacity:.7; transition:opacity .2s;
}
.chapters__list a:hover{ opacity:1; }
.chapters__close{
  position:absolute; top:22px; right:24px;
  background:none; border:1px solid rgba(242,239,230,.5); color:#f2efe6;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
}

/* ---------- Section base ---------- */
.section{
  position:relative;
  padding:min(14vw,140px) 0;
}
.section--tight{ padding:min(8vw,90px) 0; }
.section--dark{ background:var(--forest); color:#f2efe6; }
.section--earth{ background:#efe9dd; }

.section__label{
  display:inline-block;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--earth); margin-bottom:18px;
}
.section--dark .section__label{ color:var(--earth-light); }

.fade-up{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.fade-up.is-visible{ opacity:1; transform:none; }
.fade-up.delay-1{ transition-delay:.12s; }
.fade-up.delay-2{ transition-delay:.24s; }
.fade-up.delay-3{ transition-delay:.36s; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 62%;
  transform:scale(1.08);
  animation:heroIn 2.4s var(--ease) forwards;
}
@keyframes heroIn{ from{ transform:scale(1.12);} to{ transform:scale(1);} }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,16,12,.25) 0%, rgba(10,16,12,.15) 40%, rgba(10,16,12,.75) 100%);
}
.hero__content{
  position:relative; z-index:2;
  width:100%;
  padding:0 var(--gutter) 9vh;
}
.hero__eyebrow{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.85; margin-bottom:18px;
}
.hero__title{
  font-size:clamp(40px, 8vw, 96px);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.hero__lines{
  margin-top:22px;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,2.1vw,22px);
  line-height:1.5;
  max-width:420px;
  opacity:.92;
}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; color:#fff; opacity:.75;
  width:22px; height:34px; border:1px solid rgba(255,255,255,.6); border-radius:12px;
}
.hero__scroll::before{
  content:""; position:absolute; top:6px; left:50%; width:3px; height:7px;
  background:#fff; border-radius:2px; transform:translateX(-50%);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:16px;} 100%{opacity:0; top:6px;} }

/* ---------- Story ---------- */
.story{
  display:grid; grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}
@media(min-width:860px){
  .story{ grid-template-columns:1.1fr .9fr; gap:64px; }
}
.story__text h2{ font-size:clamp(28px,4vw,44px); margin-bottom:26px; }
.story__text p{ font-size:18px; max-width:52ch; }
.story__quote{
  margin:32px 0 0;
  padding-left:20px;
  border-left:2px solid var(--earth);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,2.4vw,24px);
  color:var(--forest);
}
.story__img{
  position:relative;
  border-radius:2px; overflow:hidden;
  aspect-ratio:4/5;
}
.story__img img{ width:100%; height:100%; object-fit:cover; }
.story__cta{
  display:inline-block; margin-top:28px;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:3px; text-decoration:none;
}

/* ---------- Full-bleed photo section ---------- */
.photo-full{
  position:relative;
  min-height:78vh;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  color:#fff;
}
.photo-full::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,16,12,.72) 0%, rgba(10,16,12,0) 55%);
}
.photo-full__caption{
  position:relative; z-index:1; padding:40px var(--gutter);
  max-width:640px;
}
.photo-full__caption .section__label{ color:#e7dfc9; }
.photo-full__caption h2{ font-size:clamp(26px,4vw,42px); }

/* ---------- Simple text-forward section (Dolina) ---------- */
.minimal{
  text-align:center;
  max-width:680px; margin:0 auto;
}
.minimal h2{ font-size:clamp(26px,4vw,40px); margin-bottom:20px; }
.minimal p{ font-size:18px; margin-left:auto; margin-right:auto; }

/* ---------- Lake chapter (prvo/drugo/treće) ---------- */
.lake{ }
.lake__head{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:46px;
}
.lake__head h2{ font-size:clamp(30px,5vw,54px); }
.lake__head .sub{ font-family:var(--serif); font-style:italic; color:var(--earth); font-size:18px; }
.lake__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media(min-width:720px){
  .lake__grid{ grid-template-columns:repeat(4,1fr); }
  .lake__grid a:nth-child(4n+1){ grid-column:span 2; grid-row:span 2; }
}
.lake__grid a{ display:block; overflow:hidden; aspect-ratio:1/1; border-radius:2px; }
.lake__grid a:nth-child(4n+1){ aspect-ratio:auto; }
.lake__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.lake__grid a:hover img{ transform:scale(1.04); }
.lake__text{ max-width:62ch; font-size:18px; margin-top:36px; }

/* Placeholder block (jezero 2 / jezero 3) */
.placeholder{
  border:1px dashed var(--stone);
  padding:min(10vw,90px) var(--gutter);
  text-align:center;
  background:repeating-linear-gradient(135deg, rgba(184,178,164,0.10) 0 2px, transparent 2px 14px);
}
.placeholder .tag{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--water); border:1px solid var(--water); border-radius:20px; padding:5px 14px;
  margin-bottom:22px;
}
.placeholder h2{ font-size:clamp(28px,4.5vw,46px); margin-bottom:16px; }
.placeholder p{ max-width:52ch; margin:0 auto; font-size:17px; color:#4a4a44; }

/* ---------- Three lakes diagram ---------- */
.diagram{ text-align:center; }
.diagram__svg{ max-width:420px; margin:40px auto 0; }
.diagram__svg text{ font-family:var(--sans); }

/* ---------- No-resort section ---------- */
.no-resort{
  background:var(--forest-deep); color:#f2efe6;
  text-align:center; padding:min(18vw,180px) 0;
}
.no-resort h2{
  font-size:clamp(30px,6vw,64px);
  text-transform:uppercase; letter-spacing:.01em;
  max-width:14ch; margin:0 auto 34px;
  line-height:1.05;
}
.no-resort ul{ list-style:none; padding:0; margin:0 0 34px; font-size:18px; opacity:.85; }
.no-resort ul li{ margin:8px 0; }
.no-resort ul li::before{ content:"— "; }
.no-resort .lede{ max-width:56ch; margin:0 auto; font-size:19px; opacity:.92; }

/* ---------- Zaštita ---------- */
.protection{ }
.protection__inner{ max-width:760px; margin:0 auto; }
.protection h2{ font-size:clamp(26px,4vw,42px); margin-bottom:22px; }
.protection p{ font-size:18px; }
.protection .note{
  margin-top:28px; font-size:14px; color:#6b6a60;
  border-top:1px solid var(--line); padding-top:18px;
}

/* ---------- Gallery teaser ---------- */
.gallery-teaser__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
@media(min-width:720px){ .gallery-teaser__grid{ grid-template-columns:repeat(4,1fr); } }
.gallery-teaser__grid a{ display:block; aspect-ratio:3/4; overflow:hidden; }
.gallery-teaser__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-teaser__grid a:hover img{ transform:scale(1.05); }
.gallery-teaser__more{ text-align:center; margin-top:34px; }
.gallery-teaser__more a{
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:3px; text-decoration:none;
}

/* ---------- Footer ---------- */
.footer{
  background:var(--forest); color:#cfd6cd;
  padding:70px 0 34px;
  text-align:center;
}
.footer__mark{ font-family:var(--serif); font-size:22px; letter-spacing:.1em; text-transform:uppercase; color:#f2efe6; }
.footer__loc{ margin-top:10px; font-size:15px; opacity:.8; }
.footer__domain{ margin-top:22px; font-size:14px; letter-spacing:.05em; }
.footer__domain a{ text-decoration:none; border-bottom:1px solid rgba(207,214,205,.4); }
.footer__meta{
  margin-top:46px; padding-top:22px; border-top:1px solid rgba(207,214,205,.15);
  font-size:12px; opacity:.55;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(10,14,11,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
  padding:40px;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:88vh; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__close{
  position:absolute; top:20px; right:24px;
  background:none; border:1px solid rgba(255,255,255,.5); color:#fff;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
}

@media (max-width:600px){
  body{ font-size:16px; }
  .section{ padding:min(20vw,110px) 0; }
}