:root { --nav-h: 64px; --gap: clamp(24px, 2vw, 64px); --bleed: clamp(16px, 3vw, 64px); --rule: 1px; --line-h: 1.35em; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #E3DFDC;
}
body { 
  background-color: #020202; 
  font-family: "Switzer-Variable", sans-serif;
  font-variant-numeric: tabular-nums;
}

.navbar_ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #020202;
}

.logo_sec {
  min-height: calc(90vh - var(--nav-h));
  display: flex;                     
  align-items: center;
  justify-content: center; 
  margin-bottom: 5%;
}

.logo {
  aspect-ratio: 1 / 1;              /* vedno popoln krog */
  height: auto;
}

.logo img {
  position: absolute;
  inset: 0; 
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}


.logo-symbol {
  width: clamp(10px, 9vw, 560px);
  height: auto;
}

.logo-ring {
  animation: spin 10s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  width: clamp(10px, 22vw, 1060px);
}

@media (max-width: 790px){
  .logo-ring{
    width:clamp(5px, 60vw, 500px); ;

  }
  .logo-symbol{
    width: clamp(5px,24vw,400px);
  }
}



/* --- VITEZ + OVERLAY --- */
.vitez-sec{
  display: flex;
  justify-content: center;
  padding-bottom: 10%;
}

.vitez{
  width: 100%;
  display: flex;
  justify-content: center; /* centrira sliko */
}

.vitez-slika{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* če imaš PNG z ozadjem je OK tudi brez */
  /* object-position: 60% center;  po želji, če mora biti malo desno/levo */
}

.thegoal{
  position: static;       /* ali kar odstrani vrstico */
  display: block;
  width: clamp(700px, 95vw, 3000px);  /* skaluje “po Figmi” */
  height: auto;
  margin: 0 auto;
  pointer-events: none;
}

.podvitezom-img {
  position: static;       /* pomembno: ne absolute */
  display: block;
  width: min(300px, 10vw);
  height: auto;
  pointer-events: none;
  margin-bottom: 15%;
}


.cards-sec{
  padding: 0 16px 24px;
}
.cards-sec__heading{
  margin-left: 2%;
  margin-bottom: clamp(24px, 5svh, 56px);
}

/* vsak stolpec je vertikalni sklad */
.col{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* začasne škatle samo za preverjanje layouta */
.box{
  width: 100%;
  position: relative;       /* da lahko label in overlay sidramo z absolute */
  display: block;           /* ker je <a> */
  text-decoration: none;    /* brez podčrtaja na linku */
  color: inherit;
  overflow: hidden;
  background: #0f0f0f;      /* fallback, če slika še ni naložena */
}




.box::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 100%;
  background: linear-gradient(to top, #020202, rgba(0,0,0,0));
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease;   /* lep fade */
  pointer-events: none;
  z-index: 1;
}

.card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* odreže, da lepo zapolni */
  z-index: 0;
}

.box:hover::after,.box:focus-visible::after{
  opacity: 0;
}

.cards-grid{
  display: flex;
  gap: var(--gap);
}
.col{ 
  transform: translateY(var(--shift, 0)); 
}

/* 1. stolpec (683×…) */
.box.wide   { aspect-ratio: 683 / 384; }
.box.wide2  { aspect-ratio: 683 / 453; }
.box.square { aspect-ratio: 683 / 683; }

/* 2. stolpec (486×…) */
.box.short  { aspect-ratio: 486 / 338; }
.box.long   { aspect-ratio: 486 / 729; }
.box.long2  { aspect-ratio: 486 / 863; }

/* 3. stolpec (551×…) */
.box.wide3  { aspect-ratio: 551 / 381; }
.box.wide4  { aspect-ratio: 551 / 325; }
.box.long3  { aspect-ratio: 551 / 827; }
.box.square2{ aspect-ratio: 551 / 551; }


.col-1{  --shift: clamp(12px, 2vw, 28px);
flex-grow: 683; } 
.col-2{ --shift: clamp(-140px, -9vw, -80px);
flex-grow: 486; } 
.col-3{ --shift: clamp(-450px, -20vw, -180px);
flex-grow: 551; }



/* label v spodnjem levem kotu kartice */
.card__label{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;                    /* nad gradientom (::after ima z-index:1) */
  pointer-events: none;          /* da ne blokira klika na kartico */

  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 520;
  line-height: 1.2;

  padding: 8px 10px;
  border-radius: 8px;
  max-width: 85%;                /* da se daljši naslovi lepo lomijo */
  white-space: normal;
  word-break: break-word;

  opacity: 1;
  transition: opacity .25s ease;
}

.box:hover .card__label{
  opacity: 0;
}


.cta-sec{
  display: flex;
  justify-content: center;              /* horizontalno centriran */
  padding: 0 0 clamp(32px, 8svh, 120px);
  margin-top: clamp(-100px, -11svh, -24px);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 0.5px solid #E3DFDC;
  border-radius: 0;
  padding: clamp(5px, 0.6vw, 16px) clamp(10px, 0.7vw, 28px);
}

.btn--primary:hover{ 
  background-color: #E81E18;
  border: 0.5px solid #E81E18;
}

.manifesto{
  display: block;
  margin-inline: auto;
  height: auto;
  padding: 10vw;
  width: clamp(320px, 50vw, 1320px);
}


.site-footer-min{
  padding: clamp(16px, 3svh, 48px) clamp(16px, 4vw, 64px);
}

.footer-row{
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;      /* po želji: ujemi s “containerjem” strani */
  margin: 0 auto;
}

.footer-left, .footer-right{ flex: 1; }
.footer-center{ 
  flex: 0 0 auto; 
  text-align: center; 
}

.footer-right{
  text-align: right;
  text-decoration: none;
}


html{ scroll-behavior: smooth; }

/* telefon: lepo pod seboj, centrirano */
@media (max-width: 790px){
  .footer-row{
    flex-direction: column;
    text-align: center;
    gap: clamp(16px, 6svh, 46px);
    margin-bottom: 8%;
    margin-top: 50%;
  }
  .footer-right  { order: 1; } /* From the top */
  .footer-center { order: 2; } /* THE GOAL IS VISUAL LEGACY */
  .footer-left   { order: 3; }

  .footer-left, .footer-right{ 
    flex: none; 
    text-align: center; 
  }


}

