/* ==========================================================================
   ŠKRNIC'LJ – Gostilnica na Tržnici BTC Ljubljana
   Enoten, umirjen kulinarični dizajn: toplo platno, pristna tipografija, terakota
   ========================================================================== */

:root {
  /* Strogo nadzorovana paleta: naravno toplo platno + temno črnilo + terakota */
  --platno: #FAF7F2;           /* Glavna topla podlaga strani (surovo platno) */
  --platno-belo: #FFFFFF;      /* Kartice in poudarjena polja */
  --platno-mehko: #F2ECE1;     /* Subtilna sekundarna podlaga odsekov */
  --rob: #E5DDD0;              /* Fini naravni robovi */
  --rob-mehek: #EFE9DE;        /* Zelo nežna ločilna črta */

  --crnilo: #1F1915;           /* Glavno besedilo (globoko grafitno-kavno črnilo) */
  --crnilo-mehko: #665C54;     /* Pojasnila, opisi, spremljevalni tekst */
  --crnilo-svetlo: #8F8276;    /* Drobni napisi, opombe */

  --terakota: #9E371C;         /* Edina poudarjena barva: slovenska kmečka terakota */
  --terakota-temna: #7F2912;
  --terakota-nezna: #F7EDE9;

  --noga-ozadje: #1A1512;      /* Globoko temno dno (samo podnožje) */
  --noga-tekst: #E8E1D7;
  --noga-mehko: #9E9387;

  /* Samo dve usklajeni pisavi (brez condensed display fontov) */
  --pisava-serif: 'Alegreya', Georgia, serif;
  --pisava-sans: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Mere in sence */
  --sirina: 1180px;
  --radij: 6px;
  --radij-l: 12px;
  --senca: 0 4px 20px rgba(33, 25, 21, 0.05);
  --senca-dvig: 0 10px 30px rgba(33, 25, 21, 0.09);
  --razmik-odsek: clamp(4.5rem, 8vw, 7.5rem);
}

/* ==========================================================================
   OSNOVA (BASE RESET)
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background-color: var(--platno);
  color: var(--crnilo);
  font-family: var(--pisava-sans);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

p {
  margin: 0 0 1.25rem;
}

b, strong {
  font-weight: 700;
  color: var(--crnilo);
}

.polje {
  width: min(var(--sirina), 100% - 3rem);
  margin-inline: auto;
}

.preskoci {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--terakota);
  color: #fff;
  padding: 0.75rem 1.5rem;
  z-index: 100;
}
.preskoci:focus {
  left: 1rem;
  top: 1rem;
}

/* ==========================================================================
   TIPOGRAFIJA IN NASLOVNI ELEMENTI
   ========================================================================== */

.nadnaslov {
  font-family: var(--pisava-sans);
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terakota);
  margin: 0 0 0.6rem;
  display: inline-block;
}

.naslov-odseka {
  font-family: var(--pisava-serif);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--crnilo);
  margin: 0 0 1.25rem;
}

.vstopnik {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--crnilo-mehko);
  max-width: 62ch;
  margin-bottom: 2.5rem;
}

.locilnik {
  opacity: 0.4;
  margin: 0 0.35rem;
}

/* ==========================================================================
   GUMBI (POENOTENI)
   ========================================================================== */

.gumb-glavni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--pisava-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--terakota);
  color: #ffffff;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radij);
  border: 1px solid var(--terakota);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(158, 55, 28, 0.2);
}

.gumb-glavni:hover, .gumb-glavni:focus-visible {
  background-color: var(--terakota-temna);
  border-color: var(--terakota-temna);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(158, 55, 28, 0.3);
}

.gumb-bel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pisava-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: transparent;
  color: #ffffff;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radij);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.gumb-bel:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
}

.gumb-okvir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pisava-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--crnilo);
  padding: 0.75rem 1.4rem;
  border-radius: var(--radij);
  border: 1px solid var(--rob);
  background: var(--platno-belo);
  transition: all 0.2s ease;
}

.gumb-okvir:hover {
  border-color: var(--crnilo);
}

.gumb-klic {
  display: inline-flex;
  align-items: center;
  font-family: var(--pisava-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--terakota);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radij);
  border: 1px solid rgba(158, 55, 28, 0.35);
  background-color: var(--terakota-nezna);
  transition: all 0.2s ease;
}

.gumb-klic:hover {
  background-color: var(--terakota);
  color: #ffffff;
  border-color: var(--terakota);
}

.gumb-tekst {
  font-size: 1.05rem;
  color: #ffffff;
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.gumb-tekst strong {
  color: inherit;
}
.gumb-tekst:hover {
  opacity: 1;
  text-decoration: underline;
}

.gumb--poln {
  width: 100%;
}

/* ==========================================================================
   VRHNJA VRSTICA & NAVIGACIJA
   ========================================================================== */

.vrhnja-vrstica {
  background-color: var(--platno-mehko);
  border-bottom: 1px solid var(--rob);
  font-size: 0.875rem;
  padding: 0.45rem 0;
  color: var(--crnilo-mehko);
}

.vrhnja-vrstica__v {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vrhnja-vrstica__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--crnilo);
}

