/* ==========================================================================
   Jyoti, pot nazaj k sebi
   Slogovna datoteka. Urejaj previdno, spremembe veljajo za vse strani.
   ========================================================================== */

/* --- Pisave -------------------------------------------------------------
   Pisave so gostovane lokalno, zato stran ne poslje nobenega podatka
   Googlu in ne potrebuje piskotne pasice. Navodila za prenos so v BERI-ME.md.
   Dokler datotek v mapi fonts ni, se uporabi sistemska nadomestna pisava. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2');
}

/* --- Barve in mere ------------------------------------------------------ */

:root {
  --papir: #FAF7F1;
  --papir-topel: #F3EDE3;
  --crnilo: #2E2A25;
  --crnilo-mehko: #6C6157;
  --zajbelj: #7C8F7B;
  --zajbelj-temen: #5E7160;
  --zlata: #C9A15B;
  --roza: #DE93AC;
  --crta: #E3DACB;

  --sirina: 68rem;
  --sirina-ozka: 44rem;
  --rob: clamp(1.25rem, 5vw, 3rem);

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Osnove ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--crnilo);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--zajbelj-temen);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--zlata); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--zajbelj-temen);
  outline-offset: 3px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--crta);
  margin: 3rem 0;
}

.preskoci {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--crnilo);
  color: var(--papir);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.preskoci:focus { left: 0; }

/* --- Postavitev --------------------------------------------------------- */

.ovoj {
  width: 100%;
  max-width: var(--sirina);
  margin-inline: auto;
  padding-inline: var(--rob);
}

.ovoj--ozek { max-width: var(--sirina-ozka); }

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.tesno { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.pas-topel { background: var(--papir-topel); }

.oko {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--zajbelj);
  margin-bottom: 1rem;
}

.vodilo {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.7;
  color: var(--crnilo-mehko);
}

/* --- Valovanje, znak strani --------------------------------------------
   Trije koncentricni loki se ponovijo kot locilo med sklopi. Motiv je vzet
   iz logotipa, kjer lotos plava na vodi. */

.valovanje {
  display: block;
  width: min(100%, 30rem);
  height: 2.5rem;
  margin: 0 auto;
  overflow: visible;
}
.valovanje ellipse { fill: none; stroke: var(--zlata); stroke-linecap: round; }

/* --- Fotografije -------------------------------------------------------
   Razmerje in obrezovanje sta zapisana v slogih, ne v datoteki. Zato se
   ista fotografija na telefonu obreze bolj kvadratno in ne postane tanka
   crta. Ce fotografijo zamenjas, novo shrani z istim imenom in vse deluje
   naprej. */

.ilustracija {
  display: block;
  width: 100%;
  border-radius: 5px;
  background: var(--papir-topel);
}