@media (max-width: 790px){

  .vitez-sec{
    /* več “zraka” nad, malo manj pod (bližje naslednji sekciji) */
    padding: clamp(16px, 6svh, 48px) 0 clamp(300px, 13svh, 3128px);
  }
  .thegoal{
    display: block;        /* za ziher: blokovni element */
    margin-inline: auto; 
    width: clamp(260px, 92vw, 700px);
    
  }
}

@media (max-width: 790px){
  .cards-sec__heading{
    display: flex;
    justify-content: center;   /* centriraj vsebino vodoravno */
    padding-top: clamp(20px, 6svh, 272px);
  }
  .podvitezom-img{
    display: block;            /* img iz inline v block */
    margin-inline: auto;       /* levo/desno auto → center */
    width: clamp(50px, 40vw, 820px);
  }
}



@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-ring { animation: none; }
}


/* --- DESKTOP --- */
@media (min-width: 791px) {
  /* animacija samo na desktopu */
  .navbar_ul li { transition: opacity 600ms ease; }

  .js .navbar_ul:not(.menu-open) li:not(:first-child) {
    opacity: 0;
    pointer-events: none;
  }
}

.navbar_ul a {
  text-decoration: none;
  padding: 10px 10px;
  display: block;
}

.navbar_ul a .num {
  margin-left: 1.4rem;
}

/* --- TELEFON --- */
@media (max-width: 790px) {
  .navbar_ul { justify-content: flex-start; }
  .navbar_ul li:first-child { order: 99; margin-left: auto; } /* entires desno */

  /* na telefonu naj bodo opcije vedno skrite */
  .navbar_ul li:not(:first-child) { display: none; }

  /* brez animacij na telefonu */
  .navbar_ul li { transition: none; }

  .logo {
    width: 250px;
    height: 250px;
  }

  .navbar_ul li {
    position: sticky;
    top: 0;
    z-index: 1000;
  }


  
}


@media (max-width: 790px){
  /* samo na HOME strani */
  .page-home .cards-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 4vw, 28px);
  }
  .page-home .mcol{
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 28px);
  }
  .page-home .col{ display: none; }

  /* če še uporabljaš to mapiranje vrstnega reda, naj bo tudi HOME-only */
  .page-home .cards-grid a[href="#projekt-1"]  { grid-column: 1; grid-row: 1; }
  .page-home .cards-grid a[href="#projekt-8"]  { grid-column: 1; grid-row: 2; }
  .page-home .cards-grid a[href="#projekt-9"]  { grid-column: 1; grid-row: 3; }
  .page-home .cards-grid a[href="#projekt-6"]  { grid-column: 1; grid-row: 4; }
  .page-home .cards-grid a[href="#projekt-3"]  { grid-column: 1; grid-row: 5; }
  .page-home .cards-grid a[href="#projekt-7"]  { grid-column: 1; grid-row: 6; }

  .page-home .cards-grid a[href="#projekt-5"]  { grid-column: 2; grid-row: 1; }
  .page-home .cards-grid a[href="#projekt-2"]  { grid-column: 2; grid-row: 2; }
  .page-home .cards-grid a[href="#projekt-10"] { grid-column: 2; grid-row: 3; }
  .page-home .cards-grid a[href="#projekt-11"] { grid-column: 2; grid-row: 4; }
  .page-home .cards-grid a[href="#projekt-4"]  { grid-column: 2; grid-row: 5; }

  .page-home .card__label{ display: none !important; }
}

@media (max-width: 790px){
  .cta-sec{
    margin-top: clamp(24px, 8svh, 120px); /* potisne gumb nižje pod kartice */
  }
  .btn{
  padding-block: clamp(14px, 2.5vw, 20px);   /* navpično več */
  padding-inline: clamp(20px, 2vw, 48px);    /* vodoravno več */
  }
}

@media (max-width: 790px){
  .manifesto{
    display: block;
    width: clamp(100px, 100vw, 1000px);   /* min, ideal, max za telefon */
    height: auto;
    margin: clamp(12px, 5svh, 32px) auto clamp(20px, 7svh, 64px);
    /*      ↑ top “zrak”           ↑ center       ↑ bottom “zrak” */
  }
}




 /* PROJECTS 01 */

 .projects-gif-sec{
  min-height: calc(90vh - var(--nav-h)); /* isto načelo kot .logo_sec */
  display: flex;
  align-items: center;   /* vertikalno na sredino */
  justify-content: center; /* horizontalno na sredino */
  padding: 0;            /* po potrebi dodaj “zrak” */
  margin-bottom: 10vh;
}

/* gif velikost – prilagodi številke po Figmi */
.projects-gif{
  display: block;
  width: clamp(150px, 15vw, 900px);
  height: auto;
  pointer-events: none;
}

@media (max-width: 790px){
  .projects-gif{
    width: clamp(150px, 40vw, 900px);
  }
}


.gods {
  display: flex;
  justify-content: left;
  padding: 0 clamp(10px, 5vh, 64px);
  font-size: clamp(10px, 0.9vw, 18px);

}

.page-projects .projects-cards{ padding: clamp(10px, 3svh, 80px) clamp(16px, 2vw, 64px); }
@media (min-width: 791px){
   .page-projects .cards-grid{
    display: grid;
    grid-template-columns: repeat(21, minmax(0, 1fr));
    gap: clamp(5px, 2vw, 28px);
    grid-auto-flow: row dense;
    grid-auto-rows: 2px;   /* prej 6px ali ni bilo – manjši korak = manj odstopanj */
  }
  .page-projects .cards-grid .card{
    align-self: start;
    margin: 0;
    padding: 0;
  }
  .page-projects .cards-grid .card img{ display:block; }
}


.card--span-2 {
  grid-column: span 2; /* zasede 2 stolpca */
}

.card--span-1 {
  grid-column: span 1; /* zasede 2 stolpca */
}
.card--span-3 {
  grid-column: span 3; /* zasede 2 stolpca */
}
.card--span-5 {
  grid-column: span 5; /* zasede 2 stolpca */
}
.card--span-4 {
  grid-column: span 4; /* zasede 2 stolpca */
}

.card--span-6 {
  grid-column: span 6; /* zasede 2 stolpca */
}

.card--span-7 {
  grid-column: span 7; /* zasede 2 stolpca */
}

.card--span-8 {
  grid-column: span 8; /* zasede 2 stolpca */
}

.card--span-9 {
  grid-column: span 9; /* zasede 2 stolpca */
}

.card--span-10 {
  grid-column: span 10; /* zasede 2 stolpca */
}

.card--span-11 {
  grid-column: span 11; /* zasede 2 stolpca */
}

