/* =========================================================
   Frizerski salon TOP 13
   Palette + type carried over from the original Elementor build.
   ========================================================= */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --terracotta: #C9977E;   /* breskev – accent only: CTA hover, focus rings, one-word emphasis */
  --terracotta-d: #B17F65;
  --rust: #7C5C4C;         /* links, icons, secondary numerals */
  --rust-deep: #2B1D14;    /* near-black espresso anchor – headings, buttons, footer */
  --cream: #EFDED0;
  --ivory: #FAF2EB;
  --ink: #40332A;
  --ink-soft: #6B584B;
  --white: #FFFBF7;
  --line: rgba(43, 29, 20, .15);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --radius: 18px;
  --radius-lg: 28px;

  /* One dark tone drives every shadow and image overlay on the page. */
  --tint: 43, 29, 20;

  --shadow-sm: 0 2px 10px rgba(var(--tint), .06);
  --shadow-md: 0 14px 40px rgba(var(--tint), .10);
  --shadow-lg: 0 28px 70px rgba(var(--tint), .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;

  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, table, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--terracotta); color: var(--white); }

/* ---------- A11y helpers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Povezava mora biti nevidna, dokler ne dobi fokusa – a „odmaknjena nad
   rob" za to ni dovolj. Pri odboju strani (rubber-band), ko obiskovalec
   prehitro potegne navzgor, brskalnik pokaže tudi to, kar je nad ničlo, in
   povezava pogleda ven. Zato jo skrijemo z motnostjo, odmik pa ostane samo
   še kot smer, iz katere pripolzi ob fokusu.
   `fixed` namesto `absolute`: kdor se s Shift+Tab vrne na začetek sredi
   strani, mora povezavo videti tam, kjer je, ne na vrhu dokumenta. */
.skip-link {
  position: fixed; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 999; background: var(--rust); color: var(--white);
  padding: .75rem 1.25rem; border-radius: 0 0 10px 10px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--ivory { background: var(--ivory); }
.section--cream { background: var(--cream); }

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head .lead { margin-top: .85rem; }

.grid-2 {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); }
  .grid-2--faq { align-items: start; grid-template-columns: .85fr 1.15fr; }
}

/* ---------- Type ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--rust-deep);
}
.h2 em { font-style: italic; color: var(--terracotta); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.65;
}
.section p + p { margin-top: 1rem; }

.link {
  color: var(--rust); text-decoration: none;
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease), color .2s;
}
.link:hover { color: var(--terracotta-d); background-size: 0% 1px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--rust-deep);
  --btn-fg: var(--white);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem;
  min-height: 48px;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; font-size: .95rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .25s;
  will-change: transform;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(-1px); }

.btn--primary { --btn-bg: var(--rust-deep); }
.btn--primary:hover { background: var(--rust); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--rust-deep);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { --btn-fg: var(--rust-deep); box-shadow: inset 0 0 0 1.5px var(--terracotta), var(--shadow-sm); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--rust-deep); }
.btn--outline-light {
  --btn-bg: transparent; --btn-fg: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.btn--outline-light:hover { box-shadow: inset 0 0 0 1.5px var(--white); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; min-height: 56px; }
.btn--sm { padding: .7rem 1.15rem; font-size: .875rem; min-height: 42px; }
.btn--full { width: 100%; }

.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* Trenutna višina glave kot spremenljivka: celozaslonski meni visi pod
     njo in se mora skrčiti skupaj z njo, sicer med njima zazija vrzel. */
  --header-cur: var(--header-h);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              backdrop-filter .35s var(--ease);
}
.site-header.is-stuck {
  --header-cur: 68px;
  background: rgba(255, 251, 247, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(var(--tint), .07);
}
.header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--header-h);
  transition: height .35s var(--ease);
}
.site-header.is-stuck .header__inner { height: 68px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }

/* The logo file is white-on-transparent. Using it as a mask lets one asset
   render in any colour: rust on light surfaces, white on the dark footer. */
.brand__logo {
  display: block;
  width: 146px; height: 36px;          /* source is 684x168 -> 4.07:1 */
  background-color: var(--rust-deep);
  -webkit-mask: url('../img/logo/top13-logo-white.png') left center / contain no-repeat;
          mask: url('../img/logo/top13-logo-white.png') left center / contain no-repeat;
  transition: background-color .3s, transform .4s var(--ease-out);
}
.brand:hover .brand__logo { background-color: var(--terracotta-d); transform: scale(1.03); }
.site-header.is-stuck .brand__logo { width: 132px; height: 32px; }
.brand--footer .brand__logo { background-color: var(--white); }

@media (max-width: 420px) {
  .brand__logo { width: 118px; height: 29px; }
  /* Na 375 px stojijo v vrsti logotip, preklop jezika, telefonska in
     burger – z 20 px režami bi se iztekli čez rob. */
  .header__inner { gap: .55rem; }
  .langsw__item { min-width: 27px; padding: .3rem .2rem; font-size: .7rem; }
}

.nav__list { display: flex; align-items: center; gap: .35rem; }
.nav__list a {
  position: relative; display: block;
  padding: .55rem .85rem; border-radius: 999px;
  font-size: .92rem; font-weight: 500; text-decoration: none;
  color: var(--rust-deep);
  transition: color .25s, background-color .25s;
}
.nav__list a::before {
  content: ''; position: absolute; left: 50%; bottom: .3rem;
  width: 18px; height: 2px; border-radius: 2px; background: var(--terracotta);
  transform: translateX(-50%) scaleX(0);
  transition: transform .3s var(--ease-out);
}
.nav__list a:hover { color: var(--terracotta-d); }
.nav__list a:hover::before,
.nav__list a.is-active::before { transform: translateX(-50%) scaleX(1); }
.nav__list a.is-active { color: var(--terracotta-d); }

.burger {
  display: none; width: 46px; height: 46px; border-radius: 12px;
  padding: 12px 11px; flex-direction: column; justify-content: space-between;
  background: transparent; transition: background-color .25s;
}
/* A hit target with no visible edge reads as unclickable, so a hover/focus
   affordance still appears – just not as a permanent square sitting in the header. */
.burger:hover, .burger:focus-visible { background: rgba(var(--tint), .07); }
.burger[aria-expanded="true"] { background: transparent; }
.burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--rust-deep);
  transition: transform .35s var(--ease), opacity .2s;
  transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Kanali za pisanje v glavi. Ikone so brez ploskve, da telefonska številka
   ostane edini "gumb" in s tem glavni klic k dejanju. */
