/* ============================================================
   ČRNOME.LJ: CGP tokeni (Priročnik znamke, 2026)
   ============================================================ */
:root {
  /* Barvna paleta: točne CGP vrednosti */
  --zelena: #1F3D2B;      /* Temno zelena */
  --krem: #F4F1E8;        /* Topla krem */
  --terakota: #C1502E;    /* Terakota */
  --bordo: #6B1F2A;       /* Temni bordo */
  --gorcicna: #D9A441;    /* Gorčična */
  --zajbelj: #8BA394;     /* Žajbelj (podton) */

  /* Funkcionalni odtenki osnovnih barv (globina, ne nove barve) */
  --zelena-deep: #142B1E;
  --zelena-soft: #2A4F38;
  --krem-60: rgba(244, 241, 232, 0.6);
  --krem-80: rgba(244, 241, 232, 0.8);
  /* Različici za nosilce besedila: čista CGP tona ne dosežeta 4.5:1.
     Terakota za 10 % proti temno zeleni, žajbelj za 15 % proti kremu. */
  --terakota-ink: #B04C2C;  /* krem na tej: 4.75:1 */
  --zajbelj-text: #9BAFA1;  /* na temno zeleni: 5.13:1 */

  /* Tipografija */
  --font-display: "Anton", "Archivo Black", sans-serif;
  --font-accent: "Playfair Display", serif;
  --font-body: "Archivo", sans-serif;

  /* Z-lestvica */
  --z-nav: 50;
  --z-menu: 40;
  --z-raised: 10;

  --radius: 14px;
  --pad-x: clamp(1.25rem, 4vw, 4rem);
}

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--zelena-deep);
  color: var(--krem);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1rem; }

:focus-visible {
  outline: 3px solid var(--gorcicna);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  background: var(--gorcicna); color: var(--zelena-deep);
  padding: 0.75rem 1.25rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
  z-index: 60; transition: top 200ms ease;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 1rem); }

/* ===== Logotip (vektor, pisanica vzorec znotraj tipografije, po CGP) ===== */
.nav__logo { height: 30px; width: auto; }
.footer__logo { height: 42px; width: auto; margin-inline: auto; }

/* ===== Nav ===== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
  transition: background-color 250ms ease, box-shadow 250ms ease;
}
.nav.is-solid {
  background: rgba(20, 43, 30, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(244, 241, 232, 0.12);
}
.nav__inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.9rem var(--pad-x);
}
.nav__brand { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav__links { display: none; gap: 1.75rem; margin-left: auto; }
.nav__links a {
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
  color: var(--krem-80); padding: 0.6rem 0.15rem;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.nav__links a:hover { color: var(--krem); border-color: var(--gorcicna); }
.nav .nav__cta { display: none; } /* premaga .btn { display: inline-flex } */