.pika-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2E7D32;
  display: inline-block;
}

.pika-status--zaprto {
  background-color: #C62828;
}

.vrhnja-vrstica__tel {
  font-weight: 700;
  color: var(--terakota);
}

.streha {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rob);
  transition: background-color 0.2s ease;
}

.streha__v {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.streha__znak {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.znak-glavni {
  font-family: var(--pisava-serif);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--crnilo);
  letter-spacing: -0.02em;
}

.znak-podnaslov {
  font-family: var(--pisava-sans);
  font-size: 0.725rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crnilo-mehko);
  margin-top: 3px;
}

.smerokaz {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--pisava-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--crnilo-mehko);
}

.smerokaz a {
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}

.smerokaz a:hover {
  color: var(--crnilo);
  border-bottom-color: var(--terakota);
}

.smerokaz--desno {
  justify-content: flex-end;
}

.menu-preklop {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 28px;
  height: 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.menu-preklop span {
  width: 100%;
  height: 2px;
  background-color: var(--crnilo);
  border-radius: 1px;
}

.mobilni-meni {
  background-color: var(--platno);
  border-bottom: 2px solid var(--terakota);
  padding: 1.5rem 1.25rem;
}

.mobilni-meni nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mobilni-meni a {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rob);
}

/* ==========================================================================
   HERO SEKCIJA
   ========================================================================== */

.naslovnica {
  position: relative;
  background-color: var(--crnilo);
}

.naslovnica__kader {
  position: relative;
  min-height: clamp(540px, 82vh, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.naslovnica__kader img,
.naslovnica__kader video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.naslovnica__kader video {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.naslovnica__kader--zivo video {
  opacity: 1;
}

.naslovnica__zastor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(22, 16, 12, 0.94) 0%,
    rgba(22, 16, 12, 0.72) 32%,
    rgba(22, 16, 12, 0.22) 65%,
    rgba(22, 16, 12, 0) 85%
  );
  z-index: 1;
}

.naslovnica__vsebina {
  position: relative;
  z-index: 2;
  padding-top: clamp(2rem, 5vh, 4rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.naslovnica__oznake {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.25rem;
}

.naslovnica__naslov {
  font-family: var(--pisava-serif);
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.25rem;
  max-width: 15ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.naslovnica__podnaslov {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 48ch;
  margin-bottom: 2.25rem;
}

.naslovnica__gumbi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.naslovnica__dejstva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.dejstvo {
  display: flex;
  flex-direction: column;
}

.dejstvo strong {
  font-family: var(--pisava-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.1;
}

.dejstvo span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}

.dejstvo-locilo {
  width: 1px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.15);
}

.naslovnica__pavza {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: var(--radij);
}

/* ==========================================================================
   SEKCIJE (SPLENI ODSEKI)
   ========================================================================== */

.odsek {
  padding: var(--razmik-odsek) 0;
}

.odsek--podlaga {
  background-color: var(--platno-mehko);
}

.odsek--izpostavljeno {
  background-color: var(--platno-belo);
  border-top: 1px solid var(--rob);
  border-bottom: 1px solid var(--rob);
}

/* ==========================================================================
   NOVA JED TEDNA
   ========================================================================== */

.nova-jed {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.nova-jed__slika {
  border-radius: var(--radij-l);
  overflow: hidden;
  box-shadow: var(--senca-dvig);
}

.nova-jed__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nova-jed__naslov {
  font-family: var(--pisava-serif);
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 1rem;
}

.nova-jed__opis {
  color: var(--crnilo-mehko);
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.nova-jed__lastnosti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rob);
  border-bottom: 1px solid var(--rob);
}

.lastnost strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.lastnost span {
  font-size: 0.95rem;
  color: var(--crnilo-mehko);
  line-height: 1.4;
  display: block;
}

.nova-jed__cene {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.cena-postavka {
  display: flex;
  flex-direction: column;
}

.cena-oznaka {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crnilo-svetlo);
}

.cena-znesek {
  font-family: var(--pisava-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--terakota);
  line-height: 1.05;
}

/* ==========================================================================
   KARTICA ZVESTOBE (10 štampiljk = 11. jed gratis)
   ========================================================================== */

.kartica-zvestobe {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.kartica-zvestobe__vsebina .vstopnik {
  margin-bottom: 2rem;
}

.kartica-zvestobe__koraki {
  list-style: none;
  counter-reset: korak;
  margin: 0 0 2.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rob);
  border-bottom: 1px solid var(--rob);
  display: grid;
  gap: 1.1rem;
}

.kartica-zvestobe__koraki li {
  counter-increment: korak;
  position: relative;
  padding-left: 3rem;
}

.kartica-zvestobe__koraki li::before {
  content: counter(korak);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pisava-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--terakota);
  background-color: var(--terakota-nezna);
  border: 1px solid var(--terakota);
}

.kartica-zvestobe__koraki strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.kartica-zvestobe__koraki span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--crnilo-mehko);
}