.header__social { display: flex; align-items: center; gap: .15rem; }
.header__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: var(--rust-deep);
  transition: color .25s, background-color .25s;
}
.header__social svg { width: 19px; height: 19px; fill: currentColor; }
.header__social a:hover, .header__social a:focus-visible {
  color: var(--terracotta-d); background: rgba(var(--tint), .07);
}

/* ---------- Preklop jezika ----------
   Ostane viden na vseh širinah, tudi na telefonu, kjer se ikone družbenih
   omrežij umaknejo v meni: kdor ne bere slovensko, ne bo iskal burgerja,
   da bi našel angleščino. Zato je majhen (dve črki) in brez ploskve, da
   ne tekmuje s telefonsko številko, ki ostaja edini gumb v glavi.
   Trenutni jezik ni povezava, ampak <span> – klik nanj ne bi naredil nič. */
.langsw {
  display: flex; align-items: center; gap: 2px;
  padding: 2px;
  border: 1px solid var(--line); border-radius: 999px;
}
.langsw__item {
  display: grid; place-items: center;
  min-width: 30px; padding: .3rem .35rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  color: var(--rust-deep); text-decoration: none;
  transition: color .25s, background-color .25s;
}
.langsw__item.is-current { background: rgba(var(--tint), .1); }
a.langsw__item:hover, a.langsw__item:focus-visible {
  color: var(--terracotta-d); background: rgba(var(--tint), .05);
}

/* Noga menija je samo mobilna zadeva – na namizju sta Instagram in
   Facebook v glavi, telefonska pa v gumbu poleg njiju. */
.nav__foot { display: none; }

@media (max-width: 1000px) {
  .header__cta span { display: none; }
  .header__cta { padding: .7rem; width: 42px; }
}

/* ---------- Celozaslonski meni (telefon) ----------
   Prejšnji spustni pas je pokril le zgornjo tretjino zaslona: stran je
   ostala vidna in premakljiva pod njim, ob skrčeni glavi pa je visel
   16 px prenizko. Zdaj prekrije cel zaslon, telo se zaklene, glava
   ostane nad prekrivalom, da sta logotip in križec ves čas na mestu. */
@media (max-width: 860px) {
  .burger { display: flex; }

  /* Vse tri ikone so se preselile v meni. V glavi ostaneta logotip in
     telefonska – en sam gumb, ki na telefonu tudi dejansko kliče. */
  .header__social { display: none; }

  .nav {
    position: fixed; inset: 0;
    background: rgba(255, 251, 247, .98);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* Prekrivalo je edini pozicionirani element v glavi, zato bi se
     izrisalo čez vse ostalo ne glede na vrstni red v DOM. Vsebina glave
     gre nadenj, da logotip, telefonska in križec ostanejo vidni. */
  .brand, .langsw, .header__cta, .burger { position: relative; z-index: 1; }
  /* Ko je meni odprt, je glava le še okvir zanj – brez svoje ploskve,
     sicer se pod njo vleče senčna črta čez odprt meni. */
  body.nav-open .site-header.is-stuck {
    background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  .nav__panel {
    display: flex; flex-direction: column;
    height: 100%;
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
    padding-top: calc(var(--header-cur) + .75rem);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li {
    opacity: 0; transform: translateY(12px);
    transition: opacity .35s var(--ease), transform .45s var(--ease-out);
  }
  .nav.is-open .nav__list li { opacity: 1; transform: none; }
  .nav.is-open .nav__list li:nth-child(1) { transition-delay: .05s; }
  .nav.is-open .nav__list li:nth-child(2) { transition-delay: .10s; }
  .nav.is-open .nav__list li:nth-child(3) { transition-delay: .15s; }
  .nav.is-open .nav__list li:nth-child(4) { transition-delay: .20s; }
  .nav.is-open .nav__list li:nth-child(5) { transition-delay: .25s; }

  .nav__list a {
    padding: 1.05rem .15rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    /* Velikost je vezana tudi na višino zaslona: na ležečem telefonu bi
       samo vw dal 34 px vrstice, ki bi meni potisnile čez rob. */
    font-size: clamp(1.35rem, min(6.5vw, 4.6vh), 2.15rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
  }
  .nav__list a::before { display: none; }

  /* ---- Noga menija: telefonska + družbeni omrežji ---- */
  .nav__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: auto;
    padding-top: 2rem;
    opacity: 0; transform: translateY(12px);
    transition: opacity .35s var(--ease), transform .45s var(--ease-out);
  }
  .nav.is-open .nav__foot { opacity: 1; transform: none; transition-delay: .3s; }

  .nav__tel {
    display: inline-flex; align-items: center; gap: .5rem;
    width: 100%; margin-bottom: .5rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--rust-deep);
    text-decoration: none;
  }
  .nav__tel .ico { color: var(--terracotta-d); }

  .nav__social { display: flex; flex-wrap: wrap; gap: .5rem; }
  .nav__social a {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: .95rem; text-decoration: none;
    color: var(--rust-deep);
    transition: color .25s, background-color .25s, border-color .25s;
  }
  .nav__social svg { width: 18px; height: 18px; fill: currentColor; }
  .nav__social a:hover, .nav__social a:focus-visible {
    color: var(--terracotta-d);
    background: rgba(var(--tint), .05);
    border-color: var(--terracotta);
  }
}

/* Ležeči telefon: manj zraka, da meni ostane na enem zaslonu. */
@media (max-width: 860px) and (max-height: 560px) {
  .nav__list a { padding-block: .7rem; }
  .nav__foot { padding-top: 1.25rem; }
  .nav__tel { font-size: 1.15rem; margin-bottom: .25rem; }
}

body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__list li, .nav__foot { transition-duration: .01ms !important; }
  .nav__list li, .nav__foot { transform: none !important; }
}

/* ---------- Hero ----------
   Višina je vezana na zaslon (`svh`, ne `vh` – sicer vrstica brskalnika
   na telefonu odreže spodnji del), zato hero nikoli ne preraste enega
   zaslona. Prejšnja različica, kjer je slika stala pod besedilom, je
   vzela poldrugega, preden je obiskovalec prišel do storitev.

   Besedilo leži na fotografiji pri obeh širinah; razlikuje se le smer
   svetle zavese pod njim – navpična na telefonu (besedilo je spodaj),
   vodoravna na namizju (besedilo je levo). Fotografija se tudi zamenja:
   pokončna na telefonu, široka na namizju (glej <picture> v index.html).
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding: calc(var(--header-h) + .5rem) clamp(.6rem, 2vw, 1.5rem) clamp(.6rem, 2vw, 1.5rem);
  background: linear-gradient(170deg, var(--ivory) 0%, var(--cream) 100%);
}

.hero__frame {
  position: relative;
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-radius: clamp(16px, 2.2vw, 32px);
  background: var(--ivory);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  /* Malo manj kot cel zaslon: spodaj naj proseva naslednji razdelek,
     da je jasno, da se stran nadaljuje, ne da se zdi kot ves "screen". */
  min-height: min(640px, calc(100svh - var(--header-h) - 3rem));
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 859px) {
  .hero__frame { min-height: calc(100svh - var(--header-h) - 3rem - 64px); }
  /* Prostor, da se puščica navzdol ne prekriva z zadnjo vrstico besedila. */
  .hero__inner { padding-bottom: 3.25rem; }
}

