/* Sat po sat – časová osa dne, linkový tvar, vzdušný rytmus */
:root {
  --mah: #7c962c;          /* hlavni */
  --mah-tamna: #4e5f1c;    /* hlavni-tmava */
  --plava: #5972c0;        /* doplnkova */
  --ljubicasta: #4b22c3;   /* akcent-cta */
  --ljubicasta-tamna: #3a1a99;
  --papir: #f9faf5;        /* pozadi */
  --polje: #eff3e2;        /* plocha */
  --tinta: #282d1b;        /* text */
  --tinta-blijeda: #4a5236;
  --serif: "Noto Serif", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --rub: 5vw;
  --os: 340px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.62;
  padding-bottom: 96px;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
h4 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0 0 1em; }
small { font-size: .9rem; }
a { color: var(--ljubicasta); }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--plava);
  outline-offset: 3px;
}

/* Gumbi */
.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ljubicasta);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ljubicasta);
  outline: 1px solid var(--ljubicasta);
  outline-offset: 5px;
  min-height: 60px;
  padding: 14px 30px;
  font-size: 1.2rem;
  line-height: 1.2;
}
.gumb:hover { background: var(--ljubicasta-tamna); }
.gumb-glava { min-height: 52px; font-size: 1.125rem; padding: 10px 22px; outline-offset: 3px; }
.gumb-glavni { min-height: 84px; min-width: 340px; font-size: 1.45rem; padding: 18px 40px; }
.gumb-ponuda { min-height: 76px; font-size: 1.3rem; margin-top: .6rem; }
.gumb-zavrsni { min-height: 72px; font-size: 1.25rem; margin-top: 1.4rem; }

/* Zaglavlje */
.zaglavlje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px var(--rub);
  border-bottom: 1px solid var(--tinta);
}
.znak {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -.01em;
}

/* Satovi – potpisni element */
.sat { margin: 0; font-family: var(--serif); color: var(--mah-tamna); line-height: .95; }
.sat time {
  display: block;
  font-weight: 300;
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.sat span { display: block; font-style: italic; font-size: 1.15rem; margin-top: .35rem; color: var(--tinta-blijeda); }
.sat-velik time { font-size: clamp(3.8rem, 6vw, 5rem); }

/* Uvod */
.uvod-mreza {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 4vw;
  align-items: start;
  padding: 28px var(--rub) 40px;
}
.uvod-slika { margin: 0; }
.uvod-slika img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
figcaption { font-size: 1rem; line-height: 1.45; color: var(--tinta-blijeda); margin-top: .7rem; }
figcaption b { font-family: var(--serif); font-weight: 600; color: var(--mah-tamna); margin-right: .4em; }
.uvod-tekst h1 { font-size: clamp(2.3rem, 3.4vw, 3rem); margin: .6rem 0 .45em; }
.perex { font-size: 1.1875rem; max-width: 34em; }
.uvod-tekst .gumb-glavni { margin-top: .4rem; }

.ravnalo {
  position: relative;
  height: 58px;
  margin: 0 var(--rub) 0;
  border-top: 1px solid var(--tinta);
  background: repeating-linear-gradient(to right, var(--tinta) 0 1px, transparent 1px calc(100% / 16)) top left / calc(100% + 1px) 10px no-repeat;
}
.ravnalo span {
  position: absolute;
  top: 16px;
  left: calc(var(--h) / 16 * 100%);
  transform: translateX(-50%);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-blijeda);
}
.ravnalo span:first-child { transform: none; }
.ravnalo span:nth-last-child(2) { transform: translateX(-100%); }
.ravnalo-oznaka {
  position: absolute;
  top: -22px;
  left: calc(var(--h) / 16 * 100%);
  width: 2px;
  height: 34px;
  background: var(--plava);
}

/* Tjedan */
.uski { max-width: 760px; margin: 0 auto; padding: 0 var(--rub); }
.tjedan { padding: 110px 0 40px; }
.uvodni { font-size: 1.2rem; }
.os { list-style: none; margin: 56px auto 0; padding: 0 var(--rub); max-width: 1180px; }
.zapis, .red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--os);
}
.zapis-tekst, .red-tekst { padding: 64px 64px 64px 0; max-width: 720px; }
.zapis-tekst p { margin: 0; }
.zapis-sat, .red-sat {
  position: relative;
  border-left: 1px solid var(--mah);
  padding: 58px 0 64px 40px;
}
.zapis-sat::before, .red-sat::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 92px;
  width: 28px;
  height: 1px;
  background: var(--mah-tamna);
}
.zapis-tekst figure { margin: 30px 0 0; max-width: 560px; }
.zapis-tekst figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 45% 35%; }