/* Ilustracija kartončka */
.kartica-zvestobe__kartica {
  background-color: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij-l);
  box-shadow: var(--senca-dvig);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transform: rotate(-1.5deg);
}

.kartica__glava {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed var(--rob);
}

.kartica__znak {
  font-family: var(--pisava-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--crnilo);
}

.kartica__oznaka {
  font-family: var(--pisava-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terakota);
}

.kartica__polja {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.kartica__polje {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed var(--rob);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pisava-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--crnilo-svetlo);
  background-color: var(--platno);
}

.kartica__polje--odtis {
  border: 2px solid var(--terakota);
  background-color: var(--terakota-nezna);
  color: var(--terakota);
  position: relative;
  transform: rotate(-8deg);
}

.kartica__polje--odtis::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--terakota);
  opacity: 0.5;
}

.kartica__polje--nagrada {
  aspect-ratio: auto;
  min-height: 3.25rem;
  border-radius: var(--radij);
  border: 2px solid var(--terakota);
  background-color: var(--terakota);
  color: #ffffff;
  font-family: var(--pisava-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.kartica__opomba {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: var(--crnilo-svetlo);
  text-align: center;
}

/* ==========================================================================
   O NAS (KDO SMO)
   ========================================================================== */

.mi__v {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.mi__pis p {
  color: var(--crnilo-mehko);
  font-size: 1.15rem;
}

.mi__dejstva {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rob);
}

/* Ekipa: kartici šefa in vodje */
.ekipa {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.vodja {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  align-content: start;
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 1rem;
  box-shadow: var(--senca);
}
.vodja {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vodja:hover {
  transform: translateY(-4px);
  box-shadow: var(--senca-dvig);
}
.vodja__slika {
  overflow: hidden;
  border-radius: var(--radij);
}
.vodja img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radij);
  display: block;
  transition: transform 0.6s ease;
}
.vodja:hover img {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .vodja, .vodja img { transition: none; }
  .vodja:hover { transform: none; }
  .vodja:hover img { transform: none; }
}
.vodja figcaption strong {
  display: block;
  font-family: var(--pisava-serif);
  font-size: 1.3rem;
  line-height: 1.2;
}
.vodja figcaption span {
  display: block;
  font-family: var(--pisava-sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terakota);
  margin: 0.3rem 0 0.6rem;
}
.vodja figcaption p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--crnilo-mehko);
}

.mi__dejstva dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crnilo-svetlo);
}

.mi__dejstva dd {
  margin: 0.25rem 0 0;
  font-family: var(--pisava-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--crnilo);
}