/* Plasti morajo biti pozitivne: pri negativnem z-index bi se slika in
   zavesa narisali ZA ozadjem okvirja in bi ostala vidna samo ploskev. */
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  animation: kenburns 26s ease-in-out infinite alternate;
}

/* Svetla zavesa, ne zatemnitev: salon je bel in zračen, zato besedilo
   posadimo na kremno polje in obdržimo temno rjavo pisavo.
   Na telefonu besedilo zavzame spodnji dve tretjini, zato je zavesa
   navpična – vrh ostane le rahlo prepran, da se prostor še vidi. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ivory) 96%, transparent) 0%,
    color-mix(in srgb, var(--ivory) 88%, transparent) 42%,
    color-mix(in srgb, var(--ivory) 62%, transparent) 66%,
    color-mix(in srgb, var(--ivory) 36%, transparent) 100%);
}

@media (min-width: 860px) {
  .hero__frame { align-items: center; }
  /* Namizje: besedilo je levo, zato je zavesa vodoravna. Točno 90deg,
     da se odstotki ujemajo s širino okvirja – besedilo je široko največ
     34rem, kar je prvih ~38 %; do tam mora zavesa držati polno krovnost,
     potem pa hitro popustiti, sicer se fotografija sploh ne vidi. */
  .hero__scrim {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--ivory) 95%, transparent) 0%,
      color-mix(in srgb, var(--ivory) 88%, transparent) 30%,
      color-mix(in srgb, var(--ivory) 52%, transparent) 47%,
      color-mix(in srgb, var(--ivory) 14%, transparent) 62%,
      transparent 74%);
  }
}

/* Brez `width: 100%` – to bi povozilo širino iz .wrap in besedilo bi se
   na telefonu prilepilo na rob okvirja. .wrap da 1,25rem, notranji odmik
   pa doda še zračnost do roba fotografije. */
.hero__inner { position: relative; z-index: 2; padding-inline: .5rem; }
@media (min-width: 860px) {
  .hero__inner > * { max-width: 34rem; }
  /* Besedilo naj ne visi na robu okvirja – okvir je že zamaknjen od
     roba zaslona, znotraj njega pa rabi še svojo zračnost. */
  .hero__inner { padding-inline: clamp(0rem, 2vw, 2.5rem); }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.05rem, 1.15rem + 3vw + .5vh, 3.4rem);
  line-height: 1.07;
  letter-spacing: -.02em;
  color: var(--rust-deep);
  margin-block: .3rem .9rem;
}
.hero__title em { font-style: italic; color: var(--terracotta); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word {
  display: inline-block;
  transform: translateY(105%);
  animation: wordUp .95s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) .word { animation-delay: .05s; }
.hero__title .line:nth-child(2) .word { animation-delay: .17s; }
.hero__title .line:nth-child(3) .word { animation-delay: .29s; }
@keyframes wordUp { to { transform: translateY(0); } }

.hero__lead { color: var(--ink-soft); font-size: clamp(1rem, .96rem + .28vw, 1.15rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }

.hero__note { margin-top: 1.15rem; min-height: 2rem; }

.status-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .86rem; font-weight: 500; color: var(--rust-deep);
}
.status-pill__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); flex: none;
}
.status-pill.is-open .status-pill__dot {
  background: #2E9E5B;
  box-shadow: 0 0 0 0 rgba(46,158,91,.55);
  animation: pulse 2.2s infinite;
}
.status-pill.is-closed .status-pill__dot { background: var(--terracotta-d); }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(46,158,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); }
}

@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(0, -2%, 0); }
}

/* Značka „30+ let" sedi v desnem spodnjem kotu slike, torej na strani,
   kjer zavesa ne teče čez fotografijo. */
.hero__badge {
  position: absolute; z-index: 2; right: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2rem);
  display: flex; flex-direction: column; align-items: center;
  padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow-md);
  animation: floaty 6s ease-in-out infinite;
}
/* Na telefonu je značka manjša: ob puščici za pomik navzdol, ki sedi na
   sredini istega roba, mora ostati dovolj praznine, da se ne bereta kot
   en element. */
@media (min-width: 860px) { .hero__badge { padding: .9rem 1.25rem; } }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.hero__badge-num {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  line-height: 1; color: var(--rust-deep);
}
.hero__badge-lbl {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .25rem;
}
@media (min-width: 860px) {
  .hero__badge-num { font-size: 1.9rem; }
  .hero__badge-lbl { font-size: .7rem; letter-spacing: .12em; margin-top: .3rem; }
}

/* Namig, da stran ne pripenja tu – rahlo poskakujoča puščica navzdol,
   na sredini spodnjega roba okvirja. */
.hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(.9rem, 2.5vw, 1.5rem);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow-sm);
  color: var(--rust-deep);
  animation: hero-scroll-cue 2.2s ease-in-out infinite;
  transition: background-color .3s;
}
.hero__scroll .ico { width: 18px; height: 18px; }
.hero__scroll:hover { background: var(--white); }
@keyframes hero-scroll-cue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; background: var(--rust-deep); color: var(--cream);
  padding-block: .85rem;
  border-block: 1px solid rgba(255,255,255,.18);
}
.marquee__track {
  display: flex; align-items: center; gap: 2rem; width: max-content;
  animation: scrollX 34s linear infinite;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .01em;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .sep { opacity: .55; font-size: .8rem; }
@keyframes scrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- O nas ---------- */

/* Halidin citat. Podpis je del izjave, ne okrasek: nepodpisan bi bil
   samo še en lep stavek o lepoti, podpisan je njena beseda. */
.about__quote {
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--terracotta);
}
.about__quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--rust-deep);
}
.about__quote figcaption {
  margin-top: .55rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* Pomišljaj je njena želja (3. 8.): podpis naj se bere kot podpis pod
   mislijo, ne kot napis. Ker je okrasen, stoji v CSS in ne v besedilu –
   tako ostane ključ za prevod čist in velja za obe jezikovni različici. */
.about__quote figcaption::before { content: "— "; }

.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem; margin-top: 2.5rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}
.stat__num {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1; color: var(--rust-deep);
}
.stat__lbl {
  display: block; margin-top: .45rem;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}