/* Red – sekce na istoj osi */
.red { max-width: 1180px; margin: 0 auto; padding: 0 var(--rub); }
.vyklad { padding: 40px 0 80px; }
.ilustracija { max-width: 760px; margin: 24px auto 0; padding: 0 var(--rub); box-sizing: content-box; }
.ilustracija img { width: 100%; mix-blend-mode: multiply; }
.uzroci { max-width: 960px; margin: 88px auto 0; padding: 0 var(--rub); }
.uzroci-naslov { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 1.2em; }
.uzrok {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  padding: 30px 0;
  border-top: 1px solid var(--mah);
}
.uzrok:last-child { border-bottom: 1px solid var(--mah); }
.uzrok h4 { margin: 0; }
.uzrok p { margin: 0; }
.projevi { max-width: 760px; margin: 88px auto 0; padding: 0 var(--rub); box-sizing: content-box; }
.projevi ul { margin: 0 0 1em; padding-left: 1.2em; }
.projevi li { margin-bottom: .3em; }
.projevi li::marker { color: var(--mah-tamna); }
.napomena { max-width: 760px; margin: 1.4rem auto 0; padding: 0 var(--rub); box-sizing: content-box; font-style: italic; color: var(--tinta-blijeda); }

.brojke { padding: 0 0 80px; }
.graf { margin: 32px 0 0; max-width: 520px; }
.graf img { width: 100%; }

/* Ponuda */
.ponuda { background: var(--polje); border-top: 1px solid var(--mah); border-bottom: 1px solid var(--mah); padding: 110px 0; }
.ponuda-mreza {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 5vw;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--rub);
  align-items: start;
}
.ponuda h2 { margin-top: 1.1rem; font-size: clamp(2rem, 3vw, 2.6rem); }
.ponuda-tekst { font-size: 1.25rem; padding-top: .6rem; }

.zavrsetak { padding: 60px 0 40px; }
.zavrsna-slika { margin: 28px 0 0; }
.zavrsna-slika img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }

/* Recenzije */
.recenzije { padding: 90px 0; }
.recenzija { margin: 0; padding: 34px 0; border-top: 1px solid var(--mah); }
.recenzija:last-child { border-bottom: 1px solid var(--mah); }
.recenzija blockquote { margin: 0 0 .7rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.35; }
.recenzija cite { font-style: normal; font-weight: 600; color: var(--mah-tamna); font-size: 1.0625rem; }

/* Pitanja */
.pitanja { padding: 40px 0 120px; }
.pitanja-mreza {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 5vw;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--rub);
}
details { border-top: 1px solid var(--mah); padding: 22px 0; }
details:last-child { border-bottom: 1px solid var(--mah); }
summary { cursor: pointer; font-weight: 600; font-size: 1.2rem; list-style: none; padding-right: 36px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-family: var(--serif); font-size: 1.6rem; color: var(--mah-tamna); }
details[open] summary::after { content: "–"; }
details p { margin: .8rem 0 0; }

/* Podnožje */
.podnozje {
  border-top: 1px solid var(--tinta);
  padding: 28px var(--rub) 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: 1rem;
}
.podnozje p { margin: 0; }
.podnozje nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.podnozje a { color: var(--tinta); }

/* Podstranice */
.podstranica { min-height: 100vh; display: flex; flex-direction: column; }
.podstranica main { flex: 1; }
.list { max-width: 760px; margin: 0 auto; padding: 80px var(--rub) 90px; box-sizing: content-box; }
.list h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.list h2 { font-size: 1.55rem; margin-top: 1.8em; }
.list .sat { margin-bottom: 1.4rem; }
.obrazac { display: grid; gap: 18px; margin-top: 28px; }
.obrazac label { display: grid; gap: 6px; font-weight: 600; }
.obrazac input, .obrazac textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--tinta);
  background: #fff;
  border-radius: 0;
}
.obrazac button { justify-self: start; cursor: pointer; }
#kontaktDakujeme { margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--mah); border-bottom: 1px solid var(--mah); font-family: var(--serif); font-size: 1.3rem; }