.nav__burger {
  margin-left: auto;
  width: 48px; height: 48px;
  display: grid; place-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.nav__burger span {
  width: 24px; height: 2px; background: var(--krem);
  border-radius: 2px; transition: transform 250ms ease, opacity 250ms ease;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mmenu[hidden] { display: none; }
.mmenu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--zelena);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad-x);
  padding-top: calc(env(safe-area-inset-top, 0px) + 5rem);
}
.mmenu nav { display: flex; flex-direction: column; gap: 0.5rem; }
.mmenu a {
  font-family: var(--font-display);
  font-size: 2.2rem; text-decoration: none; color: var(--krem);
  padding: 0.5rem 0; letter-spacing: 0.02em;
}
.mmenu a:hover { color: var(--gorcicna); }
.mmenu__cta { color: var(--gorcicna) !important; } /* terakota na zeleni je le 2.53:1 */
.mmenu__tag {
  font-family: var(--font-accent); font-style: italic;
  color: var(--zajbelj-text); margin-top: 2.5rem; font-size: 1.1rem;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__media, .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% center; /* mobilni art-directed kader: vas s cerkvijo */
  z-index: -2;
}
.hero__media img { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
/* Mobilno: navpičen scrim (besedilo je čez celo širino).
   Desktop: vodoraven scrim, da desna tretjina slike ostane odprta. */
/* Jakost ni izbrana na oko: v fotografiji je sončni odblesk (255,255,203)
   prav v predelu, kjer stojita oznaka in vrstica "Št. 1". Pod besedilnim
   stolpcem mora zatemnitev držati vsaj 0.88, sicer gorčična pade pod 4.5:1
   (pri 0.62 je le 1.99:1). Desno od besedila sme popustiti, da se vidi dolina. */
/* Mobilne stopnje sledijo izmerjeni svetlosti izreza (p99.5 po pasovih).
   Fotografija Kolpe je svetla in enakomerna, zgoraj ima bele oblake
   (255,255,255), zato je zahteva skoraj povsod enaka: 0.81 do 0.88 za
   gorčično pri 4.5:1. Prehod je zato bolj raven kot pri prejšnjem posnetku. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(20,43,30,0.90) 0%,
      rgba(20,43,30,0.86) 24%,
      rgba(20,43,30,0.88) 60%,
      var(--zelena-deep) 100%);
}
/* Desktop: v besedilnem stolpcu je potrebnih do 0.86, zato 0.89; desno
   popusti na 0.12, da ostaneta vidna zavoj reke in soteska. */
@media (min-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(20,43,30,0.93) 0%, rgba(20,43,30,0.89) 42%, rgba(20,43,30,0.45) 66%, rgba(20,43,30,0.12) 100%),
      linear-gradient(180deg, rgba(20,43,30,0.35) 0%, rgba(20,43,30,0) 34%, rgba(20,43,30,0.2) 76%, var(--zelena-deep) 100%);
  }
}
.hero__content {
  justify-self: start;
  align-self: end;
  text-align: left;
  padding: 7rem var(--pad-x) 6rem;
  max-width: 44rem;
}
.hero__kicker {
  font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
  font-size: 0.78rem; color: var(--gorcicna); margin-bottom: 0.9rem;
}
.hero__title { margin: 0; }
.hero__logo {
  width: min(88vw, 520px); height: auto;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
}
.hero__slogan {
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--gorcicna);
  margin: 1rem 0 0.9rem;
}
.hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem;
  font-weight: 600; font-size: 0.95rem; color: var(--krem-80);
  margin-bottom: 0.8rem;
}
.hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--krem-60); }
.hero__badge {
  border: 1.5px solid var(--krem-60); border-radius: 6px;
  padding: 0.1rem 0.5rem; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__rank {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--gorcicna); font-weight: 700; font-size: 1rem;
  margin-bottom: 0.9rem;
}
.hero__manifest {
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  color: var(--krem-80);
  max-width: 32rem;
  margin-bottom: 1.8rem;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
}
.hero__scrollcue {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  left: 50%; transform: translateX(-50%);
  color: var(--krem-60);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.8rem 1.6rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn--terra { background: var(--terakota-ink); color: var(--krem); }
.btn--terra:hover { background: #a8431f; box-shadow: 0 6px 24px rgba(193, 80, 46, 0.35); }
.btn--play { background: var(--krem); color: var(--zelena-deep); }
.btn--play:hover { background: #fffdf6; box-shadow: 0 6px 24px rgba(244, 241, 232, 0.25); }
.btn--ghost { border-color: var(--krem-60); color: var(--krem); background: rgba(20, 43, 30, 0.25); }
.btn--ghost:hover { border-color: var(--krem); background: rgba(244, 241, 232, 0.1); }

/* ===== Row sections & rails ===== */
.row-section { padding: 3.5rem 0 1rem; }
.row-section--alt {
  background:
    linear-gradient(90deg, rgba(31, 61, 43, 0.6) 0%, rgba(20, 43, 30, 0.92) 55%, rgba(20, 43, 30, 0.97) 100%),
    url("../assets/bg-podkast-ai.webp") center / cover no-repeat;
  padding: 3.5rem 0; margin-top: 2rem;
}
.row-head {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0 var(--pad-x); margin-bottom: 1.4rem;
}
.row-head__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  line-height: 1.15; letter-spacing: 0.02em; color: var(--krem);
}
.row-head__sub { color: var(--zajbelj-text); margin: 0.35rem 0 0; font-size: 0.98rem; }
.row-head__all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: auto; min-height: 44px; padding: 0 0.25rem;
  white-space: nowrap; flex-shrink: 0;
  font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gorcicna); text-decoration: none;
  transition: color 200ms ease, gap 200ms ease;
}
.row-head__all:hover { color: var(--krem); gap: 0.65rem; }
.row-nav { display: none; gap: 0.5rem; }
.row-nav__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(244, 241, 232, 0.3);
  background: rgba(244, 241, 232, 0.05); color: var(--krem);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.row-nav__btn:hover { background: rgba(244, 241, 232, 0.14); border-color: var(--krem-60); }