.about__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  transition: transform .6s var(--ease-out);
}
.about__media img:first-child { border-top-left-radius: 140px; }
.about__media img:last-child { margin-top: 2.5rem; border-bottom-right-radius: 140px; }
.about__media img:hover { transform: translateY(-8px) scale(1.02); }

/* ---------- Storitve: seznam ob lepljivi fotografiji ----------
   Raster enajstih enakih kartic je odpadel. Vse storitve so imele
   enako težo, čeprav je posel salona barva, in isti fotografski
   raster je stal še enkrat v Galeriji. Zdaj imena tečejo kot seznam
   v treh skupinah, fotografijo pa izbira položaj drsnika.

   Na telefonu je vsebovalnik blok in ne raster: lepljivi element se
   drži svojega vsebovalnika, in če je ta samo ena vrstica rastra, se
   fotografija odlepi takoj, ko se seznam premakne. */
/* Zastrto območje pod fotografijo je del lepljive škatle (njen spodnji
   odmik), ne samostojen pas. Tako `getBoundingClientRect().bottom` že
   vsebuje zastor in JS lahko bralno črto postavi tik podenj – višine ni
   treba podvajati na dveh mestih, kjer bi se sčasoma razšli. */
/* Zastora ni smiselno višati, da bi popolnoma skril vrstico nad aktivno:
   bralna črta je definirana kot spodnji rob zastora plus pol vrstice,
   zato se ob višjem zastoru premakneta oba in razmerje ostane isto.
   Izmerjeno: pri 5.5rem in pri 7.5rem enakih 24px. Da bi bilo drugače,
   bi se moralo drsenje zaskočiti po vrsticah – kar je za bralca slabše
   od tega, da se ime pod sliko mehko raztopi. */
.svc { display: block; --svc-fade: 5.5rem; }
/* Odmik mora biti pod glavo, ki je `fixed` in visoka --header-h; sicer
   fotografija ob obstanku zleze podnjo. Pozor pri merjenju: dokler se
   blok še ni odkril, ga `[data-reveal]` premakne za 26px navzdol, zato
   je videti nižje, kot bo v končnem stanju.
   Zaobljenost in podlago nosijo plasti, ne vsebovalnik: ta mora ostati
   brez `overflow: hidden`, sicer odreže preliv, ki leži pod fotografijo. */
.svc__media {
  position: sticky; top: calc(var(--header-h) + .75rem); z-index: 1;
  height: calc(42vh + var(--svc-fade));
  padding-bottom: var(--svc-fade);
  margin-bottom: 1rem;
}
/* Neprosojna podlaga natanko pod fotografijo. Med prelivom gresta obe
   plasti skozi delno prosojnost hkrati, zato skupna krovnost pade pod 1
   in skoznjo prosije seznam, ki drsi za sliko. Podlaga to prestreže;
   hkrati je videti, dokler se slika nalaga. Leži pod plastema, ker je
   ::before prvi otrok, in ne sega v zastrti del. */
.svc__media::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: calc(100% - var(--svc-fade));
  border-radius: var(--radius-lg);
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Med fotografijo in aktivno vrstico so ostajale vrstice, ki jih je
   obiskovalec že prevozil: fotografija je kazala eno storitev, tik pod
   njo pa je še stalo ime prejšnje. Zastor je zato najprej poln – do
   višine, kjer se začne aktivna vrstica – in šele nato prehaja v
   prosojno. Konec je zapisan kot rgba iste barve in ne `transparent`:
   ta v nekaterih brskalnikih pelje čez prosojno črno in preliv posivi.
   Zamegljenost je namenoma dodana zraven: prejšnja storitev naj se bere
   kot zamegljena skozi steklo, ne kot pobledel napis, ki izginja v nič
   – to obiskovalcu pove, da je zgoraj še vsebina, ne da je stran prazna. */
.svc__media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--svc-fade);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* Mehki rep je krajši od odmika v vrstici (clamp(1.5rem…)), zato je
     ime prejšnje storitve vedno še pod polnim delom zastora in v repu
     mehča le prazen prostor med vrsticama. Zapisano absolutno in ne v
     odstotkih, da razmerje drži pri vsaki višini zastora. */
  background: linear-gradient(to bottom,
    var(--white) 0, var(--white) calc(100% - 1.25rem), rgba(255, 251, 247, 0) 100%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .svc {
    display: grid; grid-template-columns: .82fr 1.18fr;
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
    /* V dveh stolpcih besedilo ne teče pod fotografijo, zato ni česa
       zastirati; z ničlo odpadeta tudi odmik in izrez plasti. */
    --svc-fade: 0px;
  }
  .svc__media {
    top: calc(var(--header-h) + 1rem);
    height: auto; aspect-ratio: 3 / 4; margin-bottom: 0;
  }
  .svc__media::after { content: none; }
}
/* Višina je izrecna in ne 100%: pri sliki bi `height: auto` pomenilo
   njeno lastno višino, ne preostanka škatle, `100%` pa bi vštel še
   spodnji odmik in bi slika zlezla čez zastor. */
.svc__layer {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(100% - var(--svc-fade));
  width: 100%; object-fit: cover;
  border-radius: var(--radius-lg);
  /* Podlaga in obroba sta na ::before, ne tu: karkoli je na plasteh, se
     med prelivom prelije z njima in neha kriti. */
  opacity: 0; transition: opacity .55s var(--ease);
}
.svc__layer.is-on { opacity: 1; }

.svc__group + .svc__group { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.svc__label {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--terracotta-d);
  padding-bottom: .5rem;
}
.svc__list { border-top: 1px solid var(--line); }
.svc__row {
  border-bottom: 1px solid var(--line);
  color: var(--rust-deep);
  transition: color .35s, opacity .35s;
}
/* Zadnja vrstica zadnje skupine je bila 32px nad črto, ki zaključi
   sekcijo (rob Svetovanja) – dve vzporedni črti brez vsebine med njima
   so bile videti kot podvojena obroba. Svetovanje ima svojo zaključno
   črto, zato tu ni treba še ene. */
.svc__group:last-child .svc__row:last-child { border-bottom: none; }
/* Vrstica je gumb: klik pripelje fotografijo te storitve in seznam
   zapelje tako, da izbrana vrstica pristane na bralni črti. Gumb nosi
   odmik, da je tarča cela vrstica in ne samo besedilo. */