.mi__slike {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.mi__slika-a-ovoj {
  grid-column: 1 / 10;
  position: relative;
  border-radius: var(--radij);
  overflow: hidden;
  box-shadow: var(--senca);
}

.mi__slika-b-ovoj {
  grid-column: 6 / 13;
  margin-top: -30%;
  position: relative;
  z-index: 2;
  border-radius: var(--radij);
  overflow: hidden;
  box-shadow: var(--senca-dvig);
  border: 4px solid var(--platno);
}

.slika-napis {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  background: rgba(31, 25, 21, 0.85);
  color: #fff;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radij);
}

/* ==========================================================================
   NAŠA NAČELA (FILOZOFIJA)
   ========================================================================== */

.nacela__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.nacelo {
  background-color: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nacelo:hover {
  transform: translateY(-3px);
  box-shadow: var(--senca-dvig);
}

.nacelo__slika {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.nacelo__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.nacelo:hover .nacelo__slika img {
  transform: scale(1.04);
}

.nacelo__st {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: var(--platno-belo);
  font-family: var(--pisava-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terakota);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radij);
}

.nacelo__vsebina {
  padding: 1.5rem;
  flex-grow: 1;
}

.nacelo__vsebina h3 {
  font-family: var(--pisava-serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.65rem;
}

.nacelo__vsebina p {
  font-size: 1.02rem;
  color: var(--crnilo-mehko);
  line-height: 1.55;
  margin: 0;
}

.opomba-pas {
  background: var(--platno-belo);
  border-left: 3px solid var(--terakota);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radij) var(--radij) 0;
  border-top: 1px solid var(--rob);
  border-right: 1px solid var(--rob);
  border-bottom: 1px solid var(--rob);
  margin-top: 3rem;
  font-size: 1.05rem;
}

.opomba-pas p {
  margin: 0;
  color: var(--crnilo-mehko);
}

/* ==========================================================================
   PANORAMSKI PAS
   ========================================================================== */

.panoramski-pas {
  position: relative;
  background-color: var(--crnilo);
}

.panoramski-pas img {
  width: 100%;
  height: clamp(320px, 48vh, 520px);
  object-fit: cover;
  opacity: 0.9;
}

.panoramski-pas__napis {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(31, 25, 21, 0.88);
  color: #fff;
  font-family: var(--pisava-serif);
  font-style: italic;
  font-size: 1.15rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radij);
  margin: 0;
}

/* ==========================================================================
   SEZONSKI JEDILNIK
   ========================================================================== */

.jedilnik-uvod {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.jedilnik-uvod .vstopnik {
  margin-bottom: 0;
}

/* Postavitev jedilnika */
.jedilnik-stolpci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
}

.jedilnik-skupina {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 1.75rem;
  box-shadow: var(--senca);
}

.skupina-naslov {
  font-family: var(--pisava-serif);
  font-size: 1.65rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.skupina-pod {
  font-size: 0.95rem;
  color: var(--crnilo-mehko);
  margin: 0 0 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rob-mehek);
}

.jedi-seznam {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.jed {
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--rob);
}
.jed:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.jed__glava {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.jed__ime {
  font-family: var(--pisava-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--crnilo);
  margin: 0;
}

.jed__cena {
  font-family: var(--pisava-serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--terakota);
  white-space: nowrap;
}

.jed__opis {
  font-size: 0.98rem;
  color: var(--crnilo-mehko);
  margin: 0;
  line-height: 1.45;
}

.cena-tip {
  font-size: 0.725rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--crnilo-svetlo);
  display: inline-block;
  margin-top: 0.25rem;
}

.jedilnik-sliki {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.jedilnik-sliki img {
  border-radius: var(--radij);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.jedilnik-opomba {
  margin-top: 2.5rem;
  padding: 1.25rem;
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  color: var(--crnilo-mehko);
  font-size: 1rem;
}
.jedilnik-opomba p { margin: 0; }
.jedilnik-opomba a { color: var(--terakota); }

/* ==========================================================================
   SOLATE IN SLADICE LOČENO
   ========================================================================== */

.stolpca-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.kartica {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--senca);
  display: flex;
  flex-direction: column;
}

.kartica__uvod {
  color: var(--crnilo-mehko);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rob-mehek);
}

.elementi-seznam {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.element {
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--rob);
}
.element:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.element__glava {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.element__glava h4 {
  font-family: var(--pisava-serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}

.element__cena {
  font-family: var(--pisava-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--terakota);
  white-space: nowrap;
}

.element p {
  font-size: 0.98rem;
  color: var(--crnilo-mehko);
  margin: 0;
  line-height: 1.45;
}

.kartica__slika {
  border-radius: var(--radij);
  overflow: hidden;
  max-height: 220px;
  margin-top: auto;
}

.kartica__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   KARTA PIJAČ
   ========================================================================== */

.pijace-stolpci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.pijaca-blok {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 2rem;
  box-shadow: var(--senca);
}

.pijaca-naslov {
  font-family: var(--pisava-serif);
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--platno-mehko);
}

.pijaca-vrste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pijaca-vrste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--rob-mehek);
}
.pijaca-vrste li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pijaca-vrste strong {
  display: block;
  font-size: 1.05rem;
}

.pijaca-vrste span {
  display: block;
  font-size: 0.85rem;
  color: var(--crnilo-mehko);
}

.pijaca-vrste b {
  font-family: var(--pisava-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--crnilo);
  white-space: nowrap;
}

.pijaca-vrste b small {
  font-family: var(--pisava-sans);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--crnilo-mehko);
}

/* ==========================================================================
   GALERIJA FOTOGRAFIJ
   ========================================================================== */

.galerija-glava {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.galerija-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-gumb {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  color: var(--crnilo-mehko);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radij);
  font-family: var(--pisava-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-gumb:hover {
  border-color: var(--crnilo);
  color: var(--crnilo);
}

.filter-gumb.aktiven {
  background: var(--crnilo);
  border-color: var(--crnilo);
  color: #ffffff;
}

.galerija-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
}

.galerija-polje {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radij);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  box-shadow: var(--senca);
}

.galerija-polje img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.galerija-polje:hover img {
  transform: scale(1.05);
  filter: brightness(0.88);
}

.galerija-podpis {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(20, 15, 12, 0.9) 100%);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.galerija-polje:hover .galerija-podpis {
  opacity: 1;
}