.card--span-12 {
  grid-column: span 12; /* zasede 2 stolpca */
}

.card--span-13 {
  grid-column: span 13; /* zasede 2 stolpca */
}

.page-projects .cards-grid .card{
  align-self: start;
}


.page-projects .cards-grid .card { padding: 0; border: 0; }
.page-projects .cards-grid .card img { display:block; } 


 /* ABOUT 02 */

.page-about {
  background-color: #E3DFDC;
  color: #020202;
}

.page-about * { color: #020202; }

.page-about .navbar_ul {
  background-color: #E3DFDC;
}

.page-about .izrislogo{
  background: #020202;
  display: block;
  width: min(20vw, 405px);                  /* zgoraj omeji, da ne gre preširoko */
  padding: clamp(8px, 3vw, 40px);         /* manj agresivno kot 3vw */
  margin: 0;                                 /* brez dodatnega potiska */
}

.page-about .gods{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));;     /* besedilo – slika – besedilo */
  align-items: start;
  gap: clamp(16px, 3vw, 48px);
  padding-inline: clamp(16px, 2vw, 64px);
}

.page-about .gods p{
  margin: 0;
  max-width: 60ch;                          /* ~idealna dolžina vrstice */
  font-size: clamp(10px, 0.8vw, 22px);
  line-height: 1.35;
  white-space: nowrap;
}


.kolo {
  background: #E81E18;
  display: block;
  width: min(20vw, 430px);                  /* zgoraj omeji, da ne gre preširoko */
  padding: clamp(8px, 3vw, 40px);         /* manj agresivno kot 3vw */
  margin: 0; 
  margin-top: 9vw;          
}

.tit {
  display: flex;
  justify-content: center;
  margin-top: 10vw;
}

.titslika {
  position: relative;
  left: 12%;
  width: min(22vw, 539px);
  margin: 5%;
  margin-top: 5.4%;
}

.titbesedilo {
  margin-top: 16%;
  margin-left: 8%;
  max-width: 60ch;                          /* ~idealna dolžina vrstice */
  font-size: clamp(10px, 0.8vw, 22px);
  line-height: 1.35;
}

.page-about .cta-sec .btn--primary{
  background-color: #E3DFDC;   /* barva gumba */
  color: #020202;              /* barva teksta */
  border-color: #020202;       /* obroba */
  margin-top: 5vw;
}
.page-about .cta-sec .btn--primary:hover{
  background-color: #049F43;      /* hover */
  border-color: #049F43;
  color: #E3DFDC;
}


.page-about .contat_sec .contact{
  display: block;        /* img ni več inline */
  margin-inline: auto;   /* center left/right */
  max-width: min(40vw, 35vw); /* po želji omeji širino */
  height: auto;
  transform: translateX(+1vw);
}

/* MOBILE (≤ 791px): vse na svojo vrstico in v točnem vrstnem redu */
@media (max-width: 791px){
  /* 1. sekcija .gods z 4 elementi: left → izrislogo → right → kolo */
  .page-about .gods{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(6vw, 40px);
    width: 100%;
  }

  .page-about .gods .gods__left{    /* 1. */
    order: 1;
    width: 90%;
    margin-inline: auto;
    text-align: left;
  }

  .page-about .gods .izrislogo{     /* 2. */
    order: 2;
    width: clamp(180px, 70vw, 560px);
    height: auto;
    margin-inline: auto;
  }

  .page-about .gods .gods__right{   /* 3. */
    order: 3;
    width: 100%;
    margin-inline: auto;
    /* tvoj inline style "margin-top: 9vw;" ostane */
    text-align: left;
  }

  .page-about .gods .kolo{          /* 4. */
    order: 4;
    width: clamp(180px, 70vw, 560px);
    height: auto;
    margin-inline: auto;
  }

  /* 5. naslednja .gods sekcija (ona z enim <p>) – samo naj bo široka in centrirana */
  .page-about section.gods > p:not(.gods__left):not(.gods__right){
    width: 92%;
    margin-inline: auto;
    text-align: left;
  }

  /* 6. & 7. sekcija .tit: najprej slika, potem besedilo */
  .page-about .tit{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(6vw, 40px);
    width: 100%;
  }
  .page-about .tit .titslika{       /* 6. */
    order: 1;
    width: clamp(220px, 75vw, 640px);
    height: auto;
    margin-inline: auto;
  }
  .page-about .tit .titbesedilo{    /* 7. */
    order: 2;
    width: 80%;
    margin-inline: auto;
    text-align: left;               /* besedilo ostane levo, ne centrirano */
  }
}






 /* VERSES 04 */

.page-projects .besedilo,
.besedilo{
  display: flex;                 /* <- to ti manjka */
  flex-wrap: nowrap;             /* oba stolpca ostaneta v eni vrstici */
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 25vw, 596px);
  max-width: min(1200px, 95vw);
  margin-inline: auto;
  font-size: clamp(10px, 0.9vw, 18px);  /* manjši ekran -> manjši font */
  margin-bottom: 15%;
}

/* STOLPCA – širina po vsebini, brez vsiljenih min-width */
.page-projects .besedilo > .levo,
.page-projects .besedilo > .desno,
.besedilo > .levo,
.besedilo > .desno{
  flex: 0 0 auto;
  min-width: unset;
}

/* VRSTICE – ne lomi samodejno (ohrani <br> kot edine prelome) */
.page-projects .besedilo p,
.besedilo p{
  white-space: nowrap;
  line-height: 1.3;
}


.page-projects .naslov{
  font-size: larger;
  padding: 4% 0%;
  font-family: "Switzer-Medium"
}

.linija {
  margin: 4% 0%;
}

@media (max-width: 791px){
  .page-projects .besedilo{
    flex-direction: column;
    align-items: center;                 /* centriraj .levo in .desno */
    gap: clamp(16px, 3vh, 40px);
    width: 100%;
    max-width: none;
    padding-inline: 0;
    font-size: clamp(10px, 3.5vw, 48px);
  }

  .levo {
    margin-bottom: 45%;
  }
  .desno{
    margin-bottom: 30%;
  }

  .page-projects .gods,
  .gods{
    width: 100%;                /* širši, a še vedno lepo v viewportu */
    margin-inline: auto;       /* centrira sam blok */
    display: flex;
    flex-direction: column;
    align-items: center;       /* centrira otroke (npr. <p>) */
    justify-content: center;
    font-size: clamp(10px, 3.5vw, 48px);
  }

  /* če želiš ohraniti natančne prelome kot v drugih blokih: */
  .gods p{
    white-space: nowrap;
    line-height: 1.3;
    margin-bottom: 45%;
  }


}