.svc__btn {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; text-align: left;
  /* Vrstice so namenoma visoke: pri 60 px se fotografija ob normalnem
     drsenju menja vsakih ~0,3 s, kar bere kot utripanje, ne kot ponudba. */
  padding: clamp(1.5rem, 2.4vw, 1.9rem) .2rem;
  color: inherit;
}
.svc__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  line-height: 1.2; letter-spacing: -.01em;
}
/* Nedejavne vrstice se umaknejo, da je razvidno, čigava je fotografija.
   Ne pod .55: imena storitev so vsebina in iskane besede, ne okras. */
.svc__row:not(.is-active) { opacity: .55; }
.svc__row.is-active { color: var(--terracotta-d); }
.svc__mark {
  flex: none; width: 26px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.svc__row.is-active .svc__mark { transform: scaleX(1); }

.svc__intro { margin-top: 1.1rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }

/* Statične oznake, ne .chip: chip je filter, ki se da klikniti, tole pa
   je samo seznam. Brez hover učinka in brez 44px tarče, da ju obiskovalec
   ne zamenja. */
.tags {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; margin-top: .7rem;
}
.tag {
  padding: .34rem .75rem; border-radius: 999px;
  font-size: .84rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--rust-deep);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tag--more {
  background: none; color: var(--ink-soft);
  box-shadow: none; font-weight: 400; font-style: italic;
}

/* Zaključek sekcije: črta, ne še ena uokvirjena ploščica.
   Stoji zunaj `.svc`, ne znotraj njega: lepljivi element se ustavi na
   koncu svojega vsebovalnika, zato mora biti Svetovanje njegov sosed in
   ne otrok, sicer bi fotografija lezla naprej vanj. Na dveh stolpcih to
   hkrati pomeni, da Svetovanje teče čez celo mero, ne le ob seznamu. */
.svc__close {
  display: grid; gap: 1rem clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) { .svc__close { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.svc__close-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.25rem; line-height: 1.25; color: var(--rust-deep);
}
.svc__close-text {
  margin-top: .45rem; max-width: 36rem;
  font-size: .95rem; line-height: 1.65; color: var(--ink-soft);
}
.svc__cta { margin-top: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .svc__layer, .svc__mark { transition: none; }
}

/* ---------- Preobrazbe: posnetki + zamenjava prej/potem ----------
   Drsnik z ročajem je odpadel. Namesto njega leži fotografija "potem"
   čez fotografijo "prej" in se prelije ob prehodu miške; na dotik isto
   naredi pritisk na ploščico (gumb prevzame `aria-pressed`).
   Posnetki so glavni: tečejo sami, brez zvoka, v isti navpični obliki
   kot so bili posneti (9:16), zato okoli njih ni črnih pasov. */
.ba { margin: 0; }

.ba__stage {
  position: relative; overflow: hidden;
  display: block; width: 100%; padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 9 / 16;
  background: var(--cream);
  isolation: isolate;
  transition: box-shadow .4s var(--ease-out), transform .45s var(--ease-out);
}
.ba__stage--swap { cursor: pointer; text-align: left; }
.ba__stage--swap:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Obe fotografiji ležita natanko druga na drugi, zato se ob prelivu nič
   ne premakne. Izrez je nekoliko nad sredino, ker so to portreti in je
   zanimiv del (lasje) v zgornji polovici. */
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.ba__img--b {
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
/* `.is-peek` je samodejni namig ob prihodu na zaslon – nastavi natanko
   isto stanje kot miška ali dotik, da namig pokaže resnično interakcijo
   in ne kake svoje animacije. */
.ba__stage--swap:hover .ba__img--b,
.ba__stage--swap:focus-visible .ba__img--b,
.ba__stage--swap.is-peek .ba__img--b,
.ba__stage--swap[aria-pressed="true"] .ba__img--b { opacity: 1; }

/* Ena sama značka, ki zamenja napis – dve nasprotni znački sta prej
   samo povedali, kar je bilo tako ali tako očitno iz slike. */
.ba__tag {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2;
  display: grid;
  padding: .34rem .85rem; border-radius: 999px;
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .92); color: var(--rust-deep);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ba__tag i {
  grid-area: 1 / 1; font-style: normal;
  transition: opacity .35s var(--ease-out);
}
.ba__tag-b { opacity: 0; }
.ba__stage--swap:hover .ba__tag-a,
.ba__stage--swap:focus-visible .ba__tag-a,
.ba__stage--swap.is-peek .ba__tag-a,
.ba__stage--swap[aria-pressed="true"] .ba__tag-a { opacity: 0; }
.ba__stage--swap:hover .ba__tag-b,
.ba__stage--swap:focus-visible .ba__tag-b,
.ba__stage--swap.is-peek .ba__tag-b,
.ba__stage--swap[aria-pressed="true"] .ba__tag-b { opacity: 1; }

/* Napis pod ploščico je zdaj dvodelen: ime storitve nosi naslovna
   pisava, opis pa drobnejša sivkasta vrstica pod njim. Prej je bila to
   ena dolga siva poved, ki se je brala kot opomba, ne kot podnapis. */
.ba__cap { margin-top: .95rem; }
.ba__cap strong {
  display: block; margin-bottom: .2rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.25; color: var(--rust-deep);
}
.ba__cap {
  font-size: .85rem; line-height: 1.5; color: var(--ink-soft);
}

/* ---- Posnetki ---- */
.ba__stage--video { background: var(--rust-deep); }
.ba__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* Gumb za ustavitev posnetka. Samodejno predvajanje brez možnosti
   ustavitve je dostopnostna napaka, hkrati pa native `controls` čez
   ploščico, ki teče v zanki, izgleda kot pomota. */
.ba__play {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--rust-deep);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: background-color .25s, transform .3s var(--ease-out), opacity .3s;
}
.ba__play:hover { background: #fff; transform: scale(1.06); }
.ba__play svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: currentColor; }
.ba__play-go { opacity: 0; }
.ba__stage--video.is-paused .ba__play-pause { opacity: 0; }
.ba__stage--video.is-paused .ba__play-go { opacity: 1; }

/* Skrite ploščice pred klikom na „Prikaži več". Ne uporabimo [hidden],
   ker ga `display: grid` na starših v nekaterih brskalnikih povozi. */
.ba.is-hidden { display: none; }

/* ---------- Gallery filter chips ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .55rem 1.05rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--rust-deep);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--terracotta); }
.chip.is-active {
  background: var(--rust-deep); color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--rust-deep);
}

/* "Več storitev": primary row stays at 4 choices (Vse + the three color
   services the salon leads with); the rest sit one tap away instead of
   flattening all 9 filters into one row. */
.chips__toggle {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  padding: .55rem 1.05rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--rust);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.chips__toggle:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--terracotta); color: var(--rust-deep); }
.chips__toggle[aria-expanded="true"] {
  background: var(--rust-deep); color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--rust-deep);
}
.chips__toggle-icon {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s var(--ease-out);
}
.chips__toggle[aria-expanded="true"] .chips__toggle-icon { transform: rotate(-135deg) translate(-1px, -1px); }