.galerija-podpis h4 {
  font-family: var(--pisava-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.2rem;
}

.galerija-podpis p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(18, 14, 11, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__ovoj {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__ovoj img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radij);
}

.lightbox__napis {
  margin-top: 1rem;
  color: #ffffff;
  font-family: var(--pisava-serif);
  font-size: 1.25rem;
  text-align: center;
}

.lightbox__napis strong {
  color: inherit;
}

.lightbox__zapri {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.25rem;
  cursor: pointer;
  line-height: 1;
}

.lightbox__smer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-bottom: 6px;
  transition: background 0.2s ease;
  z-index: 2;
}
.lightbox__smer:hover {
  background: rgba(255, 255, 255, 0.2);
}
.lightbox__smer--prej { left: 1.25rem; }
.lightbox__smer--naprej { right: 1.25rem; }

.lightbox__orodja {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-family: var(--pisava-sans);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__predvajaj {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox__predvajaj:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .jedilnik-stolpci {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .jedilnik-skupina {
    padding: 1.4rem;
  }
  .lightbox__smer {
    width: 42px;
    height: 42px;
    font-size: 1.9rem;
  }
  .lightbox__smer--prej { left: 0.5rem; }
  .lightbox__smer--naprej { right: 0.5rem; }
}

/* ==========================================================================
   LOKACIJA IN DELOVNI ČAS
   ========================================================================== */

.lega__v {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.lega__slike {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.lega__slike img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radij-l);
  box-shadow: var(--senca-dvig);
}

.lega__naslov {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radij);
  margin-bottom: 1.75rem;
}

.lega__naslov strong {
  font-family: var(--pisava-serif);
  font-size: 1.35rem;
  font-weight: 600;
}

.lega__naslov p {
  margin: 0.25rem 0 0;
  color: var(--crnilo-mehko);
}

.urnik-blok {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}

.urnik-naslov {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rob-mehek);
}

.urnik-seznam {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.urnik-seznam div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--rob-mehek);
  padding-bottom: 0.4rem;
}

.urnik-seznam dt {
  color: var(--crnilo-mehko);
}

.urnik-seznam dd {
  margin: 0;
  font-weight: 600;
}

.urnik-zaprto dt, .urnik-zaprto dd {
  color: var(--crnilo-svetlo);
  font-style: italic;
}