.rail {
  display: flex; gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem var(--pad-x) 1.5rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* ===== Story cards: Netflix 16:9 sličice z naslovom na sliki ===== */
.card {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
}
.card__link {
  position: relative;
  display: block; text-decoration: none;
  border-radius: var(--radius); overflow: hidden;
  background: var(--zelena);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.card__media {
  aspect-ratio: 16 / 9; overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.card__body {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem 0.9rem 0.75rem;
  background: linear-gradient(180deg, rgba(20, 43, 30, 0) 0%, rgba(20, 43, 30, 0.72) 45%, rgba(20, 43, 30, 0.94) 100%);
}
.card__title {
  font-size: 0.98rem; font-weight: 700; line-height: 1.3;
  color: var(--krem); margin: 0.45rem 0 0.15rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.card__meta { color: var(--zajbelj-text); font-size: 0.8rem; margin: 0; }

@media (hover: hover) {
  .card__link:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  }
  .card__link:hover .card__media img { transform: scale(1.05); }
}

/* Category chips */
.chip {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.28rem 0.65rem; border-radius: 999px;
}
.chip--gorcicna { background: var(--gorcicna); color: var(--zelena-deep); }
.chip--terakota { background: var(--terakota-ink); color: var(--krem); }
.chip--bordo   { background: var(--bordo); color: var(--krem); }
.chip--zajbelj { background: var(--zajbelj); color: var(--zelena-deep); }

/* ===== Podcast episodes ===== */
.ep {
  flex: 0 0 auto;
  width: min(62vw, 235px);
  scroll-snap-align: start;
}
.ep__link { display: block; text-decoration: none; }
.ep__cover {
  position: relative;
  aspect-ratio: 1; border-radius: var(--radius);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.ep__cover::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/texture.webp");
  background-size: cover; background-position: center;
  opacity: 0.28;
  mix-blend-mode: luminosity;
}
.ep__cover--terra    { background: linear-gradient(145deg, var(--terakota), var(--bordo)); }
.ep__cover--gorcicna { background: linear-gradient(145deg, var(--gorcicna), var(--terakota)); }
.ep__cover--bordo    { background: linear-gradient(145deg, var(--bordo), var(--zelena)); }
.ep__cover--zajbelj  { background: linear-gradient(145deg, var(--zajbelj), var(--zelena)); }
.ep__num {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 6rem);
  color: var(--krem); opacity: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.ep__play {
  position: absolute; right: 0.9rem; bottom: 0.9rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--krem); color: var(--zelena-deep);
  display: grid; place-items: center;
  padding-left: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease;
}
.ep__body { padding: 0.8rem 0.2rem 0; }
.ep__title { font-size: 1rem; font-weight: 700; color: var(--krem); line-height: 1.35; }
.ep__meta { color: var(--zajbelj-text); font-size: 0.85rem; margin: 0.25rem 0 0; }

@media (hover: hover) {
  .ep__link:hover .ep__cover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  }
  .ep__link:hover .ep__play { transform: scale(1.08); }
}

/* ===== Pillars: glass kartice z 3D nagibom ===== */
.pillars {
  padding: 3.5rem 0 2rem;
  position: relative;
  isolation: isolate;
}

/* Ambientni sij za stekleni učinek.
   backdrop-filter nad enobarvno podlago ne naredi nič vidnega: zabrisana
   enakomerna barva je ista barva. Te mehke lise dajo blurju kaj razmazati,
   šele s tem kartice berejo kot steklo in ne le kot gradient.
   Barve so iz CGP palete, krovna prosojnost je nizka, da ostane temno. */
.pillars::before {
  content: "";
  position: absolute; inset: -10% 0;
  z-index: -1;
  pointer-events: none;
  /* Jakost je omejena na 0.12: močnejši sij posvetli kartico toliko,
     da opis v krem-60 pade pod 4.5:1 (izmerjeno 3.90:1 pri 0.16). */
  background:
    radial-gradient(38rem 22rem at 12% 18%, rgba(217, 164, 65, 0.12), transparent 62%),
    radial-gradient(32rem 20rem at 88% 30%, rgba(193, 80, 46, 0.11), transparent 62%),
    radial-gradient(34rem 22rem at 50% 96%, rgba(139, 163, 148, 0.10), transparent 64%);
}

.pillars__grid {
  list-style: none; margin: 0;
  padding: 0 var(--pad-x);
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  /* perspektiva na mreži, da nagib posamezne kartice deluje prostorsko */
  perspective: 1000px;
}

.pillar {
  /* Vsa stanja tečejo skozi te spremenljivke, transform pa je zapisan samo
     na enem mestu. Prej so :hover, :focus-within in :active vsak zase pisali
     --lift oziroma transform in jih je .pillar.reveal.is-visible (0,3,0)
     premagal, zato dvig ni deloval. Ločen --enter za vstop in --lift za dvig
     odpravita to tekmo v specifičnosti.
     --rx/--ry nastavlja js po legi kazalca, --i je zaporedna številka kartice */
  --rx: 0deg;
  --ry: 0deg;
  --enter: 0px;   /* zamik ob vstopu (reveal) */
  --lift: 0px;    /* dvig ob hoverju ali fokusu */
  --scale: 1;     /* pritisk na dotik */
  --glow: 0;

  position: relative;
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;

  /* Gradientna obroba: dve plasti v enem background, ločeni s padding-box
     in border-box. Tako obroba prelije iz krem v gorčično brez dodatnih vozlišč. */
  background:
    linear-gradient(160deg, rgba(244, 241, 232, 0.07), rgba(244, 241, 232, 0.02)) padding-box,
    linear-gradient(140deg,
      rgba(244, 241, 232, 0.28) 0%,
      rgba(244, 241, 232, 0.06) 42%,
      rgba(217, 164, 65, calc(0.14 + var(--glow) * 0.34)) 100%) border-box;
  border: 1px solid transparent;

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);

  transform: rotateX(var(--rx)) rotateY(var(--ry))
             translate3d(0, calc(var(--enter) + var(--lift)), 0)
             scale(var(--scale));
  transform-style: preserve-3d;
  will-change: transform;

  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 260ms ease,
              background 260ms ease,
              opacity 420ms ease;
}