.chips-more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.chips-more.is-open { grid-template-rows: 1fr; }
.chips-more__inner {
  overflow: hidden;
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.gallery__item[hidden] { display: none; }
.gallery__empty { text-align: center; color: var(--ink-soft); padding: 2rem 0; }

/* ---------- Gallery "show more" ----------
   Collapsed, the grid is clipped to a row count and the last visible row
   fades into the page background, so it reads as "there is more" rather
   than as an abrupt cut. The fade sits on the grid wrapper (not on the
   tiles) so it never intercepts clicks. */
.gallery-wrap { position: relative; }
.gallery-wrap.is-collapsed { overflow: hidden; }
.gallery-wrap.is-collapsed::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 190px;
  background: linear-gradient(to bottom, transparent, var(--white) 82%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(to bottom, transparent, var(--white) 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--white) 55%);
  pointer-events: none;
}
/* Sections with a tinted background need the fade to match that surface. */
.section--ivory .gallery-wrap.is-collapsed::after { background: linear-gradient(to bottom, transparent, var(--ivory) 82%); }
.section--cream .gallery-wrap.is-collapsed::after { background: linear-gradient(to bottom, transparent, var(--cream) 82%); }

.gallery__more { display: flex; justify-content: center; margin-top: 1.5rem; }
.gallery__more[hidden] { display: none; }
.ico--chev { transition: transform .35s var(--ease-out); }
.gallery__more.is-expanded .ico--chev { transform: rotate(180deg); }

/* ---------- Gallery – masonry ----------
   Vse izvorne fotografije so kvadratne (740x740), zato prave masonry
   višine iz njih ni mogoče dobiti "same od sebe". Ploščicam zato v
   ponavljajočem se vzorcu dodelimo rahlo različna razmerja (vsa
   pokončna, da izrez jemlje ob straneh in ne odreže las), JS pa iz
   izmerjene višine izračuna, čez koliko vrstic naj se ploščica razteza.
   Vrstična reža je 0 – razmik naredi `padding-bottom`, sicer bi se
   reža prištela k vsaki od desetin prekoračenih vrstic. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
  column-gap: .9rem;
  row-gap: 0;
  /* Ključno za merjenje: brez tega raster ploščico raztegne na višino
     vrstice (8px) in JS izmeri 8px namesto prave višine slike. */
  align-items: start;
}
.gallery__item { padding-bottom: .9rem; }

/* Pod 210px minmax pade raster na en sam stolpec, kar na telefonu pomeni
   veliko scrollanja za malo slik. Dva stolpca ohranita galerijo kompaktno. */
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); column-gap: .6rem; }
  .gallery__item { padding-bottom: .6rem; }
}
.gallery__item:nth-child(7n+1) { --ar: 1; }
.gallery__item:nth-child(7n+2) { --ar: 1.26; }
.gallery__item:nth-child(7n+3) { --ar: 1.1; }
.gallery__item:nth-child(7n+4) { --ar: 1; }
.gallery__item:nth-child(7n+5) { --ar: 1.3; }
.gallery__item:nth-child(7n+6) { --ar: 1.14; }
.gallery__item:nth-child(7n+7) { --ar: 1.2; }

.gallery__btn {
  position: relative; display: block; width: 100%; padding: 0;
  overflow: hidden; border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.gallery__btn img {
  width: 100%; aspect-ratio: 1 / var(--ar, 1); object-fit: cover;
  transition: transform .7s var(--ease-out), filter .4s;
}
.gallery__btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--tint), .55), transparent 55%);
  opacity: 0; transition: opacity .4s;
}
.gallery__zoom {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  transform: scale(.6); opacity: 0;
  transition: transform .4s var(--ease-out), opacity .35s;
}
.gallery__zoom::before,
.gallery__zoom::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--rust);
  transform: translate(-50%, -50%); border-radius: 2px;
}
.gallery__zoom::before { width: 14px; height: 2px; }
.gallery__zoom::after { width: 2px; height: 14px; }

.gallery__btn:hover, .gallery__btn:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.gallery__btn:hover img, .gallery__btn:focus-visible img { transform: scale(1.09); }
.gallery__btn:hover::after, .gallery__btn:focus-visible::after { opacity: 1; }
.gallery__btn:hover .gallery__zoom, .gallery__btn:focus-visible .gallery__zoom { transform: scale(1); opacity: 1; }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: .7rem; }
.acc {
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: box-shadow .35s, background-color .35s;
}
.acc.is-open { box-shadow: var(--shadow-md); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.15rem 1.35rem;
  text-align: left; font-size: 1.02rem; font-weight: 500;
  font-family: var(--font-body); color: var(--rust-deep);
  transition: color .25s;
}
.acc__btn:hover { color: var(--terracotta-d); }
.acc__icon {
  position: relative; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream);
  transition: background-color .35s, transform .45s var(--ease-out);
}
.acc__icon::before, .acc__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--rust); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.acc__icon::before { width: 12px; height: 2px; }
.acc__icon::after { width: 2px; height: 12px; }
.acc.is-open .acc__icon { background: var(--terracotta); transform: rotate(180deg); }
.acc.is-open .acc__icon::before { background: var(--white); }
.acc.is-open .acc__icon::after { opacity: 0; }

.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding: 0 1.35rem 1.3rem;
  color: var(--ink-soft); font-size: .96rem;
}

/* ---------- Contact ---------- */
.contact {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  /* Stolpci so različno dolgi (naslov + zemljevid, tabela, obrazec).
     Brez tega bi jih raster raztegnil na enako višino in vsebina bi
     v krajšem stolpcu obvisela sredi praznine. */
  align-items: start;
}
@media (min-width: 780px) { .contact { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .contact { grid-template-columns: 1.1fr .8fr 1.1fr; } }

.contact__h {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  color: var(--rust-deep); margin-bottom: 1.15rem;
}
.contact__intro { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.25rem; }

.info { display: grid; gap: 1.15rem; }
.info li { display: flex; gap: .9rem; align-items: flex-start; font-size: .97rem; line-height: 1.6; }
.info__ico {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--cream); color: var(--rust);
}
.info__ico svg { width: 20px; height: 20px; fill: currentColor; }
.info strong { color: var(--rust-deep); }

.socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.social {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500; text-decoration: none;
  color: var(--rust-deep);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .3s, color .3s, transform .35s var(--ease-out), box-shadow .3s;
}
.social svg { width: 17px; height: 17px; fill: currentColor; }
.social:hover {
  background: var(--terracotta); color: var(--white);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1.5px var(--terracotta), var(--shadow-sm);
}