/* Popup a lišta (engine) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 34, 20, .82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative;
  background: var(--papir);
  width: 640px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 48px 44px 40px;
  border: 1px solid var(--tinta);
  outline: 1px solid var(--tinta);
  outline-offset: -10px;
  text-align: center;
}
.modal .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tinta);
  background: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta);
}
.modal .badge { display: inline-block; background: var(--mah-tamna); color: #fff; font-weight: 600; font-size: 1rem; padding: 6px 14px; }
.modal h3 { font-family: var(--serif); font-size: 3rem; font-weight: 600; color: var(--mah-tamna); margin: 18px 0 6px; }
.modal > p { font-size: 1.35rem; margin-bottom: 14px; }
.modal .offer { border-top: 1px solid var(--mah); border-bottom: 1px solid var(--mah); padding: 14px 0 4px; margin-bottom: 26px; }
.modal .offer p { margin: 0 0 10px; font-size: 1.1rem; }
.modal .btn { white-space: normal; text-wrap: balance; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; text-align: center; line-height: 1.2; }
.btn-cta { background: var(--ljubicasta); color: #fff; border: 1px solid var(--ljubicasta); min-height: 60px; padding: 12px 26px; font-size: 1.15rem; }
.btn-cta:hover { background: var(--ljubicasta-tamna); }
.modal .btn-cta-xl { min-height: 86px; font-size: 1.4rem; padding: 16px 28px; width: 100%; }
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 12px var(--rub);
  background: var(--mah-tamna);
  color: #fff;
  border-top: 1px solid var(--tinta);
}
.sticky-cta > span { font-size: 1.0625rem; }
.sticky-cta .btn { flex: 0 0 auto; border-color: #fff; outline: 1px solid #fff; outline-offset: 2px; min-height: 60px; }

@media (max-width: 900px) {
  :root { --os: 260px; }
  .uvod-mreza { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
  .uvod-tekst { order: -1; }
  .zapis-tekst, .red-tekst { padding-right: 36px; }
  .ponuda-mreza, .pitanja-mreza { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 680px) {
  body { padding-bottom: 104px; font-size: 1.0625rem; }
  .zaglavlje { padding: 12px 18px; }
  .znak { font-size: 1.2rem; }
  .gumb-glava { font-size: 1.125rem; padding: 8px 14px; min-height: 48px; }
  .uvod-mreza { padding: 18px 18px 28px; }
  .sat-velik time { font-size: 3.6rem; }
  .uvod-tekst h1 { font-size: 2.1rem; }
  .perex { font-size: 1.0625rem; }
  .gumb-glavni { min-width: 0; width: 100%; font-size: 1.3rem; min-height: 80px; padding: 16px 20px; }
  .gumb-ponuda, .gumb-zavrsni { width: 100%; }
  .ravnalo { margin: 0 18px; }
  .ravnalo span:nth-child(even) { display: none; }
  .tjedan { padding-top: 72px; }
  .uski { padding: 0 18px; }
  .os { padding: 0 18px; margin-top: 32px; }
  .zapis, .red { grid-template-columns: 1fr; border-left: 1px solid var(--mah); padding-left: 20px; }
  .red { margin: 0 18px; padding-right: 0; }
  .zapis-sat, .red-sat { order: -1; border-left: 0; padding: 40px 0 0; }
  .zapis-sat::before, .red-sat::before { left: -34px; top: 72px; }
  .zapis-tekst, .red-tekst { padding: 18px 0 40px; }
  .sat time { font-size: 3.2rem; }
  .ilustracija, .uzroci, .projevi, .napomena { padding: 0 18px; }
  .uzroci { margin-top: 56px; }
  .uzrok { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .projevi { margin-top: 56px; }
  .ponuda { padding: 72px 0; }
  .ponuda-mreza, .pitanja-mreza { padding: 0 18px; }
  .ponuda-tekst { font-size: 1.125rem; }
  .recenzije { padding: 64px 0; }
  .graf { max-width: none; }
  .list { padding: 48px 18px 64px; }
  .sticky-cta { flex-direction: column; gap: 4px; padding: 6px 14px; text-align: center; }
  .sticky-cta > span { font-size: .9375rem; line-height: 1.25; }
  .sticky-cta .btn { width: 100%; min-height: 60px; padding: 8px 20px; }
  .modal { padding: 44px 18px 26px; }
  .modal h3 { font-size: 2.1rem; white-space: nowrap; }
  .modal > p { font-size: 1.15rem; }
}