/* Stebri nosijo tudi .reveal, ki nastavi transform in bi 3D nagib izničil
   (.reveal.is-visible ima transform: none). Zato reveal tu peljemo skozi
   --enter in opacity, transform pa ostane naš. Selektorja sta dovolj
   specifična, da premagata .reveal in .reveal.is-visible.
   Vstop ima svojo spremenljivko, da ne povozi --lift iz hoverja. */
.pillar.reveal { opacity: 0; --enter: 18px; }
.pillar.reveal,
.pillar.reveal.is-visible {
  transform: rotateX(var(--rx)) rotateY(var(--ry))
             translate3d(0, calc(var(--enter) + var(--lift)), 0)
             scale(var(--scale));
}
.pillar.reveal.is-visible { opacity: 1; --enter: 0px; }

/* Notranji odsev: svetel rob na zgornjem robu, ki da steklu debelino. */
.pillar::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(244, 241, 232, 0.16), transparent 38%);
  opacity: calc(0.5 + var(--glow) * 0.5);
  pointer-events: none;
  transition: opacity 260ms ease;
}

/* Vsebina nad glass slojem in v svoji 3D ravnini. */
.pillar > * { position: relative; transform-style: preserve-3d; }

@media (hover: hover) {
  .pillar:hover {
    --lift: -6px;
    --glow: 1;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  }
}

.pillar__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 0.9rem;
  /* Ikona lebdi nad ostalo vsebino: translateZ jo dvigne v prostoru.
     Fiksen zamik 60 ms pusti, da sledi nagibu kartice in ne skoči hkrati
     z njo. Zamika po --i tu namenoma NI: pri hoverju posamezne kartice bi
     šesta ikona zaostala ~180 ms in delovala počasno. Stopničast zamik med
     kartami dela reveal ob scrollu, kjer se ikone res pojavijo skupaj. */
  transform: translate3d(0, 0, 0);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 320ms ease;
  transition-delay: 60ms;
}

@media (hover: hover) {
  .pillar:hover .pillar__icon {
    transform: translate3d(0, -7px, 42px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35);
  }
}

/* Dotik: hover ni dosegljiv, zato je glass dvig privzeto viden,
   pritisk pa da otipljiv odziv. */