.hours { width: 100%; border-collapse: collapse; font-size: .96rem; }
.hours th, .hours td { padding: .72rem .2rem; text-align: left; font-weight: 400; }
.hours th { color: var(--ink); font-weight: 500; }
.hours td { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours tr + tr { border-top: 1px solid var(--line); }
.hours--closed th, .hours--closed td { color: var(--ink-soft); opacity: .7; }
.hours tr.is-today {
  background: var(--cream);
  box-shadow: -10px 0 0 var(--cream), 10px 0 0 var(--cream);
  border-radius: 6px;
}
.hours tr.is-today th { color: var(--rust-deep); font-weight: 700; }
.hours tr.is-today td { color: var(--rust-deep); font-weight: 500; }
.hours__note { margin-top: 1rem; font-size: .85rem; color: var(--ink-soft); }
/* Naročanje je pomembnejše od same tabele, zato stoji nad njo in v okvirju. */
.hours__lead {
  margin: 0 0 1.1rem;
  padding: .8rem .95rem;
  border-radius: 10px;
  background: rgba(var(--tint), .08);
  font-size: .92rem; color: var(--ink);
}
.hours__lead strong { color: var(--rust-deep); }

/* ---------- Form ---------- */
.form { display: grid; gap: .9rem; }
/* Honeypot field: invisible and unreachable for real visitors, unlike
   .sr-only it must stay out of the accessibility tree too, since a
   screen-reader user filling it in would silently break their own submission. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .84rem; font-weight: 500; color: var(--rust-deep); }
.field input, .field textarea {
  width: 100%; padding: .8rem 1rem;
  border: 0; border-radius: 12px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: .95rem; resize: vertical;
  transition: box-shadow .3s, background-color .3s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--terracotta);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  /* Dashed border, not just a color shift – readable without color vision. */
  box-shadow: none;
  border: 2px dashed var(--terracotta-d);
}
.form__status { font-size: .88rem; min-height: 1.4rem; color: var(--rust); }
.form__status.is-error { color: var(--terracotta-d); }

/* ---------- Footer ---------- */
.site-footer { background: var(--rust-deep); color: rgba(255,255,255,.72); padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
}
/* Three columns, not four – the contact and hours columns were removed
   because they repeated the Kontakt section immediately above. */
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }

.brand--footer .brand__name { color: var(--white); }
.brand--footer .brand__sub { color: rgba(255,255,255,.6); }
.footer__tag { margin-top: 1.15rem; font-size: .93rem; max-width: 30rem; line-height: 1.65; }

.footer__h {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--white); margin-bottom: 1rem;
}
.footer__h--tight { margin-top: 1.6rem; margin-bottom: .7rem; }
.site-footer ul { display: grid; gap: .6rem; font-size: .93rem; }
.site-footer a { text-decoration: none; transition: color .25s, transform .25s var(--ease-out); display: inline-block; }
.site-footer a:hover { color: var(--white); transform: translateX(3px); }
.footer__social { display: grid; gap: .55rem; }
.footer__social a { display: inline-flex; align-items: center; gap: .55rem; }
.footer__social svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.footer__bottom {
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .84rem; color: rgba(255,255,255,.55);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: center; justify-content: space-between;
}
/* Single NAP line – kept in the footer because search engines expect the
   business name/address/phone there, even though the detail lives above. */
.footer__nap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.footer__nap strong { color: rgba(255,255,255,.85); font-weight: 500; }
.footer__nap span { opacity: .45; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--white); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(43, 29, 20, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig {
  display: grid; place-items: center; gap: 1rem;
  max-height: 100%; min-width: 0;
}
.lightbox__fig img {
  max-width: 100%; max-height: 78vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.94); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .35s;
}
.lightbox.is-open .lightbox__fig img { transform: scale(1); opacity: 1; }
.lightbox__fig figcaption {
  color: rgba(255,255,255,.85); font-size: .93rem; text-align: center;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 2rem; line-height: 1; color: var(--white);
  background: rgba(255,255,255,.12);
  transition: background-color .3s, transform .3s var(--ease-out);
}
.lightbox__close:hover { background: rgba(255,255,255,.25); transform: rotate(90deg); }
.lightbox__nav {
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 2rem; line-height: 1; color: var(--white);
  background: rgba(255,255,255,.12);
  transition: background-color .3s, transform .3s var(--ease-out);
}
.lightbox__nav:hover { background: rgba(255,255,255,.26); }
.lightbox__nav--prev:hover { transform: translateX(-4px); }
.lightbox__nav--next:hover { transform: translateX(4px); }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__nav { position: static; }
  .lightbox__fig { grid-row: 1; }
  .lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .lightbox__nav--next { grid-column: 1; grid-row: 2; justify-self: end; }
}

body.no-scroll { overflow: hidden; }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: 1rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--line), 0 -12px 30px rgba(var(--tint), .10);
  transform: translateY(105%);
  transition: transform .4s var(--ease-out);
}
.callbar.is-shown { transform: translateY(0); }
.callbar__info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.callbar__info strong { font-size: .9rem; color: var(--rust-deep); font-weight: 500; }
.callbar__status { font-size: .76rem; color: var(--ink-soft); }
.callbar__status.is-open { color: #2E7D4F; }
.callbar__btn { margin-left: auto; flex: none; }

@media (max-width: 860px) {
  .callbar { display: flex; }
  /* keep the footer clear of the bar */
  .footer__bottom { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .callbar { transition: none; }
}

/* ---------- Scroll reveal ----------
   Scoped to .js (set by an inline script in <head>). Without JavaScript the
   elements are never hidden, so the page still renders in full. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__title .word { transform: none !important; animation: none !important; }
  .hero__img,
  .hero__badge,
  .marquee__track,
  .status-pill.is-open .status-pill__dot { animation: none !important; }
  .marquee__track { transform: none !important; }
}

/* =========================================================
   NOVE KOMPONENTE (v11)
   ========================================================= */

/* ---------- "Peek" trak ----------
   Vodoravni trak, kjer je naslednja ploščica vedno na pol vidna –
   ta polovica je edini namig, ki ga obiskovalec potrebuje, da začne
   drseti. Trak teče od roba do roba zaslona, čeprav stoji znotraj
   .wrap: negativni odmik ga razpre na 100vw, notranji odmik pa prvo
   ploščico vrne na isto navpičnico kot naslove nad njo. */
.rail-wrap { position: relative; }
.rail {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: .25rem 1rem;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - var(--wrap) / 2));
  scroll-padding-inline: max(1.25rem, calc(50vw - var(--wrap) / 2));
}
.rail::-webkit-scrollbar { display: none; }
.rail > * {
  flex: 0 0 var(--rail-item, clamp(200px, 62vw, 250px));
  scroll-snap-align: start;
}