br.br-dt, br.br-mb { display: none; }

/* desktop ≥ 792px → pokaži samo .br-dt */
@media (min-width: 792px){ br.br-dt { display: inline; } }

/* mobile ≤ 791px → pokaži samo .br-mb */
@media (max-width: 791px){ br.br-mb { display: inline; } }


@media (max-width: 791px){
  .page-about .contat_sec picture,
  .page-about .contat_sec .contact{
    display: block;
    margin-inline: auto;        /* center */
  }

  .page-about .contat_sec .contact{
    width: clamp(280px, 80vw, 1200px); /* naj bo široka na telefonu */
    max-width: none;                   /* odstrani min(40vw, 35vw) omejitev */
    height: auto;
    transform: none; 
    margin-top: 50%;                  /* poravnaj brez premika v desno */
  }


  .page-about .gods .izrislogo,
  .page-about .gods .kolo{
    width: clamp(140px, 80vw, 720px);
    height: auto;
    padding: 0;
    margin: 0;
  }

  .page-about .tit .titslika{
    width: clamp(200px, 80vw, 520px);
    height: auto;
    transform: translateX(-13.5vw); /* ← prilagodi: -2vw … -6vw po okusu */
    margin-top: 55%;
  }

  .page-about .tit{ overflow: visible; }
}

@media (max-width: 791px){
  .page-about .gods .gods__left,
  .page-about .gods .gods__right,
  .page-about section.gods > p,
  .page-about .tit .titbesedilo{
    font-size: clamp(5px, 3.4vw, 40px);
    width: 88%;
    margin-inline: auto;   /* horizontalno na sredino */
    text-align: left;      /* besedilo ostane levo */
    white-space: nowrap;
  }
  .titbesedilo{
    padding-left: 5vw;
    margin-top: 5%;
  }
  .cta-sec{
    margin-bottom: 50%;
  }

  .page-about .gods.gods--nudge > p{
    width: 90%;
    margin-inline: auto;      /* najprej centriraj blok */
    transform: translateX(+1.7vw); /* potem malo “na levo” (plus vrednost = desno) */
    /* po potrebi prilagodi: -1.5vw … -4vw */
  }
}

@media (max-width: 791px){
  .page-projects .projects-cards { padding: 0; }

  .page-projects .cards-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;          /* 2 stolpca */
    column-gap: clamp(14px, 4vw, 28px);
    row-gap: 0;                              /* vrstice ureja .mcol */
    width: 90%;
    margin-inline: auto;                     /* centriraj celoten grid */
  }
  .page-projects .mcol{
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 28px);             /* vertikalni razmik med karticami */
  }
  .page-projects .mcol .card{
    width: 100%;                             /* kartica zapolni stolpec */
    display: block;                          /* zadrži aspect-ratio iz inline style */
  }
  .page-projects .mcol .card .card__img{
    width: 100%;
    height: 100%;
    object-fit: cover;                        /* ohrani kadriranje */
  }
}

@media (max-width: 791px){
  .page-projects .card__label{
    display: none !important;
  }
  /* tudi ob hoverju naj ostane skrito, če imaš hover-efekte */
  .page-projects .card:hover .card__label{
    display: none !important;
  }
}

.page-projects .gods{
  margin-bottom: 2vw;
}

@media (max-width: 791px){
  .page-projects .gods{
    margin-bottom:-25% ;
  }
}

/* container */
.page-mnav{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 6vw, 40px);
  padding: clamp(12px, 5vw, 48px);
}

/* logo */
.page-mnav .entriesslika{
  width: clamp(50px, 25vw, 160px);
  height: auto;
  display: block;
  margin-inline: auto;
  margin-bottom: 25%;
}

/* seznam – ozek, centriran, brez pikic */
.page-mnav .navlinks{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 6vw, 50px);
  width: clamp(10px, 40vw, 300px);
  margin: 0 auto;
  padding: 0;
}

/* vrstice naj imajo polno širino */
.page-mnav .navlinks li{
  width: 100%;
  margin: 0;
  padding: 0;
}

/* label levo | številka desno – vedno na grid */
.page-mnav .navlinks a{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: clamp(8px, 4vw, 34px);
  width: 100%;
  text-align: left;
  padding: .35em .6em;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  font-size: clamp(10px, 4.5vw, 20px);
}

/* številke poravnane desno + enaka širina števk */
.page-mnav .navlinks .nume{
  justify-self: end;
  font-feature-settings: 'tnum' 1;
  margin: 0;
}

/* zadnji "X" ostane na gridu, samo centered */
.page-mnav .navlinks li:last-child a{
  grid-template-columns: 1fr;
  justify-items: center;   /* horizontalni center */
  text-align: center;
  margin-top: 20%;
}

@media (max-width: 791px){
  /* 1) oba gif-a naj imata isti padding (okvir) */
  :root{ --about-frame-pad: clamp(10px, 11vw, 100px); } /* prilagodi po okusu */

  .page-about .gods .izrislogo,
  .page-about .gods .kolo{
    box-sizing: border-box;                 /* width vključuje padding */
    padding: var(--about-frame-pad) !important;  /* prepiše 55% in 0 */
    background-clip: padding-box;           /* barva samo v “okvirju” */
    display: block;
    height: auto;
    margin-bottom: 2%;
  }

  .page-about .gods .izrislogo {
    margin-bottom: -10%;
  }
}

@media (max-width: 790px){
  /* slika znotraj .vitez naj NE preseže širine viewporta */
  .vitez picture,
  .vitez img.thegoal{
    display: block;
    width: min(90vw, 560px);  /* po želji 92vw → 88vw, če še kje malenkost drsi */
    max-width: 100%;
    height: auto;
    margin: 0 auto;           /* center */
  }

  /* varovalka: nič v .vitez naj ne povzroči horizontalnega scrola */
  .vitez, .vitez-sec{
    overflow-x: clip;         /* modernejši “hidden” samo za X */
  }
}

@media (max-width: 790px){
  html, body { overflow-x: hidden; }    /* globalna varovalka */
}


.page-mol {
  background-color: #E3DFDC;
  color: #020202;
}