@media (hover: none) {
  .pillar {
    --glow: 0.55;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
  }
  .pillar__icon { transform: translate3d(0, -4px, 0); }
  /* Pritisk gre prek --scale, ne prek transform: sicer ga .pillar.reveal
     .is-visible (0,3,0) premaga in odziva na dotik sploh ni. */
  .pillar:active {
    --glow: 1;
    --scale: 0.983;
  }
  .pillar:active .pillar__icon { transform: translate3d(0, -6px, 0); }
}

/* Kartice niso povezave, zato jim ne dodajamo tabindex (fokus brez dejanja
   je za bralnike zaslona zavajajoč). :focus-within pokrije primer, ko
   vsebina kdaj dobi povezavo. */
.pillar:focus-within {
  --glow: 1;
  --lift: -6px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}

/* Zaporedna številka kartice za zamik ikone. V CSS namesto inline style,
   da ostane HTML čist in se ob dodajanju stebra ni treba spomniti na atribut. */
.pillar:nth-child(1) { --i: 0; }
.pillar:nth-child(2) { --i: 1; }
.pillar:nth-child(3) { --i: 2; }
.pillar:nth-child(4) { --i: 3; }
.pillar:nth-child(5) { --i: 4; }
.pillar:nth-child(6) { --i: 5; }
.pillar__icon--gorcicna { background: rgba(217, 164, 65, 0.16); color: var(--gorcicna); }
.pillar__icon--terakota { background: rgba(193, 80, 46, 0.18); color: var(--terakota); }
.pillar__icon--zajbelj  { background: rgba(139, 163, 148, 0.16); color: var(--zajbelj); }
.pillar__icon--bordo    { background: rgba(107, 31, 42, 0.35); color: #d98a94; }
.pillar__icon--krem     { background: rgba(244, 241, 232, 0.12); color: var(--krem); }
.pillar__title {
  font-family: var(--font-display);
  font-size: 1.25rem; letter-spacing: 0.03em;
  color: var(--krem); margin-bottom: 0.35rem;
}
/* krem-80, ne krem-60: stekleno polnilo posvetli kartico in krem-60 pade
   na 4.32:1. Pisava in velikost ostaneta nespremenjeni. */
.pillar__desc { color: var(--krem-80); font-size: 0.92rem; margin: 0; }

/* ===== About ===== */
/* Temno zelena, ne krem: svetel pas je pretrgal temni tok strani.
   Odtenek --zelena loči sekcijo od sosednjih --zelena-deep brez svetlega bloka. */
.about {
  background: var(--zelena); color: var(--krem);
  padding: 4.5rem 0;
}
.about__inner {
  display: grid; gap: 2.5rem;
  padding: 0 var(--pad-x);
  max-width: 72rem; margin-inline: auto;
}
.about__media { margin: 0; }
.about__media img {
  border-radius: var(--radius);
  /* na temni podlagi zelena senca izgine, zato črna */
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  width: 100%; height: auto;
}
.about__caption {
  font-size: 0.85rem; color: var(--zajbelj-text);
  margin-top: 0.6rem; font-style: italic;
}
/* Dvojni razred je nujen: oznaka je <p> znotraj .about__text, zato jo
   .about__text p (0,1,1) premaga, če je selektor le .about__kicker (0,1,0). */
.about__text .about__kicker {
  font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
  /* terakota-ink pade na 2.22:1 na temno zeleni, zato žajbelj */
  font-size: 0.78rem; color: var(--zajbelj-text);
  margin-bottom: 0.6rem;
}
.about__quote {
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  /* enako kot slogan v heroju: Playfair italic v gorčični */
  line-height: 1.35; color: var(--gorcicna);
  margin: 0 0 1.5rem;
}
.about__text p { color: var(--krem-80); max-width: 38rem; }
.about__values {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.about__values li {
  border: 1.5px solid var(--krem-60);
  color: var(--krem); font-weight: 600; font-size: 0.9rem;
  padding: 0.45rem 1rem; border-radius: 999px;
}

/* ===== CTA / Predlagaj ===== */
.cta-block {
  background:
    linear-gradient(rgba(20, 43, 30, 0.72), rgba(20, 43, 30, 0.90)),
    url("../assets/bg-breze-ai.webp") center / cover;
  padding: 4.5rem 0;
}
.cta-split {
  padding: 0 var(--pad-x);
  max-width: 68rem; margin-inline: auto;
  display: grid; gap: 2.5rem;
}
.cta-copy { text-align: left; }
.cta-copy__eyebrow {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gorcicna); margin-bottom: 0.75rem;
}
.cta-copy__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.1; letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.cta-copy__intro {
  color: var(--krem-80); line-height: 1.65;
  margin-bottom: 1.5rem; max-width: 38rem;
}
.cta-copy__hints {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; gap: 0.6rem;
}
.cta-copy__hints li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; color: var(--krem-80);
}
.cta-copy__hints svg { flex-shrink: 0; color: var(--gorcicna); }
.cta-copy__process {
  font-size: 0.8rem; color: var(--krem-60);
  letter-spacing: 0.01em; line-height: 1.6;
}