.napotki-blok {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.napotek strong {
  display: block;
  font-size: 1.05rem;
}

.napotek p {
  font-size: 0.95rem;
  color: var(--crnilo-mehko);
  margin: 0;
}

.lega__gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ==========================================================================
   STIK (KONTAKT)
   ========================================================================== */

.pismo__v {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.stik-vrstice {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 2rem 0;
}

.stik-vrstica span {
  display: block;
  font-size: 0.875rem;
  color: var(--crnilo-mehko);
}

.stik-vrstica a {
  font-family: var(--pisava-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--terakota);
}

.droben-tisk {
  font-size: 0.85rem;
  color: var(--crnilo-svetlo);
}

.stik-obrazec {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 2.25rem;
  box-shadow: var(--senca);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.polje-vnos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.polje-vnos label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--crnilo);
}

.polje-vnos input,
.polje-vnos textarea {
  width: 100%;
  background: var(--platno);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 0.75rem 1rem;
  font-family: var(--pisava-sans);
  font-size: 1.05rem;
  color: var(--crnilo);
  transition: border-color 0.2s ease;
}

.polje-vnos input:focus,
.polje-vnos textarea:focus {
  outline: none;
  border-color: var(--terakota);
  background: #ffffff;
}

.obrazec-status {
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}
.obrazec-status--uspeh {
  color: #2E7D32;
  font-weight: 600;
}

/* ==========================================================================
   PODNOŽJE (FOOTER)
   ========================================================================== */

.podnozje {
  background-color: var(--noga-ozadje);
  color: var(--noga-tekst);
  padding: 4.5rem 0 2.5rem;
  font-size: 0.95rem;
}

.podnozje__glavno {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.podnozje__ime {
  font-family: var(--pisava-serif);
  font-size: 2.3rem;
  font-weight: 700;
  color: #ffffff;
  display: block;
  margin-bottom: 0.5rem;
}

.podnozje__opis-blok p {
  color: var(--noga-mehko);
  max-width: 36ch;
}

.podnozje__tel a {
  font-family: var(--pisava-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.podnozje__meni h4,
/* Globalno pravilo b, strong obarva besedilo temno – v nogi mora ostati svetlo */
.podnozje strong,
.podnozje b {
  color: inherit;
}

.podnozje__urnik h4 {
  font-family: var(--pisava-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1rem;
}

.podnozje__meni ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.podnozje__meni a {
  color: var(--noga-mehko);
}
.podnozje__meni a:hover {
  color: #ffffff;
}

.podnozje__urnik p {
  color: var(--noga-mehko);
  line-height: 1.5;
}

.podnozje__naslov {
  margin-top: 1rem;
  font-size: 0.85rem;
}

.podnozje__dno {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.825rem;
  color: var(--noga-mehko);
}
.podnozje__dno p { margin: 0; }

/* ==========================================================================
   MOBILNA ORODNA VRSTICA
   ========================================================================== */

.mobilni-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(250, 247, 242, 0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rob);
  padding: 0.5rem 1rem;
  justify-content: space-around;
  box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.08);
}

.mobilni-bar__gumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--crnilo);
  padding: 0.35rem 0.75rem;
}

.mobilni-bar__gumb svg {
  flex-shrink: 0;
  margin-bottom: 2px;
}

.mobilni-bar__gumb--klic {
  color: #ffffff;
  background: var(--terakota);
  border-radius: var(--radij);
  padding: 0.4rem 1.25rem;
  flex-direction: row;
  gap: 0.4rem;
}

.mobilni-bar__gumb--klic svg {
  margin-bottom: 0;
}

/* ==========================================================================
   ODZIVNOST IN MOBILNA OPTIMIZACIJA (RESPONSIVE & MOBILE POLISH)
   ========================================================================== */

/* Odprava 300ms zamika dotika na telefonih */
button, a, input, select, textarea {
  touch-action: manipulation;
}

@media (max-width: 1024px) {
  .jedilnik-stolpci {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .smerokaz {
    display: none;
  }
  .menu-preklop {
    display: flex;
  }
  .streha__v {
    display: flex;
    justify-content: space-between;
  }
  .stolpca-2,
  .nova-jed,
  .mi__v,
  .lega__v,
  .pismo__v,
  .podnozje__glavno {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  @media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
    font-size: 1.05rem;
  }

  .polje {
    width: min(var(--sirina), 100% - 2rem);
  }

  .odsek {
    padding: clamp(3.25rem, 7vw, 4.5rem) 0;
  }

  /* Mobilna spodnja vrstica za takojšen klic */
  .mobilni-bar {
    display: flex;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .mobilni-bar__gumb {
    min-height: 44px;
    justify-content: center;
    font-size: 0.85rem;
  }
  .mobilni-bar__gumb--klic {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.5rem 1.35rem;
  }

  /* Glava & Meni */
  .vrhnja-vrstica__info {
    display: none;
  }
  .vrhnja-vrstica__v {
    justify-content: center;
    font-size: 0.8rem;
  }
  .streha__v {
    min-height: 60px;
  }
  .znak-glavni {
    font-size: 1.75rem;
  }
  .znak-podnaslov {
    font-size: 0.65rem;
  }
  .menu-preklop {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .menu-preklop span {
    width: 22px;
  }
  .mobilni-meni {
    padding: 1rem;
  }
  .mobilni-meni a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    padding: 0.6rem 0;
  }

  /* Hero kader na mobilnih napravah */
  .naslovnica__kader {
    min-height: clamp(480px, 86vh, 620px);
  }
  .naslovnica__vsebina {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
  .naslovnica__oznake {
    font-size: 0.8rem;
    margin-bottom: 0.85rem;
  }
  .naslovnica__naslov {
    font-size: clamp(2.2rem, 8.5vw, 3.2rem);
    margin-bottom: 0.85rem;
  }
  .naslovnica__podnaslov {
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
  }
  .naslovnica__gumbi {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  .gumb-glavni, .gumb-bel {
    width: 100%;
    text-align: center;
    padding: 0.85rem 1.25rem;
    min-height: 48px;
  }
  .gumb-tekst {
    justify-content: center;
    font-size: 0.95rem;
  }

  /* 4 dejstva v 2x2 mreži */
  .naslovnica__dejstva {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1.25rem;
  }
  .dejstvo-locilo {
    display: none;
  }
  .dejstvo strong {
    font-size: 1.4rem;
  }
  .dejstvo span {
    font-size: 0.78rem;
  }

  .naslovnica__pavza {
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }

  /* Nova jed tedna */
  .nova-jed {
    gap: 1.5rem;
  }
  .nova-jed__slika {
    max-height: 240px;
    border-radius: var(--radij);
  }
  .nova-jed__naslov {
    font-size: 1.55rem;
  }
  .nova-jed__opis {
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
  }
  .nova-jed__lastnosti {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.85rem 0;
  }
  .nova-jed__cene {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nova-jed__cene .gumb-glavni {
    width: 100%;
  }

  /* Kartica zvestobe */
  .kartica-zvestobe {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .kartica-zvestobe__koraki {
    gap: 0.85rem;
    padding: 0.85rem 0;
    margin-bottom: 1.5rem;
  }
  .kartica-zvestobe__vsebina .gumb-glavni {
    width: 100%;
  }
  .kartica-zvestobe__kartica {
    transform: none;
    padding: 1.25rem;
  }
  .kartica__polja {
    gap: 0.5rem;
  }
  .kartica__polje {
    font-size: 0.95rem;
  }

  /* O nas & Filozofija */
  .ekipa {
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }
  .mi__dejstva {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.75rem;
  }
  .nacela__mreza {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .nacelo__slika {
    aspect-ratio: 16 / 9;
  }
  .opomba-pas {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    font-size: 0.98rem;
  }

  /* Sezonski jedilnik */
  .jedilnik-uvod {
    margin-bottom: 1.75rem;
  }
  }
}
  /* ==========================================================================
   GOOGLE MNENJA
   ========================================================================== */

.mnenja-glava {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.mnenja-glava .vstopnik {
  margin-bottom: 0;
}

.mnenja-ocena {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 1rem 1.5rem;
  box-shadow: var(--senca);
  text-decoration: none;
  color: var(--crnilo);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mnenja-ocena:hover {
  box-shadow: var(--senca-dvig);
  transform: translateY(-2px);
}

.mnenja-ocena__stevilka {
  font-family: var(--pisava-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.mnenja-ocena__desno {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mnenja-ocena__opis {
  font-family: var(--pisava-sans);
  font-size: 0.85rem;
  color: var(--crnilo-mehko);
}

.zvezdice {
  color: #E0A82E;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.zvezdice--prazna {
  color: var(--rob);
}

.mnenja-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.mnenje {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 1.5rem;
  box-shadow: var(--senca);
}

.mnenje__glava {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.mnenje__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terakota);
  color: #ffffff;
  font-family: var(--pisava-sans);
  font-weight: 700;
  font-size: 1.1rem;
}

.mnenje__ime {
  font-family: var(--pisava-sans);
  font-weight: 700;
  line-height: 1.2;
}

.mnenje__datum {
  font-family: var(--pisava-sans);
  font-size: 0.8rem;
  color: var(--crnilo-mehko);
}

.mnenje__besedilo {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--crnilo-mehko);
  flex: 1;
}

.mnenje__vir {
  font-family: var(--pisava-sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crnilo-mehko);
}

.mnenja-gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (max-width: 768px) {
  .mnenja-glava {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
  }
  .mnenja-ocena {
    justify-self: start;
  }
  .mnenja-gumbi {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   POT DO NAS (Kje smo)
   ========================================================================== */

.pot {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rob);
}

.pot__glava {
  margin-bottom: 2rem;
}

.pot__naslov {
  font-family: var(--pisava-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.pot__v {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: stretch; /* video je enako visok kot seznam korakov */
}

.pot__koraki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.korak {
  display: grid;
  grid-template-columns: 36px 150px 1fr;
  gap: 1.1rem;
  align-items: center;
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  box-shadow: var(--senca);
}

.korak__st {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terakota);
  color: #ffffff;
  font-family: var(--pisava-sans);
  font-weight: 700;
}

.korak__slika {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radij);
  display: block;
}

.korak__slika--ikona {
  display: grid;
  place-items: center;
  background: var(--platno-mehko);
  color: var(--terakota);
  font-family: var(--pisava-serif);
  font-size: 2.6rem;
  font-weight: 700;
  border: 1px dashed var(--rob);
}

.korak__pis strong {
  display: block;
  font-family: var(--pisava-sans);
  font-size: 1.02rem;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.korak__pis p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--crnilo-mehko);
}

.pot__video {
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.pot__video video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radij);
  background: var(--crnilo);
  box-shadow: var(--senca-dvig);
}

.pot__video figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--pisava-sans);
  font-size: 0.85rem;
  color: var(--crnilo-mehko);
}

@media (max-width: 768px) {
  .pot {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
  .pot__v {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .korak {
    grid-template-columns: 30px 96px 1fr;
    gap: 0.8rem;
    padding: 0.75rem;
  }
  .korak__st {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
  .korak__slika--ikona {
    font-size: 1.8rem;
  }
  .pot__video {
    max-width: 320px;
    margin: 0 auto;
  }
  .pot__video video {
    height: auto;
    aspect-ratio: 9 / 16;
  }
}

.pijaca-opomba {
  margin: 1rem 0 0;
  font-family: var(--pisava-sans);
  font-size: 0.85rem;
  color: var(--crnilo-mehko);
}

/* ==========================================================================
   MERA PORCIJE (cela / polovična)
   ========================================================================== */

.porcija-stikalo-ovoj {
  background: var(--platno-belo);
  border: 1px solid var(--rob);
  border-radius: var(--radij);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--senca);
}

.porcija-naslov {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.porcija-naslov span {
  font-family: var(--pisava-sans);
  font-weight: 700;
  font-size: 0.95rem;
}

.porcija-naslov small {
  font-family: var(--pisava-sans);
  font-size: 0.8rem;
  color: var(--terakota);
  text-align: right;
}

.porcija-stikalo {
  display: flex;
  background: var(--platno-mehko);
  padding: 3px;
  border-radius: var(--radij);
  gap: 3px;
}

.porcija-gumb {
  flex: 1;
  padding: 0.6rem 0.8rem;
  font-family: var(--pisava-sans);
  font-size: 0.875rem;
  font-weight: 600;
  border: 0;
  border-radius: var(--radij);
  background: transparent;
  color: var(--crnilo-mehko);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-align: center;
}

.porcija-gumb.aktiven {
  background: var(--platno-belo);
  color: var(--terakota);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.jed__cena {
  transition: color 0.25s ease;
}

.cena--spremenjena {
  color: var(--terakota);
}

@media (max-width: 768px) {
  .jedilnik-uvod {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .porcija-stikalo-ovoj {
    padding: 1rem;
  }
  .porcija-naslov {
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.6rem;
  }
  .porcija-naslov small {
    text-align: left;
  }
  .porcija-gumb {
    padding: 0.65rem 0.4rem;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   ENOTEN UČINEK KARTIC: dvig ob prehodu miške, povečava slike, klik odpre sliko
   ========================================================================== */

.kartica, .korak, .referenca, .mnenje, .danes-kartica, .nova-jed__slika {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kartica:hover, .korak:hover, .referenca:hover, .mnenje:hover, .danes-kartica:hover {
  transform: translateY(-4px);
  box-shadow: var(--senca-dvig);
}

.korak__slika {
  overflow: hidden;
}

.korak__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kartica__slika img, .korak__slika img, .nova-jed__slika img, .danes-kartica__slika img {
  transition: transform 0.6s ease;
}

.kartica:hover .kartica__slika img,
.korak:hover .korak__slika img,
.nova-jed__slika:hover img,
.danes-kartica:hover .danes-kartica__slika img {
  transform: scale(1.08);
}

/* Slike, ki se ob kliku odprejo povečane */
.nacelo__slika img, .kartica__slika img, .korak__slika img,
.vodja__slika img, .nova-jed__slika img, .danes-kartica__slika img {
  cursor: zoom-in;
}

/* Lightbox v enojnem načinu (slika s kartice): brez puščic in predvajanja */
.lightbox--ena .lightbox__smer,
.lightbox--ena .lightbox__orodja {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .kartica, .korak, .referenca, .mnenje, .danes-kartica, .nova-jed__slika,
  .kartica__slika img, .korak__slika img, .nova-jed__slika img, .danes-kartica__slika img {
    transition: none;
  }
  .kartica:hover, .korak:hover, .referenca:hover, .mnenje:hover, .danes-kartica:hover,
  .kartica:hover .kartica__slika img, .korak:hover .korak__slika img,
  .nova-jed__slika:hover img, .danes-kartica:hover .danes-kartica__slika img {
    transform: none;
  }
}

/* ==========================================================================
   MOBILNO: seznami s cenami in mreže
   V flex vrstici ima otrok privzeto min-width: auto, zato se dolgo ime jedi
   ne prelomi in cena odrine vrstico čez rob zaslona. Mreže z minimalnim
   stolpcem, širšim od vsebine telefona, pa povzročijo vodoravno drsenje.
   ========================================================================== */

@media (max-width: 768px) {
  /* --- vrstica: ime jedi + cena --- */
  .jed__glava,
  .element__glava,
  .pijaca-vrste li {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .jed__ime,
  .element__glava h4,
  .pijaca-vrste li > div {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .jed__cena,
  .element__cena,
  .pijaca-vrste b {
    flex: 0 0 auto;
    text-align: right;
  }

  .jed__ime {
    font-size: 1.08rem;
    line-height: 1.3;
  }
  .jed__cena {
    font-size: 1.12rem;
  }
  .element__glava h4 {
    font-size: 1.05rem;
    line-height: 1.3;
  }
  .element__cena {
    font-size: 1.12rem;
  }
  .pijaca-vrste strong {
    font-size: 1rem;
  }
  .pijaca-vrste b {
    font-size: 1.05rem;
    white-space: normal;
  }
  .pijaca-vrste b small {
    display: block;
  }

  .jed__opis,
  .element p {
    font-size: 0.92rem;
  }
  .jedi-seznam,
  .elementi-seznam {
    gap: 1.1rem;
  }
  .jed,
  .element {
    padding-bottom: 0.9rem;
  }

  /* --- mreže v en stolpec, da ni vodoravnega drsenja --- */
  .jedilnik-stolpci,
  .pijace-stolpci,
  .mnenja-mreza,
  .nacela__mreza {
    grid-template-columns: 1fr;
  }
}

/* Najožji telefoni (360 px in manj): še manj praznega prostora */
@media (max-width: 380px) {
  .polje {
    width: calc(100% - 2rem);
  }
  .jedilnik-skupina {
    padding: 1.1rem;
  }
  .jed__ime,
  .element__glava h4 {
    font-size: 1rem;
  }
  .jed__cena,
  .element__cena {
    font-size: 1.05rem;
  }
}