.page-mol * { color: #020202; }

.page-mol .navbar_ul {
  background-color: #E3DFDC;
}

/* --- MOL (samo ta stran) --- */
.page-mol .mol-wrap{
  padding: 0 clamp(16px, 2vw, 64px);
}

.page-mol .mol-grid{
  /* naslov | črta | opis | slika */
  display: grid;
  grid-template-columns: auto var(--mol-rule-w, 1px) minmax(220px, 1fr) minmax(260px, 40vw);
  align-items: start;
  gap: clamp(16px, 2vw, 72px);
  max-width: min(2400px, 100vw);
  margin: clamp(32px, 10vh, 120px) auto;
  margin-top: 21.5vh;
  width: clamp(60%,80%,100%);
}

.mol-grid{
  justify-self: end;
}

.page-mol .mol-title{
  font-family: "Switzer-SemiBold", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: clamp(5px, 1.1vw, 200px);
  white-space: nowrap;
}

.page-mol .mol-subtitle{
  font-size: clamp(8px, 0.9vw, 40px);
  text-align: right;            /* desno poravnan mali podnaslov */
  margin-top: .35em;
  white-space: nowrap;
}

.page-mol .mol-rule{
  display: block;
  width: var(--mol-rule-w, 1px);
  height: var(--mol-rule-h, 300px);  /* povečal iz 180px na 300px */
  /* <- VIŠINO MIRNO MENJAJ */
  background: currentColor;           /* vzame barvo teksta (#020202) */
  justify-self: center;
}

.page-mol .mol-right { 
  container-type: inline-size;
}

/* Besedilo: brez auto-prelomov, velikost se prilagaja širini containerja */
.page-mol .mol-desc{
  white-space: nowrap;               /* ostane, prelomi samo na <br> */
  line-height: 1.45;
  font-size: clamp(2px, .9vw, 22px); /* 2.2cqw ~ 2.2% širine stolpca */
}


.page-mol .mol-figure{
  margin: 0;
  justify-self: end; 
  margin-bottom: 38%;
}

.page-mol .mol-image{
  display: block;
  width: clamp(150px, 25vw, 620px);
  height: auto;
  object-fit: contain;
}


/* Telefon — vse pod seboj; črta ostane kratka, da lepo diha */
@media (max-width: 790px){
  .page-mol .mol-grid{
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: clamp(20px, 6vw, 40px);
    margin-left: 1vw;
  }
  .page-mol .mol-rule{
    height: clamp(60px, 12vw, 220px);
  }
  .mol-title .mol-subtitle{
    text-align: left; /* ostane poravnano desno pod naslovom */
    width: 100%;
    font-size: 150%;
    margin-top: 1%;
  }
  .page-mol .mol-figure{
    justify-self: center; /* na mobilu centrirana */
  }
  .page-mol .mol-image{
    width: 123%;
    margin: 0;
    padding: 0%;
  }
  .page-mol .mol-desc{
    font-size: clamp(10px, 3.85vw ,2000px);
    margin-top: -20%;
    margin-bottom: 130%;
    width: 100%;
  }  
  .page-mol .mol-title{
    font-size: clamp(20px, 3vw, 2000px);
  }
}

@media (max-width: 790px){
  .page-mol .mol-left .mol-title{ font-size: clamp(16px, 4.5vw, 48px);}
  .page-mol .mol-left .mol-subtitle{ font-size: clamp(16px, 3.4vw, 148px);text-align: left; }
}

.mol-title.mol-subtitle{
  text-align: left;
}

.page-mol .mol-gallery{
  max-width: min(2400px, 100vw);  /* širina razdelka (section) */
  margin: clamp(24px, 8vh, 80px) auto; /* centriraj section */
  display: grid;
  grid-template-columns: 1fr;     /* en stolpec; po želji kasneje 2–3 */
  gap: clamp(12px, 2.5vw, 32px);  /* razmik med slikami */
}

.page-mol .mol-gallery figure{ margin: 0; }

.page-mol .mol-gallery img{
  display: block;
  width: 100%;  /* vsaka slika polna širina svojega figure */
  height: auto;
  object-fit: contain;
  margin-inline: auto; /* varno centriranje, če kdaj zmanjšaš širino */
}

.page-mol .mol-gallery figure:has(> img.slika2){
  grid-column: 1 / -1;
}

/* 2) Sama slika je manjša od 100% in centrirana znotraj figure */
.page-mol .mol-gallery img.slika2{
  display: block;
  width: clamp(100px, 20%, 920px); /* prilagodi po želji */
  height: auto;
  margin-inline: auto;             /* centriraj */
  object-fit: contain;
  margin: 10% auto;
}

.page-mol .mol-70-30{
  --pair-gap: clamp(12px, 2vw, 28px);
  display: flex;
  gap: var(--pair-gap);
  align-items: flex-start;
}

.page-mol .mol-70-30 > figure{ margin: 0; }
.page-mol .mol-70-30 > figure:first-child{ flex: 0 0 calc(72.94% - var(--pair-gap)/2); }
.page-mol .mol-70-30 > figure:last-child { flex: 0 0 calc(27.06% - var(--pair-gap)/2); }

.page-mol .mol-70-30 img{
  display: block;
  width: 100%;
  height: auto;
}


.page-mol .mol-2col-59{
  display: grid;
  grid-template-columns: 1fr 0.92fr;            /* 2 enaka stolpca */
  gap: clamp(12px, 2vw, 28px);
  justify-items: center;                     /* centrira vsebino v posameznem stolpcu */
  align-items: start;
}

.page-mol .mol-2col-59 > figure{ margin: 0; }

.page-mol .mol-2col-59 img{
  display: block;
  width: 100%;                                /* tukaj nastaviš “59%” */
  height: auto;
  object-fit: contain;
}

/* (po želji) – na mobitelu naj gre v 1 stolpec */
@media (max-width: 790px){
  .page-mol .mol-2col-59{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .page-mol .mol-2col-59 img{
    width: min(86%, 720px);                  /* malo širše na telefonu */
  }
}

.page-mol .mol-50-50{
  --pair-gap: clamp(12px, 2vw, 28px);
  display: grid;
  grid-template-columns:
    calc(50% - var(--pair-gap)/2)
    calc(50% - var(--pair-gap)/2);
  column-gap: var(--pair-gap);
  align-items: start;
}

.page-mol .mol-50-50 > figure{ margin: 0; }

.page-mol .mol-50-50 img{
  display: block;
  width: 100% !important;  /* prepiše inline width:50% samo tukaj */
  height: auto;
  object-fit: contain;
}

/* telefon – ena pod drugo */
@media (max-width: 790px){
  .page-mol .mol-50-50{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 790px){
  .page-mol .mol-rule{
    width: var(--mol-rule-mw, 122%); /* dolžina črte na mobitelu */
    height: var(--mol-rule-w, 1px); /* debelina črte */
    margin: clamp(12px, 4vw, 20px) auto; /* centriraj in dodaj zrak okoli */
  }
}

/* --- Poravnava rob-na-rob za .mol-2col-60 --- */
.page-mol .mol-2col-60{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0,0.96fr) minmax(0,1fr); /* prepreči min-content “uvlek” */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch; /* raztegni vsebino do robov stolpcev */
}

.page-mol .mol-2col-60 > figure{
  margin: 0;
  width: 100%;            /* figure zapolni cel stolpec */
}

/* prepiši morebitne inline širine na slikah znotraj .mol-2col-60 */
.page-mol .mol-2col-60 img{
  display: block;
  width: 100% !important; /* poravna slike z robom stolpca */
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 60/40 in brez centriranja znotraj celic */
.page-mol .mol-2col-60 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 2.79fr 2.21fr; /* 60% / 40% */
  gap: 1.5vw;
  width: 100%;
  justify-items: stretch;  /* ne center */
  align-items: start;
}

.page-mol .mol-2col-60 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-60 > .mol-left-pair img{ width: 100% !important; }

/* Mobitel – en stolpec */
@media (max-width: 790px){
  .page-mol .mol-2col-60{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-60 > .mol-left-pair{ grid-template-columns: 1fr; }
}


.page-mol .mol-2col-70{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0, 6.95fr) minmax(0, 4fr); /* 70 / 30 */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch;
}

.page-mol .mol-2col-70 > figure{
  margin: 0;
  width: 100%;
}

/* prepiši inline širine na slikah */
.page-mol .mol-2col-70 img{
  display: block;
  width: 100% !important;
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 70 / 30 */
.page-mol .mol-2col-70 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 5.32fr 4fr;     /* 70 / 30 */
  gap: clamp(5px, 1.35vw, 28px);
  width: 100%;
  justify-items: stretch;
  align-items: start;
}
.page-mol .mol-2col-70 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-70 > .mol-left-pair img{ width: 100% !important; }

/* Responsive: na ožjih zaslonih pade na 1 stolpec */
@media (max-width: 900px){
  .page-mol .mol-2col-70{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-70 > .mol-left-pair{ grid-template-columns: 1fr; }
}

.cta-wrap{
  width: 100%;
  display: block;
  margin: 8vw 0;          /* prilagodi po želji */
  text-align: center;      /* centrira inline elemente, npr. <a> */
}

.cta-btn{
  display: inline-block;   /* da se lahko kasneje lepo stajla kot gumb */
  text-decoration: none;   /* da ne bo podčrtan, če nočeš */
  /* tu kasneje dodaš padding, background, border-radius, itd. */
  border: 1px solid #020202;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.cta-btn:hover,
.cta-btn:focus-visible{
  background: #E81E18;             /* rdeča */
  border-color: #E81E18;           /* rdeč rob */
  color: #E3DFDC;                     /* bel tekst */
  outline: none;
}





.page-mol .mol-2col-80{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0, 6.25fr) minmax(0, 7fr); /* 70 / 30 */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch;
}

.page-mol .mol-2col-80 > figure{
  margin: 0;
  width: 100%;
}

/* prepiši inline širine na slikah */
.page-mol .mol-2col-80 img{
  display: block;
  width: 100% !important;
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 70 / 30 */
.page-mol .mol-2col-80 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 4.333fr 4fr;     /* 70 / 30 */
  gap: clamp(5px, 1.35vw, 28px);
  width: 100%;
  justify-items: stretch;
  align-items: start;
}
.page-mol .mol-2col-80 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-80 > .mol-left-pair img{ width: 100% !important; }

/* Responsive: na ožjih zaslonih pade na 1 stolpec */
@media (max-width: 900px){
  .page-mol .mol-2col-80{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-80 > .mol-left-pair{ grid-template-columns: 1fr; }
}




.page-mol .mol-2col-90{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 7fr); /* 70 / 30 */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch;
}

.page-mol .mol-2col-90 > figure{
  margin: 0;
  width: 100%;
}

/* prepiši inline širine na slikah */
.page-mol .mol-2col-90 img{
  display: block;
  width: 100% !important;
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 70 / 30 */
.page-mol .mol-2col-90 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 5fr 5fr;     /* 70 / 30 */
  gap: clamp(5px, 1.35vw, 28px);
  width: 100%;
  justify-items: stretch;
  align-items: start;
}
.page-mol .mol-2col-90 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-90 > .mol-left-pair img{ width: 100% !important; }

.page-mol .mol-2col-90 > .mol-r-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr 0.9fr;     /* 70 / 30 */
  gap: clamp(5px, 1.35vw, 28px);
  width: 100%;
  justify-items: stretch;
  align-items: start;
}
.page-mol .mol-2col-90 > .mol-r-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-90 > .mol-r-pair img{ width: 80% !important; }


/* Responsive: na ožjih zaslonih pade na 1 stolpec */
@media (max-width: 900px){
  .page-mol .mol-2col-90{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-90 > .mol-left-pair{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-90 > .mol-r-pair{ grid-template-columns: 1fr; }
}

body.page-mol[data-page="pino"]{ background: #020202; color: #E3DFDC !important; }
body.page-mol[data-page="pino"] *{ color: inherit !important; }
body.page-mol[data-page="pino"] .navbar_ul{ background:#020202 !important; }
body.page-mol[data-page="pino"] a,
body.page-mol[data-page="pino"] a:visited{ color: inherit !important; }

body.page-mol[data-page="pino"] .cta-btn{
  color: inherit !important;                 /* belo besedilo */
  border: 1px solid currentColor !important; /* bela obroba */
  background: transparent;                   /* po želji */
}

/* če želiš tudi tisti rdeči hover kot prej */
body.page-mol[data-page="pino"] .cta-btn:hover,
body.page-mol[data-page="pino"] .cta-btn:focus-visible{
  background: #E81E18;
  border-color: #E81E18;
  color: #E3DFDC;
  border: 1px solid #E81E18 !important;
}


.page-mol .mol-2col-30{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.64fr); /* prepreči min-content “uvlek” */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch; /* raztegni vsebino do robov stolpcev */
}

.page-mol .mol-2col-30 > figure{
  margin: 0;
  width: 100%;            /* figure zapolni cel stolpec */
}

/* prepiši morebitne inline širine na slikah znotraj .mol-2col-60 */
.page-mol .mol-2col-30 img{
  display: block;
  width: 100% !important; /* poravna slike z robom stolpca */
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 60/40 in brez centriranja znotraj celic */
.page-mol .mol-2col-30 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 2fr 5fr; /* 60% / 40% */
  gap: 1.5vw;
  width: 100%;
  justify-items: stretch;  /* ne center */
  align-items: start;
}

.page-mol .mol-2col-30 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-30 > .mol-left-pair img{ width: 100% !important; }

/* Mobitel – en stolpec */
@media (max-width: 790px){
  .page-mol .mol-2col-30{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-30 > .mol-left-pair{ grid-template-columns: 1fr; }
}


.page-mol .mol-2col-20{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.127fr); /* prepreči min-content “uvlek” */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch; /* raztegni vsebino do robov stolpcev */
}

.page-mol .mol-2col-20 > figure{
  margin: 0;
  width: 100%;            /* figure zapolni cel stolpec */
}

/* prepiši morebitne inline širine na slikah znotraj .mol-2col-60 */
.page-mol .mol-2col-20 img{
  display: block;
  width: 100% !important; /* poravna slike z robom stolpca */
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 60/40 in brez centriranja znotraj celic */
.page-mol .mol-2col-20 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 2fr 5fr; /* 60% / 40% */
  gap: 1.5vw;
  width: 100%;
  justify-items: stretch;  /* ne center */
  align-items: start;
}

.page-mol .mol-2col-20 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-20 > .mol-left-pair img{ width: 100% !important; }

/* Mobitel – en stolpec */
@media (max-width: 790px){
  .page-mol .mol-2col-20{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-20 > .mol-left-pair{ grid-template-columns: 1fr; }
}


.page-mol .mol-70-70{
  --pair-gap: clamp(12px, 2vw, 28px);
  display: flex;
  gap: var(--pair-gap);
  align-items: flex-start;
}

.page-mol .mol-70-70 > figure{ margin: 0; }
.page-mol .mol-70-70 > figure:first-child{ flex: 0 0 calc(52% - var(--pair-gap)/2); }
.page-mol .mol-70-70 > figure:last-child { flex: 0 0 calc(48% - var(--pair-gap)/2); }

.page-mol .mol-70-70 img{
  display: block;
  width: 100%;
  height: auto;
}

.page-mol .mol-30-30{
  --pair-gap: clamp(12px, 2vw, 28px);
  display: flex;
  gap: var(--pair-gap);
  align-items: flex-start;
}

.page-mol .mol-30-30 > figure{ margin: 0; }
.page-mol .mol-30-30 > figure:first-child{ flex: 0 0 calc(47.9% - var(--pair-gap)/2); }
.page-mol .mol-30-30 > figure:last-child { flex: 0 0 calc(52.1% - var(--pair-gap)/2); }

.page-mol .mol-30-30 img{
  display: block;
  width: 100%;
  height: auto;
}



.page-mol .mol-2col-10{
  --pair-gap: clamp(8px, 1.5vw, 16px);
  display: grid;
  grid-template-columns: minmax(0,910fr) minmax(0,885fr); /* prepreči min-content “uvlek” */
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  justify-items: stretch; /* raztegni vsebino do robov stolpcev */
}

.page-mol .mol-2col-10 > figure{
  margin: 0;
  width: 100%;            /* figure zapolni cel stolpec */
}

/* prepiši morebitne inline širine na slikah znotraj .mol-2col-60 */
.page-mol .mol-2col-10 img{
  display: block;
  width: 100% !important; /* poravna slike z robom stolpca */
  height: auto;
  object-fit: contain;
}

/* Notranji par v LEVEM stolpcu – 60/40 in brez centriranja znotraj celic */
.page-mol .mol-2col-10 > .mol-left-pair{
  grid-column: 1;
  display: grid;
  grid-template-columns: 2fr 5fr; /* 60% / 40% */
  gap: 1.5vw;
  width: 100%;
  justify-items: stretch;  /* ne center */
  align-items: start;
}

.page-mol .mol-2col-10 > .mol-left-pair > figure{ margin: 0; width: 100%; }
.page-mol .mol-2col-10 > .mol-left-pair img{ width: 100% !important; }

/* Mobitel – en stolpec */
@media (max-width: 790px){
  .page-mol .mol-2col-10{ grid-template-columns: 1fr; }
  .page-mol .mol-2col-10 > .mol-left-pair{ grid-template-columns: 1fr; }
}




.page-mol .mol-80-80{
  --pair-gap: clamp(12px, 2vw, 28px);
  display: flex;
  gap: var(--pair-gap);
  align-items: flex-start;
}

.page-mol .mol-80-80 > figure{ margin: 0; }
.page-mol .mol-80-80 > figure:first-child{ flex: 0 0 calc(63.14% - var(--pair-gap)/2); }
.page-mol .mol-80-80 > figure:last-child { flex: 0 0 calc(36.86% - var(--pair-gap)/2); }

.page-mol .mol-80-80 img{
  display: block;
  width: 100%;
  height: auto;
}



/* MOL galerija — ID-ji namesto inline style */
#fig-mol4 img,
#fig-mol5 img { 
  width: 50% !important;
  display: block;
  margin-inline: auto;   /* centrira sliko v figure */
}

/* če imaš še druge “ozke” slike prek ID-jev, uporabi isti vzorec */
#fig-mol7 img,
#fig-mol43 img{
  width: 80% !important;
  display: block;
  margin: 10% auto;      /* zgoraj/spodaj 10%, centrirano */
}

#fig-mol11 img,
#fig-mol12 img,
#fig-mol18 img,
#fig-mol19 img{
  width: 60% !important;
  display: block;
  margin-inline: auto;
}

/* ti dve sta bile prej margin na figure – to lahko ostane na figure */
#fig-mol34 { margin-top: -6%; }
#fig-mol35 { margin-top: -27.5%; }




#fig-pzkp1 img{
  width: 25% !important;
  display: block;
  margin-inline: auto;
}

#fig-pzkp2 img,
#fig-pzkp3 img{
  width: 25% !important;
  display: block;
  margin-inline: auto;
  margin-top: 15% !important;
}

#fig-pzkp4 img{
  display: block;
  margin-inline: auto;
  margin-top: 7% !important;  /* širine ne spreminjamo */
}

