/* =========================================================================
   Slog samo za /spletne-strani/. Naloži se le na tej strani (inc/header.php).
   Zgradba je po predlogi, barve, gumbi in tipografija pa iz design.css,
   da podstran ostane vizualno del iste strani.
   Vsa pravila so pod .ss, ker se imena razredov (hero, grid, steps, price,
   contact, faq …) prekrivajo z razredi naslovnice.
   ========================================================================= */

.ss{background:var(--paper)}
/* Enaka širina vsebine kot na naslovnici: tam .section daje stranski rob
   prek --gutter (63 px pri 1440), vsebina je 1193 px v 1320 px škatli.
   Prej je bila tu 1120 px, torej 100 px praznine na vsaki strani. */
.ss-wrap{width:100%;max-width:none;padding-inline:var(--gutter);margin-inline:auto}
.ss-sec{padding:80px 0}
.ss-sec-tesno{padding-top:0}

.ss h1,.ss h2,.ss h3{line-height:1.12;letter-spacing:-.035em;margin:0 0 22px}
.ss h1{font-size:clamp(38px,4.8vw,62px);letter-spacing:-.04em;max-width:16ch}
.ss h2{font-size:clamp(30px,3vw,36px);max-width:22ch}
.ss h3{font-size:24px}
.ss p{margin:0 0 20px}
.ss-eyebrow{text-transform:uppercase;font-size:13px;letter-spacing:.14em;font-weight:700;
  color:#4b6c7c;margin:0 0 20px}
.ss-lead{font-size:18px;color:#253349;max-width:62ch}
.ss-note{font-size:14px;color:var(--muted);margin-top:15px}
.ss-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
.ss-povezava{font-weight:700;color:var(--teal);text-underline-offset:5px}

/* --- naslov strani -------------------------------------------------------
   Ista geometrija kot naslovnica: naslovni del teče čez celo širino škatle,
   besedilo ima le 24 px roba, slika pa gre do roba. Razdelki pod njim
   ostanejo pri --gutter, enako kot na naslovnici. */
.ss-hero{background:linear-gradient(135deg,#eff6f6,#f2f7f9)}
.ss-hero > .ss-wrap{padding:0;width:100%;max-width:none}
.ss-hero-grid{display:grid;grid-template-columns:43.25% 56.75%;
  min-height:402px;align-items:center;gap:0}
.ss-hero-copy{min-width:0;align-self:center;padding:26px 24px 24px}
.ss-drobtine{display:flex;align-items:center;gap:10px;font-size:13px;color:#455569;margin-bottom:22px}
.ss-drobtine a{text-decoration:none}
.ss-drobtine a:hover{text-decoration:underline}
.ss-hero-slika{margin:0;min-width:0;position:relative;overflow:hidden}
/* Stolpec z besedilom je višji od naslovnice (drobtine, dva uvoda, dokazi).
   Slika zato ni raztegnjena čez vso višino — prikaže se v naravnem razmerju,
   navpično na sredini, ozadje razdelka pa teče do roba škatle. Tako je vidna cela
   (pri »cover« se je scena obrezala do neuporabnosti). */
.ss-hero-slika img{width:100%;height:auto;display:block;
  object-fit:cover;object-position:center;background:#f5f7f7}
.ss-hero-slika figcaption{position:absolute;right:0;bottom:0;font-size:12.5px;color:#3f5a6b;
  background:rgba(255,255,255,.88);padding:7px 14px;border-radius:10px 0 0 0}
.ss-hero-slika a{color:var(--teal)}
.ss-proof{display:flex;flex-wrap:wrap;gap:16px 35px;border-top:1px solid #d5e2e6;
  padding-top:24px;margin:42px 0 0;font-size:15px}
.ss-proof div{min-width:0}
.ss-proof dt{font-size:20px;font-weight:700;letter-spacing:-.02em}
.ss-proof dd{margin:0;color:var(--muted)}

/* --- kaj dobite ---------------------------------------------------------- */
.ss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:36px}
.ss-feature{border-top:1px solid #cbdde2;padding-top:22px}
.ss-feature h3{font-size:22px;margin-bottom:12px}
.ss-feature p{color:var(--muted);font-size:16px;margin:0}

/* --- naše delo ----------------------------------------------------------- */
.ss-primer{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;
  background:#e2edf1;color:var(--ink);padding:45px;border-radius:18px}
.ss-primer h2{font-size:clamp(26px,2.6vw,34px);margin:0}
.ss-primer p{color:#2e4960}
.ss-primer > div > p:last-child{margin-bottom:0}

/* --- možnosti sodelovanja ------------------------------------------------ */
.ss-paketi{background:#e2edf1}
.ss-paket-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px;align-items:stretch}
.ss-paket{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:36px;display:flex;flex-direction:column}
.ss-paket-prvi{border-top:6px solid #477884;padding-top:31px}
.ss-paket h3{margin-bottom:12px}
.ss-oznaka{font-size:14px;color:#457681;margin-bottom:15px}
.ss-cena{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-bottom:20px}
.ss-cena small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted)}
.ss-paket ul{padding-left:21px;margin:0 0 24px}
.ss-paket li{margin-bottom:10px}
.ss-paket .button{margin-top:auto;align-self:flex-start}
.ss-vkljuceno{border-top:1px solid var(--line);margin:0 0 24px}
.ss-vkljuceno summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:700;
  color:var(--teal);display:flex;justify-content:space-between;align-items:center;gap:14px}
.ss-vkljuceno summary::-webkit-details-marker{display:none}
.ss-vkljuceno summary::after{content:"+";font-size:20px;line-height:1}
.ss-vkljuceno[open] summary::after{content:"\2013"}
.ss-vkljuceno ul{margin-bottom:14px}
/* Pomožna vrstica pod paketi je ena poved in mora ostati v eni vrstici; pri 760 px
   se je lomila na tri. Ni telo besedila, zato tu berljivostna meja ~70 znakov ne velja. */
.ss-pomoc{margin-top:30px;max-width:none}

/* --- potek --------------------------------------------------------------- */
.ss-koraki{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin:40px 0 0;
  list-style:none;padding:0}
.ss-stevilka{display:block;font-size:15px;font-weight:700;margin-bottom:18px;color:#457681;
  text-transform:uppercase;letter-spacing:.06em}
.ss-koraki-3{grid-template-columns:repeat(3,1fr)}
.ss-koraki h3{font-size:21px;margin-bottom:12px}
.ss-koraki p{font-size:16px;color:var(--muted);margin:0}
.ss-garancija{border-left:5px solid var(--yellow);padding:24px 30px;background:#f4fafb;
  border-radius:0 18px 18px 0;margin-top:35px}
.ss-garancija h3{margin-bottom:10px}
.ss-garancija p{margin:0;color:#2e4960}

/* --- pogosta vprašanja --------------------------------------------------- */
.ss-faq{padding-top:10px}
.ss-faq details{border-bottom:1px solid var(--line);padding:22px 0}
.ss-faq summary{cursor:pointer;font-size:19px;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:18px}
.ss-faq summary::-webkit-details-marker{display:none}
.ss-faq summary::after{content:"+";color:var(--teal);font-size:22px;line-height:1;flex:0 0 auto}
.ss-faq details[open] summary::after{content:"\2013"}
.ss-faq details p{max-width:80ch;margin:16px 0 0;color:var(--muted)}
.ss-faq a{color:var(--teal)}

/* --- stik ---------------------------------------------------------------- */
.ss-stik{background:#e2edf1}
.ss-stik-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ss-stik p{color:#2e4960;max-width:52ch}
.ss-tel{font-size:15px}
.ss-tel a{font-weight:700;color:var(--teal)}
.ss-obrazec{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px}
.ss-obrazec .ln-form p{margin:0 0 14px;max-width:none}
.ss-obrazec label{display:block;font-weight:650;font-size:15px;color:var(--ink);margin-bottom:6px}
.ss-obrazec input,.ss-obrazec textarea{width:100%;padding:13px 15px;border:1px solid #c6dde2;
  border-radius:12px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
.ss-obrazec input:focus,.ss-obrazec textarea:focus{border-color:var(--teal);
  outline:2px solid #bfe0e6;outline-offset:1px}
.ss-obrazec textarea{min-height:130px}
.ss-obrazec .button{width:100%;background:var(--yellow);color:var(--ink)}
.ss-obrazec .button:hover{background:var(--yellow-hover)}
.ss-obrazec .ln-hp{position:absolute;left:-9999px}
.ss-obrazec .ln-ok{background:#f4fafb;border:1px solid var(--teal);color:#1b5f6d;
  padding:20px;border-radius:12px}
.ss-obrazec .ln-err{background:#fdeceb;border:1px solid #c0392b;color:#7a1f16;
  padding:18px;border-radius:12px;margin-bottom:16px}
.ss-obrazec .ln-err ul{margin:0;padding-left:1.1em}

@media(max-width:900px){
  .ss-hero > .ss-wrap{padding-inline:var(--gutter)}
  .ss-hero-grid{grid-template-columns:1fr;gap:26px;min-height:0;
    margin-inline:calc(var(--gutter) * -1)}
  .ss-hero-copy{padding:26px var(--gutter) 0}
  .ss-hero-slika{order:2}
  .ss-hero-slika img{min-height:0;height:auto}
  .ss-hero-slika figcaption{position:static;background:none;padding:10px var(--gutter) 0;
    text-align:left;border-radius:0}
  .ss-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .ss-primer{grid-template-columns:1fr;gap:16px;padding:30px}
  .ss-koraki{grid-template-columns:1fr 1fr}
  .ss-stik-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
  .ss-wrap{padding-inline:var(--gutter)}
  .ss-sec{padding:52px 0}
  .ss-hero{padding:0 0 30px}
  .ss-paket-grid,.ss-koraki{grid-template-columns:1fr}
  .ss-paket{padding:27px}
  .ss-paket-prvi{padding-top:22px}
  .ss-koraki{gap:20px}
  .ss-stevilka{margin-bottom:8px}
  .ss-garancija{padding:20px 22px}
  .ss-obrazec{padding:22px}
}

/* Pravilo strani: vrstica s tremi karticami na mobilnem drsi vodoravno.
   Ta datoteka se naloži za pages.css, zato je pravilo tu ponovljeno. */
@media(max-width:560px){
  .ss-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);position:relative;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ss-grid::-webkit-scrollbar{display:none}
  .ss-grid > *{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gutter);position:relative}
}

/* Povezave na bledo modrih ploščah (#e2edf1): --teal tam da razmerje 4,28,
   AA pa zahteva 4,5. Izmerjeno; #1c6c7c da 5,05. */
.ss-primer a,
.ss-tel a{color:#1c6c7c}
.ss-obrazec .ln-zadeva{background:#f4fafb;border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin:0 0 18px;font-size:15px;color:#3d5568}
.ss-obrazec .ln-zadeva strong{color:var(--ink)}
.ss-obrazec .ln-zadeva span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}

/* trije posnetki referenčnih trgovin */
.ss-trgovine{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.ss-trgovine a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper);text-decoration:none;color:var(--ink);transition:.18s ease}
.ss-trgovine a:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,51,69,.12);border-color:#bcd9de}
.ss-trgovine img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.ss-trgovine span{display:block;padding:14px 18px;font-weight:700;font-size:16px}
@media(max-width:900px){.ss-trgovine{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .ss-trgovine{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);position:relative;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ss-trgovine::-webkit-scrollbar{display:none}
  .ss-trgovine > *{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gutter);position:relative}
}

/* povezava na članek pod kartico »zakaj se splača« — naslov ostane trditev,
   povezava je ponudba, ne past sredi prodajnega besedila */
.ss-vec{margin:12px 0 0!important}
.ss-vec a{font-size:15px;font-weight:700;color:var(--teal);text-decoration:none;
  text-underline-offset:4px}
.ss-vec a:hover{text-decoration:underline}
.ss-feature p:not(.ss-vec){margin-bottom:0}

/* --- pogosta vprašanja: naslov levo, odgovori desno ----------------------
   Prej je naslov vprašanja tekel čez celo širino, odgovor pa se je prelomil
   na polovici — razlika je izgledala kot napaka. Zdaj imata oba isto širino. */
.ss-faq-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:56px;align-items:start}
.ss-faq-glava{position:sticky;top:96px}
.ss-faq-glava h2{margin-bottom:16px}
.ss-faq-glava p{color:var(--muted);max-width:36ch}
.ss-faq-layout .ss-faq{padding-top:0}
.ss-faq details p{max-width:none}
.ss-faq details p + p{margin-top:14px}
@media(max-width:900px){
  .ss-faq-layout{grid-template-columns:1fr;gap:22px}
  .ss-faq-glava{position:static}
  .ss-faq-glava p{max-width:none}
}

/* --- naslovni del: skrajšan, da so dokazi vidni pod besedilom -------------
   Naslovni del je bil 936 px visok (naslovnica ima 465), zato je slika lebdela
   sredi praznine, vrstica z dokazi pa je padla globoko pod pregib.
   Naslov je manjši, gumba gresta v isto vrstico, dokazi v eno vrsto. */
@media(min-width:901px){
  .ss-hero-grid{grid-template-columns:46% 54%}
  .ss-hero-copy{padding:22px 24px 22px}
  .ss-hero-copy h1{font-size:clamp(34px,3.1vw,44px);margin-bottom:16px;max-width:18ch}
  .ss-drobtine{margin-bottom:16px}
  .ss-hero-copy .ss-eyebrow{margin-bottom:12px}
  .ss-hero-copy .ss-lead{font-size:17px;margin-bottom:12px;max-width:none}
  .ss-hero-copy .ss-actions{margin:20px 0 0;flex-wrap:nowrap}
  .ss-hero-copy .ss-actions .button{white-space:nowrap}
  .ss-proof{margin-top:24px;padding-top:18px;flex-wrap:nowrap;gap:0 26px}
  .ss-proof div{flex:1 1 0}
  .ss-proof dt{font-size:17px}
  .ss-proof dd{font-size:13.5px;line-height:1.35}
}

/* --- /kontakt/ ------------------------------------------------------------
   Kontakt uporablja isti nabor razredov kot podstrani storitev. Razlika je
   naslovni pas brez slike (ss-hero-plosca): tam .ss-hero > .ss-wrap nima roba,
   ker slika teče do roba škatle — tu ga vrnemo. */
.ss-hero-plosca > .ss-wrap{padding:56px var(--gutter) 60px}
.ss-hero-plosca h1{font-size:clamp(34px,3.6vw,50px);max-width:20ch}
.ss-hero-plosca .ss-lead{max-width:66ch}
.ss-hero-plosca .ss-lead a{color:#1c6c7c;font-weight:650}
.ss-hero-plosca .ss-actions{margin-bottom:0}
.ss-hero-plosca .ss-proof{margin-top:34px}
.ss-hero-plosca .ss-proof div{flex:1 1 200px}

/* podatki podjetja ob obrazcu: oznaka in vrednost v dveh stolpcih */
.ss-podatki{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid #cbdde2}
.ss-podatki li{display:grid;grid-template-columns:9.5rem 1fr;gap:6px 18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid #cbdde2}
.ss-podatki span{font-size:14px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:#4b6c7c}
.ss-podatki a,.ss-podatki strong{font-size:18px;font-weight:700;letter-spacing:-.02em}
.ss-podatki a{color:#1c6c7c;text-underline-offset:4px}

@media(max-width:760px){
  .ss-hero-plosca > .ss-wrap{padding:36px var(--gutter) 40px}
  .ss-podatki li{grid-template-columns:1fr;gap:2px;padding:12px 0}
}

/* --- trije cenovni stolpci (Limonet CRM, ceniki) --------------------------
   .ss-paket-grid je privzeto dvostolpčen. Kjer so paketi trije, jih razporedi
   v tri stolpce; pod 980 px gredo v en stolpec, ker bi trije stisnjeni stolpci
   z 36 px notranjega roba pustili premalo prostora za besedilo. */
.ss-paket-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.ss-paket-grid-3{grid-template-columns:1fr}}

/* --- ceniki ---------------------------------------------------------------
   Cenik uporablja isti nabor razredov kot podstrani storitev. Dodano je le,
   česar tam ni bilo: navadni seznami v besedilu (pod .ss ni splošnega sloga
   za <ul>, ker so bili do zdaj vsi seznami znotraj kartic) in zaključni poziv. */
.ss-seznam{padding-left:21px;margin:0 0 20px;max-width:70ch}
.ss-seznam li{margin-bottom:10px;color:var(--muted)}
.ss-seznam li strong{color:var(--ink)}
.ss-seznam a{color:var(--teal)}

.ss-cta{background:#e2edf1;border-radius:18px;padding:45px}
.ss-cta h2{margin-bottom:14px}
.ss-cta p{color:#2e4960;max-width:62ch}
.ss-cta .ss-actions{margin:26px 0 0}
.ss-cta .button-outline{background:var(--paper)}
@media(max-width:760px){.ss-cta{padding:28px}}

/* Opozorilo o prikazanem izseku cenika (?prikaz=najem|nakup). */
.ss-filter{background:#fdf8d8;border:1px solid #e6d780;border-radius:14px;
  padding:16px 20px;margin:0 0 30px;font-size:15px;color:#4a4423;max-width:none}
.ss-filter a{color:#1c6c7c;font-weight:700}

/* Povezave v seznamu na bledo modri plošči (#e2edf1): --teal da razmerje 4,28,
   AA pa zahteva 4,5 — izmerjeno z Lighthouse. Pravilo .ss-primer a tega ne pokrije,
   ker .ss-seznam a stoji za njim; zato višja specifičnost, ne vrstni red. */
.ss-primer .ss-seznam a{color:#1c6c7c}

/* =========================================================================
   PRAVNI DOKUMENTI — /splosni-pogoji/, /pogoji-narocnine/, /zasebnost/
   To niso prodajne strani. Brez kartic, brez pozivov, brez dokazov v
   naslovnem pasu: samo naslov in eno berljivo besedilo. Širina je omejena na
   ~72 znakov — pri daljših vrsticah oko izgublja začetek naslednje.
   ========================================================================= */
.ss-hero-dok > .ss-wrap{padding:44px var(--gutter) 46px}
.ss-hero-dok h1{font-size:clamp(30px,3.2vw,44px);max-width:24ch}
.ss-hero-dok .ss-lead{max-width:74ch;margin-bottom:0}
/* .ss p (0,2,0) premaga en sam razred, zato je tu potreben .ss p pred razredom —
   sicer se zgornji rob ne uveljavi in vrstica se prilepi na uvod. */
.ss p.ss-veljavnost{font-size:14px;color:#4b6c7c;margin:26px 0 0}

/* Levo poravnano, ne sredinsko: naslov v pasu nad besedilom je levo,
   sredinski stolpec bi se od njega vidno odlepil. */
.ss-dok{max-width:72ch}
.ss-dok h2{font-size:clamp(22px,2.1vw,27px);max-width:none;
  margin:0 0 16px;padding-top:34px;border-top:1px solid var(--line)}
.ss-dok > h2:first-child{padding-top:0;border-top:0}
.ss-dok h2 + p{margin-top:0}
.ss-dok h3{font-size:19px;margin:26px 0 10px}
.ss-dok p{color:#2b3f4d;line-height:1.72;margin:0 0 34px}
.ss-dok p + p{margin-top:-18px}
.ss-dok ul,.ss-dok ol{padding-left:22px;margin:0 0 34px}
.ss-dok li{margin-bottom:9px;color:#2b3f4d;line-height:1.7}
.ss-dok li:last-child{margin-bottom:0}
.ss-dok strong{color:var(--ink)}
.ss-dok a{color:var(--teal)}
.ss-dok code{background:var(--tint);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:14px}
.ss-dok em{color:var(--muted);font-style:normal;font-size:14px}
/* Zadnja vrstica (»Zadnja posodobitev …«) stoji ločeno, kot podpis pod dokumentom. */
.ss-dok-podpis{border-top:1px solid var(--line);padding-top:20px;margin-top:8px;
  font-size:14px;color:var(--muted)}
@media(max-width:760px){
  .ss-hero-dok > .ss-wrap{padding:32px var(--gutter) 34px}
  .ss-dok p,.ss-dok ul,.ss-dok ol{margin-bottom:26px}
  .ss-dok p + p{margin-top:-12px}
  .ss-dok h2{padding-top:26px}
}

/* =========================================================================
   REFERENCE — mreža posnetkov s tiho povezavo, en gumb na razdelek
   ========================================================================= */
.ss-ref{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
/* position:relative je nujen: .sr-only v kartici je absolutno pozicioniran in bi
   brez pozicioniranega prednika ušel iz vodoravnega drsnika ter raztegnil dokument
   (pri 390 px na 2717 px). Isti razlog ima position:relative pri .ss-grid > *. */
.ss-ref article{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--paper);transition:.18s ease}
.ss-ref article:hover{transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(11,51,69,.12);border-color:#bcd9de}
.ss-ref img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.ss-ref-telo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.ss-ref h3{font-size:19px;margin:0 0 8px}
.ss-ref h3 a{color:var(--ink);text-decoration:none}
.ss-ref h3 a:hover{color:var(--teal);text-decoration:underline}
.ss-ref p{font-size:15px;color:var(--muted);margin:0 0 16px}
.ss-ref .ss-vec{margin-top:auto!important}
.ss-trak{display:flex;flex-wrap:wrap;gap:8px 10px;margin:28px 0 0}
.ss-trak a{font-size:14px;font-weight:650;text-decoration:none;color:#1c6c7c;
  border:1px solid var(--line);background:var(--tint);border-radius:999px;padding:7px 15px}
.ss-trak a:hover{border-color:var(--teal);background:var(--paper)}
@media(max-width:900px){.ss-ref{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .ss-ref{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ss-ref::-webkit-scrollbar{display:none}
  .ss-ref > *{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gutter);position:relative}
}

/* =========================================================================
   OSEBA — fotografija in predstavitev na /o-nas/
   ========================================================================= */
.ss-oseba{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start;
  background:#e2edf1;border-radius:18px;padding:36px;margin-top:34px}
.ss-oseba img{width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;
  border:4px solid var(--paper)}
.ss-oseba h3{margin:0 0 4px}
.ss-oseba p{color:#2e4960;margin:0 0 14px}
.ss-oseba p:last-child{margin-bottom:0}
/* #457681 da na plošči #e2edf1 razmerje 4,23 (AA zahteva 4,5) — izmerjeno z
   Lighthouse. #1c6c7c da 5,05, enako kot povezave na istih ploščah. */
.ss-oseba-vloga{font-size:15px;color:#1c6c7c!important;margin-bottom:16px!important}
.ss-oseba a{color:#1c6c7c;font-weight:650}
@media(max-width:760px){
  .ss-oseba{grid-template-columns:1fr;gap:20px;padding:26px;justify-items:start}
  .ss-oseba img{width:132px;height:132px}
}

/* --- EKIPA: tri osebe v vrsti ------------------------------------------
   Kartica .ss-oseba je narejena za eno osebo čez vso širino (200 px slika
   levo, besedilo desno). V tretjini širine za dva stolpca ni prostora, zato
   se v .ss-ekipa prezloži v stolpec in se sredini. Specifičnost (0,2,0)
   povozi tudi pravila v @media(max-width:760px), ki so (0,1,0).
   Za mrežo velja pravilo strani: tri kartice na <=560 px drsijo vodoravno. */
.ss-ekipa{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.ss-ekipa .ss-oseba{grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:18px;padding:30px 24px;margin-top:0}
.ss-ekipa .ss-oseba img{width:132px;height:132px}
.ss-ekipa .ss-oseba h3{font-size:21px;margin:0 0 4px}
.ss-ekipa .ss-oseba p{margin:0}
/* .ss-oseba-vloga nosi margin-bottom:16px!important, zato je tu treba enako orožje. */
.ss-ekipa .ss-oseba-vloga{margin-bottom:0!important}
/* .ss p je (0,1,1) in bi povozil sam razred, zato .ss spredaj — ista past kot pri .cn-mini. */
.ss .ss-ekipa-nota{font-size:15px;color:var(--muted);margin:22px 0 0}
.ss-ekipa-nota a{color:#1c6c7c;font-weight:650}
/* Dva stolpca bi tretjo osebo pustila samo v drugi vrstici, zato ostanejo trije
   tudi na tablici — kartica se le stisne, da slika ne prerase svoje škatle
   (pri 561 px je stolpec širok 159 px). */
@media(max-width:900px){
  .ss-ekipa{gap:16px}
  .ss-ekipa .ss-oseba{padding:24px 14px;gap:14px}
  .ss-ekipa .ss-oseba img{width:104px;height:104px}
  .ss-ekipa .ss-oseba h3{font-size:18px}
  .ss-ekipa .ss-oseba-vloga{font-size:14px}
}
@media(max-width:560px){
  .ss-ekipa{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ss-ekipa::-webkit-scrollbar{display:none}
  .ss-ekipa > *{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gutter);
    position:relative}
}

/* Strani z delujočimi deli (blog, naročilo, zahvale) dobijo nov naslovni pas,
   njihova vsebina pa ostane v ovoju .page, ker je ves njen slog v pages.css
   vezan nanj. Navpični rob .page tu odpade — daje ga že .ss-sec. */
.ss .page{padding-block:0}
.ss .page > h1:first-child{margin-bottom:14px}

/* =========================================================================
   CENIK — naslovni pas z dvema potema (najem proti nakupu)
   Prejšnji pas je bil narejen za sliko, ki je na ceniku nima smisla. Namesto
   nje sta zdaj desno dva stebra s ceno, ker je prav to odločitev, ki jo
   obiskovalec na tej strani sprejema. Predpona cn- = cenik.
   ========================================================================= */
.cn-hero > .ss-wrap{padding:46px var(--gutter) 52px}
.cn-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center}
.cn-hero-copy h1{font-size:clamp(30px,3.4vw,44px);max-width:15ch;margin-bottom:18px}
.cn-akcent{color:var(--teal);display:block}
.cn-hero-copy .ss-lead{max-width:46ch;font-size:17px}
.cn-hero-copy .ss-actions{margin:26px 0 16px}
/* Odstavkom je treba predpono .ss: .ss p ima specifičnost (0,2,0) in bi sicer
   povozil te robove — enako past kot prej pri .ss-veljavnost. */
.ss .cn-mini{font-size:14px;color:var(--muted);margin:0;line-height:1.6}
.cn-mini strong{color:var(--ink)}

/* Škatla z obema potema: ena kartica, znotraj nje dva stolpca z navpično črto. */
.cn-izbor{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 20px 50px rgba(11,51,69,.10)}
.cn-izbor-1{grid-template-columns:1fr;max-width:420px}
.cn-pot{padding:26px 26px 28px;display:flex;flex-direction:column;border-top:5px solid var(--line)}
.cn-pot + .cn-pot{border-left:1px solid var(--line)}
/* Prva pot je poudarjena (rumen rob), druga je enakovredna, a tiha (siv rob).
   Imeni sta nevtralni, ker stebra nista povsod najem/nakup — na ceniku
   optimizacije sta paketa, na ceniku oglaševanja pa kanala. */
.cn-pot-prva{border-top-color:var(--yellow)}
.cn-pot-druga{border-top-color:#9db8c0}
.ss .cn-oznaka{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#4b6c7c;margin:0 0 14px;line-height:1.5}
.ss .cn-cena{font-size:38px;font-weight:700;letter-spacing:-.035em;color:var(--ink);margin:0 0 2px;line-height:1.1}
.cn-cena span{font-size:17px;font-weight:600;letter-spacing:0;color:var(--muted);margin-right:4px}
.ss .cn-enota{font-size:14px;color:var(--muted);margin:0 0 18px}
.cn-kljuke{list-style:none;padding:0;margin:0 0 18px}
.cn-kljuke li{position:relative;padding-left:24px;margin-bottom:11px;font-size:15px;line-height:1.5}
.cn-kljuke li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
.ss .cn-drobno{font-size:13px;color:var(--muted);line-height:1.6;margin:auto 0 18px;
  padding-top:16px;border-top:1px solid var(--line)}
.cn-pot .button{width:100%}

/* Tanek pas z dejstvi pod naslovnim delom. */
.cn-trak{padding:0}
.cn-trak > .ss-wrap{padding-block:20px}
.cn-trak ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px;
  list-style:none;margin:0;padding:22px 0 0;border-top:1px solid #d5e2e6;font-size:14.5px;color:var(--muted)}
.cn-trak li{margin:0}
.cn-trak strong{color:var(--ink)}
.cn-trak li:nth-child(2){text-align:center}
.cn-trak li:nth-child(3){text-align:right}

@media(max-width:1000px){
  .cn-hero-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .cn-hero-copy h1{max-width:20ch}
  .cn-izbor{max-width:none}
}
@media(max-width:640px){
  .cn-izbor{grid-template-columns:1fr}
  /* Zložena drug pod drugega: samo navpična črta odpade. Barve zgornjega roba
     NE povozimo, sicer bi poudarjeni steber (cn-pot-prva) na mobilnem posivel,
     kadar stoji drugi — vrstni red je odslej najdražja možnost prva. */
  .cn-pot + .cn-pot{border-left:0}
  .cn-pot{padding:24px 22px 26px}
  .cn-trak ul{grid-template-columns:1fr;gap:10px}
  .cn-trak li:nth-child(2),.cn-trak li:nth-child(3){text-align:left}
  .cn-hero > .ss-wrap{padding:32px var(--gutter) 36px}
}

/* Naslovi korakov v čarovniku za naročilo. Čarovnik stoji znotraj .ss, zato ga je
   lovil .ss h2{max-width:22ch} — pravilo, ki je prav za besedilne razdelke, tu pa
   je naslov lomilo sredi vrstice nad karticami, ki tečejo čez vso širino. */
.ss .ln-order h2{max-width:none}

/* =========================================================================
   CENIK — primerjava najema in nakupa
   Obiskovalec si račun »27 € krat 60 mesecev« naredi sam, le da v njem pozabi
   na gostovanje, domeno, SSL, e-pošto, posodobitve in varnostne kopije, ki jih
   pri nakupu plača posebej. (Spremembe vsebine niso vključene v nobeni poti.) Zato je izračun raje tu, cel in odkrit, skupaj z
   vrstico, kdaj se splača kaj — tudi kadar odgovor ni v našo korist.
   ========================================================================= */
.cn-primerjava{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:34px}
.cn-primerjava table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.cn-primerjava caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cn-primerjava th,.cn-primerjava td{text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.cn-primerjava thead th{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:#4b6c7c;border-bottom:2px solid #cbdde2;padding-bottom:10px}
.cn-primerjava tbody th{font-weight:650;color:var(--ink);width:34%}
.cn-primerjava td{color:var(--muted)}
.cn-primerjava td strong{color:var(--ink)}
/* Stolpec najema je naša glavna pot — rahlo poudarjen, brez kričanja. */
.cn-primerjava th:nth-child(2),.cn-primerjava td:nth-child(2){background:#f4fafb}
.cn-primerjava tr:last-child th,.cn-primerjava tr:last-child td{border-bottom:0}
.cn-skupaj th,.cn-skupaj td{border-top:2px solid #cbdde2;font-size:16px}
.cn-skupaj td strong{font-size:19px;letter-spacing:-.02em}

.cn-sodba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.cn-sodba > div{background:#f4fafb;border-left:4px solid var(--yellow);
  border-radius:0 14px 14px 0;padding:20px 22px}
.cn-sodba > div:last-child{border-left-color:#9db8c0}
.ss .cn-sodba h3{font-size:17px;margin:0 0 8px}
.ss .cn-sodba p{font-size:15px;color:#2e4960;margin:0;line-height:1.6}
@media(max-width:760px){
  .cn-sodba{grid-template-columns:1fr;gap:14px}
  .cn-primerjava th,.cn-primerjava td{padding:12px 12px}
  .cn-primerjava tbody th{width:38%}
}

/* Kjer cene ni (npr. oglaševanje »na povpraševanje«), je namesto številke
   besedilo — pri 38 px bi bilo predolgo in bi razbilo vrstico. */
.ss .cn-cena-besedilo{font-size:23px;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px}

/* Strani z delujočimi deli (reference, blog, naročilo) imajo vsebino v ovoju .page.
   Naslovi tam morajo ohraniti velikosti iz pages.css — .ss h2 jih sicer poveča na
   36 px in omeji na 22ch, kar razbije besedilne razdelke. Selektor cilja samo
   neposredne otroke .page, da ne povozi naslovov v karticah (npr. .lc-card h2). */
.ss .page > h1{font-size:clamp(30px,2.5vw,38px);max-width:none}
.ss .page > h2{font-size:clamp(23px,1.9vw,28px);max-width:none;margin:38px 0 14px}
.ss .page > h3{font-size:18px;margin:26px 0 6px}

/* Podpis pod uvodom na /o-nas/ — osebna izjava, ne portretna ploščica; obraz je
   v heroju, ekipa pa nižje na strani, zato se ne podvajata po vlogi. */
.ss .ss-podpis{margin:18px 0 0;padding-left:16px;border-left:3px solid var(--yellow);
  font-size:15px;line-height:1.6;color:var(--ink);max-width:46ch}
.ss .ss-podpis strong{font-weight:650}
.ss .ss-podpis span{color:var(--muted)}
/* Pokončna slika v heroju /o-nas/: brez omejitve bi v mreži 1fr 1fr zavzela
   polovico zaslona in potisnila besedilo v stolpec. Omejimo jo in poravnamo desno. */
.ss-hero-slika.ss-hero-portret{max-width:340px;margin-left:auto}
.ss-hero-slika.ss-hero-portret img{border-radius:var(--radius)}
@media(max-width:900px){.ss-hero-slika.ss-hero-portret{max-width:260px;margin:0 auto}}
/* Pokončna slika ne potrebuje polovice zaslona; besedilu pustimo več prostora,
   sicer med stolpcema zeva praznina. Naslov ima privzeto max-width 551 px (11ch),
   kar je bilo odmerjeno za ožji stolpec — tu bi »trgu,« ostal sam v svoji vrstici. */
.ss-hero-grid-portret{grid-template-columns:1fr 340px}
.ss-hero-grid-portret .ss-hero-copy h1{max-width:none}
@media(max-width:900px){.ss-hero-grid-portret{grid-template-columns:1fr}}