.rail__nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.rail__nav[hidden] { display: none; }
.rail__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--rust-deep);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .25s, box-shadow .25s, transform .3s var(--ease-out);
}
.rail__btn svg { width: 20px; height: 20px; fill: currentColor; }
.rail__btn:hover { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--terracotta), var(--shadow-sm); }
.rail__btn[disabled] { opacity: .35; pointer-events: none; }

.ba-rail { --rail-item: clamp(210px, 64vw, 268px); }
.reviews__rail { --rail-item: clamp(255px, 80vw, 340px); }
.reviews__rail[hidden] { display: none; }

/* ---------- Zakaj se stranke vračajo ----------
   Fotografija prostora namesto štirih enakih škatel. Sekcija hkrati
   prevzame vlogo, ki jo je prej imel barvni pas pred nogo. */
.why {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .why { grid-template-columns: .85fr 1.15fr; } }

.why__media { margin: 0; }
.why__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg);
  border-top-left-radius: clamp(60px, 12vw, 150px);
  box-shadow: var(--shadow-md);
}
/* Pod 860px se v <picture> zamenja vir na "wide" fotografijo (glej HTML),
   zato mora tudi razmerje stranic postati vodoravno – sicer se široka
   slika stisne v pokončen okvir in zavzame skoraj cel zaslon. */
@media (max-width: 859px) {
  .why__media img { aspect-ratio: 4 / 3; }
}

/* Uvodna poved se drži naslova povsod, ne le v .section__head. */
.h2 + .lead { margin-top: .85rem; }
.reasons { display: grid; gap: clamp(1.15rem, 2.5vw, 1.7rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.reason { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.1rem; align-items: baseline; }
.reason__num {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  line-height: 1; color: var(--rust-deep); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.reason__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.18rem;
  line-height: 1.3; color: var(--rust-deep); margin-bottom: .3rem;
}
.reason p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- Google ocene ----------
   Povzetek (ocena, število) je edino, kar stoji v HTML-ju. Posamezna
   mnenja pripelje mail/reviews.php; če ključa ni ali klic pade, se
   trak preprosto ne prikaže – nikoli ne izpišemo izmišljenih mnenj. */
.reviews {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.reviews__head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 1.75rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.rating { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .85rem; }
.rating__score {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1;
  color: var(--rust-deep);
}
/* Pet zvezdic je ena maska; delni izpis naredi otrok s širino --fill.
   Maska starša velja tudi za otroka, zato se polnilo obreže po obliki
   zvezdic in ne kot pravokotnik. */
.rating__stars {
  position: relative; display: block;
  width: 6.4em; height: 1.28em; font-size: 1rem;
  background: color-mix(in srgb, var(--ink-soft) 32%, transparent);
  -webkit-mask: var(--stars) left center / contain no-repeat;
          mask: var(--stars) left center / contain no-repeat;
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M10 1.5l2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.2 5.9-.9z'/%3E%3Cpath d='M30 1.5l2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.2 5.9-.9z'/%3E%3Cpath d='M50 1.5l2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.2 5.9-.9z'/%3E%3Cpath d='M70 1.5l2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.2 5.9-.9z'/%3E%3Cpath d='M90 1.5l2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.2 5.9-.9z'/%3E%3C/svg%3E");
}
.rating__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--fill, 100%);
  background: var(--terracotta);
}
.rating__meta { font-size: .95rem; color: var(--ink-soft); }
.rating__meta strong { color: var(--rust-deep); font-weight: 600; }

.review {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.4rem 1.35rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.review__stars { font-size: .8rem; }
.review__text {
  color: var(--ink); font-size: .95rem; line-height: 1.6;
  /* Daljša mnenja obrežemo na šest vrstic, da se ploščice v traku
     ne raztegnejo v stolpce besedila – celo mnenje je na Googlu. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__who {
  margin-top: auto; display: flex; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--ink-soft);
}
.review__who strong { color: var(--rust-deep); font-weight: 500; }
.review__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--cream);
}

/* ---------- Zemljevid ---------- */
.map {
  margin-top: 1.35rem;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   POPRAVKI v12
   ========================================================= */

/* ---------- Vrstica "Sledite nam" pod galerijo ----------
   Prej obarvana ploščica z napisom in dvema gumboma je bila edina
   vsebina v škatli in je med galerijo in vprašanji izpadla kot prazen
   oglasni pas. Mejo zdaj naredi tanka črta (isti vzorec kot pri .stats
   v razdelku O nas), pred napis pa utrinek treh resničnih fotografij
   iz galerije zgoraj – vrstica tako pokaže "sproti", namesto da to
   samo trdi. Instagram je poln gumb (glavni kanal), Facebook obroben. */
.follow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.follow__media { display: flex; flex: none; }
.follow__media img {
  width: 46px; height: 46px; border-radius: 14px; object-fit: cover;
  box-shadow: 0 0 0 3px var(--white);
}
.follow__media img + img { margin-left: -14px; }
.follow__title {
  flex: 1 1 14rem; min-width: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; line-height: 1.35; color: var(--rust-deep);
}
.follow__actions { display: flex; flex-wrap: wrap; gap: .6rem; flex: none; }
.social--fill { background: var(--rust-deep); color: var(--white); box-shadow: none; }
.social--fill:hover { background: var(--terracotta); box-shadow: var(--shadow-sm); }

/* ---------- Gumb pod uvodom v pogosta vprašanja ----------
   Brez tega se je gumb dotikal odstavka nad sabo in je bral, kot da mu
   manjka zgornji odmik. */
.faq__cta { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ---------- Pasica za soglasje (piškotki, GTM/Consent Mode) ----------
   Fiksna pri dnu, nad mobilno callbar, dokler uporabnik ne izbere. */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; justify-content: center;
  padding: 1rem clamp(1rem, 4vw, 2rem) calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .5s var(--ease-out);
}
.consent-banner[hidden] { display: none; }
.consent-banner.is-shown { transform: translateY(0); }
.consent-banner__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  width: 100%; max-width: 900px;
  padding: 1.1rem clamp(1.2rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.consent-banner__text { flex: 1 1 20rem; font-size: .9rem; color: var(--ink-soft); }
.consent-banner__actions { display: flex; gap: .75rem; flex: none; margin-left: auto; }
.consent-banner__btn { padding: .75rem 1.3rem; min-height: 42px; font-size: .88rem; }

@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: none; }
}