.cta-card {
  background: rgba(244, 241, 232, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(244, 241, 232, 0.10);
  border-radius: 20px;
  padding: 1.6rem 1.4rem;
  text-align: left;
}
.cta-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  letter-spacing: 0.02em; margin-bottom: 1rem;
  text-align: center;
}
.cta-form { display: grid; gap: 0.7rem; }
.cta-form__field { display: grid; gap: 0.25rem; }
.cta-form__label { font-size: 0.85rem; font-weight: 600; color: var(--krem-80); letter-spacing: 0.03em; }
.cta-form__opt { font-weight: 400; color: var(--krem-60); }
.cta-form input, .cta-form textarea {
  width: 100%;
  font: inherit; color: var(--krem);
  background: rgba(244, 241, 232, 0.08);
  border: 1.5px solid rgba(244, 241, 232, 0.25);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  min-height: 48px;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.cta-form input::placeholder, .cta-form textarea::placeholder { color: var(--krem-60); }
.cta-form input:focus, .cta-form textarea:focus {
  outline: none; border-color: var(--gorcicna);
  background: rgba(244, 241, 232, 0.12);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.25);
}
.cta-form textarea { resize: vertical; min-height: 100px; }
.cta-form .btn { width: 100%; justify-content: center; }
.cta-form__msg { min-height: 1rem; margin: 0; color: var(--gorcicna); font-weight: 600; }

/* ===== Footer ===== */
.footer {
  background: var(--zelena);
  border-top: 1px solid rgba(244, 241, 232, 0.1);
  padding: 3rem 0 calc(env(safe-area-inset-bottom, 0px) + 2rem);
}
.footer__inner {
  padding: 0 var(--pad-x);
  display: grid; gap: 1.75rem; justify-items: center; text-align: center;
}
.footer__slogan {
  font-family: var(--font-accent); font-style: italic;
  color: var(--zajbelj-text); margin: 0.5rem 0 0;
}
.footer__social { display: flex; gap: 0.75rem; }
.footer__social a {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--krem-80);
  border: 1.5px solid rgba(244, 241, 232, 0.2);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.footer__social a:hover { color: var(--gorcicna); border-color: var(--gorcicna); background: rgba(217, 164, 65, 0.08); }
.footer__note { color: var(--krem-60); font-size: 0.85rem; margin: 0; }

/* ===== Reveal animacije ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Desktop ===== */
@media (min-width: 768px) {
  .nav__burger { display: none; }
  .nav__links { display: flex; }
  .nav .nav__cta { display: inline-flex; min-height: 44px; padding: 0.6rem 1.3rem; font-size: 0.92rem; white-space: nowrap; }
  .row-nav { display: flex; }
  .hero__media img { object-position: center; }
  .card { width: 320px; }
  .ep { width: 250px; }
  .pillars__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .cta-split { grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; }
  .cta-card { padding: 1.8rem 1.6rem; }
}
@media (min-width: 1024px) {
  /* 6 stebrov v dveh vrsticah po 3; 6 v vrsto bi bilo preozko za opise */
  .pillars__grid { grid-template-columns: repeat(3, 1fr); }
  .about__inner { grid-template-columns: 1fr 1.1fr; align-items: center; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media img { animation: none; }
  .hero__scrollcue { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* Brez 3D nagiba in lebdenja; glass obroba ostane, ker ni gibanje.
     Vse gre prek spremenljivk: transform: none tu ne bi učinkoval, ker ga
     .pillar.reveal.is-visible (0,3,0) premaga. --enter je vključen, da
     kartica ne obtiči zamaknjena, če js ne doda .is-visible. */
  .pillar, .pillar:hover, .pillar:focus-within, .pillar:active {
    --rx: 0deg; --ry: 0deg;
    --enter: 0px; --lift: 0px; --scale: 1;
  }
  .pillar__icon, .pillar:hover .pillar__icon { transform: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}