.ilustracija--uvod {
  max-width: 56rem;
  margin: 0 auto 2rem;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

.ilustracija--pas {
  width: min(100%, 62rem);
  margin-inline: auto;
  margin-block: clamp(1.5rem, 4vw, 2.5rem);
  aspect-ratio: 16 / 5;
  object-fit: cover;
}

/* Na ozkih zaslonih bi 16:5 pomenilo komaj vidno crto, zato obrezemo. */
@media (max-width: 42rem) {
  .ilustracija--uvod { aspect-ratio: 3 / 2; }
  .ilustracija--pas  { aspect-ratio: 2 / 1; }
}


/* --- Portret ------------------------------------------------------------ */

.portret {
  display: block;
  width: 100%;
  max-width: 20rem;
  border-radius: 5px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portret--sirok { max-width: 26rem; aspect-ratio: auto; }

.predstavitev {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}
@media (max-width: 46rem) {
  .predstavitev { grid-template-columns: 1fr; justify-items: center; text-align: left; }
}

.podnapis {
  display: block;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--crnilo-mehko);
  margin-top: 0.7rem;
}

/* --- Uvod z lotosom ----------------------------------------------------
   Znak lotosa lebdi, iz njegove sredine se sirijo trije zlati krogi kot bi
   kdo vrgel kamen v vodo, spodaj pa je gladina vode, ista kot pod lotosom v
   logotipu. Krogi so centrirani na lotos, ne na sekcijo. */

.uvod--lotos { overflow: hidden; }

.lotos-prizor {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(15rem, 34vw, 20rem);
  margin-bottom: 0.5rem;
}

.lotos-krogi {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.lotos-krogi span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12rem;
  height: 12rem;
  margin-left: -6rem;
  margin-top: -6rem;
  border: 1px solid var(--zlata);
  border-radius: 50%;
  opacity: 0;
  animation: lotosval 9s ease-out infinite;
}
.lotos-krogi span:nth-child(2) { animation-delay: 3s; }
.lotos-krogi span:nth-child(3) { animation-delay: 6s; }

@keyframes lotosval {
  0%   { transform: scale(0.28); opacity: 0; }
  16%  { opacity: 0.4; }
  100% { transform: scale(1.9); opacity: 0; }
}

.uvod__lotos {
  position: relative;
  z-index: 1;
  width: clamp(88px, 15vw, 128px);
  display: block;
  animation: lebdenje 7s ease-in-out infinite;
}
@keyframes lebdenje {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.uvod__voda {
  display: block;
  width: min(100%, 26rem);
  height: 3rem;
  margin: 1.75rem auto 0;
  overflow: visible;
}
.uvod__voda ellipse {
  fill: none;
  stroke: var(--zlata);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
  .lotos-krogi span { animation: none; opacity: 0.16; }
  .lotos-krogi span:nth-child(1) { transform: scale(0.8); }
  .lotos-krogi span:nth-child(2) { transform: scale(1.3); }
  .lotos-krogi span:nth-child(3) { transform: scale(1.7); }
  .uvod__lotos { animation: none; }
}

/* --- Nežno prikazovanje ob pomikanju ------------------------------------
   Sklop se ob prihodu v vidno polje dvigne in pojavi. Če ima obiskovalec
   v sistemu vklopljeno zmanjšanje gibanja, se zgodi takoj in brez premika. */

/* Ob prehodu na stran se vsebina nezno pojavi od zgoraj navzdol.
   VARNOST: privzeto je vsa vsebina VIDNA. Skripta na dnu strani doda
   razred .anim na body sele, ko je pripravljena vsebino tudi prikazati.
   Ce skripta iz kakrsnega koli razloga ne stece, ostane vse vidno. */
body.anim .pojav {
  opacity: 0;
  transform: translateY(14px);
}
body.anim.prikazi .pojav {
  opacity: 1;
  transform: none;
}
.pojav {
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pojav--z1 { transition-delay: 0.08s; }
.pojav--z2 { transition-delay: 0.16s; }
.pojav--z3 { transition-delay: 0.24s; }
.pojav--z4 { transition-delay: 0.32s; }
.pojav--z5 { transition-delay: 0.40s; }

/* --- Dihalni krog ------------------------------------------------------- */

.dih {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1rem;
}
.dih__krog {
  position: relative;
  width: 11rem;
  height: 11rem;
  display: grid;
  place-items: center;
}
.dih__krog::before,
.dih__krog::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--zlata);
  animation: dihanje 12s ease-in-out infinite;
}
.dih__krog::after {
  background: var(--zlata);
  opacity: 0.08;
  border: 0;
}
.dih__jedro {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--papir);
  border: 1px solid var(--crta);
  animation: dihanje 12s ease-in-out infinite;
}
.dih__beseda {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--zajbelj-temen);
  transition: opacity 0.6s ease;
  min-height: 1.9rem;
}

@keyframes dihanje {
  0%, 100% { transform: scale(0.62); }
  33%      { transform: scale(1); }
  50%      { transform: scale(1); }
  83%      { transform: scale(0.62); }
}


@media (prefers-reduced-motion: reduce) {
  .dih__krog::before, .dih__krog::after, .dih__jedro { animation: none; }
  .dih__krog::before, .dih__krog::after, .dih__jedro { transform: scale(0.85); }
  body.anim .pojav, body.anim.prikazi .pojav { opacity: 1; transform: none; }
  .pojav { transition: none; }
}

/* --- Glava -------------------------------------------------------------- */

.glava {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--crta);
}

.glava__vrsta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.znamka {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--crnilo);
}
.znamka img { width: 34px; height: 34px; }
.znamka__ime {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--zlata);
}
.znamka__pod {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zajbelj);
  margin-top: 0.2rem;
}

.meni {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.meni a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--crnilo);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.meni a:hover,
.meni a[aria-current="page"] {
  color: var(--zajbelj-temen);
  border-bottom-color: var(--zlata);
}

.meni__gumb {
  display: none;
  background: none;
  border: 1px solid var(--crta);
  border-radius: 3px;
  padding: 0.5rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--crnilo);
  cursor: pointer;
}

@media (max-width: 62rem) {
  .meni__gumb { display: block; }
  .meni {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papir);
    border-bottom: 1px solid var(--crta);
    padding: 0.5rem var(--rob) 1.25rem;
  }
  .meni.odprt { display: flex; }
  .meni a {
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--crta);
  }
}

/* --- Uvodni sklop ------------------------------------------------------- */

.uvod {
  text-align: center;
  padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem);
}