#fig-pzkp5 img{
  width: 50% !important;
  display: block;
  margin-inline: auto;
  margin-top: 7% !important;
}



@media (max-width: 790px){
  #fig-pzkp1 img,
  #fig-pzkp2 img,
  #fig-pzkp3 img,
  #fig-pzkp4 img,
  #fig-pzkp5 img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-inline: 0 !important; /* centriranje ni potrebno pri 100% */
  }
}

body.page-projects[data-page="verses-04"] .soon{
  position: relative !important;
  min-height: 84dvh !important; /* bolj natančno na mobilnikih kot 100vh */
}

body.page-projects[data-page="verses-04"] .soon > p{
  position: absolute !important;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  text-align: center !important;
}

body.page-projects[data-page="verses-04"] .site-footer-min{ margin-top: 0 !important; }
body.page-projects[data-page="verses-04"] .footer-row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


body.page-projects[data-page="verses-04"]{
  margin: 0;
  min-height: 100dvh;                  /* natančna višina na iOS */
  display: grid;
  grid-template-rows: auto 1fr auto;   /* navbar | vsebina | footer */
  overflow: hidden;                     /* onemogoči drsanje */
}

/* tvoj <p> je neposreden otrok <body> na tej strani */
body.page-projects[data-page="verses-04"] > p{
  place-self: center;                   /* center po X in Y */
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ubij vse marže na footerju na tej strani (prepiše inline margin-top:15vw) */
body.page-projects[data-page="verses-04"] .site-footer-min{
  margin-top: 0 !important;
}
body.page-projects[data-page="verses-04"] .footer-row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.page-projects[data-page="verses-04"] .soon p > span{
  font-family: "Switzer-SemiBold", sans-serif;
  font-size: large; /* enako kot prej */
}

body.page-projects[data-page="verses-04"] .soon p{
  white-space: nowrap;
}

body.page-projects[data-page="verses-04"] .soon{ overflow-x: clip; }

@media (max-width: 791px){
  /* skupna notranja leva/desna blazina (isti rob za slike in besedilo) */
  .page-about{ --about-pad: clamp(16px, 6vw, 32px); }

  /* glavne sekcije naj imajo isti notranji rob */
  .page-about .gods,
  .page-about .tit,
  .page-about .cta-sec{
    padding-inline: var(--about-pad);
  }

  /* prenehaj centrirati – poravnaj vse levo */
  .page-about .gods{
    align-items: flex-start;   /* prej: center */
  }

  /* slikam odstrani auto-centre, poravnaj levo */
  .page-about .gods .izrislogo,
  .page-about .gods .kolo,
  .page-about .tit .titslika{
    margin: 0;                 /* prej: margin-inline:auto */
    align-self: flex-start;    /* spoštuj levi rob sekcije */
    /* ohrani njihove obstoječe width vrednosti iz tvojega CSS-a */
  }

  /* besedilu odstrani širine/centre, poravnaj levo z robom sekcije */
  .page-about .gods .gods__left,
  .page-about .gods .gods__right,
  .page-about section.gods > p:not(.gods__left):not(.gods__right),
  .page-about .tit .titbesedilo{
    width: 100%;               /* naj sledi notranjemu robu */
    margin: 0;                 /* ubij margin-inline:auto iz prejšnjih pravil */
    text-align: left;
  }

  /* sliki v .tit si prej potiskal z translateX – na mobitelu ga izključi */
  .page-about .tit .titslika{
    transform: none;           /* prej: translateX(-13.5vw) */
  }
}

/* ABOUT – mobile: poravnaj .titslika na LEVI rob */
@media (max-width: 791px){
  .page-about .tit{
    padding-inline: clamp(16px, 6vw, 32px); /* isti “rob” za vse */
    align-items: flex-start;                /* nič centriranja */
  }
  .page-about .tit .titslika{
    left: 0 !important;                     /* reset desktop left:12% */
    transform: none !important;             /* reset morebitnih translateX */
    margin: 0 !important;                   /* brez auto-centra/marginov */
    width: clamp(220px, 80vw, 640px);       /* ohrani razumno širino */
    align-self: flex-start;                 /* drži se levega roba sekcije */
  }
  .page-about .tit .titbesedilo{
    width: 100%;
    margin: 0;                              /* besedilo naj sledi istemu levemu robu */
    text-align: left;
  }
}

@media (max-width: 791px){
  .page-about{ --about-pad: clamp(16px, 6vw, 32px); }

  /* isti notranji rob kot pri slikah */
  .page-about .gods,
  .page-about .gods.gods--nudge{
    padding-inline: var(--about-pad);
    align-items: flex-start;         /* brez centriranja */
  }

  /* ubij vse “pozicionirne” nudge-e na tej varianti */
  .page-about .gods.gods--nudge{
    margin-left: -1.5% !important;
    transform: none !important;
    left: auto !important;
  }

  /* odstavek naj sledi točno levemu robu sekcije */
  .page-about .gods.gods--nudge > p{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 791px){
  /* samo na strani Projects 01 */
  .page-projects .gods{
    width: 90%;              /* isto kot cards grid */
    margin-inline: auto;     /* centrira blok, levi rob je pri ~5vw */
    align-items: flex-start;  /* namesto center */
    padding: 0; 
    margin-bottom: 15%;              /* da rob res poravna */
    font-size: 3.9vw;
  }

  .page-projects .gods .sirina{
    text-align: left;         /* besedilo levo */
    margin: 0;
  }

  .mol-left {
    margin-top: -21vh;
  }
}


@media (max-width: 790px){
  .page-col .mol-left .mol-title{ font-size: clamp(16px, 4.5vw, 48px); }
  .page-col .mol-left .mol-subtitle{ font-size: clamp(16px, 3.4vw, 148px);text-align: left; }
}


@media (min-width: 791px){
  body.page-mol[data-page="kora"] #gas-title{
    margin-left: 3.5vw;
  }
  body.page-mol[data-page="kora"] #gas-figure{
    margin-right: 3.5vw;
  }

}

@media (min-width: 791px){
  #kora-figure{ margin-right: 3vw; }
  #lokis{ margin-left: 4vw; }
  #lokis2{ margin-right: 6vw; }
  #ruoid2{margin-right: 5.5vw;}
  #ruoid{margin-left: 5.5vw;}
  #voroid2{margin-right: 6vw;}
  #voroid{margin-left: 4vw;}
  #luxid{margin-left: 5vw;}
  #luxid2{margin-right: 8vw;}
  #potid{margin-left: 5vw;}
  #potid2{margin-right: 7vw;}
  #pinoid{margin-left: 5.8vw;}
  #pinoid2{margin-right: 5.8vw;}
}