.uvod h1 {
  font-style: italic;
  margin-bottom: 0.5rem;
}
.uvod__troje {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--zajbelj);
  margin-bottom: 1.75rem;
}
.uvod p.vodilo {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}

/* --- Gumbi -------------------------------------------------------------- */

.gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}
.gumbi--levo { justify-content: flex-start; }

.gumb {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gumb--polni {
  background: var(--zajbelj-temen);
  color: var(--papir);
  border: 1px solid var(--zajbelj-temen);
}
.gumb--polni:hover { background: var(--crnilo); border-color: var(--crnilo); color: var(--papir); }
.gumb--obroba {
  background: transparent;
  color: var(--crnilo);
  border: 1px solid var(--crta);
}
.gumb--obroba:hover { border-color: var(--zlata); color: var(--crnilo); }

/* --- Trije koraki ------------------------------------------------------- */

.troje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.troje__enota { text-align: left; }
.troje__enota h3 {
  font-style: italic;
  color: var(--zajbelj-temen);
  margin-bottom: 0.4rem;
}
.troje__enota p { color: var(--crnilo-mehko); font-size: 1rem; margin: 0; }
.troje__crta {
  width: 2.5rem;
  height: 1px;
  background: var(--zlata);
  margin-bottom: 1.1rem;
}

/* --- Kartice vadb ------------------------------------------------------- */

.mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.kartica {
  display: flex;
  flex-direction: column;
  background: var(--papir);
  border: 1px solid var(--crta);
  border-radius: 4px;
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.kartica:hover {
  border-color: var(--zlata);
  transform: translateY(-2px);
  color: inherit;
}
.kartica h3 { margin-bottom: 0.35rem; }
.kartica__oko {
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--roza);
  margin-bottom: 0.9rem;
}
.kartica p {
  font-size: 0.97rem;
  color: var(--crnilo-mehko);
  margin-bottom: 1.1rem;
}
.kartica__vec {
  margin-top: auto;
  font-size: 0.87rem;
  color: var(--zajbelj-temen);
}

/* --- Tabele ------------------------------------------------------------- */

.tabela-ovoj { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  margin-bottom: 1.5rem;
}
caption {
  text-align: left;
  font-family: var(--serif);
  font-size: 1.35rem;
  padding-bottom: 0.6rem;
}
th, td {
  text-align: left;
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--crta);
  vertical-align: top;
}
th {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zajbelj);
}
td.cena { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.ura  { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--zlata); }

/* --- Opozorilo in poudarek ---------------------------------------------- */

.opomba {
  border-left: 2px solid var(--zlata);
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-size: 0.95rem;
  color: var(--crnilo-mehko);
  margin-block: 1.5rem;
}

.navedek {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.5;
  text-align: center;
  color: var(--crnilo);
  max-width: 38rem;
  margin: 0 auto;
}

.seznam-kljukica {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.seznam-kljukica li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
}
.seznam-kljukica li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--zlata);
  border-radius: 50%;
}

/* --- Pogosta vprasanja -------------------------------------------------- */

details {
  border-bottom: 1px solid var(--crta);
  padding-block: 1.1rem;
}
summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.25rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--zlata);
  font-family: var(--sans);
  font-size: 1.1rem;
  flex-shrink: 0;
}
details[open] summary::after { content: "\2013"; }
details > *:not(summary) { margin-top: 0.9rem; }

/* --- Kontaktni pas ------------------------------------------------------ */

.kontakt-pas { text-align: center; }
.kontakt-pas .velika-povezava {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  text-decoration: none;
  color: var(--crnilo);
  border-bottom: 1px solid var(--zlata);
  display: inline-block;
  margin-bottom: 0.4rem;
  word-break: break-word;
}
.kontakt-pas .velika-povezava:hover { color: var(--zajbelj-temen); }

/* --- Noga --------------------------------------------------------------- */

.noga {
  background: var(--papir-topel);
  border-top: 1px solid var(--crta);
  padding-block: 3rem 2rem;
  font-size: 0.9rem;
  color: var(--crnilo-mehko);
}
.noga__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.noga h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zajbelj);
  margin-bottom: 0.9rem;
}
.noga ul { list-style: none; margin: 0; padding: 0; }
.noga li { margin-bottom: 0.45rem; }
.noga a { color: var(--crnilo-mehko); text-decoration: none; }
.noga a:hover { color: var(--zajbelj-temen); text-decoration: underline; }
.noga__dno {
  border-top: 1px solid var(--crta);
  padding-top: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.7;
}

/* --- Drobno ------------------------------------------------------------- */

.drobno { font-size: 0.85rem; color: var(--crnilo-mehko); }

.dve-koloni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.znacka {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zajbelj-temen);
  border: 1px solid var(--crta);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
}