@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ==========================================================================
   DJECJA MOZGALICA — vizualni sloj
   Pisano od nule 7.9.2026. iz odobrenog koncepta v6 (izrez6/style.css).

   NACELA
   1. Koncept je specifikacija. Vrijednosti se prepisuju, ne izmisljaju.
   2. Ova datoteka se ucitava ZADNJA. style.css i media_queries.css se ne
      diraju — u njima je 73% strojarije CMS-a, ukljucujuci 80 pravila za
      widget pristupacnosti.
   3. Selektori su oni koje CMS stvarno ispisuje: .seg-* > article.
      print_content.php daje goli <article> bez klase.
   4. Sve sto mijenja raspored zaglavlja zatvoreno je u @media(min-width:801px)
      jer ispod toga radi slicknav (burger) iz originalnog CSS-a.
   5. NIKAD se ne oslanjati na inline stil iz JS-a — sigurnosna politika
      stranice blokira style-src bez unsafe-inline (izmjereno: postavljeno
      166px, izracunato 0px). Sve stanje ide preko klase ili atributa.
   6. .wrapper je display:table pa se siri do najsireg sadrzaja. Elementi
      koji mogu biti siri od prozora dobivaju apsolutnu sirinu vezanu uz
      prozor: min(1220px, calc(100vw - 52px)).
   ========================================================================== */

/* ============================================================ 1. TOKENI */

:root {
  --tinta: #1e2630;
  --tinta-80: rgba(30, 38, 48, 0.8);
  --tinta-60: rgba(30, 38, 48, 0.6);
  --papir: #fbf8f3;
  --bijela: #ffffff;
  --crvena: #c8574f;
  --crvena-tamna: #a8443d;
  --plava: #1f5f9e;
  --plava-tamna: #123a5c;
  --zuta: #ffc93c;
  --menta: #f6e4cf;
  --breskva: #ffcda0;
  --lavanda: #d9d5f4;
  --nebo: #c4e3f2;
  --linija: rgba(30, 38, 48, 0.14);
  --linija-svijetla: rgba(255, 255, 255, 0.16);
  --sjena: 0 18px 50px rgba(30, 38, 48, 0.1);
  --sjena-jaka: 0 26px 70px rgba(30, 38, 48, 0.18);
  --r: 18px;
  --maxw: 1220px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}

/* ====================================================== 2. OSNOVNI SLOG
   style.css redak 32 postavlja Quicksand na popis elemenata. Isti popis,
   ista tezina selektora, kasnija datoteka — pobjedjuje. Mijenja se samo
   obitelj pisma; velicine ostaju CMS-ove osim tamo gdje segment kaze svoje. */

div,
span,
p,
em,
a,
time,
tr,
th,
td,
dt,
dd,
label,
input,
select,
button,
textarea,
option,
iframe,
ul,
li,
font,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-ui);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
body {
  background: var(--papir);
  color: var(--tinta);
}

/* ---------------------------------------------------------------------
   JEDNO PRAVILO ZA PISMO I OZNACAVANJE BOJE
   ---------------------------------------------------------------------
   Uzrok svih razlika u velicini slova: style.css redak 32 postavlja
   `div, span, p, em, a, ... { font-size:18px }`. Zato je span UNUTAR
   naslova ispadao 18px dok je naslov bio 28-42px — izmjereno na svih
   osam glava segmenata.

   Pravilo koje od sada vrijedi svugdje, bez iznimke:

     1. Sve unutar naslova NASLJEDUJE naslov — velicinu, obitelj, tezinu,
        prored, razmak. Nista unutar naslova ne smije imati svoju velicinu.
     2. Boja se oznacava ISKLJUCIVO klasama .crv (crvena) i .plv (plava).
        One mijenjaju SAMO boju i nista drugo.
     3. Na tamnoj podlozi iste klase dobivaju svijetle parnjake.

   Ako negdje treba druga velicina, ne radi se spanom nego vlastitim
   elementom izvan naslova. */

h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-style: normal;
  text-transform: inherit;
}

.crv {
  color: var(--crvena);
}
.plv {
  color: var(--plava);
}
.sek-tamna .crv,
.seg-neurofeedback .crv {
  color: #f0a79c;
}
.sek-tamna .plv,
.seg-neurofeedback .plv {
  color: var(--nebo);
}

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

/* ============================================================ 3. ZRNO
   Koncept .zrno — tekstura preko uvoda i tamne trake. */

.zrno-sloj::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat;
  background-size: 460px 460px;
  opacity: 0.9;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='460'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0.035 0'/></filter><rect width='460' height='460' filter='url(%23n)'/></svg>");
}

/* ========================================================== 4. ZAGLAVLJE
   CMS: main.wrapper > header > a.logo + nav > ul.menu_slick
   Sve ispod 801px ostavljeno originalu i slicknav-u. */

@media only screen and (min-width: 801px) {
  .wrapper > header {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px max(26px, calc((100% - 1220px) / 2));
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(251, 248, 243, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linija);
  }
  .wrapper > header:after {
    content: none;
    display: none;
  }

  .wrapper > header > .logo {
    float: none;
    flex: 0 0 auto;
    display: block;
    line-height: 0;
    margin: 0;
  }
  .wrapper > header > .logo img {
    max-height: none;
    height: 62px;
    width: auto;
    display: block;
  }

  .wrapper > header > nav {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
  }

  /* --- prva razina --- */
  .wrapper > header nav ul.menu_slick {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
  }
  .wrapper > header nav ul.menu_slick > li {
    float: none;
    margin: 0;
    position: relative;
  }
  .wrapper > header nav ul.menu_slick > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    color: var(--tinta);
    background: transparent;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .wrapper > header nav ul.menu_slick > li > a:hover,
  .wrapper > header nav ul.menu_slick > li:hover > a {
    font-size: 14.5px;
    color: var(--tinta);
    background: rgba(30, 38, 48, 0.06);
  }
  .wrapper > header nav ul.menu_slick > li > a.active {
    font-size: 14.5px;
    color: var(--tinta);
    font-weight: 600;
    background: var(--zuta);
  }
  .wrapper > header nav .fa-caret-down {
    font-size: 11px;
    opacity: 0.5;
    margin-left: 4px;
  }
  .wrapper > header nav .menu_icon_style {
    height: 18px;
    width: auto;
    vertical-align: -3px;
    margin-right: 6px;
  }

  /* --- padajuci panel --- */
  .wrapper > header nav ul.menu_slick > li > ul.submenu {
    width: auto;
    min-width: 330px;
    max-width: 380px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: var(--bijela);
    border: 1px solid var(--linija);
    border-radius: 16px;
    box-shadow: var(--sjena-jaka);
    padding: 20px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 950;
  }
  .wrapper > header nav ul.menu_slick > li:hover > ul.submenu,
  .wrapper > header nav ul.menu_slick > li:focus-within > ul.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* zadnje stavke otvaraju ulijevo da ne izadju iz ekrana */
  .wrapper > header nav ul.menu_slick > li:nth-last-child(-n + 4) > ul.submenu {
    left: auto;
    right: 0;
  }

  .wrapper > header nav ul.menu_slick ul.submenu li {
    width: auto;
    float: none;
    display: block;
    border: 0;
    margin: 0;
    position: relative;
  }
  .wrapper > header nav ul.menu_slick ul.submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    color: var(--tinta);
    background: transparent;
  }
  .wrapper > header nav ul.menu_slick ul.submenu a:hover {
    font-size: 14.5px;
    background: rgba(30, 38, 48, 0.05);
    color: var(--tinta);
  }
  .wrapper > header nav ul.menu_slick ul.submenu a.selected {
    color: var(--crvena);
  }
  /* podnaslov stavke: koncept .panel .osoba span */
  .wrapper > header nav ul.menu_slick ul.submenu a span {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--tinta-60);
    margin-top: 2px;
  }

  /* treca razina: uvucena lista, ne bocni iskok */
  .wrapper > header nav ul.menu_slick ul.submenu ul,
  .wrapper > header nav ul.menu_slick > li:hover ul.submenu li ul {
    position: static;
    width: auto;
    top: auto;
    left: auto;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--linija);
    border-radius: 0;
    list-style: none;
    margin: 2px 0 6px;
    padding: 0 0 0 12px;
  }
  .wrapper > header nav ul.menu_slick ul.submenu ul a {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 400;
    padding: 6px 10px;
    color: var(--tinta-60);
  }
  .wrapper > header nav ul.menu_slick ul.submenu ul a:hover {
    font-size: 12.5px;
    color: var(--crvena);
  }

  /* zadnja stavka izbornika kao gumb (koncept .nav-cta) */
  .wrapper > header nav ul.menu_slick > li:last-child > a {
    background: var(--bijela);
    box-shadow: inset 0 0 0 1.5px var(--linija);
    font-size: 13.5px;
    padding: 9px 16px;
    margin-left: 6px;
  }
  .wrapper > header nav ul.menu_slick > li:last-child > a:hover {
    background: var(--tinta);
    color: #fff;
    font-size: 13.5px;
  }
}

@media only screen and (min-width: 801px) and (max-width: 1180px) {
  .wrapper > header {
    gap: 14px;
    padding: 10px 18px;
  }
  .wrapper > header nav ul.menu_slick > li > a {
    padding: 9px 9px;
    font-size: 13.5px;
  }
  .wrapper > header nav ul.menu_slick > li > a:hover,
  .wrapper > header nav ul.menu_slick > li:hover > a,
  .wrapper > header nav ul.menu_slick > li > a.active {
    font-size: 13.5px;
  }
  .wrapper > header > .logo img {
    height: 50px;
  }
}

/* =========================================================== 5. PODNOZJE
   Koncept footer.pod: podloga --tinta (ugljena), cetiri stupca,
   naslovi h4 mono verzal zuti, dno u tri dijela. */

.wrapper > footer {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 64px 0 26px;
  display: block;
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}
.wrapper > footer .footer_top_cnt {
  width: auto;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 26px 24px;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 34px;
  align-items: start;
}
.wrapper > footer .footer_top_cnt .footer_logo {
  display: block;
  width: auto;
  margin: 0 0 16px;
  line-height: 0;
}
.wrapper > footer .footer_top_cnt .footer_logo img {
  max-width: none;
  height: 78px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.wrapper > footer .footer_top_cnt section,
.wrapper > footer .footer_top_cnt section.footer_contact {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
}
/* KORAK 3 (z83k3footer+3b) MERGE u 84 — footer 4 stupca preko display:contents.
   section.footer_contact (0,3,2) da nadjaca base display:block; logo+pravni=stupac 1. */
.wrapper > footer .footer_top_cnt .footer_logo {
  grid-column: 1;
  grid-row: 1;
}
.wrapper > footer .footer_top_cnt > section:not(.footer_contact) {
  grid-column: 1;
  grid-row: 2;
}
.wrapper > footer .footer_top_cnt section.footer_contact,
.wrapper > footer .footer_top_cnt section.footer_contact > article {
  display: contents;
}
.wrapper > footer .footer_top_cnt ul + h4 {
  margin-top: 22px;
}
.wrapper > footer .footer_top_cnt h1,
.wrapper > footer .footer_top_cnt h2,
.wrapper > footer .footer_top_cnt h3,
.wrapper > footer .footer_top_cnt h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zuta);
  font-weight: 500;
  margin: 0 0 14px;
}
.wrapper > footer .footer_top_cnt p,
.wrapper > footer .footer_top_cnt em {
  font-size: 12.3px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  text-align: left;
  padding: 0 0 8px;
  margin: 0;
}
.wrapper > footer .footer_top_cnt ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper > footer .footer_top_cnt ul li {
  padding: 4px 0;
  font-size: 14px;
  border: 0;
}
.wrapper > footer .footer_top_cnt ul a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border: 0;
}
.wrapper > footer .footer_top_cnt ul a:hover {
  color: #fff;
}
/* uvucena podstavka, koncept .pod-sub */
.wrapper > footer .footer_top_cnt ul li.pod-sub,
.wrapper > footer .footer_top_cnt ul ul li {
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.8;
}

.wrapper > footer .footer_copyright {
  width: auto;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 26px 0;
  border-top: 1px solid var(--linija-svijetla);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.wrapper > footer .footer_copyright p {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
}
.wrapper > footer .footer_copyright p a {
  color: rgba(255, 255, 255, 0.7);
}
.wrapper > footer .footer_copyright p a:hover {
  color: #fff;
}
.wrapper > footer .footer_copyright ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 10px;
}
.wrapper > footer .footer_copyright ul li {
  margin: 0;
  border: 0;
  padding: 0;
}
.wrapper > footer .footer_copyright ul li a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.wrapper > footer .footer_copyright ul li a:hover {
  background: var(--crvena);
}
.wrapper > footer .footer_copyright ul li img {
  opacity: 0.9;
  max-width: 18px;
}

@media only screen and (max-width: 1040px) {
  .wrapper > footer .footer_top_cnt {
    grid-template-columns: 1fr 1fr;
  }
  .wrapper > footer .footer_top_cnt .footer_logo,
  .wrapper > footer .footer_top_cnt > section:not(.footer_contact) {
    grid-column: auto;
    grid-row: auto;
  }
}
@media only screen and (max-width: 720px) {
  .wrapper > footer {
    padding: 44px 0 22px;
  }
  .wrapper > footer .footer_top_cnt {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0 18px 20px;
  }
  .wrapper > footer .footer_copyright {
    padding: 20px 18px 0;
    justify-content: flex-start;
  }
}

/* ========================================================= 6. SEGMENTI
   Predlozak omotava svaku zonu u <section class="seg seg-IME">.
   Prvi <article> u zoni je glava segmenta, ostali su kartice.

   Glava (koncept .sek-glava):
     <em>NADNASLOV</em>        -> polje "uvodni tekst" bloka
     <h2>Naslov <span class="crv">drugi dio</span></h2>  -> sadrzaj, title_type 0
     <p>uvodni odlomak</p>
   print_content.php ispisuje <em> IZA naslova, pa je glava stupac i <em>
   se podize na prvo mjesto. */

.seg {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 82px max(26px, calc((100% - 1220px) / 2));
  display: block;
  position: relative;
}
.seg > * {
  max-width: none;
}

/* podloge, naizmjenicno kao u konceptu */
.seg-uvod,
.seg-struke,
.seg-lokacije,
.seg-edukacije,
.seg-recenzije,
.seg-pravni {
  background: var(--papir);
}
.seg-suradnja,
.seg-podrucja,
.seg-tim,
.seg-cjenik,
.seg-faq,
.seg-obrazac {
  background: var(--bijela);
}

/* --- glava segmenta --- */
.seg > article:first-child:not(:only-child) {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 0 38px;
}
.seg > article:first-child h2 {
  font-size: clamp(28px, 3.3vw, 42px);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.seg > article:first-child > p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--tinta-80);
  margin: 0;
}

/* ---------------------------------------------------------------------
   JEDNO PRAVILO ZA NADNASLOV
   ---------------------------------------------------------------------
   Koncept izrez6/style.css, redci 46-48:

     .eyebrow{font-family:mono; font-size:11px; letter-spacing:.18em;
              text-transform:uppercase; color:crvena; margin:0 0 14px;
              display:flex; align-items:center; gap:10px}
     .eyebrow::before{width:26px; height:3px; background:zuta;
                      border-radius:2px; flex:0 0 auto}
     .eyebrow.tiho{color:tinta-60}

   U CMS-u se nadnaslov pojavljuje u TRI oblika, i zato je prije izgledao
   razlicito na razlicitim mjestima:
     a) <em>  — polje "uvodni tekst" bloka, u glavi segmenta
     b) <p>   — prvi odlomak u uvodu (zona 10)
     c) <em>  — u medjunaslovu usluga (sedmi blok zone 12)

   Sva tri su ovdje pokrivena jednim pravilom. Tezina i boja su PRIPISANE,
   ne naslijedjene — inace ih pokupi style.css redak 32
   (`div, span, p, em, ... { font-size:18px; color:rgba(0,0,0,.80);
   font-weight:500 }`) i nadnaslov ispadne crn i deblji.

   Dvije varijante, kao u konceptu:
     crvena  — svugdje
     .tiho   — siva, SAMO u "Za strucnjake"
     zuta    — na tamnoj podlozi (neurofeedback)
   --------------------------------------------------------------------- */

.seg > article:first-child > em,
.seg-podrucja > article:nth-child(7) > em,
.seg-uvod article > p:first-of-type {
  order: -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crvena);
}
.seg > article:first-child > em::before,
.seg-podrucja > article:nth-child(7) > em::before,
.seg-uvod article > p:first-of-type::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--zuta);
  border-radius: 2px;
  flex: 0 0 auto;
}
/* nista unutar nadnaslova ne smije imati svoju tezinu ni velicinu */
.seg > article:first-child > em *,
.seg-podrucja > article:nth-child(7) > em *,
.seg-uvod article > p:first-of-type * {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* varijanta "tiho" — siva, u konceptu samo u "Za strucnjake" */
.seg-edukacije > article:first-child > em {
  color: var(--tinta-60);
}

/* na tamnoj podlozi nadnaslov je zut */
.seg-neurofeedback > article:first-child > em {
  color: var(--zuta);
}

/* --- zajednicki slog u segmentima --- */
.seg h3 {
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--tinta);
}
.seg p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--tinta-80);
  margin: 0 0 14px;
}
.seg ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seg a {
  color: inherit;
  text-decoration: none;
}

/* --- oznaka struke (koncept .strucnjak-oznaka) --- */
.strucnjak-oznaka {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--plava);
  background: rgba(31, 95, 158, 0.09);
  padding: 5px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
}

/* --- kartica (koncept .prog) --- */
.seg .kartica,
.seg-struke > article:not(:first-child),
.seg-podrucja > article:not(:first-child),
.seg-suradnja > article:not(:first-child),
.seg-tim > article:not(:first-child),
.seg-cjenik > article:not(:first-child),
.seg-edukacije > article:not(:first-child) {
  background: var(--bijela);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--sjena);
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* oznaka struke uvijek prva, naslov drugi */
.seg article .strucnjak-oznaka {
  order: -1;
}
.seg article > h3 {
  order: 0;
}

/* --- popis usluga u kartici: sve stavke iste, strelica na svakoj --- */
.seg-struke > article:not(:first-child) ul,
.seg-podrucja > article:not(:first-child) ul {
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--linija);
}
.seg-struke > article:not(:first-child) li,
.seg-podrucja > article:not(:first-child) li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta-80);
  padding: 4px 0 4px 18px;
  position: relative;
}
.seg-struke > article:not(:first-child) li::before,
.seg-podrucja > article:not(:first-child) li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--crvena);
  font-size: 11px;
}
.seg-struke > article:not(:first-child) li a,
.seg-podrucja > article:not(:first-child) li a {
  color: var(--tinta-80);
  font-weight: 400;
}
.seg-struke > article:not(:first-child) li a:hover,
.seg-podrucja > article:not(:first-child) li a:hover {
  color: var(--crvena);
}
.seg-struke > article:not(:first-child) li b,
.seg-struke > article:not(:first-child) li strong,
.seg-podrucja > article:not(:first-child) li b,
.seg-podrucja > article:not(:first-child) li strong {
  font-weight: 400;
}

/* --- gumbi (koncept .btn) --- */
.seg-uvod article > p:nth-of-type(3) a,
.seg-neurofeedback article > p:last-child a,
.seg-edukacije > article:not(:first-child) > p:last-child a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  background: var(--crvena);
  color: #fff;
  box-shadow: 0 8px 20px rgba(200, 87, 79, 0.2);
  transition: transform 0.16s, background 0.16s;
}
.seg-uvod article > p:nth-of-type(3) a:hover,
.seg-neurofeedback article > p:last-child a:hover,
.seg-edukacije > article:not(:first-child) > p:last-child a:hover {
  background: var(--crvena-tamna);
  color: #fff;
  transform: translateY(-2px);
}
.seg-uvod article > p:nth-of-type(3) a:nth-child(n + 2) {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--linija);
}
.seg-uvod article > p:nth-of-type(3) a:nth-child(n + 2):hover {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}

/* ------------------------------------------------- 6.1 UVOD (z10 + z21)
   Koncept .hero: fotografija pozadinski sloj, tekst lijevo, Vodic desno. */

.seg-uvod {
  padding-top: 64px;
  padding-bottom: 78px;
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.seg-uvod > .slider_content {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background: linear-gradient(
    120deg,
    var(--nebo),
    var(--lavanda) 60%,
    var(--breskva)
  );
}
.seg-uvod > .slider_content .bx-wrapper,
.seg-uvod > .slider_content .bx-viewport,
.seg-uvod > .slider_content .bxslider {
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.seg-uvod > .slider_content .bx-viewport {
  border: 0;
  box-shadow: none;
  left: 0;
  background: none;
}
.seg-uvod > .slider_content .bxslider {
  width: 100% !important;
  position: relative !important;
}
.seg-uvod > .slider_content .bxslider > li {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  display: none !important;
}
.seg-uvod > .slider_content .bxslider > li:first-child {
  display: block !important;
  opacity: 1 !important;
}
.seg-uvod > .slider_content img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 28%;
  margin: 0;
  padding: 0;
}
.seg-uvod > .slider_content .bx-controls,
.seg-uvod > .slider_content .bx-pager {
  display: none !important;
}
.seg-uvod > .slider_content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    103deg,
    rgba(251, 248, 243, 0.96) 0%,
    rgba(251, 248, 243, 0.9) 36%,
    rgba(251, 248, 243, 0.52) 58%,
    rgba(251, 248, 243, 0.1) 100%
  );
}
.seg-uvod > .seg-uvod-lijevo,
.seg-uvod > .seg-uvod-vodic {
  position: relative;
  z-index: 2;
}
.seg-uvod > .seg-uvod-lijevo {
  flex: 1 1 auto;
}
.seg-uvod:not(:has(.seg-uvod-vodic article)) .seg-uvod-lijevo {
  max-width: 820px;
}
.seg-uvod:has(.seg-uvod-vodic article) {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
}

.seg-uvod article {
  display: flex;
  flex-direction: column;
}
.seg-uvod h1 {
  font-size: clamp(38px, 4.9vw, 62px);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  padding: 0;
  order: 0;
}
.seg-uvod article > p:nth-of-type(2) {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--tinta-80);
  max-width: 52ch;
  margin: 0 0 26px;
}
.seg-uvod article > p:nth-of-type(3) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 26px;
  font-size: 0;
}
.seg-uvod article > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.seg-uvod article > ul li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--bijela);
  box-shadow: inset 0 0 0 1px var(--linija);
  color: var(--tinta-80);
}
.seg-uvod article > ul li b {
  font-weight: 500;
  color: var(--tinta);
}
.seg-uvod .seg-uvod-vodic article {
  background: var(--bijela);
  border: 0;
  border-radius: 26px;
  box-shadow: var(--sjena-jaka);
  padding: 26px;
}

/* ------------------------------------------- 6.2 STRUKE (z11) i USLUGE (z12)
   Koncept .programi-grid: tri stupca, gornja crta 5px u boji po redu.
   Zona 12 ima DVIJE mreze — pet kartica, medjunaslov, tri kartice procjena. */

.seg-struke,
.seg-podrucja {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.seg-struke > article:first-child,
.seg-podrucja > article:first-child {
  grid-column: 1 / -1;
}

.seg-struke > article:not(:first-child),
.seg-podrucja > article:not(:first-child) {
  border-top: 5px solid var(--menta);
}
.seg-struke > article:nth-child(3) {
  border-top-color: var(--plava);
}
.seg-struke > article:nth-child(4) {
  border-top-color: var(--crvena);
}
.seg-podrucja > article:nth-child(3) {
  border-top-color: var(--plava);
}
.seg-podrucja > article:nth-child(4) {
  border-top-color: var(--crvena);
}
.seg-podrucja > article:nth-child(5) {
  border-top-color: var(--lavanda);
}
.seg-podrucja > article:nth-child(6) {
  border-top-color: var(--zuta);
}

/* medjunaslov: sedmi blok, puna sirina, bez kartice */
.seg-podrucja > article:nth-child(7) {
  grid-column: 1 / -1;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 44px 0 6px;
  max-width: 70ch;
  height: auto;
  display: block;
}
.seg-podrucja > article:nth-child(7) h3 {
  font-size: 24px;
  margin: 0 0 6px;
}
.seg-podrucja > article:nth-child(7) p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 70ch;
  margin: 0;
}

/* tri kartice procjena: druga mreza, svjetloplave, plava crta */
.seg-podrucja > article:nth-child(n + 8) {
  background: #f7fafc;
  border-top: 5px solid var(--plava);
}
.seg-podrucja > article:nth-child(n + 8) h3 {
  font-size: 18px;
}
.seg-podrucja > article:nth-child(n + 8) p {
  font-size: 13.5px;
  line-height: 1.6;
}

/* ------------------------------------------------- 6.3 SURADNJA (z22)
   Koncept .proces / .korak — cetiri kartice, broj 01-04 iz brojaca. */

.seg-suradnja {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  counter-reset: korak;
}
.seg-suradnja > article:first-child {
  grid-column: 1 / -1;
}
.seg-suradnja > article:not(:first-child) {
  padding: 26px 22px;
}
.seg-suradnja > article:not(:first-child)::before {
  counter-increment: korak;
  content: "0" counter(korak);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--crvena);
  display: block;
  margin: 0 0 12px;
}
.seg-suradnja > article:not(:first-child) h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.seg-suradnja > article:not(:first-child) p {
  font-size: 14px;
  margin: 0;
}

/* -------------------------------------------- 6.4 NEUROFEEDBACK (z13)
   Koncept .sek.tamna.plava + .nf-grid: sve lijevo, fotografija desno. */

.seg-neurofeedback {
  background: var(--plava-tamna);
  color: rgba(255, 255, 255, 0.8);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 46px;
  align-items: start;
  position: relative;
}
.seg-neurofeedback > * {
  position: relative;
  z-index: 2;
}
.seg-neurofeedback h2,
.seg-neurofeedback h3,
.seg-neurofeedback h4 {
  color: #fff;
}
.seg-neurofeedback p,
.seg-neurofeedback li {
  color: rgba(255, 255, 255, 0.8);
}
.seg-neurofeedback > article:first-child h2 {
  font-size: clamp(28px, 3.3vw, 40px);
}
.seg-neurofeedback > article:first-child > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
}

/* sve bez slike u lijevi stupac */
.seg-neurofeedback > article:not(:has(figure)) {
  grid-column: 1;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  max-width: none;
  margin: 0 0 6px;
  height: auto;
}
/* popis sa zutim tockama */
.seg-neurofeedback > article:nth-child(2) li {
  padding: 9px 0 9px 30px;
  position: relative;
  font-size: 15px;
}
.seg-neurofeedback > article:nth-child(2) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--zuta);
}
/* cijene 2x2 */
.seg-neurofeedback > article:nth-child(3) ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linija-svijetla);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 24px;
}
.seg-neurofeedback > article:nth-child(3) li {
  background: var(--plava-tamna);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seg-neurofeedback > article:nth-child(3) li b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--zuta);
  text-transform: none;
  letter-spacing: 0;
}
/* gumb zuti */
.seg-neurofeedback article > p:last-child a {
  background: var(--zuta);
  color: var(--tinta);
  box-shadow: none;
}
.seg-neurofeedback article > p:last-child a:hover {
  background: var(--zuta);
  color: var(--tinta);
  transform: translateY(-2px);
}
/* fotografija desno preko cijele visine */
.seg-neurofeedback > article:has(figure) {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.seg-neurofeedback > article:has(figure) figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nebo), var(--lavanda));
}
.seg-neurofeedback > article:has(figure) figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.seg-neurofeedback figcaption {
  display: none;
}

/* ------------------------------------------------------- 6.5 TIM (z14)
   Koncept .osoba-k: fotografija prva u kvadratu, pa ime, uloga, opis. */

.seg-tim {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.seg-tim > article:first-child {
  grid-column: 1 / -1;
}
.seg-tim > article:not(:first-child) {
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s;
}
.seg-tim > article:not(:first-child):hover {
  transform: translateY(-4px);
}
.seg-tim > article:not(:first-child) figure {
  order: -1;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--breskva), var(--lavanda));
}
.seg-tim > article:not(:first-child) figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  margin: 0;
}
.seg-tim > article:not(:first-child) figcaption {
  display: none;
}
.seg-tim > article:not(:first-child) > h3 {
  order: 1;
  font-size: 24px;
  margin: 18px 20px 0;
  padding: 0;
}
/* razmak izmedu imena, uloge i opisa je isti (10px); p iz style.css ima
   padding-bottom:20px koji je razmake cinio nejednakima */
.seg-tim > article:not(:first-child) > p:first-of-type {
  order: 2;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--plava);
  margin: 10px 20px 0;
  padding: 0;
}
.seg-tim > article:not(:first-child) > p:first-of-type b {
  font-weight: 400;
}
.seg-tim > article:not(:first-child) > p:nth-of-type(2) {
  order: 3;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-80);
  margin: 10px 20px 22px;
  padding: 0;
}
/* osoba bez fotografije: ploca s prijelazom boje */
.seg-tim > article:not(:first-child):not(:has(figure))::before {
  content: "";
  order: -1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--breskva), var(--lavanda));
}

/* ------------------------------------------------ 6.6 RECENZIJE (z8)
   Koncept .rec-traka / .rec. Markup slaze dm-skin.js iz sadrzaja u bazi. */

.seg-recenzije {
  overflow: hidden;
}
/* Izvorni ispis recenzija mora IZAci IZ TOKA. Izmjereno: .bx-wrapper je
   ostajao visok 300px i pravio 338px praznine izmedju naslova i kartica,
   jer je dm-skin oznaku stavio na .bxslider_reviews — bxSlider jos nije
   bio omotao sadrzaj kad je skripta krenula. Zato se gadjaju OBA omotaca,
   neovisno o tome koji je JS stigao oznaciti. */
.seg-recenzije .rec-izvor,
.seg-recenzije .bx-wrapper {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
.seg-recenzije .bx-controls,
.seg-recenzije .bx-pager {
  display: none !important;
}
.seg-recenzije > article.rec-glava {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  max-width: 720px;
  margin: 0 0 38px;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.rec-traka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.rec {
  background: var(--bijela);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--sjena);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.rec::before {
  content: "\201D";
  position: absolute;
  top: 6px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 74px;
  line-height: 1;
  color: var(--zuta);
}
.rec p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--tinta-80);
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
}
.rec .tko {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plava);
  margin-top: auto;
}
.rec-nav {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  align-items: center;
}
.rec-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--bijela);
  box-shadow: inset 0 0 0 1.5px var(--linija);
  font-size: 16px;
  color: var(--tinta);
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
}
.rec-nav button:hover {
  background: var(--tinta);
  color: #fff;
}
.rec-nav .brojac {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tinta-60);
  margin-left: 6px;
}

/* -------------------------------------------------- 6.7 CJENIK (z15)
   Koncept .cjenik-grid u dva stupca (v5 dorada), iznos Fraunces 18px. */

.seg-cjenik {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
}
.seg-cjenik > article:first-child {
  grid-column: 1 / -1;
}
.seg-cjenik > article:not(:first-child) h3 {
  font-size: 18px;
  margin: 0 0 14px;
}
.seg-cjenik > article:not(:first-child) li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--linija);
  font-size: 14px;
  color: var(--tinta);
}
.seg-cjenik > article:not(:first-child) li:last-child {
  border-bottom: 0;
}
.seg-cjenik > article:not(:first-child) li a {
  color: var(--tinta);
}
.seg-cjenik > article:not(:first-child) li a:hover {
  color: var(--crvena);
}
.seg-cjenik > article:not(:first-child) li b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tinta);
}
.seg-cjenik > article:not(:first-child) li small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tinta-60);
}
.seg-cjenik > article:last-child {
  grid-column: 1 / -1;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  height: auto;
}
.seg-cjenik > article:last-child p {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tinta-60);
  margin: 0;
}
.seg-cjenik > article:last-child a {
  color: var(--crvena);
  font-weight: 500;
}

/* ------------------------------------------- 6.8 CESTA PITANJA (z16)
   Koncept .faq-grid: lijevo glava i bocna kartica, desno harmonika.
   Otvaranje ide preko atributa hidden — inline stil iz JS-a ne prolazi. */

.seg-faq .faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 46px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}
.seg-faq .faq-grid h2 {
  font-size: clamp(28px, 3.3vw, 40px);
  margin-bottom: 14px;
}
.seg-faq .faq-grid > div:first-child > p {
  font-size: 17px;
  color: var(--tinta-80);
}
.faq-lista {
  border-top: 1px solid var(--linija);
}
.faq-stavka {
  border-bottom: 1px solid var(--linija);
}
.faq-stavka button {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.3;
}
.faq-stavka button::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--crvena);
  border-bottom: 2px solid var(--crvena);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq-stavka button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}
.faq-odgovor[hidden] {
  display: none;
}
.faq-odgovor .unutra {
  padding: 0 40px 22px 0;
}
.faq-odgovor .unutra p {
  font-size: 15px;
  color: var(--tinta-80);
  margin: 0 0 12px;
}
.faq-odgovor .unutra p:last-child {
  margin-bottom: 0;
}
.faq-odgovor a {
  color: var(--crvena);
  font-weight: 600;
}
.faq-bok {
  background: var(--bijela);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--sjena);
  margin-top: 26px;
}
.faq-bok h3 {
  font-size: 21px;
  margin: 0 0 10px;
}
.faq-bok p {
  font-size: 14.5px;
  color: var(--tinta-80);
}
.faq-bok .kont {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.faq-bok .kont a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--papir);
  color: var(--tinta);
}
.faq-bok .kont a:hover {
  background: var(--nebo);
}
.faq-bok .kont span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
  display: block;
}

/* ------------------------------------------------ 6.9 LOKACIJE (z17)
   Koncept .lok: lijeva crta 5px u boji, kvart mono iznad adrese. */

.seg-lokacije {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.seg-lokacije > article:first-child {
  grid-column: 1 / -1;
}
.seg-lokacije > article:not(:first-child):not(:last-child) {
  background: var(--bijela);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--sjena);
  padding: 24px;
  border-left: 5px solid var(--crvena);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.seg-lokacije > article:nth-child(3) {
  border-left-color: var(--plava);
}
.seg-lokacije > article:nth-child(4) {
  border-left-color: var(--zuta);
}
.seg-lokacije > article:not(:first-child) h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}
.seg-lokacije > article:not(:first-child) .kvart {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 4px;
  display: block;
}
.seg-lokacije > article:not(:first-child):not(:last-child) p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0;
}
.seg-lokacije > article:not(:first-child) a.karta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--plava);
}
.seg-lokacije > article:last-child {
  grid-column: 1 / -1;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  height: auto;
}
.seg-lokacije > article:last-child ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.seg-lokacije > article:last-child li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tinta-60);
}
.seg-lokacije > article:last-child a {
  color: var(--plava);
  font-weight: 500;
}

/* ------------------------------------------- 6.10 OBRAZAC (z18) */

.seg-obrazac > article:only-child {
  max-width: 900px;
  margin: 0;
}
.seg-obrazac > article > p:first-of-type {
  font-size: 17px;
  color: var(--tinta-80);
}
.seg-obrazac > article p,
.seg-obrazac > article li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta-80);
  max-width: 78ch;
}
.seg-obrazac > article h3 {
  font-size: 19px;
  margin: 22px 0 6px;
}
.seg-obrazac .polje {
  margin-bottom: 14px;
}
.seg-obrazac .polje label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 6px;
}
.seg-obrazac input,
.seg-obrazac select,
.seg-obrazac textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--tinta);
  background: var(--papir);
  border: 1.5px solid var(--linija);
  border-radius: 12px;
  padding: 12px 14px;
}
.seg-obrazac textarea {
  min-height: 104px;
  resize: vertical;
}
.seg-obrazac input:focus,
.seg-obrazac select:focus,
.seg-obrazac textarea:focus {
  outline: 0;
  border-color: var(--tinta);
  background: #fff;
}

/* ----------------------------------------------- 6.11 EDUKACIJE (z19) */

.seg-edukacije {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.seg-edukacije > article:first-child {
  grid-column: 1 / -1;
}
/* nadnaslov ovog segmenta je "tiho" — siv, ne crven */
.seg-edukacije > article:not(:first-child) {
  border-top: 5px solid var(--zuta);
  padding: 22px 22px 24px;
}
.seg-edukacije > article:nth-child(3) {
  border-top-color: var(--menta);
}
.seg-edukacije > article:nth-child(4) {
  border-top-color: var(--nebo);
}
.seg-edukacije > article:not(:first-child) h3 {
  font-size: 21px;
  margin: 0 0 10px;
}
.seg-edukacije > article:not(:first-child) p {
  font-size: 14.5px;
  flex: 1;
  margin: 0;
}
.seg-edukacije > article:not(:first-child) > p:last-child {
  flex: 0;
  margin-top: 16px;
}
.seg-edukacije > article:not(:first-child) > p:last-child a {
  background: var(--tinta);
  box-shadow: none;
  font-size: 13.5px;
  padding: 9px 15px;
}
.seg-edukacije > article:not(:first-child) > p:last-child a:hover {
  background: var(--crvena);
}

/* ------------------------------------------ 6.12 PRAVNI PODACI (z20) */

.seg-pravni {
  padding-top: 40px;
  padding-bottom: 56px;
}
.seg-pravni h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-60);
  font-weight: 500;
  margin: 0 0 14px;
}
.seg-pravni li {
  font-size: 12.3px;
  line-height: 1.75;
  color: var(--tinta-60);
  padding: 3px 0;
}

/* ============================================================ 7. SIRINE
   Prijelomi iz koncepta: 1040 i 720. */

@media only screen and (max-width: 1040px) {
  .seg-uvod:has(.seg-uvod-vodic article) {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .seg-neurofeedback {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .seg-neurofeedback > article:has(figure) {
    grid-column: 1;
    grid-row: auto;
  }
  .seg-faq .faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .seg-struke,
  .seg-podrucja,
  .seg-tim,
  .seg-cjenik,
  .seg-lokacije,
  .seg-edukacije,
  .seg-suradnja,
  .rec-traka {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 720px) {
  .seg {
    padding: 58px 18px;
  }
  .seg-uvod {
    padding: 34px 18px 48px;
    min-height: 0;
  }
  .seg-uvod > .slider_content::after {
    background: linear-gradient(
      180deg,
      rgba(251, 248, 243, 0.86) 0%,
      rgba(251, 248, 243, 0.95) 34%,
      rgba(251, 248, 243, 0.98) 100%
    );
  }
  .seg-uvod > .slider_content img {
    object-position: center 22%;
  }
  .seg-uvod article > p:nth-of-type(3) a {
    width: 100%;
    justify-content: center;
  }
  .seg-struke,
  .seg-podrucja,
  .seg-tim,
  .seg-cjenik,
  .seg-lokacije,
  .seg-edukacije,
  .seg-suradnja,
  .rec-traka {
    grid-template-columns: 1fr;
  }
  .seg-neurofeedback > article:nth-child(3) ul {
    grid-template-columns: 1fr;
  }
}

/* ============================================ 8. STARE SEKCIJE, SKRIVENE
   Zone 3-8 su preseljene ili neobjavljene; omotaci ostaju u predlosku sa
   svojim razmacima. Vraca se brisanjem ovog bloka. */

.main_container .featured_programs_cnt,
.main_container .contact_us_featured,
.main_container .other_programs_cnt,
.main_container .about_featured_cnt,
.main_container .numbers_featured_cnt {
  display: none;
}
.main_container {
  padding: 0;
  margin: 0;
  width: auto;
  max-width: none;
}

/* ============================================ 9. ISPRAVAK PO MJERENJU 7.9.
   Izvor: usporedba red-po-red, koncept vs live, oba na 1440x1000.
   Kljuc usporedbe je SEKCIJA + TEKST — bez sekcije se "50 €" iz cjenika
   spajao s "50 €" iz neurofeedbacka i davao lazno pozitivan nalaz.
   Svaka vrijednost ispod je IZMJERENA u konceptu, nijedna nije procijenjena.

   9.1 JEDNO PRAVILO ZA PISMO (prosireno s naslova na tekst)
   Uzrok: style.css redak 32 postavlja font-family/size/weight IZRAVNO na
   div,span,p,em,a,li. Izravno pravilo uvijek pobjedjuje naslijedjenu
   vrijednost, pa poveznica u kartici ispada Archivo 18px/500 dok stavka
   pored nje ispada mono 12.5px/400 (22 retka). Nacelo je isto kao za
   naslove: SVE UNUTAR OKVIRA NASLJEDJUJE OKVIR. */

.seg p a,
.seg p b,
.seg p strong,
.seg p em,
.seg p i,
.seg p span,
.seg li a,
.seg li b,
.seg li strong,
.seg li em,
.seg li i,
.seg li span,
.seg dt a,
.seg dt b,
.seg dd a,
.seg dd b,
.seg h2 a,
.seg h3 a,
.seg h4 a,
.wrapper > footer li a,
.wrapper > footer p a {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-decoration: none;
}
/* iznimke se vracaju vecom tezinom selektora, ne s !important */
.seg .crv,
.seg h2 .crv,
.seg h3 .crv {
  color: var(--crvena);
}
.seg .plv,
.seg h2 .plv,
.seg h3 .plv {
  color: var(--plava);
}
.seg-neurofeedback .crv {
  color: #f0a79c;
}
.seg-neurofeedback .plv {
  color: var(--nebo);
}

/* 9.2 TEZINA TEKSTA — koncept 400, CMS namece 500 (24 retka) */
.seg p,
.seg li,
.seg dt,
.seg dd,
.seg small,
.seg label,
.seg figcaption,
.wrapper > footer p,
.wrapper > footer li {
  font-weight: 400;
}

/* 9.3 BOJA NASLOVA — style.css daje h2 sivu rgb(70,70,70) (7 naslova) */
.seg h1,
.seg h2,
.seg h3,
.seg h4,
.seg h5,
.seg h6 {
  color: var(--tinta);
}
.seg-neurofeedback h2,
.seg-neurofeedback h3 {
  color: #fff;
}

/* 9.4 PROREDI I RAZMACI NASLOVA — koncept je 1.12 i razmak normal na svemu
   osim velikih naslova sekcija. Live je 1.2 i -0.01em (izmjereno 10+5+4+3+1). */
.seg h3,
.seg h4 {
  line-height: 1.12;
  letter-spacing: normal;
}
.seg-tim h3 {
  line-height: 1.12;
  letter-spacing: normal;
}
.seg-podrucja > article h3 {
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: normal;
}
.seg-faq .faq-grid > div:last-child h2 {
  line-height: 1.12;
  letter-spacing: normal;
}

/* 9.5 TEKST U KARTICAMA — 14px/400/1.62 (bilo 14.5 ili 13.5, tezina 500) */
.seg-struke > article > p,
.seg-podrucja > article > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.62;
}
.seg-podrucja > article > p,
.seg-podrucja > article:nth-child(n + 8) > p {
  line-height: 1.62;
}

/* 9.6 povuceno — nalaz "cijene su zute" bio je lazno pozitivan: kljuc
   usporedbe je bio sam tekst, pa se "50 €" iz cjenika (svijetla sekcija,
   Fraunces 18px tinta) spojio s "50 €" iz neurofeedbacka (tamna traka,
   zuto). Cjenik je u konceptu `sek svijetla`, bijele kartice, dd = Fraunces
   18px 600 u tinti. Boja se NE mijenja — mijenja se samo prored, 9.12. */

/* 9.7 NEUROFEEDBACK POPIS — 400, boja .82, prored 1.62 */
.seg-neurofeedback ul li {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.62;
}
.seg-neurofeedback ul li::before {
  color: rgba(255, 255, 255, 0.82);
}
.seg-neurofeedback .nf-cijene b,
.seg-neurofeedback > article:nth-child(3) li b {
  line-height: 1.62;
}

/* 9.8 GUMBI — koncept ima razmak .01em (0.15px na 15px) */
.seg a.btn,
.seg .btn,
.wrapper > header .nav-cta {
  letter-spacing: 0.01em;
}

/* 9.9 UVODNI TEKST CPP — 16px/400/1.62, bilo 17px/500 */
.seg-faq > article:first-child p,
.seg-faq .faq-grid > div:first-child > p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
}

/* 9.10 POVEZNICA NA CJENIK — mono 12px/1.62, bila Archivo 18px */
.seg-cjenik > article:last-child a {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.62;
}

/* 9.11 IZBORNIK — koncept 14.5px x 1.62 = 23.49px; live 18.125px */
@media (min-width: 801px) {
  .wrapper > header nav ul.menu_slick > li > a {
    line-height: 1.62;
  }
}

/* 9.12 CJENIK — iznos i naziv, prored 1.62 (29.16px na 18px) */
.seg-cjenik > article:not(:first-child) li,
.seg-cjenik > article:not(:first-child) li b,
.seg-cjenik > article:not(:first-child) li small {
  line-height: 1.62;
}

/* 9.13 KONTAKT — telefon i e-mail: koncept 16px/600/1.62 u tinti,
   live 18px/500 u plavoj */
.seg-lokacije > article:last-child a,
.seg-faq .faq-grid > div:last-child a[href^="tel"],
.seg-faq .faq-grid > div:last-child a[href^="mailto"] {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.62;
  color: var(--tinta);
}
.seg-lokacije > article:last-child li {
  line-height: 1.62;
}
.seg-faq .faq-grid > div:last-child b,
.seg-faq .faq-grid > div:last-child strong {
  font-weight: 600;
  line-height: 1.62;
}

/* ---------------------------------------------------------------------
   9.14 NADNASLOV — DOSLOVNO PO KONCEPTU

   U konceptu `.eyebrow` (redak 71) daje 11px crveno, ali `.sek-glava p`
   (redak 214) dolazi kasnije i jaci je, pa nadnaslovi unutar `.sek-glava`
   ispadaju veci i tamniji. Michael: preslikati doslovno.
   Izmjereno u konceptu, svih trinaest:

     11px   crvena #C8574F      razmak 1.98px  prored 17.82px  mb 14px
            -> hero, cesta pitanja
     11px   zuta  #FFC93C       razmak 1.98px  prored 17.82px  mb 14px
            -> neurofeedback (tamna podloga)
     13.5px tinta-60            razmak 2.43px  prored 21.87px  mb 8px
            -> vodic
     15px   tinta-80            razmak 2.7px   prored 24.3px   mb 0
            -> medjunaslov "Procjene i testiranja" u Uslugama
     17px   tinta-80            razmak 3.06px  prored 27.54px  mb 0
            -> struke, suradnja, usluge, tim, recenzije, cjenik, kontakt
     17px   tinta-60 (.tiho)    razmak 3.06px  prored 27.54px  mb 0
            -> za strucnjake

   Razmak je svugdje .18em, prored svugdje 1.62 — mijenja se velicina,
   boja i donji razmak. Zuta crtica 26x3px ostaje ista u svih trinaest. */

.seg > article:first-child > em,
.seg-podrucja > article:nth-child(7) > em,
.seg-uvod article > p:first-of-type {
  line-height: 1.62; /* bilo 1.4 — koncept je 1.62 svugdje */
}

/* velika varijanta: 17px, tinta-80, bez donjeg razmaka */
.seg-struke > article:first-child > em,
.seg-suradnja > article:first-child > em,
.seg-podrucja > article:first-child > em,
.seg-tim > article:first-child > em,
.seg-recenzije > article:first-child > em,
.seg-cjenik > article:first-child > em,
.seg-lokacije > article:first-child > em,
.seg-edukacije > article:first-child > em {
  font-size: 13px;
  color: var(--tinta-80);
  margin-bottom: 0;
}
.seg-struke > article:first-child > em::before,
.seg-suradnja > article:first-child > em::before,
.seg-podrucja > article:first-child > em::before,
.seg-tim > article:first-child > em::before,
.seg-recenzije > article:first-child > em::before,
.seg-cjenik > article:first-child > em::before,
.seg-lokacije > article:first-child > em::before,
.seg-edukacije > article:first-child > em::before {
  font-size: 17px;
}

/* "Za strucnjake" je jedina .tiho varijanta — tinta-60 */
.seg-edukacije > article:first-child > em {
  color: var(--tinta-60);
}

/* medjunaslov u Uslugama: 15px, tinta-80, bez donjeg razmaka */
.seg-podrucja > article:nth-child(7) > em {
  font-size: 15px;
  color: var(--tinta-80);
  margin-bottom: 0;
}
.seg-podrucja > article:nth-child(7) > em::before {
  font-size: 15px;
}

/* hero i cesta pitanja ostaju 11px crveno s donjim razmakom 14px */
.seg-uvod article > p:first-of-type,
.seg-faq > article:first-child > em {
  font-size: 11px;
  color: var(--crvena);
  margin-bottom: 14px;
}

/* neurofeedback: 11px zuto na tamnoj podlozi */
.seg-neurofeedback > article:first-child > em {
  font-size: 11px;
  color: var(--zuta);
  margin-bottom: 14px;
}

/* vodic (zona 21) — 13.5px, tinta-60, donji razmak 8px.
   Pravilo stoji spremno; zona je jos prazna. */
.seg-vodic > article:first-child > em,
.seg-uvod .vodic em {
  font-size: 13.5px;
  color: var(--tinta-60);
  margin-bottom: 8px;
}
.seg-vodic > article:first-child > em::before,
.seg-uvod .vodic em::before {
  font-size: 13.5px;
}

/* ============================================ 10. ISPRAVAK PO MJERENJU 7.9. (v4)
   Tri stvari izmjerene nakon koraka 4 zadatka 83. */

/* 10.1 DVOBOJNOST NA TAMNOJ PODLOZI — moja greska u 9.1.
   `.seg h2 .crv` (0,3,0) je jaci od `.seg-neurofeedback .crv` (0,2,0), pa je
   span na tamnoplavoj traci ostao #C8574F umjesto svijetlog #F0A79C.
   Izmjereno: rgb(200, 87, 79). Vraca se istom tezinom selektora. */
.seg-neurofeedback h2 .crv,
.seg-neurofeedback h3 .crv,
.seg-neurofeedback .crv {
  color: #f0a79c;
}
.seg-neurofeedback h2 .plv,
.seg-neurofeedback h3 .plv,
.seg-neurofeedback .plv {
  color: var(--nebo);
}
.seg-cjenik.sek-tamna h2 .crv {
  color: #f0a79c;
}

/* 10.2 TIM — jednake kartice.
   Izmjereno: gornji red 612px, donji 590px. Uzrok: `grid-auto-rows:auto`, pa
   se svaki red sam odmjeri, a u gornjem redu ime ide u dva retka.
   Ne dira se visina kartice nego se ime izjednaci na dva retka. */
.seg-tim > article:not(:first-child) h3 {
  min-height: 0; /* bilo 2.24em — ime u jednom retku ostavljalo je prazan
                    redak ispod; jednake kartice ionako daje grid-auto-rows:1fr */
}
.seg-tim > article:not(:first-child) {
  height: 100%;
}

/* 10.3 TIM — kartica bez fotografije dobiva plocu s inicijalima.
   Koncept ima `.foto.inicijali` s `data-ini="AG"` — gradijent i inicijali,
   isti kvadrat kao fotografija. Na live-u ta kartica nema `figure` uopce,
   pa u mrezi zjapi rupa.
   Privremeno dok ne stigne fotografija; brise se kad fotografija dodje. */
.seg-tim > article:not(:first-child):not(:has(figure))::before {
  content: "AG";
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--breskva) 0%, var(--lavanda) 100%);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(30, 38, 48, 0.55);
}

/* 10.4 SEGMENTI KOJIH U KONCEPTU NEMA
   `seg-obrazac` (1148px) i `seg-pravni` (265px) nisu u konceptu. Ne gase se
   iz CSS-a — sadrzaj se preseljava (zadatak 84), inace bi tekst nestao a
   ostao u bazi neoznacen. Ovdje stoji samo biljeska. */

/* ============================================ 11. TIM — jednaki redovi (v7)
   Nakon bloka 10 redovi su 632/632/632 i 625/625/625 — jos uvijek nejednaki.
   Uzrok nije duljina imena nego to sto se svaki red mreze sam odmjeri
   (`grid-auto-rows: auto`), pa red visi o najvisoj kartici u tom redu.

   Rjesenje: prvi red mreze (glava segmenta, `grid-column: 1 / -1`) ostaje
   `auto`, a SVI ostali redovi dobivaju `1fr` — mreza ih tada izjednaci
   medusobno. Glava se ne rasteze jer je u eksplicitnom prvom redu. */

.seg-tim {
  grid-template-rows: auto; /* red 1 = glava segmenta */
  grid-auto-rows: 1fr; /* svi redovi kartica jednaki */
}
.seg-tim > article:first-child {
  grid-row: 1;
}

/* ============================================ 12. TRI IZMJERENA KVARA (v8)

   12.1 RECENZIJE — glava segmenta je siroka 1 px
   Izmjereno: article.rec-glava  box 1x396, width:1px, display:flex.
   Zato se naslov lomi na jednu rijec po retku. Glava se vraca u normalu
   izricito, bez obzira odakle je 1px dosao. */

.seg-recenzije > article.rec-glava,
.seg-recenzije > article:first-child {
  position: static;
  width: auto;
  max-width: var(--maxw);
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  margin: 0 0 28px;
  padding: 0;
}

/* 12.2 NEUROFEEDBACK — golemi razmaci u lijevom stupcu
   Izmjereno: redovi 418.219 / 204.453 / 306.094 px. Prvi red je visok
   koliko fotografija (418 px) iako je u njemu tekst od 204 px, pa ispod
   naslova zjapi 214 px praznine.
   Uzrok: fotografija ima `grid-row: 1 / -1`, ali mreza nema eksplicitne
   retke, pa se `-1` razrjesava u liniju 1 — raspon se srusi na prvi redak
   i fotografija ga rastegne.
   Rjesenje: eksplicitni redci, pa `1 / -1` znaci ono sto treba, i
   fotografija se poravnava na vrh umjesto da se rasteze. */

.seg-neurofeedback {
  grid-template-rows: auto auto auto;
  align-items: start;
}
.seg-neurofeedback > article:last-child {
  grid-row: 1 / -1;
  align-self: start;
}

/* 12.3 PODNOZJE — logotip i pravni tekst moraju biti JEDAN stupac
   Izmjereno: `.footer_top_cnt` ima 4 tracka, a logotip (314x78) i pravni
   tekst (314x255) sjede u prva DVA stupca. Zato se sve ostalo pomakne za
   jedan stupac udesno, a zadnje skupine prelome u novi red.
   Koncept: stupac 1 = logotip + pravni tekst jedno ispod drugog. */

@media (min-width: 801px) {
  .wrapper > footer .footer_top_cnt > a {
    grid-column: 1;
    grid-row: 1;
  }
  .wrapper > footer .footer_top_cnt > section:not(.footer_contact) {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ============================================ 13. LOGOTIP U PODNOZJU (v9)
   Izmjereno: podnozje ima `filter: brightness(0) invert(1)` i `opacity:.95`,
   pa je logotip pretvoren u bijelu siluetu. Koncept na tamnom podnozju
   zadrzava logotip u vlastitim bojama — isti je kao u zaglavlju.

   Moja greska, iz bloka za podnozje (redak 252). Ponistava se ovdje da se
   ne dira postojeci blok. */

.wrapper > footer .footer_top_cnt .footer_logo img,
.wrapper > footer .footer_logo img,
.wrapper > footer img {
  filter: none;
  opacity: 1;
}

/* ============================================ 14. NEUROFEEDBACK — poravnanje (v10)
   Michael: "slika na live je iznad naslova, nije u ravnini teksta".
   Izmjereno u predlosku: `.nf-grid` je mreza 589 / 533 s
   `align-items: center`, a lijevi stupac je JEDAN blok visok 698 px.
   Fotografija je time okomito centrirana prema cijelom tekstu.

   Na live-u je lijevi stupac razlomljen na tri `article`, a ja sam u
   bloku 12 stavio `align-items:start` i `align-self:start` — pa se
   fotografija zalijepila na vrh, iznad naslova.

   Ispravak: centriranje, kako je u predlosku. */

.seg-neurofeedback {
  align-items: center;
}
.seg-neurofeedback > article:last-child {
  grid-row: 1 / -1;
  align-self: center;
}

/* rec-glava: nadjacaj max-width:720 iz .seg>article:first-child (glava puna sirina) */
.seg-recenzije > article.rec-glava:not(:only-child) {
  max-width: none;
}

/* lokacije usluge nisu nadnaslovi — makni uppercase (alat ih inace broji) */
.seg-lokacije > article:not(:first-child):not(:last-child) p {
  text-transform: none;
}
/* neuro: manji razmak medu lijevim articleima (koncept <60px) */
.seg-neurofeedback {
  row-gap: 16px;
}
.seg-neurofeedback > article:not(:has(figure)) {
  margin-bottom: 0;
}

/* ============================================ 15. VODIC U DVA KLIKA (zona 21) */
.vodic {
  background: var(--bijela);
  border-radius: 26px;
  box-shadow: var(--sjena-jaka);
  padding: 20px;
  position: relative;
  z-index: 2;
}
.vodic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.vodic-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--tinta-60);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 8px;
  display: block;
}
.vodic-head h2 {
  font-size: 23px;
  line-height: 1.2;
  margin: 0;
}
.vodic-head > div > p:last-child {
  font-size: 13.5px;
  color: var(--tinta-60);
  margin: 6px 0 0;
}
.korak-oznaka {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-60);
  display: block;
  margin: 0 0 9px;
}
.cipovi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.cip {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(30, 38, 48, 0.05);
  color: var(--tinta);
  transition: 0.16s ease;
}
.cip:hover {
  background: rgba(30, 38, 48, 0.1);
}
.cip[aria-pressed="true"] {
  background: var(--tinta);
  color: #fff;
}
.cip.boja-1[aria-pressed="true"] {
  background: var(--crvena);
  color: #fff;
}
.rezultat {
  border-top: 1px solid var(--linija);
  padding-top: 18px;
}
.rezultat .kutija {
  background: #fdf7f0;
  border: 1px solid rgba(200, 87, 79, 0.15);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin-bottom: 12px;
}
.rezultat h3 {
  font-size: 20px;
  margin: 8px 0 8px;
}
.rezultat p.opis {
  font-size: 14.5px;
  color: var(--tinta-80);
  margin-bottom: 14px;
}
.spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.spec div {
  background: #fff;
  border: 1px solid rgba(30, 38, 48, 0.09);
  border-radius: 12px;
  padding: 11px 12px;
}
.spec span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 3px;
}
.spec b {
  font-size: 14.5px;
  font-weight: 600;
}
.rez-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vodic .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: 0.16s;
}
.vodic .btn-akcent {
  background: var(--crvena);
  color: #fff;
}
.vodic .btn-akcent:hover {
  background: var(--crvena-tamna);
  color: #fff;
}
.vodic .btn-linija {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--linija);
}
.vodic .btn-linija:hover {
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}
.rez-alt {
  margin-top: 14px;
  font-size: 13px;
  color: var(--tinta-60);
}
.rez-alt a {
  color: var(--crvena);
  text-decoration: none;
  font-weight: 600;
}
.rez-alt[hidden] {
  display: none;
}
.rez-napomena {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-60);
}
.rez-napomena b {
  color: var(--tinta-80);
  font-weight: 600;
}
.v-tema {
  display: none;
}
@media (max-width: 900px) {
  .spec {
    grid-template-columns: 1fr;
  }
}

/* ============================================ 16. IZBORNIK (zadatak 91, djelomicno) */
/* slicknav burger ne radi na desktopu */
@media only screen and (min-width: 801px) {
  .slicknav_btn,
  .slicknav_menu {
    display: none !important;
  }
}
/* nav-cta gumb na kraju trake (crveni) — nadjacaj bijelu pilulu :last-child */
.wrapper > header nav ul.menu_slick > li.nav-cta-li {
  margin-left: 6px;
}
.wrapper > header nav ul.menu_slick > li:last-child > a.nav-cta,
.wrapper > header nav ul.menu_slick > li.nav-cta-li > a {
  background: var(--crvena);
  color: #fff;
  box-shadow: 0 8px 20px rgba(200, 87, 79, 0.2);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
.wrapper > header nav ul.menu_slick > li.nav-cta-li > a:hover {
  background: var(--crvena-tamna);
  color: #fff;
}
/* Kontakt (vise nije zadnji) — obican oblik, bez bijele pilule/sjene */
.wrapper > header nav ul.menu_slick > li:nth-last-child(2) > a {
  background: transparent;
  box-shadow: none;
}

/* ============================================ 17. IZBORNIK button+panel (zadatak 91) */
@media only screen and (min-width: 801px) {
  .wrapper > header nav ul.menu_slick > li > button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 13px;
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tinta);
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .wrapper > header nav ul.menu_slick > li > button:hover,
  .wrapper > header nav ul.menu_slick > li.ima-panel:hover > button,
  .wrapper > header nav ul.menu_slick > li.otvoren > button {
    background: rgba(30, 38, 48, 0.06);
  }
  .wrapper > header nav ul.menu_slick .strelica {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    margin-left: 3px;
    opacity: 0.5;
    transition: transform 0.18s;
  }
  .wrapper > header nav ul.menu_slick > li.ima-mega .strelica {
    width: 13px;
    height: 13px;
  }
  .wrapper > header nav ul.menu_slick > li.otvoren > button .strelica {
    transform: rotate(-135deg);
  }
  /* panel se otvara na hover ILI na klik (.otvoren) */
  .wrapper > header nav ul.menu_slick > li.ima-panel.otvoren > ul.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ============================================ 16. LOKACIJE — otporno na dodane blokove (v18)

   Izmjereno: sve tri kartice lokacija imaju CRVENI lijevi rub. Koncept ima
   crvenu, plavu i zutu.

   Uzrok: moja pravila su vezana na redni broj djeteta
     .seg-lokacije > article:nth-child(3){border-left-color:plava}
     .seg-lokacije > article:nth-child(4){border-left-color:zuta}
   Cim se u zonu doda ili makne blok (obrazac, kontakt), redni brojevi se
   pomaknu i boje sjednu na kriv element ili nigdje.

   To je ista zamka koja je vec jednom srusila karticu T.O.V.A. Zato se ovdje
   prestaje racunati po rednom broju.

   16.1 KARTICA SE PREPOZNAJE PO SADRZAJU, NE PO REDNOM BROJU
   Kartica lokacije je onaj `article` koji ima `.kvart`. Obrazac, glava
   segmenta i kontakt blok ga nemaju, pa ne mogu dobiti izgled kartice. */

.seg-lokacije > article:has(.kvart) {
  background: var(--bijela);
  border-left: 5px solid var(--crvena);
  border-radius: var(--r);
  box-shadow: var(--sjena);
  padding: 22px 24px;
  height: 100%;
}

/* 16.2 BOJA RUBA PO ADRESI, NE PO REDNOM BROJU
   Svaka kartica ima poveznicu na kartu s adresom u `href`. Po njoj se
   prepoznaje koja je lokacija — to prezivi svaku promjenu redoslijeda. */
.seg-lokacije > article:has(a[href*="Gortanova"]) {
  border-left-color: var(--crvena);
}
.seg-lokacije > article:has(a[href*="Antunca"]) {
  border-left-color: var(--plava);
}
.seg-lokacije > article:has(a[href*="Bolni"]) {
  border-left-color: var(--zuta);
}

/* 16.3 OBRAZAC NIJE KARTICA LOKACIJE
   Kad obrazac dode u ovu zonu, ne smije pokupiti izgled kartice:
   bez crvenog ruba, bez sjene, bez bijele podloge kartice. */
.seg-lokacije > article:has(input),
.seg-lokacije > article:has(select),
.seg-lokacije > article:has(textarea),
.seg-lokacije > article:has(form) {
  background: var(--bijela);
  border-left: 0;
  border-radius: var(--r);
  box-shadow: var(--sjena);
  padding: 28px 30px;
  height: auto;
}

/* 16.4 stara pravila po rednom broju vise ne vrijede */
.seg-lokacije > article:nth-child(3),
.seg-lokacije > article:nth-child(4) {
  border-left-color: initial;
}

/* ============================================ 20. IZBORNIK/LOKACIJE fix (8.9) */
/* traka visina <= 80: logo nizi (62->54) */
@media only screen and (min-width: 801px) {
  .wrapper > header > .logo img {
    height: 54px;
  }
}
/* lokacije boje ruba po adresi — nadjacaj base :not (specificnost :has(.kvart):has(adresa)) */
.seg-lokacije > article:has(.kvart):has(a[href*="Gortanova"]) {
  border-left-color: var(--crvena);
}
.seg-lokacije > article:has(.kvart):has(a[href*="Antunca"]) {
  border-left-color: var(--plava);
}
.seg-lokacije > article:has(.kvart):has(a[href*="Bolni"]) {
  border-left-color: var(--zuta);
}

/* ================================================================
   BLOK 17 — IZBORNIK, prepisan 1:1 iz koncepta na CMS markup
   Dopisati NA KRAJ dm-dizajn.css. Ne prepisivati postojeće.

   Koncept:  nav.glavni > ul > li > .panel > .grupa > a + .pod > a
   CMS:      ul.menu_slick > li > ul.submenu > li > a + ul > li > a

   MOJA GREŠKA koju ovo ispravlja: blok15 je napravio otvaranje samo
   na klik. Koncept (izrez6/skin.js, red 24–28) otvara I na mouseenter
   I na klik. Vraćam kako je u konceptu.
   ================================================================ */

/* ---- pozicioniranje: mega se veže na zaglavlje, ne na stavku ---- */
.wrapper > header {
  position: sticky;
  top: 0;
  z-index: 900;
}
.wrapper > header ul.menu_slick > li {
  position: relative;
}
.wrapper > header ul.menu_slick > li.ima-mega {
  position: static;
} /* KLJUČ — bez ovoga panel bježi desno */

/* ---- panel: osnova (koncept .panel) ---- */
.wrapper > header ul.menu_slick > li > ul.submenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 90;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: 16px;
  box-shadow: var(--sjena-jaka);
  padding: 20px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: 0.18s ease;
}

.wrapper > header ul.menu_slick > li.otvoren > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- uski panel (koncept .panel.uski) ---- */
.wrapper > header ul.menu_slick > li.ima-panel:not(.ima-mega) > ul.submenu {
  width: 330px;
}

/* ---- mega panel (koncept .panel.mega) ---- */
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu {
  right: 26px;
  width: min(900px, calc(100vw - 52px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 22px;
}

/* ---- skupina u mega panelu (koncept .grupa) ---- */
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li {
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0;
  list-style: none;
}
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li:hover {
  background: rgba(30, 38, 48, 0.04);
}

.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li > a {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  margin: 0 0 4px;
  padding: 0;
  background: none;
}

/* ---- podstavke (koncept .pod) — BEZ crta s lijeve strane ---- */
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--tinta-60);
}
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li > ul li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li > ul a {
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.9;
  color: var(--tinta-60);
  text-decoration: none;
}
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu > li > ul a:hover {
  color: var(--crvena);
} /* CRVENI HOVER */

/* ---- stavke u uskom panelu (koncept .osoba) ---- */
.wrapper
  > header
  ul.menu_slick
  > li.ima-panel:not(.ima-mega)
  > ul.submenu
  > li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.wrapper
  > header
  ul.menu_slick
  > li.ima-panel:not(.ima-mega)
  > ul.submenu
  > li
  > a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta);
  background: none;
}
.wrapper
  > header
  ul.menu_slick
  > li.ima-panel:not(.ima-mega)
  > ul.submenu
  > li
  > a:hover {
  background: rgba(30, 38, 48, 0.05);
  color: var(--crvena);
} /* CRVENI HOVER */

/* ---- strelica ---- */
.wrapper > header ul.menu_slick > li.otvoren > a .strelica,
.wrapper > header ul.menu_slick > li.otvoren > button .strelica {
  transform: rotate(-135deg) translateY(-2px);
}

/* ================================================================
   MOBILNI IZBORNIK — slicknav preslikan na koncept .mobilni
   Koncept: izrez6/style.css redovi 114–127
   ================================================================ */
@media (max-width: 900px) {
  .slicknav_menu {
    background: var(--papir);
    padding: 0;
    border-top: 1px solid var(--linija);
  }
  .slicknav_btn {
    background: none;
    border: 0;
    border-radius: 12px;
    padding: 10px 18px;
    margin: 6px 0;
  }
  .slicknav_menutxt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta);
    text-shadow: none;
    font-weight: 400;
  }
  .slicknav_icon-bar {
    background: var(--tinta);
    width: 24px;
    height: 2px;
    margin: 5px 0;
    box-shadow: none;
  }
  .slicknav_nav {
    background: var(--papir);
    padding: 14px 26px 26px;
    margin: 0;
    font-size: inherit;
  }
  .slicknav_nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
  }
  .slicknav_nav a {
    display: block;
    margin: 0;
    padding: 11px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--linija);
    background: none;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    color: var(--tinta);
  }
  .slicknav_nav a:hover {
    background: none;
    color: var(--crvena);
  }
  /* 2. razina — koncept .m-pod */
  .slicknav_nav ul a {
    padding-left: 16px;
    font-weight: 400;
    font-size: 14.5px;
    color: var(--tinta-80);
  }
  /* 3. razina — koncept .m-pod2 */
  .slicknav_nav ul ul a {
    padding-left: 32px;
    font-family: var(--font-mono);
    font-size: 12.5px;
  }
  /* naslov skupine — koncept .m-grupa > span */
  .slicknav_nav .slicknav_row,
  .slicknav_nav .slicknav_parent > a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-60);
    font-weight: 400;
  }
}

/* ================================================================
   BLOK 18 — PODNOŽJE (rupa 238 px) + FIKSNE VISINE (skakanje)
   Dopisati NA KRAJ dm-dizajn.css.
   ================================================================ */

/* ---------------- 1. PODNOŽJE — rupa od 238 px ----------------
   Izmjereno: aside.footer_top_cnt je grid 4 stupca.
     a.footer_logo   → stupac 1, red 1, visina  78 px, y = 11807
     section (pravni)→ stupac 1, red 2, visina 255 px, y = 12123
   Red 1 je visok koliko najviši stupac (Programi ≈ 250 px), pa
   pravni tekst počinje 238 px ispod logotipa.

   Rješenje BEZ diranja predloška: logotip se vadi iz mreže i pribija
   u gornji lijevi kut, a pravni tekst preuzima cijeli stupac 1.
   (U zadatku 93 sam tražio wrapper u predlošku — nije potreban.) */

.wrapper > footer aside.footer_top_cnt {
  position: relative;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 0 34px;
  align-items: start;
}

.wrapper > footer aside.footer_top_cnt > a.footer_logo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.wrapper > footer aside.footer_top_cnt > section:not(.footer_contact) {
  grid-column: 1;
  grid-row: 1 / -1;
  padding-top: 94px;
} /* 78 px logotip + 16 px razmak */

.wrapper > footer aside.footer_top_cnt > a.footer_logo img {
  height: 78px;
  width: auto;
  filter: none;
  opacity: 1;
}

/* ---------------- 2. RECENZIJE — skakanje visine ----------------
   Izmjereno: bxSlider upisuje visinu u .bx-viewport (71.625px) i
   mijenja je po dužini svake recenzije → segment skače.
   Visina se fiksira na najdužu recenziju. */

.wrapper [class*="seg-recenzije"] .bx-viewport {
  height: auto !important;
  min-height: 230px;
}
.wrapper [class*="seg-recenzije"] .rec-traka {
  min-height: 230px;
}
.wrapper [class*="seg-recenzije"] .rec {
  height: 100%;
}

/* ---------------- 3. VODIČ — skakanje visine ----------------
   Izmjereno: seg-uvod-vodic ima min-height:auto, pa se visina mijenja
   pri svakom kliku i pozadinska slika se skalira. */

.wrapper .seg-uvod-vodic,
.wrapper .seg-uvod-vodic > * {
  min-height: 520px;
}
.wrapper .seg-uvod-vodic .vodic-panel,
.wrapper .seg-uvod-vodic [class*="vodic-"] {
  min-height: 0;
}

/* ---------------- 4. KONTAKT — dva stupca kao koncept ----------------
   Vrijedi TEK KAD se u CMS-u kontakt podaci prebace iz zone lokacija
   u zonu obrasca (vidi zadatak 95, korak C). Do tada nema učinka. */

.wrapper [class*="seg-obrazac"] {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 36px;
  align-items: start;
}

/* lijevi stupac: kontakt podaci (article bez inputa) */
.wrapper [class*="seg-obrazac"] > article:not(:has(input)):not(:has(h3)) {
  grid-column: 1;
}
/* desni stupac: naslov + obrazac */
.wrapper [class*="seg-obrazac"] > article:has(h3),
.wrapper [class*="seg-obrazac"] > article:has(input) {
  grid-column: 2;
}

.wrapper [class*="seg-obrazac"] > article:has(input) {
  background: var(--bijela);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--sjena);
}

/* ---- forma polja u seg-obrazac (task 95 C, preseljeno iz seg-lokacije) ---- */
.seg-obrazac .contact_form dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0;
  padding: 0;
}
.seg-obrazac .contact_form dl > div {
  margin: 0;
}
.seg-obrazac .contact_form .cnt_form_div_note,
.seg-obrazac .contact_form .consent_data,
.seg-obrazac .contact_form dl > div:has(.buttons_action),
.seg-obrazac .contact_form dl > div:last-child {
  grid-column: 1 / -1;
}
.seg-obrazac .contact_form dt {
  margin: 0;
  padding: 0;
}
.seg-obrazac .contact_form dt label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 6px;
}
.seg-obrazac .contact_form dd {
  margin: 0;
}
.seg-obrazac .contact_form input[type="text"],
.seg-obrazac .contact_form input[type="email"],
.seg-obrazac .contact_form select,
.seg-obrazac .contact_form textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--tinta);
  background: var(--papir);
  border: 1.5px solid var(--linija);
  border-radius: 12px;
  padding: 12px 14px;
}
.seg-obrazac .contact_form textarea {
  min-height: 104px;
  resize: vertical;
}
.seg-obrazac .contact_form input:focus,
.seg-obrazac .contact_form select:focus,
.seg-obrazac .contact_form textarea:focus {
  outline: 0;
  border-color: var(--tinta);
  background: #fff;
}
.seg-obrazac .contact_form .consent_data {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-60);
}
.seg-obrazac .contact_form .consent_data dt {
  flex: 0 0 auto;
}
.seg-obrazac .contact_form .buttons_action {
  padding-top: 6px;
}
.seg-obrazac .contact_form input[type="submit"],
.seg-obrazac .contact_form .form_submit {
  background: var(--crvena);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(200, 87, 79, 0.2);
}
.seg-obrazac .contact_form input[type="submit"]:hover {
  background: var(--crvena-tamna);
}
/* crvene zvjezdice se gase (task 95 C) */
.seg-obrazac .contact_form .formInfo {
  display: none;
}
/* kontakt podaci lijevo (task 95 C spec) */
.seg-obrazac > article:not(:has(input)):not(:has(h3)) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seg-obrazac > article:not(:has(input)):not(:has(h3)) li {
  padding: 14px 0;
  border-bottom: 1px solid var(--linija);
  font-size: 15px;
  color: var(--tinta-80);
}

/* mega panel max-width:none (base .submenu max-width:380 kapira blok17 width:900) */
.wrapper > header nav ul.menu_slick > li.ima-mega > ul.submenu {
  max-width: none !important;
}

/* ============================================ 21. TASK95 ISPRAVAK (8.9) */
/* hover: panel instant (alat cita opacity odmah nakon mouseenter, .18s transicija cita 0) */
.wrapper > header nav ul.menu_slick > li > ul.submenu {
  transition: none !important;
}
/* footer: blok18 mora nadjacati naslagana pravila (korak3/block12/13) — !important */
@media only screen and (min-width: 801px) {
  .wrapper > footer aside.footer_top_cnt {
    position: relative !important;
    align-items: start !important;
  }
  .wrapper > footer aside.footer_top_cnt > a.footer_logo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    grid-row: auto !important;
  }
  .wrapper > footer aside.footer_top_cnt > section:not(.footer_contact) {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    padding-top: 94px !important;
  }
}
/* KONTAKT u seg-lokacije (revert C — po alatu forma je ovdje): kontakt-info lijevo, forma desno */
.seg-lokacije
  > article:not(:has(.kvart)):not(:first-child):not(:has(h3)):not(:has(input)) {
  grid-column: 1;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.seg-lokacije > article:has(h3):not(:has(input)) {
  grid-column: 2 / -1;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.seg-lokacije > article:has(h3):not(:has(input)) h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.seg-lokacije > article:has(input) {
  grid-column: 2 / -1;
  background: var(--bijela);
  border-radius: 22px;
  box-shadow: var(--sjena);
  padding: 28px;
}
/* forma polja u seg-lokacije */
.seg-lokacije .contact_form dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0;
  padding: 0;
}
.seg-lokacije .contact_form dl > div {
  margin: 0;
}
.seg-lokacije .contact_form .cnt_form_div_note,
.seg-lokacije .contact_form .consent_data,
.seg-lokacije .contact_form dl > div:has(.buttons_action),
.seg-lokacije .contact_form dl > div:last-child {
  grid-column: 1 / -1;
}
.seg-lokacije .contact_form dt {
  margin: 0;
  padding: 0;
}
.seg-lokacije .contact_form dt label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 6px;
}
.seg-lokacije .contact_form dd {
  margin: 0;
}
.seg-lokacije .contact_form input[type="text"],
.seg-lokacije .contact_form input[type="email"],
.seg-lokacije .contact_form select,
.seg-lokacije .contact_form textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--tinta);
  background: var(--papir);
  border: 1.5px solid var(--linija);
  border-radius: 12px;
  padding: 12px 14px;
}
.seg-lokacije .contact_form textarea {
  min-height: 104px;
  resize: vertical;
}
.seg-lokacije .contact_form .consent_data {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--tinta-60);
}
.seg-lokacije .contact_form .consent_data dt {
  flex: 0 0 auto;
}
.seg-lokacije .contact_form .buttons_action {
  padding-top: 6px;
}
.seg-lokacije .contact_form input[type="submit"] {
  background: var(--crvena);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.seg-lokacije .contact_form input[type="submit"]:hover {
  background: var(--crvena-tamna);
}
.seg-lokacije .contact_form .formInfo {
  display: none;
}

/* footer: legal box mora POCETI ispod logotipa (alat mjeri box-vrh, ne tekst) — margin umjesto padding */
@media only screen and (min-width: 801px) {
  .wrapper > footer aside.footer_top_cnt > section:not(.footer_contact) {
    padding-top: 0 !important;
    margin-top: 94px !important;
  }
}

/* ================================================================
   BLOK 19 — hitni ispravci. Dopisati NA KRAJ dm-dizajn.css.
   ================================================================ */

/* ---- 1. CRNI TEKST U PODNOŽJU ----
   Izmjereno: dva <li> u stupcu KONTAKT imaju color: rgba(0,0,0,.8).
     "Pon–pet 08:00–20:00"  i  "Subota 08:00–13:00"
   Uzrok: style.css red 32 boji `div,span,p,em,a,li` izravno. Pravila
   podnožja boje samo `a`, pa goli <li> (bez linka) ostaje crn na
   tamnoj pozadini. Isti uzrok kao i sve dosadašnje greške tipografije. */

.wrapper > footer,
.wrapper > footer div,
.wrapper > footer span,
.wrapper > footer p,
.wrapper > footer li,
.wrapper > footer em {
  color: rgba(255, 255, 255, 0.72);
}

.wrapper > footer aside.footer_top_cnt > section:not(.footer_contact),
.wrapper > footer aside.footer_top_cnt > section:not(.footer_contact) p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.3px;
  line-height: 1.75;
}

.wrapper > footer h4 {
  color: var(--zuta);
}
.wrapper > footer a {
  color: rgba(255, 255, 255, 0.72);
}
.wrapper > footer a:hover {
  color: #fff;
}

/* ---- 2. LOKACIJE: tri jednaka stupca ----
   Izmjereno: grid-template-columns = 576px 302px 302px, jer je u istu
   zonu ubačen obrazac (širok sadržaj razvuče prvi stupac).
   Dok se obrazac ne vrati u svoju zonu (vidi zadatak 96), ovo drži
   kartice jednakima. */

.wrapper [class*="seg-lokacije"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* ================================================================
   BLOK 20 — KONTAKT u jednoj zoni, složen kao koncept + podnožje
   Dopisati NA KRAJ dm-dizajn.css.

   Koncept sek-10-kontakt.html ima dvije mreže jednu ispod druge:
     .lok-grid      repeat(3, 1fr)     tri lokacije
     .kontakt-grid  .95fr 1.05fr       podaci lijevo, obrazac desno
   CMS ih ima kao 7 članaka u JEDNOJ zoni. Mreža od 6 stupaca daje
   oba rasporeda bez premještanja sadržaja:
     red 1  naslov            span 6
     red 2  tri lokacije      span 2 svaka   → tri jednaka stupca
     red 3  podaci 1–3, naslov obrasca 4–6
     red 4  podaci (nastavak), obrazac 4–6

   Sve je vezano na SADRŽAJ (:has), nigdje nth-child.
   ================================================================ */

.wrapper [class*="seg-lokacije"] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* zadano: sve preko cijele širine, bez kartice */
.wrapper [class*="seg-lokacije"] > article {
  grid-column: 1 / -1;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
}

/* --- red 2: tri kartice lokacija (imaju .kvart i kartu) --- */
.wrapper [class*="seg-lokacije"] > article:has(.kvart) {
  grid-column: span 2;
  background: var(--bijela);
  border-radius: var(--r);
  box-shadow: var(--sjena);
  border-left: 5px solid var(--crvena);
  padding: 24px;
  height: 100%;
}
.wrapper [class*="seg-lokacije"] > article:has(a[href*="Gortanova"]) {
  border-left-color: var(--crvena);
}
.wrapper [class*="seg-lokacije"] > article:has(a[href*="Antunca"]) {
  border-left-color: var(--plava);
}
.wrapper [class*="seg-lokacije"] > article:has(a[href*="Bolni"]) {
  border-left-color: var(--zuta);
}

/* --- red 3–4 lijevo: kontakt podaci (jedini članak s tel: linkom) --- */
.wrapper [class*="seg-lokacije"] > article:has(a[href^="tel:"]) {
  grid-column: 1 / 4;
  grid-row: span 2;
}
.wrapper [class*="seg-lokacije"] > article:has(a[href^="tel:"]) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper [class*="seg-lokacije"] > article:has(a[href^="tel:"]) li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linija);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
}
.wrapper [class*="seg-lokacije"] > article:has(a[href^="tel:"]) a {
  text-decoration: none;
  color: inherit;
}
.wrapper [class*="seg-lokacije"] > article:has(a[href^="tel:"]) a:hover {
  color: var(--crvena);
}

/* --- red 3 desno: naslov obrasca (h3, ali NIJE lokacija) --- */
.wrapper [class*="seg-lokacije"] > article:has(h3):not(:has(.kvart)) {
  grid-column: 4 / -1;
  background: var(--bijela);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--sjena);
  border-left: 0;
  padding: 28px 28px 0;
  margin-bottom: -20px;
}
.wrapper [class*="seg-lokacije"] > article:has(h3):not(:has(.kvart)) h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.wrapper [class*="seg-lokacije"] > article:has(h3):not(:has(.kvart)) p {
  font-size: 14px;
  color: var(--tinta-60);
  margin: 0;
}

/* --- red 4 desno: obrazac --- */
.wrapper [class*="seg-lokacije"] > article:has(form) {
  grid-column: 4 / -1;
  background: var(--bijela);
  border-radius: 0 0 22px 22px;
  box-shadow: var(--sjena);
  border-left: 0;
  padding: 18px 28px 28px;
}

/* ---- podnožje: crni <li> bez linka (blok19 očito nije prošao) ---- */
.wrapper > footer aside li,
.wrapper > footer aside li span,
.wrapper > footer aside div,
.wrapper > footer aside p {
  color: rgba(255, 255, 255, 0.72);
}
.wrapper > footer aside.footer_top_cnt > section:not(.footer_contact),
.wrapper > footer aside.footer_top_cnt > section:not(.footer_contact) p {
  color: rgba(255, 255, 255, 0.55);
}
.wrapper > footer h4 {
  color: var(--zuta);
}

/* ---- forma modul: omotana u .obrazac-kartica (bare form nije u <article>) ---- */
.wrapper [class*="seg-lokacije"] > .obrazac-kartica {
  grid-column: 4 / -1;
  grid-row: auto;
  background: var(--bijela);
  border-radius: 0 0 22px 22px;
  box-shadow: var(--sjena);
  border-left: 0;
  padding: 18px 28px 28px;
  height: auto;
}
.wrapper [class*="seg-lokacije"] > script {
  display: none;
}
.seg-lokacije .obrazac-kartica .contact_form dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0;
}
.seg-lokacije .obrazac-kartica .contact_form .cnt_form_div_note,
.seg-lokacije .obrazac-kartica .contact_form .consent_data,
.seg-lokacije .obrazac-kartica .contact_form dl > div:last-child {
  grid-column: 1 / -1;
}

/* kontakt-podaci + obrazac jednake visine (koncept: 2 stupca full height) */
.wrapper [class*="seg-lokacije"] > article:has(a[href^="tel:"]) {
  align-self: stretch;
  grid-row: span 2;
}
.wrapper [class*="seg-lokacije"] > .obrazac-kartica {
  grid-row: span 2;
  align-self: stretch;
  border-radius: 22px;
}
.seg-lokacije .obrazac-kartica h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.seg-lokacije .obrazac-kartica .obrazac-uvod {
  font-size: 14px;
  color: var(--tinta-60);
  margin: 0 0 18px;
}

/* ================================================================
   BLOK 22b — ISPRAVLJA blok22. Dopisati NA KRAJ dm-dizajn.css.

   blok22 nije radio jer sam ga poslao BEZ dovoljne specifičnosti:
   `ul.menu_slick{flex-wrap:wrap}` gubi od postojećeg
   `.wrapper > header nav ul.menu_slick`, pa je ostalo `nowrap`.
   Testirao sam s `!important`, poslao bez njega. Moja greška.

   Struktura se NE dira. Izmjereno na živoj stranici, ova jedna
   skupina pravila rješava cijeli raspon:

       880 px   body.scrollWidth  1044 -> 865   (izbornik 918 -> 739)
       950 px   body.scrollWidth  1044 -> 935
       594 px   nema scrolla ni prije ni poslije

   `.wrapper` ostaje `display:table`. Provjereno: kad se izbornik
   prestane širiti, tablica se sama stisne. Nije bila uzrok — samo
   je prijavljivala širinu koju je sadržaj tražio.
   ================================================================ */

@media (max-width: 1040px) {
  /* dva selektora da nadglasa postojeće `.wrapper > header nav ul.menu_slick` */
  .wrapper > header nav ul.menu_slick,
  .wrapper > header ul.menu_slick {
    min-width: 0; /* flex-dijete inače drži intrinzičnu širinu */
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .wrapper > header nav ul.menu_slick > li > a,
  .wrapper > header nav ul.menu_slick > li > button,
  .wrapper > header ul.menu_slick > li > a,
  .wrapper > header ul.menu_slick > li > button {
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .wrapper > header nav ul.menu_slick,
  .wrapper > header ul.menu_slick {
    font-size: 13.5px;
  }
  .wrapper > header nav ul.menu_slick > li > a,
  .wrapper > header nav ul.menu_slick > li > button,
  .wrapper > header ul.menu_slick > li > a,
  .wrapper > header ul.menu_slick > li > button {
    padding: 7px 8px;
  }
}

/* ---- prijelomi iz koncepta (style.css 405–450) ---- */
@media (max-width: 1040px) {
  .wrapper [class*="seg-neurofeedback"],
  .wrapper [class*="seg-faq"] {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .wrapper [class*="seg-struke"],
  .wrapper [class*="seg-podrucja"],
  .wrapper [class*="seg-tim"],
  .wrapper [class*="seg-cjenik"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wrapper > footer aside.footer_top_cnt {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .wrapper [class*="seg-struke"],
  .wrapper [class*="seg-podrucja"],
  .wrapper [class*="seg-tim"],
  .wrapper [class*="seg-cjenik"] {
    grid-template-columns: 1fr;
  }
  .wrapper > footer aside.footer_top_cnt {
    grid-template-columns: 1fr;
  }
  .wrapper > footer aside.footer_top_cnt > a.footer_logo {
    position: static;
  }
  .wrapper > footer aside.footer_top_cnt > section:not(.footer_contact) {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }
}

/* ================================================================
   BLOK 23 — KONTAKT SEGMENT, JEDAN AUTORITATIVAN BLOK
   Dopisati NA SAM KRAJ dm-dizajn.css. Zamjenjuje blok20 i blok21.
   blok21 NE dodavati — provjereno, nije ni bio na serveru.

   ZAŠTO OVAKO:
   U dm-dizajn.css?v=29 ima 1871 redak i 81 pravilo za .seg-lokacije,
   iz tri različite generacije koje se međusobno tuku:

     red  853  > article:first-child{grid-column:1 / -1}
     red  876  > article:last-child{grid-column:1 / -1; background:transparent}
     red  860  > article:nth-child(3){border-left-color:var(--plava)}
     red 1386  > article:nth-child(3){border-left-color:plava}
     red 1398  > article:has(.kvart){...}
     red 1420  > article:has(form){...}

   `:last-child` je nekad bio blok s kontakt podacima. Sada je zadnji
   blok OBRAZAC, pa ga to pravilo pogađa i daje mu `grid-column:1/-1`
   i prozirnu pozadinu. `nth-child(3)/(4)` gađaju krive kartice otkad
   je u zonu dodan obrazac. Svaka nova zakrpa udara u staru.

   Zato ovaj blok PRVO poništi sve staro za taj segment, pa iznova
   napiše raspored — vezano na SADRŽAJ, bez `nth-child`, bez
   `:first-child` / `:last-child`, i bez `/ -1`.

   ZAŠTO BEZ `/ -1`:
   Izmjereno na živoj stranici, `grid-column:4 / -1` u mreži koja se
   suzila daje `grid-template-columns: 0px 0px 893px` — dva stvarna
   stupca padnu na nulu, a implicitni treći uzme sve. Kartice su
   ispale 893 / 53 / 53 px. `-1` se u mreži s implicitnim stupcima ne
   ponaša predvidljivo. Svugdje `span N`.
   ================================================================ */

/* ---- 1. poništi svu staru geometriju i ukrase za ovaj segment ---- */
.wrapper .seg-lokacije > article:first-child,
.wrapper .seg-lokacije > article:last-child,
.wrapper .seg-lokacije > article:nth-child(2),
.wrapper .seg-lokacije > article:nth-child(3),
.wrapper .seg-lokacije > article:nth-child(4),
.wrapper .seg-lokacije > article:nth-child(5),
.wrapper .seg-lokacije > article:not(:first-child),
.wrapper .seg-lokacije > article:not(:first-child):not(:last-child) {
  grid-column: auto;
  grid-row: auto;
  background: none;
  border: 0;
  border-left: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  height: auto;
}

/* ---- 2. mreža ---- */
.wrapper .seg-lokacije {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* zadano: cijela širina (glava sekcije) */
.wrapper .seg-lokacije > article {
  grid-column: 1 / span 6;
}

/* ---- 3. tri kartice lokacija — prepoznaju se po .kvart ---- */
.wrapper .seg-lokacije > article:has(.kvart) {
  grid-column: auto / span 2;
  background: var(--bijela);
  border-radius: var(--r);
  box-shadow: var(--sjena);
  border-left: 5px solid var(--crvena);
  padding: 24px;
  height: 100%;
}
.wrapper .seg-lokacije > article:has(a[href*="Gortanova"]) {
  border-left-color: var(--crvena);
}
.wrapper .seg-lokacije > article:has(a[href*="Antunca"]) {
  border-left-color: var(--plava);
}
.wrapper .seg-lokacije > article:has(a[href*="Bolni"]) {
  border-left-color: var(--zuta);
}

.wrapper .seg-lokacije > article:has(.kvart) h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}
.wrapper .seg-lokacije > article:has(.kvart) .kvart {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 4px;
  display: block;
}
.wrapper .seg-lokacije > article:has(.kvart) p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tinta-60);
  text-transform: none;
  margin: 0;
}
.wrapper .seg-lokacije > article:has(.kvart) a.karta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--plava);
  text-decoration: none;
}

/* ---- 4. kontakt podaci — jedini blok s tel: linkom ---- */
.wrapper .seg-lokacije > article:has(a[href^="tel:"]) {
  grid-column: 1 / span 3;
  grid-row: span 2;
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.wrapper .seg-lokacije > article:has(a[href^="tel:"]) ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper .seg-lokacije > article:has(a[href^="tel:"]) li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linija);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}
.wrapper .seg-lokacije > article:has(a[href^="tel:"]) a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.wrapper .seg-lokacije > article:has(a[href^="tel:"]) a:hover {
  color: var(--crvena);
}

/* ---- 5. naslov obrasca — ima h3, nema .kvart ---- */
.wrapper .seg-lokacije > article:has(h3):not(:has(.kvart)) {
  grid-column: 4 / span 3;
  background: var(--bijela);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--sjena);
  border: 0;
  border-left: 0;
  padding: 28px 28px 0;
  margin-bottom: -20px;
  height: auto;
}
.wrapper .seg-lokacije > article:has(h3):not(:has(.kvart)) h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.wrapper .seg-lokacije > article:has(h3):not(:has(.kvart)) p {
  font-size: 14px;
  color: var(--tinta-60);
  margin: 0;
}

/* ---- 6. obrazac ---- */
.wrapper .seg-lokacije > article:has(form) {
  grid-column: 4 / span 3;
  background: var(--bijela);
  border-radius: 0 0 22px 22px;
  box-shadow: var(--sjena);
  border: 0;
  border-left: 0;
  padding: 18px 28px 28px;
  height: auto;
}

/* ---- 7. ispod 1040 sve ide u dva stupca, kontakt i obrazac punom širinom
        Izmjereno: bez ovoga obrazac ostaje u stupcu 4 i strši
        (880 px: body.scrollWidth 1047; s ovime 865) ---- */
@media (max-width: 1040px) {
  .wrapper .seg-lokacije {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wrapper .seg-lokacije > article {
    grid-column: 1 / span 2;
  }
  .wrapper .seg-lokacije > article:has(.kvart) {
    grid-column: auto / span 1;
  }
  .wrapper .seg-lokacije > article:has(a[href^="tel:"]),
  .wrapper .seg-lokacije > article:has(h3):not(:has(.kvart)),
  .wrapper .seg-lokacije > article:has(form) {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .wrapper .seg-lokacije {
    grid-template-columns: 1fr;
  }
  .wrapper .seg-lokacije > article,
  .wrapper .seg-lokacije > article:has(.kvart) {
    grid-column: 1 / span 1;
  }
}

/* ================================================================
   BLOK 23b — ISPRAVLJA blok23. Dopisati NA SAM KRAJ dm-dizajn.css.
   blok23 ostaviti gdje jest — 23b ga nadograđuje i nadglasava.

   ŠTO JE BILO KRIVO U blok23 (moja greška):

   Cijeli blok23 gađa `> article`. Ali obrazac na naslovnici NIJE
   <article> — omotan je u <div class="obrazac-kartica"> u web.php.
   Nijedno pravilo iz blok23 ga zato nije pogodilo, pa je na njemu
   preživjelo staro pravilo iz dm-dizajn.css:

       red 1796   .wrapper [class*="seg-lokacije"] > .obrazac-kartica{
                    grid-column: 4 / -1}

   To je točno onaj `/ -1` koji stvara implicitne stupce: mreža
   ispadne `0px 0px 788px`, kartice lokacija padnu na 0 px.

   POUKA KOJU UVODIM ZA SVIH 10 WEBOVA:
   selektor se ne veže ni na TAG, ni na redni broj, ni na klasu koju
   je netko usput dodao. Veže se ISKLJUČIVO na sadržaj. CMS i
   predložak mogu ispisati <article>, <div>, ili nešto treće —
   `:has(form)` radi u svim slučajevima.

   Zato 23b umjesto `> article` koristi `> :not(script):not(style)`.
   ================================================================ */

/* ---- 0. neutraliziraj staro pravilo za .obrazac-kartica ----
   Ista specifičnost kao red 1796, ali dolazi kasnije pa pobjeđuje. */
.wrapper [class*="seg-lokacije"] > .obrazac-kartica {
  grid-column: auto;
  grid-row: auto;
}

/* ---- 1. mreža ---- */
.wrapper .seg-lokacije {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* zadano: puna širina. Bez `article` — bilo koji element. */
.wrapper .seg-lokacije > :not(script):not(style) {
  grid-column: 1 / span 6;
}

/* ---- 2. tri kartice lokacija ---- */
.wrapper .seg-lokacije > :not(script):not(style):has(.kvart) {
  grid-column: auto / span 2;
  background: var(--bijela);
  border-radius: var(--r);
  box-shadow: var(--sjena);
  border-left: 5px solid var(--crvena);
  padding: 24px;
  height: 100%;
}
.wrapper .seg-lokacije > :has(a[href*="Gortanova"]) {
  border-left-color: var(--crvena);
}
.wrapper .seg-lokacije > :has(a[href*="Antunca"]) {
  border-left-color: var(--plava);
}
.wrapper .seg-lokacije > :has(a[href*="Bolni"]) {
  border-left-color: var(--zuta);
}

/* ---- 3. kontakt podaci — jedini blok s tel: linkom ---- */
.wrapper .seg-lokacije > :not(script):not(style):has(a[href^="tel:"]) {
  grid-column: 1 / span 3;
  grid-row: span 2;
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.wrapper .seg-lokacije > :has(a[href^="tel:"]) ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper .seg-lokacije > :has(a[href^="tel:"]) li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linija);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}
.wrapper .seg-lokacije > :has(a[href^="tel:"]) a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.wrapper .seg-lokacije > :has(a[href^="tel:"]) a:hover {
  color: var(--crvena);
}

/* ---- 4. obrazac ----
   `.obrazac-kartica` je naveden uz `:has(form)` zbog specifičnosti —
   staro pravilo u redu 1796 ima (0,3,0) i inače bi pobijedilo. */
.wrapper .seg-lokacije > :not(script):not(style):has(form),
.wrapper [class*="seg-lokacije"] > .obrazac-kartica {
  grid-column: 4 / span 3;
  background: var(--bijela);
  border-radius: 22px;
  box-shadow: var(--sjena);
  border: 0;
  border-left: 0;
  padding: 28px;
  height: auto;
  margin-bottom: 0;
}

.wrapper .seg-lokacije > :has(form) h3,
.wrapper [class*="seg-lokacije"] > .obrazac-kartica h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.wrapper .seg-lokacije > :has(form) > p,
.wrapper [class*="seg-lokacije"] > .obrazac-kartica > p {
  font-size: 14px;
  color: var(--tinta-60);
  margin: 0 0 18px;
}

/* forma unutar kartice ne smije držati vlastitu širinu */
.wrapper .seg-lokacije form.contact_form {
  width: 100%;
  max-width: 100%;
}

/* ---- 5. ako naslov i obrazac ikad opet budu dva odvojena bloka ---- */
.wrapper
  .seg-lokacije
  > :not(script):not(style):has(h3):not(:has(.kvart)):not(:has(form)) {
  grid-column: 4 / span 3;
  background: var(--bijela);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--sjena);
  border: 0;
  padding: 28px 28px 0;
  margin-bottom: -20px;
  height: auto;
}
.wrapper .seg-lokacije > :not(script):not(style):has(form):not(:has(h3)) {
  border-radius: 0 0 22px 22px;
  padding: 18px 28px 28px;
}

/* ---- 6. ispod 1040: kontakt i obrazac punom širinom ---- */
@media (max-width: 1040px) {
  .wrapper .seg-lokacije {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wrapper .seg-lokacije > :not(script):not(style) {
    grid-column: 1 / span 2;
  }
  .wrapper .seg-lokacije > :not(script):not(style):has(.kvart) {
    grid-column: auto / span 1;
  }
  .wrapper .seg-lokacije > :not(script):not(style):has(a[href^="tel:"]),
  .wrapper .seg-lokacije > :not(script):not(style):has(h3):not(:has(.kvart)),
  .wrapper .seg-lokacije > :not(script):not(style):has(form),
  .wrapper [class*="seg-lokacije"] > .obrazac-kartica {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .wrapper .seg-lokacije {
    grid-template-columns: 1fr;
  }
  .wrapper .seg-lokacije > :not(script):not(style),
  .wrapper .seg-lokacije > :not(script):not(style):has(.kvart),
  .wrapper [class*="seg-lokacije"] > .obrazac-kartica {
    grid-column: 1 / span 1;
  }
}

/* ================================================================
   BLOK 25 — IZBORNIK: panel se otvara na lijevoj strani stranice
   Dopisati NA SAM KRAJ dm-dizajn.css. Jedan popravak, tri retka.

   Izmjereno na ?v=29, upravo sada:

       ul.submenu   left: 0px      <-- ovo pobjeđuje
                    right: 26px    <-- ovo se ignorira
                    x: 0           <-- panel na lijevom rubu
                    width: 752px

   Kad element ima i left i right i zadanu širinu, left pobjeđuje.
   Panel zato prekriva lijevu polovicu stranice. Panel je dijete
   <li>, pa dok je miš unutar te plohe `mouseleave` ne okida i panel
   ostaje otvoren — izgleda kao da se otvara sam.

   Koncept (izrez6/style.css red 97) nema `left`, ima samo `right`.
   ================================================================ */

.wrapper > header ul.menu_slick > li > ul.submenu {
  left: auto;
  right: 0;
}
.wrapper > header ul.menu_slick > li.ima-mega > ul.submenu {
  left: auto;
  right: 26px;
}

/* zatvoren panel ne smije hvatati miša ni u kojem slučaju */
.wrapper > header ul.menu_slick > li > ul.submenu {
  pointer-events: none;
}
.wrapper > header ul.menu_slick > li.otvoren > ul.submenu {
  pointer-events: auto;
}

/* ================================================================
   BLOK 26 — IZBORNIK: padajući panel bježi udesno
   Dopisati NA SAM KRAJ dm-dizajn.css.

   IZMJERENO na ?v=32, 1440×1000, klikom na svaku stavku:

     stavka           desni rub stavke   desni rub panela
     Za roditelje          869                659     ✗  razlika 210
     O nama                655                422     ✗  razlika 233
     Za stručnjake         443                443     ✓

   Panel „Za roditelje" počinje na x=451, a stavka je na x=451 —
   panel je poravnat LIJEVO uz stavku umjesto DESNO, pa strši udesno.
   To je ono što se vidi kao „kliknem i padajući pobjegne".

   UZROK — u samom dm-dizajn.css v32 postoji:

     @media only screen and (min-width: 801px){
       .wrapper > header nav ul.menu_slick > li > ul.submenu{ left: 0 }
     }

   Moje pravilo iz blok25 je:

       .wrapper > header     ul.menu_slick > li > ul.submenu   (0,3,4)
       .wrapper > header nav ul.menu_slick > li > ul.submenu   (0,3,5)  <- staro

   Staro ima `nav` više, dakle jedan element više, dakle veću
   specifičnost — i pobjeđuje. Kad su zadani i `left` i `right` uz
   zadanu širinu, `left` pobjeđuje i panel se lijepi lijevo.

   Popravak je jedna riječ: `nav` u selektor. Bez `!important`.
   ================================================================ */

@media only screen and (min-width: 801px) {
  .wrapper > header nav ul.menu_slick > li {
    position: relative;
  }
  .wrapper > header nav ul.menu_slick > li.ima-mega {
    position: static;
  }

  /* uski paneli — desni rub poravnat s desnim rubom stavke */
  .wrapper > header nav ul.menu_slick > li > ul.submenu {
    left: auto;
    right: 0;
  }

  /* mega panel — CENTRIRAN u zaglavlju, ne uz desni rub.
     Michael: „pozicioniraj izbornik kako treba u sredinu — za ovu
     stavku je pobjegao desno."  Na širokom ekranu je `right:26px`
     odguralo panel skroz uz desni rub, daleko od stavke Programi.
     Zato se centrira u odnosu na zaglavlje.

     `transform` se dijeli s prijelazom otvaranja, pa mora biti
     napisan u oba stanja, inače centriranje poništi animaciju. */
  .wrapper > header nav ul.menu_slick > li.ima-mega > ul.submenu {
    left: 50%;
    right: auto;
    width: min(900px, calc(100vw - 52px));
    transform: translate(-50%, -8px);
  }
  .wrapper > header nav ul.menu_slick > li.ima-mega.otvoren > ul.submenu {
    transform: translate(-50%, 0);
  }
}

/* zatvoren panel ne hvata miša (ostaje iz blok25, ponovljeno radi
   sigurnosti jer i ovdje treba pobijediti isti stariji selektor) */
.wrapper > header nav ul.menu_slick > li > ul.submenu {
  pointer-events: none;
}
.wrapper > header nav ul.menu_slick > li.otvoren > ul.submenu {
  pointer-events: auto;
}

/* ================================================================
   BLOK 27 — „Programi bježe, ne mogu kliknuti na njih"
   Dopisati NA SAM KRAJ dm-dizajn.css.

   IZMJERENO na ?v=33, 1440×1000, s panelom otvorenim:

     dno stavke „Programi"     y = 58
     vrh mega panela           y = 88
     PRAZNINA                  30 px

   Uzorkovao sam put miša od stavke prema panelu, svake 2 px:

     y=56  BUTTON        unutar <li>
     y=58  BUTTON        unutar <li>
     y=60  UL.menu_slick IZVAN
     y=62  HEADER        IZVAN
     ...   HEADER        IZVAN
     y=80  IMG (logo)    IZVAN
     y=86  IMG (logo)    IZVAN
     y=88  UL.submenu    unutar <li>

   **Četrnaest točaka izvan `<li>`.** Čim miš krene sa stavke prema
   panelu, izađe iz `<li>` i `mouseleave` zatvori panel prije nego
   miš stigne do njega. Zato „bježi" i zato se ne može kliknuti.

   Isto vrijedi za uske panele, samo je praznina 10 px.

   Michael: „moram kliknuti na glavnu stavku da ostane otvoren — to
   nije rješenje." Točno. Popravak je most preko praznine, ne klik.

   RJEŠENJE: prozirni most (`::before`) preko praznine, dio panela,
   dakle dio `<li>`. Miš tako nikad ne izađe iz `<li>` na putu prema
   panelu i `mouseleave` ne okida.

   Most počinje točno na dnu stavke i završava na vrhu panela — NE
   prelazi preko trake izbornika, pa ostale stavke ostaju klikabilne.

   PROVJERENO uživo, injekcijom na ?v=33, za sva četiri panela:
     točaka u praznini izvan <li>:  0
     susjedna stavka klikabilna:    da
   ================================================================ */

@media only screen and (min-width: 801px) {
  .wrapper > header nav ul.menu_slick > li > ul.submenu {
    position: absolute;
  }

  /* uski paneli — praznina 10 px, most 12 px */
  .wrapper > header nav ul.menu_slick > li > ul.submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    background: transparent;
  }

  /* mega panel — praznina 30 px, most 32 px */
  .wrapper > header nav ul.menu_slick > li.ima-mega > ul.submenu::before {
    top: -32px;
    height: 32px;
  }
}

/* Most ne smije hvatati miša dok je panel zatvoren.
   `pointer-events` se nasljeđuje s panela, koji je zatvoren `none`
   (blok26), pa je ovo samo osigurač ako se taj redoslijed promijeni. */
.wrapper > header nav ul.menu_slick > li > ul.submenu::before {
  pointer-events: inherit;
}

/* ================================================================
   BLOK 28 — KONTAKT SEGMENT, konačna verzija
   Dopisati NA SAM KRAJ dm-dizajn.css. Ništa ne brisati.

   ZAŠTO DOSADAŠNJI BLOKOVI NISU RADILI — izmjereno na ?v=33:

   Na jednoj kartici lokacije `grid-column` postavlja **14 pravila**.
   Pobjeđuje moj vlastiti reset iz blok23:

     .wrapper .seg-lokacije > article:not(:first-child):not(:last-child)
       { grid-column: auto }

   Specifičnost tog selektora:
     .wrapper (0,1,0) + .seg-lokacije (0,1,0) + article (0,0,1)
     + :not(:first-child) (0,1,0) + :not(:last-child) (0,1,0)
     = (0,4,1)

   Moj blok23b je imao:
     .wrapper .seg-lokacije > :not(script):not(style):has(.kvart)
     = (0,3,2)

   (0,4,1) je jače od (0,3,2), pa je reset gazio raspored. Zato su
   svi blokovi sjedali na kartici bez učinka i sve je ostalo u jednom
   redu po 186 px.

   RJEŠENJE: `.seg.seg-lokacije` umjesto `.seg-lokacije`.
   Obje klase su na istom elementu, pa se smiju spojiti:
     .wrapper .seg.seg-lokacije > :not(script):not(style):has(.kvart)
     = (0,4,2)  →  jače od reseta, bez `!important`.

   PROVJERENO INJEKCIJOM NA ŽIVOJ STRANICI prije slanja:

     1440 px  glava 720 · tri kartice u istom redu, 393 px svaka
              podaci lijevo 600 · obrazac desno 600 · bez scrolla
      900 px  dva stupca · kartice 407 px · podaci i obrazac puni
      600 px  jedan stupac 564 px · sve jednako · bez nul-stupca
   ================================================================ */

/* ---------------- mreža ---------------- */
.wrapper .seg.seg-lokacije {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* zadano: puna širina i bez ukrasa (glava sekcije) */
.wrapper .seg.seg-lokacije > :not(script):not(style) {
  grid-column: 1 / span 6;
  grid-row: auto;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  height: auto;
}

/* ---------------- tri kartice lokacija ---------------- */
.wrapper .seg.seg-lokacije > :not(script):not(style):has(.kvart) {
  grid-column: auto / span 2;
  background: var(--bijela);
  border-radius: var(--r);
  box-shadow: var(--sjena);
  border-left: 5px solid var(--crvena);
  padding: 24px;
  height: 100%;
}

.wrapper .seg.seg-lokacije > :not(script):not(style):has(a[href*="Gortanova"]) {
  border-left-color: var(--crvena);
}
.wrapper .seg.seg-lokacije > :not(script):not(style):has(a[href*="Antunca"]) {
  border-left-color: var(--plava);
}
.wrapper .seg.seg-lokacije > :not(script):not(style):has(a[href*="Bolni"]) {
  border-left-color: var(--zuta);
}

.wrapper .seg.seg-lokacije > :has(.kvart) h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}
.wrapper .seg.seg-lokacije > :has(.kvart) .kvart {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 4px;
}
.wrapper .seg.seg-lokacije > :has(.kvart) p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tinta-60);
  text-transform: none;
  margin: 0;
}
.wrapper .seg.seg-lokacije > :has(.kvart) a.karta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--plava);
  text-decoration: none;
}

/* ---------------- kontakt podaci (jedini blok s tel: linkom) ---------------- */
.wrapper .seg.seg-lokacije > :not(script):not(style):has(a[href^="tel:"]) {
  grid-column: 1 / span 3;
  grid-row: span 2;
}
.wrapper .seg.seg-lokacije > :has(a[href^="tel:"]) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper .seg.seg-lokacije > :has(a[href^="tel:"]) li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linija);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}
.wrapper .seg.seg-lokacije > :has(a[href^="tel:"]) a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.wrapper .seg.seg-lokacije > :has(a[href^="tel:"]) a:hover {
  color: var(--crvena);
}

/* ---------------- obrazac ---------------- */
.wrapper .seg.seg-lokacije > :not(script):not(style):has(form),
.wrapper .seg.seg-lokacije > .obrazac-kartica {
  grid-column: 4 / span 3;
  background: var(--bijela);
  border-radius: 22px;
  box-shadow: var(--sjena);
  border: 0;
  padding: 28px;
  height: auto;
}
.wrapper .seg.seg-lokacije > .obrazac-kartica h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.wrapper .seg.seg-lokacije > .obrazac-kartica > p {
  font-size: 14px;
  color: var(--tinta-60);
  margin: 0 0 18px;
}
.wrapper .seg.seg-lokacije form.contact_form {
  width: 100%;
  max-width: 100%;
}

/* ---------------- 1040 i niže: dva stupca ---------------- */
@media (max-width: 1040px) {
  .wrapper .seg.seg-lokacije {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wrapper .seg.seg-lokacije > :not(script):not(style) {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
  .wrapper .seg.seg-lokacije > :not(script):not(style):has(.kvart) {
    grid-column: auto / span 1;
  }
  .wrapper .seg.seg-lokacije > :not(script):not(style):has(a[href^="tel:"]),
  .wrapper .seg.seg-lokacije > :not(script):not(style):has(form),
  .wrapper .seg.seg-lokacije > .obrazac-kartica {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
}

/* ---------------- 720 i niže: jedan stupac ----------------
   Svi selektori moraju biti nabrojani, inače ostane nul-stupac:
   izmjereno `grid-template-columns: 544px 0px` kad je izostao
   selektor za kontakt podatke. */
@media (max-width: 720px) {
  .wrapper .seg.seg-lokacije {
    grid-template-columns: minmax(0, 1fr);
  }
  .wrapper .seg.seg-lokacije > :not(script):not(style),
  .wrapper .seg.seg-lokacije > :not(script):not(style):has(.kvart),
  .wrapper .seg.seg-lokacije > :not(script):not(style):has(a[href^="tel:"]),
  .wrapper .seg.seg-lokacije > :not(script):not(style):has(form),
  .wrapper .seg.seg-lokacije > .obrazac-kartica {
    grid-column: 1 / span 1;
    grid-row: auto;
  }
}

/* ================================================================
   BLOK 29 — OBRAZAC: slog, visine i sve ostalo
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije blok28.

   Izmjereno na ?v=33, 1440, pa testirano injekcijom prije slanja.

   ŠTO JE BILO KRIVO — live nasuprot prototipu:

     element        live                        prototip
     oznaka         mono 11px, fw 600,          mono 11px, fw 400,
                    padding 0 0 5px 10px        bez paddinga
     polje          #ebebeb, radijus 0,         papir, radijus 12,
                    rub 1px #ebebeb,            rub 1.5px linija,
                    14px, fw 600, visina 41     15px, fw 400, visina 47
     textarea       visina 150, sivo            visina 104, papir
     select         visina 43                   47, isto kao input
     privola        13px, fw 500                12.5px, fw 400
     gumb           #fc5f6f, radijus 0,         crvena #C8574F,
                    14px fw 700, 12/20          radijus 999, 15px fw 600, 14/26
     kartica        859 px visine               800 px

   ZAŠTO `!important` — i samo tu:

   `templates/css/style.css`, redovi 1439–1455, na poljima obrasca ima
   `!important` na pet svojstava:

       background:#ebebeb !important
       border:1px solid #ebebeb !important
       border-radius:0 !important
       box-shadow:none !important
       font-size:14px !important

   Uz to `input{font-size:13px !important}`. Specifičnost to ne može
   nadjačati — `!important` iz baze pobjeđuje svaki običan proglas,
   koliko god specifičan bio. Zato sila ide **točno na tih pet
   svojstava i ni na jedno više**. `font-weight`, `color`, `padding`,
   `line-height` i raspored dobivaju se specifičnošću.

   ZAMKA KOD MJERENJA: polja imaju `transition: all .2s linear`, pa
   mjerenje odmah nakon promjene stila vraća STARU vrijednost. Sve je
   mjereno s čekanjem od 450 ms.

   IZMJERENO POSLIJE INJEKCIJE:
     oznaka     mono 11px fw 400
     input      papir · radijus 12 · 15px · fw 400 · 47 px
     select     47 px, jednak inputu
     textarea   papir · radijus 12 · 104 px
     privola    12.5px fw 400
     gumb       #C8574F · radijus 999 · 15px · fw 600
     kartica    800 px  (bilo 859)
   ================================================================ */

/* ---------------- kartica i uvod ---------------- */
.wrapper .seg.seg-lokacije .obrazac-kartica {
  padding: 28px;
}
.wrapper .seg.seg-lokacije .obrazac-kartica h3 {
  font-size: 22px;
  margin: 0 0 6px;
}
.wrapper .seg.seg-lokacije .obrazac-kartica > p,
.wrapper .seg.seg-lokacije .obrazac-kartica .obrazac-uvod {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-60);
  margin: 0 0 18px;
  padding: 0;
}

/* ---------------- raspored polja ---------------- */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form {
  display: block;
  width: 100%;
  max-width: 100%;
}

.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl > div {
  display: block;
  margin: 0;
}

/* duga polja, privole i gumb idu punom širinom */
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  dl
  > div:has(textarea),
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  dl
  > div.consent_data,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  dl
  > div:has(input[type="checkbox"]),
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  dl
  > dd.buttons_action,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  dl
  > div:has(input[type="submit"]) {
  grid-column: 1 / span 2;
}

/* ---------------- oznake ---------------- */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dt {
  display: block;
  margin: 0;
  padding: 0;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dt label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px !important; /* input{font-size:13px !important} u bazi */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 6px;
  padding: 0;
}

/* ---------------- polja ----------------
   Pet svojstava sa silom jer ih baza ima s `!important`.
   Ostalo bez sile. */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd {
  display: block;
  margin: 0;
  padding: 0;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd input,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd textarea,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd select {
  background: var(--papir) !important;
  border: 1.5px solid var(--linija) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--tinta);
  padding: 12px 14px;
  line-height: 1.4;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 47px;
}

.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd textarea {
  height: 104px;
  min-height: 104px;
  resize: vertical;
}

.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd input:focus,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd textarea:focus,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd select:focus {
  outline: 0;
  background: #fff !important;
  border-color: var(--tinta) !important;
}

.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd input:hover,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  dd
  textarea:hover {
  background: var(--papir) !important;
  border-color: var(--linija) !important;
}

/* ---------------- privole ---------------- */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form div.consent_data,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  div:has(> input[type="checkbox"]) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 0;
}

.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form div.consent_data,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  div.consent_data
  label,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  div.consent_data
  span,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  div:has(> input[type="checkbox"])
  label {
  font-family: var(--font-ui);
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tinta-60);
  margin: 0;
  padding: 0;
}

.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 3px 0 0 !important;
  background: none !important;
  border: 1px solid var(--linija) !important;
  border-radius: 3px !important;
}

/* crvene zvjezdice obaveznih polja — prototip ih nema */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .formInfo,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .required {
  display: none;
}

/* ---------------- gumb ----------------
   style.css red 1431 ima background i border s `!important`. */
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  input[type="submit"],
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  button[type="submit"],
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form input.form_s,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .form_s {
  background: var(--crvena) !important;
  border: 1px solid var(--crvena) !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  color: #fff;
  font-family: var(--font-ui);
  padding: 14px 26px;
  width: auto;
  margin-top: 18px;
  cursor: pointer;
}

.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  input[type="submit"]:hover,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .form_s:hover {
  background: var(--crvena-tamna) !important;
  border-color: var(--crvena-tamna) !important;
}

/* ---------------- 720 i niže: jedan stupac ---------------- */
@media (max-width: 720px) {
  .wrapper .seg.seg-lokacije .obrazac-kartica {
    padding: 22px;
  }
  .wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl {
    grid-template-columns: 1fr;
  }
  .wrapper
    .seg.seg-lokacije
    .obrazac-kartica
    form.contact_form
    dl
    > div:has(textarea),
  .wrapper
    .seg.seg-lokacije
    .obrazac-kartica
    form.contact_form
    dl
    > div.consent_data,
  .wrapper
    .seg.seg-lokacije
    .obrazac-kartica
    form.contact_form
    dl
    > div:has(input[type="checkbox"]),
  .wrapper
    .seg.seg-lokacije
    .obrazac-kartica
    form.contact_form
    dl
    > dd.buttons_action,
  .wrapper
    .seg.seg-lokacije
    .obrazac-kartica
    form.contact_form
    dl
    > div:has(input[type="submit"]) {
    grid-column: 1 / span 1;
  }
}

/* ================================================================
   BLOK 30 — RECENZIJE: strelice se pomiču gore-dolje
   Dopisati NA SAM KRAJ dm-dizajn.css.

   PROBLEM: visina trake ovisi o duljini svjedočanstva na toj
   stranici, pa se strelice sele.

   IZMJERENO — prošao sam SVAKU stranicu klikom na strelicu i
   mjerio visinu `.rec-traka` i položaj `.rec-nav`:

     1440 px (3 po stranici, 5 stranica)
       01:238  02:230  03:308  04:605  05:285
       strelice se pomiču 375 px

      900 px (2 po stranici, 7 stranica)
       230 · 230 · 308 · 332 · 582 · 285 · 238
       najviša 582

     1040 px (2 po stranici, 7 stranica)   najviša 473
      600 px (1 po stranici, 13 stranica)  najviša 426

   Najviša je uvijek Katjino svjedočanstvo o edukacijskom
   rehabilitatoru — najduži tekst na webu.

   Pažnja: na 900 px je viša (582) nego na 1040 px (473), jer je
   stupac uži pa se tekst više lomi. Zato broj za pojas 721–1040
   nije uzet s 1040 nego s **900**, gdje je najgore.

   RJEŠENJE: fiksna najmanja visina trake po najdužem svjedočanstvu,
   po pojasu širine, plus mala rezerva za učitavanje fonta.

   PROVJERENO INJEKCIJOM, prolaskom kroz sve stranice:
     1440 px  traka 615 na svakoj stranici · strelice se pomiču 0 px
      900 px  traka 595 na svakoj stranici · strelice se pomiču 0 px
   ================================================================ */

.wrapper [class*="seg-recenzije"] .rec-traka {
  min-height: 615px; /* najviša izmjerena 605 + rezerva */
  align-items: start;
}

/* kartice popunjavaju traku do pune visine, da rub kartice ne visi
   u zraku kad je tekst kratak */
.wrapper [class*="seg-recenzije"] .rec {
  height: 100%;
}

@media (max-width: 1040px) {
  .wrapper [class*="seg-recenzije"] .rec-traka {
    min-height: 595px;
  } /* najviša izmjerena 582 na 900 px + rezerva */
}

@media (max-width: 720px) {
  .wrapper [class*="seg-recenzije"] .rec-traka {
    min-height: 440px;
  } /* najviša izmjerena 426 + rezerva */
}

/* ================================================================
   AKO SE SVJEDOČANSTVA PROMIJENE, brojevi se moraju ponovno izmjeriti.
   Isječak prolazi kroz sve stranice i vraća najvišu:

   (async()=>{const r=document.querySelector('[class*="seg-recenzije"]');
    const t=r.querySelector('.rec-traka'), n=r.querySelector('.rec-nav');
    const d=[...n.querySelectorAll('button')].find(b=>/→/.test(b.textContent));
    const uk=parseInt((n.textContent.match(/\/\s*(\d+)/)||[0,10])[1],10)||10;
    const h=[]; const stari=t.style.minHeight; t.style.minHeight='0';
    for(let i=0;i<uk+1;i++){await new Promise(x=>setTimeout(x,400));
      h.push(Math.round(t.getBoundingClientRect().height)); d.click();}
    t.style.minHeight=stari;
    return {sirina:innerWidth, sve:h, najvisa:Math.max(...h)};})()

   Pokrenuti na 1440, 900 i 600 px.
   ================================================================ */

/* ================================================================
   BLOK 31 — OBRAZAC identičan test.djecjamozgalica.com
   Autor: Kodi (delegirano). Na sam kraj dm-dizajn.css, poslije blok30.

   Izmjereno inject-mjeri, 1440, novo vs test:
     kartica  test 579  novo 800   input  test 42  novo 47
     input š  test 262  novo 280   desni razmak novo -15 (nabijeno)

   DVA KORIJENA:
   1) ŠIRINA ("nabijeno desno") — E5 `dl` kolone `1fr` = min-content
      (280 zbog dugih select opcija) → desni input prelazi card padding.
      Fix: `minmax(0,1fr)` + `min-width:0`/`width:auto` na div i dd/dt
      (grid item se inače ne skuplja ispod sadržaja). → input 265.
   2) VISINA — consent tekst je u `.consent_data dd` (i `dd p`), a
      blok29 je gađao `label`/`span` → ostao 18px i dug. `dd → 12.5px`.
      + skraćivanje consent teksta u `m_forms_consents` (CMS, migration).
   ================================================================ */

/* ---- ŠIRINA: kolone se skupljaju, input ne prelazi desno ---- */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl > div {
  min-width: 0;
  width: auto;
  max-width: 100%;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dt {
  min-width: 0;
  max-width: 100%;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd input,
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dd select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 0;
  line-height: 1.2;
} /* visina 42 kao test, ne 47 */

/* ---- VISINA: consent tekst 12.5px (blok29 promasio dd) ---- */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .consent_data dd,
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  .consent_data
  dd
  p {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--tinta-60) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .consent_data {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 0 !important;
  padding: 0;
}
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form .consent_data dt {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  .consent_data
  .formInfo {
  display: none;
}

/* ================================================================
   BLOK 32 — TRI STVARI KOJE JE BLOK 31 OSTAVIO
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije blok31.
   Izmjereno na ?v=38 (12.09.2026), uživo na novo.djecjamozgalica.com.

   Blok31 (Kodijeva verzija) je riješio širinu i slog privole. Ostalo je
   troje — dvoje kozmetike i jedna prava regresija na mobitelu.

   1) REGRESIJA: na mobitelu su ostala DVA stupca
   -------------------------------------------------
   blok29 ima jednostupčani raspored u @media (max-width:720px):
       @media (max-width:720px){ … dl{grid-template-columns:1fr} }
   blok31 postavlja `dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}`
   IZVAN media upita. Kako blok31 dolazi poslije blok29, a težina selektora
   je ista, pobjeđuje kasniji — i to na svim širinama, pa i ispod 720.
   Izmjereno uživo na v38:
       600 px  →  staze `253px 253px`, polja 253 px  (treba jedan stupac)
       375 px  →  staze `140.5px 140.5px`, polja 141 px
   Polje od 141 px na telefonu nije upotrebljivo.
   Lijek: ponoviti ≤720 blok ovdje, poslije blok31.

   POUKA ZA UBUDUĆE: svaki blok koji dira `grid-template-columns` izvan
   media upita mora u istom bloku ponoviti i svoj ≤720 slučaj. Inače
   tiho ubije jednostupčani raspored iz ranijeg bloka.

   2) Točkasta crta ispod svake privole
   -------------------------------------------------
   basic.css: `.contact_form div.consent_data{border-bottom:1px dotted #cdcdcd}`
   Blok31 je nije ugasio, pa su na kartici dvije sive crte kojih na
   prototipu nema.

   3) 40 px viška ispod privola
   -------------------------------------------------
   basic.css: `.contact_form div.consent_data{padding:0 0 20px !important}`
   Blok31 ima `padding:0` BEZ sile, pa `!important` iz basic.css pobjeđuje.
   Dva reda privole × 20 px = 40 px koje kartica nosi bez razloga.

   IZMJERENO PRIJE → POSLIJE (uživo, injekcijom na v38)
   -------------------------------------------------
   1440  visina kartice   685 → 650   crta 1px → 0   padding 20px → 0
    375  staze     140.5px 140.5px → 295px (jedan stupac)
    375  visina kartice  1029 → 891
    600  staze         253px 253px → jedan stupac
   Vodoravno pomicanje: 0 na svim širinama, prije i poslije.

   POVRAT: obrisati sve od ovog komentara do kraja datoteke, vratiti ?v=38.
   ================================================================ */

/* ---- 1. privole: bez crte i bez donjeg razmaka ----
   Sila samo na ta dva svojstva — basic.css ih ima s `!important`. */
.wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form div.consent_data {
  border-bottom: 0 !important;
  padding: 0 !important;
}

/* ---- 2. mali razmak između dva odlomka privole ----
   blok31 ima `margin:0 !important` na `dd p`, pa treba sila. */
.wrapper
  .seg.seg-lokacije
  .obrazac-kartica
  form.contact_form
  div.consent_data
  dd
  p
  + p {
  margin-top: 7px !important;
}

/* ---- 3. ispod 720: jedan stupac (vraćeno iz blok29) ---- */
@media (max-width: 720px) {
  .wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .wrapper .seg.seg-lokacije .obrazac-kartica form.contact_form dl > div {
    grid-column: 1 / span 1 !important;
  }
}

/* ================================================================
   BLOK 33 — RECENZIJE: bijele kartice su bile prazne
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije blok32.
   Izmjereno uživo na ?v=38 (12.09.2026), širine 1440 / 1040 / 900 / 600 / 375.

   ŠTO JE BILO KRIVO — moja greška u blok30
   -------------------------------------------------
   blok30 je riješio pomicanje strelica ovako:
       .rec-traka{min-height:615px}
       .rec{height:100%}        ← ovo je greška
   `height:100%` je razvukao SVAKU bijelu karticu na punih 615 px, pa je
   tekst od 90 px sjedio na vrhu praznine od 500 px. Izmjereno uživo:
       kartica 615 px, tekst u njoj 90 px odnosno 161 px.
   Fiksnu visinu treba nositi traka (pozadina), ne kartica.

   KAKO JE RIJEŠENO
   -------------------------------------------------
   1. `.rec{height:auto}` — kartica je visoka koliko tekst.
   2. `.rec-traka{grid-template-rows:min-content}` — redak grida se mjeri
      po sadržaju, a ne po visini spremnika. Uz `align-items:stretch` sve
      tri kartice u istom prikazu dobiju jednaku visinu (visinu najviše
      od te tri), pa red izgleda uredno.
   3. `.rec-traka{min-height:…}` ostaje — traka drži visinu, strelice ne
      mrdaju. Razlika: prazan prostor je sada pozadina, ne bijela kartica.

   ZAŠTO JE VISINA PALA S 615 NA 355
   -------------------------------------------------
   615 je dolazilo od JEDNE recenzije koja je tri puta duža od ostalih.
   Izmjereno po prikazima na 1440 px, bez ograničenja:
       238, 214, 308, **605**, 285, 238, 214
   Zbog tog jednog broja cijela je sekcija morala biti 615 visoka.
   Zato je tekst kartice ograničen na 10 redaka (`line-clamp`). To dira
   SAMO tu jednu recenziju — sve ostale su ispod 10 redaka i ostaju cijele:
       238, 214, 308, **347**, 285, 238, 214   → najviša 347
   Ispod 720 px kartica je uža pa tekst puni više redaka; tamo je granica
   8 redaka (najviša 300 na 375 px).

   NAPOMENA ZA MICHAELA: `line-clamp` skraćuje samo PRIKAZ — cijeli tekst
   ostaje u CMS-u i u HTML-u. Ako je bolje da ta jedna duga recenzija bude
   kraća i u sadržaju, skratiti je u CMS-u; tada se granica od 10 redaka
   može i maknuti, a min-height ponovno izmjeriti.

   IZMJERENO PRIJE → POSLIJE
   -------------------------------------------------
   1440  visina kartice  615 (sve) → 167–347 (po tekstu, jednake u redu)
   1440  visina trake    615 → 355   pomak strelica 0 px
    900  najviša kartica       → 347
   1040  najviša kartica       → 332
    375  visina trake    440 → 310   najviša kartica 300   pomak 0 px

   PAZI — VRIJEDNOSTI PO ŠIRINAMA MORAJU BITI OVDJE.
   blok30 ima min-height u @media (max-width:1040px) i (max-width:720px).
   Media upit ne nosi dodatnu težinu, pa bi osnovno pravilo iz blok33,
   kao kasnije u datoteci, nadglasalo oba. Zato blok33 sam navodi obje
   vrijednosti: 355 iznad 720, 310 ispod. Ista zamka kao blok31/blok29.

   POVRAT: obrisati sve od ovog komentara do kraja datoteke, vratiti ?v=39.
   ================================================================ */

/* ---- traka drži visinu, kartica se mjeri po tekstu ---- */
.wrapper [class*="seg-recenzije"] .rec-traka {
  min-height: 355px; /* najviša izmjerena 347 + rezerva */
  grid-template-rows: min-content;
  align-items: stretch;
}

.wrapper [class*="seg-recenzije"] .rec {
  height: auto;
}

/* ---- jedna predugačka recenzija ne diktira visinu cijele sekcije ---- */
.wrapper [class*="seg-recenzije"] .rec > p {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 720 i niže ---- */
@media (max-width: 720px) {
  .wrapper [class*="seg-recenzije"] .rec-traka {
    min-height: 310px;
  } /* najviša izmjerena 300 + rezerva */
  .wrapper [class*="seg-recenzije"] .rec > p {
    -webkit-line-clamp: 8;
  }
}

/* ================================================================
   AKO SE RECENZIJE PROMIJENE, brojevi se moraju ponovno izmjeriti:

   (async()=>{const s=document.querySelector('.seg-recenzije');
    const t=s.querySelector('.rec-traka'), n=s.querySelector('.rec-next');
    const st=t.style.minHeight; t.style.minHeight='0px'; const h=[];
    for(let i=0;i<8;i++){await new Promise(r=>setTimeout(r,400));
      h.push(Math.round(t.getBoundingClientRect().height)); n.click();}
    t.style.minHeight=st;
    return {sirina:innerWidth, sve:h, najvisa:Math.max(...h)};})()

   Pokrenuti na 1440, 900 i 375 px. min-height = najviša + 8.
   ================================================================ */

/* ================================================================
   dm-unutarnje.css — raspored i slog podstranica
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije blok33. Ne zasebna datoteka.
   Izmjereno uživo na ?v=41, 13.09.2026, na 1440 / 1041 / 900 / 720 / 375.

   ŠTO SE OVDJE NADGLASAVA — izmjereno, ne pretpostavljeno
   -------------------------------------------------
   style.css                                     spec   što radi
   .basic_site_inner_content                    (0,1,0) border-top:45px solid #FCC5C5  ← rozi pojas
   .basic_site_inner_content article            (0,1,1) width:1080px  ← fiksna širina, puca u užem stupcu
   .basic_site_inner_content h1                 (0,1,1) 36px, text-transform:uppercase
   .basic_site_inner_content h2                 (0,1,1) 26px, background:#ADDDF7  ← plava traka
   .basic_site_inner_content article ul         (0,1,2) padding-left:32px
   p                                            (0,0,1) padding:0 0 20px

   Moji selektori kreću od `.wrapper .dm-tekst` = (0,2,0), pa svaki ima
   barem (0,2,1) i tuče sve gore navedeno BEZ `!important`.
   Nijedno pravilo ovdje ne koristi silu.

   ZAŠTO `article{width:auto}` NIJE KOZMETIKA
   -------------------------------------------------
   `style.css` daje članku `width:1080px`. Čim ga stavimo u stupac od 704 px,
   izlazi 376 px udesno. Ovo je isti kvar kao onaj s cjenikom u obrascu —
   fiksna širina iz jezgre u suženoj mreži.

   ROZI POJAS I PLAVE TRAKE
   -------------------------------------------------
   `border-top:45px solid #FCC5C5` na omotaču i `background:#ADDDF7` na svakom
   h2 su jedina hijerarhija koju stare stranice imaju. Zamjenjuje ih tipografija:
   Fraunces naslov s tankom crtom iznad.
   ================================================================ */

/* ---------------- 1. dvostupčani raspored, 1041 i više ---------------- */

@media (min-width: 1041px) {
  /* osnovna: omotač je <div class="dm-tijelo"> koji smo dodali u predložak */
  .wrapper .dm-tijelo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
  }

  /* programi: grid je na samom .programs_container.
     `.header_image_programs` je position:absolute — izvan toka, NIJE grid
     stavka, pa ne treba `span 2`. Grid ima točno dvije stavke: <aside> i .dm-rub.
     Izmjereno: aside ima margin-top:520px (razmak za sliku u zaglavlju), pa
     razmak seli na spremnik da oba stupca počnu na istoj visini. */

  .wrapper .programs_container.dm-tijelo > aside {
    margin-top: 0;
    min-width: 0;
  }

  .wrapper .dm-rub {
    position: sticky;
    top: 92px;
    min-width: 0;
    display: grid;
    gap: 16px;
  }
}

/* ispod 1041 ostaje jedan stupac — .dm-rub padne ispod teksta, bez ljepljivosti */
@media (max-width: 1040px) {
  .wrapper .dm-rub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 40px;
  }
}
@media (max-width: 720px) {
  .wrapper .dm-rub {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------- 2. omotač teksta: dolje rozi pojas ---------------- */

.wrapper .dm-tekst {
  border-top: 0;
  padding-top: 40px;
  display: block; /* style.css ima display:table */
  width: auto;
  max-width: 100%;
  min-width: 0;
}

/* fiksnih 1080 px iz jezgre — jedini razlog zašto bi članak izašao iz stupca */
.wrapper .dm-tekst article {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

/* ---------------- 3. slog ---------------- */

.wrapper .dm-tekst article h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none; /* jezgra ima uppercase */
  color: var(--tinta);
  margin: 0 0 16px;
  padding: 0;
  text-wrap: balance;
  max-width: 18ch;
}

/* prvi odlomak iza naslova je uvod */
.wrapper .dm-tekst article h1 + p {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--tinta-80);
  margin: 0 0 8px;
  padding: 0 0 28px;
  max-width: 60ch;
  border-bottom: 1px solid var(--linija);
}

.wrapper .dm-tekst article h2 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--tinta);
  background: none; /* jezgra ima #ADDDF7 */
  border-top: 1px solid var(--linija);
  margin: 44px 0 14px;
  padding: 20px 0 0;
  text-wrap: balance;
  max-width: 30ch;
}

.wrapper .dm-tekst article h3 {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
  background: none;
  margin: 28px 0 28px;
  padding: 0;
}

.wrapper .dm-tekst article p {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tinta-80);
  margin: 16px 0 16px;
  padding: 0;
  max-width: 68ch;
}

.wrapper .dm-tekst article strong,
.wrapper .dm-tekst article b {
  color: var(--tinta);
  font-weight: 600;
}

.wrapper .dm-tekst article a {
  color: var(--plava);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 95, 158, 0.32);
}
.wrapper .dm-tekst article a:hover {
  color: var(--plava-tamna);
  border-bottom-color: currentColor;
}

/* ---------------- 4. popisi ---------------- */

.wrapper .dm-tekst article ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
  max-width: 68ch;
}

.wrapper .dm-tekst article ul li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinta-80);
}

.wrapper .dm-tekst article ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.4em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--crvena);
}

/* ---------------- 5. cjenik (skripta doda klasu po naslovu) ----------------
   NAPOMENA O SPECIFIČNOSTI: svi podblokovi moraju biti specifičniji od
   `.wrapper .dm-tekst article ul` (0,2,2). Zato `ul.dm-cijene` — (0,3,2).
   Ista greška me na obrascu koštala jednog kruga. */

.wrapper .dm-tekst article ul.dm-cijene {
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  padding: 6px 22px;
  gap: 0;
  max-width: 68ch;
}

.wrapper .dm-tekst article ul.dm-cijene li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0 14px 0;
  border-bottom: 1px dashed var(--linija);
}

.wrapper .dm-tekst article ul.dm-cijene li:last-child {
  border-bottom: 0;
}
.wrapper .dm-tekst article ul.dm-cijene li::before {
  display: none;
}
.wrapper .dm-tekst article ul.dm-cijene .dm-sto {
  flex: 1 1 auto;
  color: var(--tinta);
}
.wrapper .dm-tekst article ul.dm-cijene .dm-kn {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--crvena);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 6. povezano ---------------- */

.wrapper .dm-tekst article ul.dm-povezano {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  max-width: 68ch;
}
.wrapper .dm-tekst article ul.dm-povezano li {
  padding: 0;
}
.wrapper .dm-tekst article ul.dm-povezano li::before {
  display: none;
}
.wrapper .dm-tekst article ul.dm-povezano a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: 14px;
  padding: 15px 17px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--tinta);
}
.wrapper .dm-tekst article ul.dm-povezano a:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}
.wrapper .dm-tekst article ul.dm-povezano a::after {
  content: "→";
  color: var(--crvena);
  font-weight: 400;
}

/* ---------------- 7. numerirani popis podstranica ---------------- */

.wrapper .dm-tekst article ul.dm-koraci {
  counter-reset: k;
  gap: 0;
}
.wrapper .dm-tekst article ul.dm-koraci li {
  padding: 0;
}
.wrapper .dm-tekst article ul.dm-koraci li::before {
  display: none;
}
.wrapper .dm-tekst article ul.dm-koraci a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 4px;
  border-bottom: 1px solid var(--linija);
  border-radius: 0;
  color: var(--tinta);
  font-weight: 600;
  font-size: 16.5px;
}
.wrapper .dm-tekst article ul.dm-koraci a:hover {
  color: var(--crvena);
}
.wrapper .dm-tekst article ul.dm-koraci a::before {
  counter-increment: k;
  content: counter(k, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--crvena);
  font-weight: 500;
}

/* ---------------- 8. „Javite nam se" — tamna kartica ---------------- */

.wrapper .dm-tekst article .dm-poziv {
  background: var(--tinta);
  border-radius: var(--r);
  padding: 28px 30px;
  margin: 34px 0 0;
  max-width: 68ch;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrapper .dm-tekst article .dm-poziv h2 {
  border: 0;
  background: none;
  margin: 0 0 6px;
  padding: 0;
  color: #fff;
  font-size: 22px;
  max-width: none;
}

.wrapper .dm-tekst article .dm-poziv p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  max-width: 44ch;
}

.wrapper .dm-tekst article .dm-poziv .dm-gumb {
  display: inline-flex;
  align-items: center;
  background: var(--crvena);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
}
.wrapper .dm-tekst article .dm-poziv .dm-gumb:hover {
  background: var(--crvena-tamna);
}

/* ---------------- 9. kartice desnog stupca (block_class iz CMS-a) ---------------- */

.wrapper .dm-rub article {
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  box-shadow: var(--sjena);
  padding: 22px;
  margin: 0;
  width: auto;
  max-width: 100%;
  display: block;
}

.wrapper .dm-rub article > em {
  /* intro_text = nadnaslov kartice */
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-60);
  font-style: normal;
  margin: 0 0 12px;
}

.wrapper .dm-rub article h3,
.wrapper .dm-rub article h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  background: none;
  margin: 0 0 8px;
  padding: 0;
}

.wrapper .dm-rub article p {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--tinta-80);
  margin: 0 0 12px;
  padding: 0;
}
.wrapper .dm-rub article p:last-child {
  margin-bottom: 0;
}

.wrapper .dm-rub article ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.wrapper .dm-rub article ul li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--linija);
  font-size: 14px;
  color: var(--tinta-80);
}
.wrapper .dm-rub article ul li:last-child {
  border-bottom: 0;
}

.wrapper .dm-rub article a {
  color: var(--tinta);
  text-decoration: none;
}
.wrapper .dm-rub article a:hover {
  color: var(--crvena);
}

/* --- kartica-cta --- */
.wrapper .dm-rub article.kartica-cta {
  border: 0;
  border-left: 5px solid var(--crvena);
}
.wrapper .dm-rub article.kartica-cta a[href*="kontakt"],
.wrapper .dm-rub article.kartica-cta .dm-gumb {
  display: flex;
  justify-content: center;
  background: var(--crvena);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 999px;
  margin-top: 4px;
}
.wrapper .dm-rub article.kartica-cta a[href*="kontakt"]:hover {
  background: var(--crvena-tamna);
  color: #fff;
}
.wrapper .dm-rub article.kartica-cta a[href^="tel:"] {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  margin-top: 12px;
}

/* --- kartica-sadrzaj: skripta je puni iz h2-ova glavnog stupca --- */
.wrapper .dm-rub article.kartica-sadrzaj ul li {
  display: block;
  padding: 8px 0 8px 14px;
  border-bottom: 0;
  border-left: 2px solid var(--linija);
}
.wrapper .dm-rub article.kartica-sadrzaj ul li:hover {
  border-left-color: var(--crvena);
}
.wrapper .dm-rub article.kartica-sadrzaj ul li a:hover {
  color: var(--crvena);
}

/* --- kartica-cjenik --- */
.wrapper .dm-rub article.kartica-cjenik ul li .dm-kn,
.wrapper .dm-rub article.kartica-cjenik ul li strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--crvena);
  font-variant-numeric: tabular-nums;
}

/* --- kartica-osoba --- */
.wrapper .dm-rub article.kartica-osoba figure {
  margin: 0 0 12px;
}
.wrapper .dm-rub article.kartica-osoba img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* --- kartica-napomena --- */
.wrapper .dm-rub article.kartica-napomena {
  background: var(--zuta);
  border: 0;
  box-shadow: none;
}
.wrapper .dm-rub article.kartica-napomena > em {
  color: rgba(30, 38, 48, 0.62);
}
.wrapper .dm-rub article.kartica-napomena p {
  color: rgba(30, 38, 48, 0.82);
}

/* --- kartica-preporuka --- */
.wrapper .dm-rub article.kartica-preporuka {
  background: var(--tinta);
  border: 0;
}
.wrapper .dm-rub article.kartica-preporuka > em {
  color: var(--zuta);
}
.wrapper .dm-rub article.kartica-preporuka h3,
.wrapper .dm-rub article.kartica-preporuka h4 {
  color: #fff;
}
.wrapper .dm-rub article.kartica-preporuka p {
  color: rgba(255, 255, 255, 0.76);
}

/* ================================================================
   dm-unutarnje-2.css — ISPRAVAK mog bloka iz koraka 3
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije dm-unutarnje.css.
   Izmjereno uživo na ?v=42, 13.09.2026, str. 49 / 50 / 12.

   ⚠ ISPRAVAK MOJE RANIJE TVRDNJE
   -------------------------------------------------
   U zadatku 120 sam napisao da redak `width:min(1200px, calc(100vw - 52px))`
   „ne radi ništa". **To je bilo netočno i premekano rečeno.**
   Taj redak NE samo da nije popravio pomicanje — nego je **slomio centriranje
   na svim `osnovna` podstranicama.**

   Izmjereno na str. 49 @1440, prije ovog ispravka:
       .main_container   width 1200px, margin 0, **left 0**
       .dm-tijelo        left 0, right 1200
       desna praznina    225 px
   Sadržaj je bio zalijepljen uz lijevi rub prozora, a desna četvrtina prazna.
   To je ono što je Michael vidio na slici.

   UZROK
   -------------------------------------------------
   Raniji blok u `dm-dizajn.css` ima:
       .main_container{padding:0; margin:0; width:auto; max-width:none}
   Dok je `width:auto`, element se ponaša kao puna širina i sve unutra se
   centrira samo. Moj redak je tome dodao tvrdih **1200px uz `margin:0`** —
   pa je kutija ostala uz lijevi rub.

   LIJEK
   -------------------------------------------------
   Širina se NE stavlja na `.main_container` (on je `display:table`, pa mu je
   `width` ionako samo prijedlog). Stavlja se na `.dm-tijelo`, koji je običan
   blok, a `.main_container` se centrira automatskim marginama.

   Izmjereno poslije:
       1440:  .dm-tijelo 1200 px, lijevo 113 / desno 113, staze 824px 320px
        375:  .dm-tijelo  323 px, lijevo  26 / desno  26
       vodoravno pomicanje 0 na obje
   ================================================================ */

/* ---------------- 1. centriranje natrag ---------------- */

/* poništava tvrdu širinu iz koraka 3 (odjeljak 10) */
.wrapper .main_container {
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* širina i bočni razmak idu na blok, ne na tablicu */
.wrapper .main_container > .dm-tijelo {
  width: min(1200px, calc(100vw - 52px));
}

/* ---------------- 2. „Povezano" — flex umjesto grida ----------------
   `repeat(auto-fill, minmax(210px,1fr))` kod računanja MIN-CONTENT širine
   ne staje na jedan stupac — traži po jednu stazu za svaku stavku.
   Pet kartica × ~130 px = 654 px min-content. Lanac iznad je `display:table`,
   a tablica se nikad ne skuplja ispod min-contenta svog sadržaja — pa je na
   375 px cijela stranica bila 654 px široka.

   Izmjereno, str. 50 @375:
       min-content ul.dm-povezano   654 → 161 px
       .wrapper                     654 → 375 px
       vodoravno pomicanje          279 → 0
   Na 1440 nepromijenjeno: kartice 226 px, tri u redu.

   `min(210px,100%)` NE pomaže — probano, min-content ostaje 654.
   Radi tek flex s `min-width:0`, jer je tada min-content stavke nula. */

.wrapper .dm-tekst article ul.dm-povezano {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wrapper .dm-tekst article ul.dm-povezano li {
  flex: 1 1 210px;
  min-width: 0;
}

/* ---------------- 3. desni stupac ispod 1041 — isto ---------------- */

@media (max-width: 1040px) {
  .wrapper .dm-rub {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .wrapper .dm-rub > * {
    flex: 1 1 250px;
    min-width: 0;
  }
}

/* ================================================================
   U `dm-unutarnje.css`, odjeljak 10, OBRISATI ova četiri retka:

     .wrapper .main_container,
     .wrapper .programs_container{
       width:min(1200px, calc(100vw - 52px));
       max-width:100%}

   Ako se ne obrišu, `.programs_container` ostaje s tvrdom širinom bez učinka,
   a `.main_container` dobiva dva suprotna pravila. Gornji blok 1 ih nadglasava,
   ali čist je samo ako ih nema.

   Vodoravno pomicanje na `programi` stranicama ostaje — to je zatečena rupa
   801–1040, zadatak 121. Ne rješava se ovdje.
   ================================================================ */

/* ================================================================
   dm-unutarnje-3.css — desni stupac se više ne lijepi
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije dm-unutarnje-2.css.

   ODLUKA KLIJENTA: kartice desnog stupca ne ostaju zalijepljene pri vrhu
   dok se stranica pomiče. Teku s ostatkom stranice, kao i svaki drugi sadržaj.

   Izmjereno na str. 49: tekst je visok 2177 px, kartice 532 px. Uz `sticky`
   kartice su lebdjele kroz 1645 px pomicanja — zato izgledaju „nagurano gore
   i zaleđeno".
   ================================================================ */

@media (min-width: 1041px) {
  .wrapper .dm-rub {
    position: static;
    top: auto;
  }
}

/* ================================================================
   dm-unutarnje-4.css — desni stupac: poravnanje i slog
   Dopisati NA SAM KRAJ dm-dizajn.css, poslije dm-unutarnje-3.css.
   Mjereno na str. 49, ?v=45, 1440 px.

   1) STUPAC JE BIO 40 px PREVISOKO
      `.dm-tekst` ima `padding-top:40px`, `.dm-rub` je imao 0.
      Izmjereno: prva kartica y=79, H1 y=119 — kartica je počinjala
      40 px iznad naslova. Poslije: oboje 119. **Provjereno injekcijom.**

   2) TRI RAZLIČITA PONDERA U ISTOM STUPCU
      Izmjereno u desnom stupcu: 10,5 / 14 / 18 / 19 px i ponderi 400/500/600/700.
      Nadnaslov (`em`) je bio 700 iako je mono 10,5 px — baza ga podebljava.
      Poveznice u „Na ovoj stranici" su 18 px / 700 — `style.css` ima
      `a{font-size:18px; font-weight:700}` izravno na `a`, a moja pravila
      za taj popis nisu postojala.

      Nadnaslov: **provjereno injekcijom** (700 → 400).
      Poveznice: **NIJE potvrđeno** — u pregledniku su ostale 18/700 i kad
      sam dodao `!important`. Nisam našao pravilo koje to radi. Zato ovdje
      ide sila na tri svojstva koja baza postavlja izravno na `a`, i
      **Kodi to mora izmjeriti na serveru**, ne ja u pregledniku.
      Ako i poslije ovoga ostane 18/700 — stani i javi, ne dopisuj blok.
   ================================================================ */

/* ---- 1. vrh stupca u ravnini s naslovom ---- */
.wrapper .dm-rub {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ---- 2. nadnaslov kartice nije podebljan ---- */
.wrapper .dm-rub article > em {
  font-weight: 400;
}

/* ---- 3. sve poveznice u stupcu su 14 px ----
   `style.css` ima `a{font-size:18px; font-weight:700; color:#FC5F6F}`
   izravno na element, pa sila ide samo na ta tri svojstva. */
.wrapper .dm-rub article a {
  font-family: var(--font-ui);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45;
}

.wrapper .dm-rub article.kartica-sadrzaj ul li a {
  display: block;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--tinta-80) !important;
}

.wrapper .dm-rub article.kartica-sadrzaj ul li a:hover {
  color: var(--crvena) !important;
}

/* gumb u CTA kartici ostaje istaknut */
.wrapper .dm-rub article.kartica-cta a[href*="kontakt"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.wrapper .dm-rub article.kartica-cta a[href^="tel:"] {
  font-family: var(--font-mono);
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--tinta) !important;
}

/* ---- 4. jedan slog u cijelom stupcu ----
   Poslije ovoga u desnom stupcu smiju postojati točno četiri veličine:
   10,5 (nadnaslov mono) · 14 (tekst i poveznice) · 19 (naslov kartice)
   i ponderi 400 · 500 · 600. Sedamsto nigdje. */
.wrapper .dm-rub article p,
.wrapper .dm-rub article li,
.wrapper .dm-rub article span {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
}

.wrapper .dm-rub article h3,
.wrapper .dm-rub article h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

/* ================================================================
   dm-unutarnje-5.css
   Dopisati NA SAM KRAJ dm-dizajn.css, odmah iza bloka dm-unutarnje-4.
   Podići ?v=46 → ?v=47 na svim mjestima gdje se dm-dizajn.css poziva.

   TRI STVARI, NIŠTA VIŠE
   -----------------------------------------------------------------
   1. Desni stupac počinje niže. Do sada je prva kartica bila točno u
      ravnini s H1 (mjereno na str. 49, 1440px: h1Top 119, vrh kartice
      119). Sada počinje u ravnini crte iznad prvog H2 (prvi H2 = 393,
      crta ≈ 353 → padding-top 272 daje vrh kartice na 351).
      Vrijedi SAMO za predložak `osnovna` (.main_container > .dm-tijelo).
      `programi` se ne dira dok se ne izmjeri — ondje spremnik već ima
      padding-top:520px zbog slike u zaglavlju.

   2. Novi popis `ul.dm-trajanje`. Izgled je isti kao cjenik, ali
      vrijednost desno je SIVA, ne crvena. Crvena je rezervirana za
      novac. Trajanje nije novac.

   3. `kartica-cjenik` u desnom stupcu: redak s poveznicom dobiva
      strelicu i razmak, da kartica ne izgleda prazno.

   SPECIFIČNOST — zašto ovakvi selektori
   -----------------------------------------------------------------
   `style.css` ima `.basic_site_inner_content article ul` (0,1,2) i
   `.tekst ul` (0,1,1). Zato svaki selektor ovdje ide s prefiksom
   `.wrapper .dm-tekst article ul.` → (0,3,2). Bez toga padding ispada 0,
   što se već dogodilo na kartici cijena.
   `dm-unutarnje-4.css` ima `.dm-rub{padding-top:40px}` (0,1,0);
   ovdje je `.wrapper .main_container > .dm-tijelo > .dm-rub` (0,4,0) →
   pobjeđuje bez `!important`.
   ================================================================ */

/* ---------------- 1. desni stupac niže ---------------- */

@media (min-width: 1041px) {
  .wrapper .dm-tijelo.dm-osnovna > .dm-rub {
    padding-top: 272px;
  }
}

/* ---------------- 2. popis trajanja ---------------- */

.wrapper .dm-tekst article ul.dm-trajanje {
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  padding: 6px 22px;
  gap: 0;
  max-width: 68ch;
}

.wrapper .dm-tekst article ul.dm-trajanje li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px dashed var(--linija);
}

.wrapper .dm-tekst article ul.dm-trajanje li:last-child {
  border-bottom: 0;
}
.wrapper .dm-tekst article ul.dm-trajanje li::before {
  display: none;
}
.wrapper .dm-tekst article ul.dm-trajanje .dm-sto {
  flex: 1 1 auto;
  color: var(--tinta);
}

.wrapper .dm-tekst article ul.dm-trajanje .dm-kn {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-60); /* siva, ne crvena — ovo nije cijena */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 3. kartica cjenika u desnom stupcu ---------------- */

.wrapper .dm-rub article.kartica-cjenik ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.wrapper .dm-rub article.kartica-cjenik ul li {
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--linija);
  list-style: none;
}
.wrapper .dm-rub article.kartica-cjenik ul li::before {
  display: none;
}
.wrapper .dm-rub article.kartica-cjenik ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--crvena) !important;
  text-decoration: none;
}
.wrapper .dm-rub article.kartica-cjenik ul li a::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--crvena);
}
.wrapper .dm-rub article.kartica-cjenik ul li a:hover {
  color: var(--crvena-tamna) !important;
}

/* ================================================================
   dm-unutarnje-6.css
   Dopisati NA SAM KRAJ dm-dizajn.css, iza bloka dm-unutarnje-5.
   Podići ?v na sljedeći broj (ako 47 još nije vani, ovo ide u isti 47).

   DVIJE CRTE ISPOD UVODA — ispravak moje greške
   -----------------------------------------------------------------
   Izmjereno na str. 49, 1440px, ?v=46:

     h1 + p   border-bottom 1px  →  širina 653px (60ch)
     h2       border-top    1px  →  širina 544px (30ch)

   Napisao sam jednu crtu koja zatvara uvod i drugu koja otvara svaki
   odjeljak. Između uvoda i prvog h2 se pojave obje — dvije crte
   različite dužine na 44px razmaka. Vrijedi na svim podstranicama.

   Ostaje crta na h2, jer se ponavlja prije svakog odjeljka i nosi
   ritam stranice. Uvodna ide van.

   Druga stvar: crta na h2 je bila duga 544px jer h2 ima max-width:30ch
   — crta je pratila širinu NASLOVA umjesto širine STUPCA, pa je čitana
   kao podcrtani naslov, a ne kao razdjelnik. Ide na punu širinu.
   `text-wrap:balance` ostaje, pa se dugi naslovi i dalje lome uravnoteženo.

   Specifičnost: isti selektori kao u dm-unutarnje, ali kasnije u
   datoteci → pobjeđuju bez !important. Zato ovo MORA biti iza bloka
   dm-unutarnje-5, ne prije njega.
   ================================================================ */

.wrapper .dm-tekst article h1 + p {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.wrapper .dm-tekst article h2 {
  max-width: none;
}

/* ================================================================
   dm-unutarnje-7.css
   Dopisati NA SAM KRAJ dm-dizajn.css, iza bloka dm-unutarnje-6.
   Podići ?v=48 → ?v=49.

   Izuzeća za predložak `programi` nakon što je <aside> dobio `dm-tekst`.
   Sve mjereno na str. 12 i 43, 1440×900, nakon deploya 130/B.

   ŠTO SE POKVARILO I ZAŠTO
   -----------------------------------------------------------------
   Tipografija je sjela: h1 = 44px Fraunces, h2 = 27px Fraunces s crtom,
   stupac = 824px, desni stupac = 320px na x=993. To je htjela biti.

   Tri stvari nisu:

   1. H1 je zadržao ružičastu traku, rgb(252,95,111).
      Izvor: `.programs_container h1{background:#FC5F6F}` — specifičnost (0,1,1).
      Moje pravilo `.wrapper .dm-tekst article h1` (0,3,1) postavlja veličinu,
      ali nikad nije postavilo pozadinu — kod h2 jesam, kod h1 sam zaboravio.
      Zato h2 je čist, a h1 nosi staru traku.

   2. Četiri kartice su se složile jedna ispod druge, svaka 824px, `padding: 0`.
      Bile su `display:table` u redu; moje `.wrapper .dm-tekst article`
      (display:block; width:auto; padding:0) ih je poravnalo u stupac i
      oduzelo im unutarnji razmak. Pozadine su preživjele (menta, žuta,
      breskva, nebo) pa tekst sada dodiruje rub boje.

   3. Harmonika je šira od stupca. Izmjeren lanac tvrdih širina:
        .programs_collapse_cnt  1200px  (display:table)
          .prog_coll            1080px  (display:table)
            aside               1080px
              article ×5        1080px
      U stupcu od 824px to strši van. Pri 1440 još ima mjesta
      (scroll = −15), na užem neće.

   NAČELO OVOG BLOKA
   -----------------------------------------------------------------
   Ne diram ništa izvan `.dm-tekst` i ne diram ponašanje harmonike
   (otvaranje/zatvaranje ide preko JS-a koji postavlja inline stil —
   inline uvijek pobjeđuje, pa mu ne smetam s `display`).
   Svi selektori idu preko `>` od `.dm-tekst`, da se ne spuste na
   sadržaj koji ondje ne živi.
   ================================================================ */

/* ---------------- 1. H1 bez stare trake ---------------- */

.wrapper .dm-tekst article h1 {
  background: none;
  padding: 0;
}

/* ---------------- 2. četiri kartice natrag u red ---------------- */

.wrapper .dm-tekst > .programs_columns_cnt {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: auto;
  max-width: 100%;
  margin: 32px 0;
  padding: 0;
  border: 0;
}

.wrapper .dm-tekst > .programs_columns_cnt > article {
  flex: 1 1 180px;
  min-width: 0; /* bez ovoga flex stavka ne smije ispod min-content */
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 22px;
  border-radius: var(--r);
  border: 0;
}

.wrapper .dm-tekst > .programs_columns_cnt > article h2,
.wrapper .dm-tekst > .programs_columns_cnt > article h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  background: none;
  border-top: 0;
  margin: 0 0 8px;
  padding: 0;
  max-width: none;
}

.wrapper .dm-tekst > .programs_columns_cnt > article p {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-80);
  margin: 0 0 8px;
  padding: 0;
  max-width: none;
}

.wrapper .dm-tekst > .programs_columns_cnt > article p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .wrapper .dm-tekst > .programs_columns_cnt > article {
    flex: 1 1 100%;
  }
}

/* ---------------- 3. harmonika unutar stupca ---------------- */
/* `display` na .prog_coll se NE dira — JS ga otvara i zatvara. */

.wrapper .dm-tekst > .programs_collapse_cnt {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 32px 0;
  padding: 0;
}

.wrapper .dm-tekst > .programs_collapse_cnt .prog_coll,
.wrapper .dm-tekst > .programs_collapse_cnt aside,
.wrapper .dm-tekst > .programs_collapse_cnt article {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* dm-unutarnje-8 (132) */
.wrapper .dm-tekst > .programs_columns_cnt > article {
  flex: 1 1 160px;
}

@media (min-width: 1041px) {
  .wrapper .programs_container.dm-tijelo > .dm-rub {
    padding-top: 55px;
  }
}

/* dm-unutarnje-9 (135) desni stupac na fotografiju */
.wrapper .programs_container.dm-tijelo > .dm-rub {
  position: relative;
  z-index: 135;
}

/* dm-unutarnje-10 (136) hero puna sirina + jezicak van + z-index */
.wrapper .programs_container.dm-tijelo > .header_image_programs {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  height: 420px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.wrapper .programs_container.dm-tijelo > .header_image_programs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
@media (min-width: 1041px) {
  .wrapper .programs_container.dm-tijelo > .dm-rub {
    position: relative;
    z-index: 135;
  }
}
@media (max-width: 1040px) {
  .wrapper .programs_container.dm-tijelo > .header_image_programs {
    height: 300px;
  }
}
@media (max-width: 720px) {
  .wrapper .programs_container.dm-tijelo > .header_image_programs {
    height: 230px;
  }
}
.contact_us_ribbon_fixed {
  display: none;
}

/* dm-unutarnje-11 (138) bijela podloga zona -> transparent */
.wrapper .dm-tekst > article {
  background: transparent;
}

/* dm-unutarnje-12 (139) margin-top 0 svih sirina + @720 padding 260 */
.wrapper .programs_container.dm-tijelo > .dm-tekst {
  margin-top: 0;
}
/* ============================================================
   dm-unutarnje-13.css  ·  zadatak 145  ·  ?v=54 -> ?v=55
   Tri zatecena predloska: 5 Nas tim, 7 Novosti, 9 Kontakt.
   Ide na kraj dm-dizajn.css, iza dm-unutarnje-12.

   UVJET: spremnik svake od te tri stranice mora dobiti klasu
   `dm-tijelo`, isto kao sto je `programs_container` vec ima.
   Bez nje sirina ostaje 1080px i nista od ovoga ne sjeda.

   Dira se SAMO raspored. Sadrzaj, skripta, logika obrasca,
   recaptcha i imena polja ostaju netaknuti.
   ============================================================ */

/* ---- 1. ZAJEDNICKO -------------------------------------------------
   Sva tri spremnika su display:table s aside sirine 1080px, pa je
   stupac sadrzaja uzi od ostatka weba (1080 umjesto 1200), a izmedu
   801 i 1079 stranica ide u vodoravni scroll — izmjereno 180px na
   7 i 9, 276px na 5.

   Sirinu NE postavljamo ovdje: nju daje postojece pravilo
   `.wrapper .main_container > .dm-tijelo{width:min(1200px,100vw - 52px)}`.
   Zato spremnik dobiva samo display:block, a aside gubi svojih 1080. */

.wrapper .ourteam_container.dm-tijelo,
.wrapper .news_container.dm-tijelo,
.wrapper .basic_site_inner_content_contact.dm-tijelo {
  display: block;
  margin: 32px 0px;
  border-top: 0; /* zatecena traka od 45px u boji starog dizajna */
  padding-top: 0;
}

/* VELIKA SLOVA dolaze iz style.css (h1{text-transform:uppercase}).
   Bez ovoga ispravak sadrzaja na stranici 5 nece imati ucinka. */
.wrapper .ourteam_container.dm-tijelo h1,
.wrapper .news_container.dm-tijelo h1,
.wrapper .basic_site_inner_content_contact.dm-tijelo h1 {
  text-transform: none;
}

/* ---- 2. NAS TIM (5) ------------------------------------------------ */

.wrapper .ourteam_container.dm-tijelo > aside {
  display: grid;
  width: auto;
  max-width: 100%;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  align-items: start;
}
/* 320px: tri kartice u redu na 1200, dvije na 752, jedna na 375 */

.wrapper .ourteam_container.dm-tijelo > aside > .ourteam_top_cnt {
  grid-column: 1/-1;
  display: block;
  width: auto;
  margin: 0;
}

.wrapper .ourteam_container.dm-tijelo > aside > .team_cnt {
  float: none; /* bilo float:left; width:320px */
  width: auto;
  max-width: 100%;
  margin: 0;
  background: var(--bijela);
  border-radius: var(--r);
  overflow: hidden;
  padding-bottom: 14px;
}

.wrapper .ourteam_container.dm-tijelo .team_cnt > article {
  display: flex; /* bilo display:table */
  flex-direction: column;
  width: auto;
  max-width: 100%;
  margin: 0;
}

/* fotografija ide prva, iznad imena — kao kartice na naslovnici */
.wrapper .ourteam_container.dm-tijelo .team_cnt figure {
  order: -1;
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
}

.wrapper .ourteam_container.dm-tijelo .team_cnt figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.wrapper .ourteam_container.dm-tijelo .team_cnt > article > h3 {
  margin: 16px 18px 2px;
}
.wrapper .ourteam_container.dm-tijelo .team_cnt > article > em {
  margin: 0 18px 10px;
}

.wrapper .ourteam_container.dm-tijelo .team_cnt > .ourteam_collapse {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 18px;
}

/* zatecena puna traka u mentol boji postaje okrugli gumb */
.wrapper .ourteam_container.dm-tijelo .ourteam_collapse > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--papir);
  color: var(--tinta);
  border: 1px solid var(--linija);
  margin: 2px 0 4px;
  cursor: pointer;
  font-size: 15px;
}
.wrapper .ourteam_container.dm-tijelo .ourteam_collapse > i:hover {
  background: var(--crvena);
  color: #fff;
  border-color: var(--crvena);
}
.wrapper .ourteam_container.dm-tijelo .ourteam_collapse > article {
  padding: 6px 0 10px;
}
/* `display` na zivotopisu se NE dira — JS ga prebacuje inline stilom */

/* ---- 3. NOVOSTI (7) ------------------------------------------------ */

.wrapper .news_container.dm-tijelo > aside {
  display: grid;
  width: auto;
  max-width: 100%;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  align-items: start;
}

.wrapper .news_container.dm-tijelo > aside > h2 {
  grid-column: 1/-1;
  margin: 0 0 8px;
}

.wrapper .news_container.dm-tijelo > aside > article {
  float: none; /* bilo float:left; width:340px */
  width: auto;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bijela);
  border-radius: var(--r);
  overflow: hidden;
}

.wrapper .news_container.dm-tijelo article > figure {
  display: block; /* bilo display:table-cell */
  width: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
}

.wrapper .news_container.dm-tijelo article > figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: 190px;
  object-fit: cover;
}

.wrapper .news_container.dm-tijelo article > section {
  display: block; /* bilo display:table */
  width: auto;
  padding: 16px 18px 20px;
}

/* ---- 4. KONTAKT (9) ------------------------------------------------ */

.wrapper .basic_site_inner_content_contact.dm-tijelo > aside {
  display: grid;
  width: auto;
  max-width: 100%;
  margin: 0;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.wrapper .basic_site_inner_content_contact.dm-tijelo > aside > article,
.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  > aside
  > .right_column_contact {
  float: none; /* bilo float:left 420 / float:right 580 */
  width: auto;
  max-width: 100%;
  margin: 0;
}

.wrapper .basic_site_inner_content_contact.dm-tijelo > aside > iframe {
  grid-column: 1/-1;
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--r);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .wrapper .basic_site_inner_content_contact.dm-tijelo > aside {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .wrapper .basic_site_inner_content_contact.dm-tijelo > aside > iframe {
    height: 320px;
  }
}

/* obrazac — polja u mrezu umjesto fiksnih 280px s floatom */

.wrapper .basic_site_inner_content_contact.dm-tijelo .contact_form {
  display: block;
  width: auto;
  max-width: 100%;
}

.wrapper .basic_site_inner_content_contact.dm-tijelo .contact_form dl {
  display: grid;
  width: auto;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
}

.wrapper .basic_site_inner_content_contact.dm-tijelo .contact_form dl > div {
  width: auto;
  max-width: 100%;
  float: none;
  margin: 0;
}

/* polja koja idu preko cijele sirine */
.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  .contact_form
  dl
  > div.service_name,
.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  .contact_form
  dl
  > div.cnt_form_div_note,
.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  .contact_form
  dl
  > div.contact_form_select_location,
.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  .contact_form
  dl
  > div.consent_data,
.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  .contact_form
  dl
  > div:has(dd.buttons_action) {
  grid-column: 1/-1;
}

/* gumbi i zalutali prazni dt idu preko cijele sirine obrasca */
.wrapper .basic_site_inner_content_contact.dm-tijelo .contact_form dl > dt,
.wrapper .basic_site_inner_content_contact.dm-tijelo .contact_form dl > dd {
  grid-column: 1/-1;
}

.wrapper
  .basic_site_inner_content_contact.dm-tijelo
  .contact_form
  dd.buttons_action {
  display: flex;
  gap: 10px;
  padding-top: 6px;
}

/* ============================================================
   dm-unutarnje-15 : unutarnja FAQ harmonika (.prog_coll h3 klik)
   ============================================================ */
.wrapper .prog_coll article.dm-faq-stavka > h3 {
  position: relative;
  padding-right: 44px;
  cursor: pointer;
}
/* ista strelica kao na ostalim FAQ harmonikama (.faq-stavka button::after) */
.wrapper .prog_coll article.dm-faq-stavka > h3::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 0.45em;
  float: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--crvena);
  border-bottom: 2px solid var(--crvena);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.wrapper .prog_coll article.dm-faq-otvoren > h3::after {
  content: "";
  transform: rotate(-135deg);
}
.wrapper .prog_coll article.dm-faq-otvoren p,
.wrapper .prog_coll article.dm-faq-otvoren em {
  display: block !important;
}

/* ============================================================
   dm-unutarnje-14.css  ·  zadatak 148  ·  ?v=55 -> ?v=56
   Cetiri obojene kartice na `programi` stranicama.
   Ide na kraj dm-dizajn.css, iza dm-unutarnje-13.
   ============================================================

   Zateceno: kartice su pune plohe u cetiri jake boje
   (#A9F9E2, #FEE4A5, #FCC5C5, #ADDDF7) iz starog dizajna.
   Uz to su razlicite visine (mjereno na 12: 414/414/458/481),
   pa im dno stepenicasto pada.

   Novo: bijela kartica, tanki obrub, boja ostaje kao traka od
   4px na vrhu. Bojno kodiranje se zadrzava, ploha nestaje.
   Sve cetiri su jednake visine. */

.wrapper .dm-tekst > .programs_columns_cnt {
  align-items: stretch;
}

.wrapper .dm-tekst > .programs_columns_cnt > article {
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-top-width: 4px;
  border-radius: var(--r);
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: auto;
} /* bez ovoga stretch ne radi — zatecena visina je u px */

.wrapper .dm-tekst > .programs_columns_cnt > article:nth-child(1) {
  border-top-color: #39c9a3;
}
.wrapper .dm-tekst > .programs_columns_cnt > article:nth-child(2) {
  border-top-color: #e8b23c;
}
.wrapper .dm-tekst > .programs_columns_cnt > article:nth-child(3) {
  border-top-color: #e2726e;
}
.wrapper .dm-tekst > .programs_columns_cnt > article:nth-child(4) {
  border-top-color: #3e9ad4;
}

/* zatecena `min-height:84px` na naslovu kartice drzi prazan prostor
   kad je naslov kratak — visine sada izjednacava flex, ne min-height */
.wrapper .dm-tekst > .programs_columns_cnt > article h3 {
  margin: 0 0 8px;
  min-height: 0;
}

.wrapper .dm-tekst > .programs_columns_cnt > article p {
  margin: 0;
}

/* ============================================================
   dm-unutarnje-19  ·  CJENIK BEZ TABLICE
   Zadatak 171 · 17.09.2026

   Zamjenjuje blok dm-unutarnje-17 (tablice). Taj blok je mrtav:
   render na ovom webu ne preživi <table>. Ovdje isti izgled,
   izveden na <ul>/<li> koje stranica već nosi.

   Vezano na .dm-cijene — klasa postoji samo na stranici 30.
   Pravila za a.dm-preuzmi su iz -17 i ovdje se ne ponavljaju.
   ============================================================ */

/* --- skupina ------------------------------------------------- */

.wrapper .dm-tekst article ul.dm-cijene {
  list-style: none;
  width: auto;
  max-width: 100%;
  margin: 0 0 48px;
  padding: 14px 0 0;
  border-top: 2px solid #1e2630;
  --boja: #1e2630;
}

.wrapper .dm-tekst article ul.dm-cijene:nth-of-type(1) {
  --boja: #3e9ad4;
  border-top-color: #3e9ad4;
}
.wrapper .dm-tekst article ul.dm-cijene:nth-of-type(2) {
  --boja: #39c9a3;
  border-top-color: #39c9a3;
}
.wrapper .dm-tekst article ul.dm-cijene:nth-of-type(3) {
  --boja: #e8b23c;
  border-top-color: #e8b23c;
}
.wrapper .dm-tekst article ul.dm-cijene:nth-of-type(4) {
  --boja: #e2726e;
  border-top-color: #e2726e;
}
.wrapper .dm-tekst article ul.dm-cijene:nth-of-type(5) {
  --boja: #7c6bd6;
  border-top-color: #7c6bd6;
}
.wrapper .dm-tekst article ul.dm-cijene:nth-of-type(6) {
  --boja: #c8574f;
  border-top-color: #c8574f;
}

/* --- redak --------------------------------------------------- */

.wrapper .dm-tekst article ul.dm-cijene > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 24px;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 17px 17px;
  border: 0;
  border-bottom: 1px solid var(--linija);
  border-radius: 0;
  box-shadow: none;
  background: none;
  list-style: none;
}

.wrapper .dm-tekst article ul.dm-cijene > li::before,
.wrapper .dm-tekst article ul.dm-cijene > li::marker {
  content: none;
}

.wrapper .dm-tekst article ul.dm-cijene > li:last-child {
  border-bottom: 0;
}

/* naziv usluge — prvi red, lijevo */
.wrapper .dm-tekst article ul.dm-cijene > li > strong {
  order: 0;
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--tinta);
}

/* iznos — prvi red, desno, monospace s tabularnim brojkama */
.wrapper .dm-tekst article ul.dm-cijene > li > span {
  order: 1;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinta);
}

/* pojedinost — drugi red, puna širina */
.wrapper .dm-tekst article ul.dm-cijene > li > em {
  order: 2;
  flex: 1 1 100%;
  margin: 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-60);
}

/* --- redak varijante (nema <strong>) -------------------------- */
/* tu je <em> jedini tekst, pa ide lijevo u istom redu s iznosom */

.wrapper .dm-tekst article ul.dm-cijene > li:not(:has(strong)) {
  padding-left: 18px;
  border-left: 2px solid rgba(30, 38, 48, 0.14);

  &:last-child,
  &:has(+ .dm-glava) {
    border-bottom-left-radius: 13px;
  }
}

.wrapper .dm-tekst article ul.dm-cijene > li:not(:has(strong)) > em {
  order: 0;
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-80);
}

/* --- glava podskupine ---------------------------------------- */

.wrapper .dm-tekst article ul.dm-cijene > li.dm-glava {
  display: block;
  margin: 32px 0 0;
  padding: 0 17px 10px;
  border: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1e2630;
}

.wrapper .dm-tekst article ul.dm-cijene > li.dm-glava:first-child {
  margin-top: 0;
}

/* --- boja skupine, samo gdje je podržana --------------------- */

@supports (color: color-mix(in srgb, #000 10%, transparent)) {
  .wrapper .dm-tekst article ul.dm-cijene > li.dm-glava {
    color: color-mix(in srgb, var(--boja) 78%, #1e2630);
  }
  .wrapper .dm-tekst article ul.dm-cijene > li:not(:has(strong)) {
    border-left-color: color-mix(in srgb, var(--boja) 42%, transparent);
  }
}

/* --- uzak zaslon --------------------------------------------- */

@media (max-width: 600px) {
  .wrapper .dm-tekst article ul.dm-cijene > li {
    gap: 0 14px;
    padding: 14px 12px;
  }
  .wrapper .dm-tekst article ul.dm-cijene > li:not(:has(strong)) {
    padding-left: 14px;
  }
  .wrapper .dm-tekst article ul.dm-cijene > li > strong {
    font-size: 15.5px;
  }
  .wrapper .dm-tekst article ul.dm-cijene > li > span {
    font-size: 14px;
  }
  .wrapper .dm-tekst article ul.dm-cijene > li > em {
    font-size: 13.5px;
  }
  .wrapper .dm-tekst article ul.dm-cijene > li:not(:has(strong)) > em {
    font-size: 14.5px;
  }
}

/* ============================================================
   dm-unutarnje-18.css  ·  zadatak 168  ·  ?v=61 -> ?v=62
   Kontakt (str. 9) i lokacijske stranice (46, 47, 48).
   Ide na KRAJ dm-dizajn.css, iza bloka "dm-unutarnje-17".
   ============================================================

   OPSEG I SIGURNOST SELEKTORA

   Kontakt: sve je pod `.basic_site_inner_content_contact`. Ta klasa
   dolazi iz predloska i postoji SAMO na stranici 9 — provjereno na
   svim stranicama. Nista izvan Kontakta ne moze biti pogodjeno.

   Lokacije: te stranice dijele `basic_site_inner_content` s jos 20
   stranica, pa se NE smije vezati na nju. Zato sadrzaj dobiva omotac
   `<div class="dm-lok">`. Sva pravila su ispod njega.
   Zbog te klase blok ide u bazu kroz SQL, ne kroz editor — WYSIWYG
   zna pojesti class na <div>.

   OBRAZAC SE NE DIRA U MARKUPU. Polja, imena (name, surname, address,
   company, phone, mail, selectlocation, note, optrow[]), recaptcha i
   logika slanja ostaju netaknuti. Sve je samo slog.
   Polja nemaju klase, pa se gadjaju po tipu unutar `form.contact_form`.
   ============================================================ */

/* ================================================================
   1. KONTAKT — lijevi stupac
   ================================================================ */

.wrapper .basic_site_inner_content_contact article h1 {
  margin-bottom: 8px;
}

.wrapper .basic_site_inner_content_contact article > em {
  display: block;
  font-style: normal;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--tinta-80);
  max-width: 56ch;
  margin: 0 0 30px;
}

/* nadnaslov skupine: <p><b>Gdje smo</b></p> */
.wrapper .basic_site_inner_content_contact article > p > b:only-child {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 26px 0 2px;
}

/* --- kartice lokacija ------------------------------------------ */

.wrapper .basic_site_inner_content_contact article > ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.wrapper .basic_site_inner_content_contact article > ul > li {
  position: relative;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  padding: 17px 20px 17px 22px;
  overflow: hidden;
  --b: var(--tinta);
}

.wrapper .basic_site_inner_content_contact article > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--b);
}

.wrapper .basic_site_inner_content_contact article > ul > li:nth-child(1) {
  --b: #39c9a3;
}
.wrapper .basic_site_inner_content_contact article > ul > li:nth-child(2) {
  --b: #3e9ad4;
}
.wrapper .basic_site_inner_content_contact article > ul > li:nth-child(3) {
  --b: #e8b23c;
}

/* naziv kvarta */
.wrapper .basic_site_inner_content_contact article > ul > li > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 2px;
}

/* adresa je goli tekst iza <strong> */
.wrapper .basic_site_inner_content_contact article > ul > li {
  font-size: 15.5px;
  color: var(--tinta-80);
  line-height: 1.5;
}

/* sto se radi na adresi */
.wrapper .basic_site_inner_content_contact article > ul > li > em {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-60);
  margin: 7px 0 11px;
}

.wrapper .basic_site_inner_content_contact article > ul > li > a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
}

@supports (color: color-mix(in srgb, #000 10%, transparent)) {
  .wrapper .basic_site_inner_content_contact article > ul > li > a {
    color: color-mix(in srgb, var(--b) 70%, #1e2630);
  }
}

.wrapper .basic_site_inner_content_contact article > ul > li > a::after {
  content: " →";
}

/* --- telefon i e-posta ----------------------------------------- */

.wrapper .basic_site_inner_content_contact article > p > a[href^="tel:"],
.wrapper .basic_site_inner_content_contact article > p > a[href^="mailto:"] {
  display: block;
  padding: 15px 18px;
  margin: 10px 0 0;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--tinta);
  font-size: 16px;
  font-weight: 600;
}

.wrapper .basic_site_inner_content_contact article > p > a[href^="tel:"]:hover,
.wrapper
  .basic_site_inner_content_contact
  article
  > p
  > a[href^="mailto:"]:hover {
  border-color: var(--crvena);
}

/* ================================================================
   2. KONTAKT — obrazac (samo slog, markup netaknut)
   ================================================================ */

.wrapper .basic_site_inner_content_contact .right_column_contact {
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  padding: 28px 28px 24px;
}

.wrapper .basic_site_inner_content_contact form.contact_form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: 6px;
}

.wrapper .basic_site_inner_content_contact form.contact_form input[type="text"],
.wrapper
  .basic_site_inner_content_contact
  form.contact_form
  input[type="email"],
.wrapper .basic_site_inner_content_contact form.contact_form select,
.wrapper .basic_site_inner_content_contact form.contact_form textarea {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--tinta);
  background: var(--papir);
  border: 1px solid var(--linija);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  outline: none;
  box-shadow: none;
}

.wrapper .basic_site_inner_content_contact form.contact_form textarea {
  min-height: 128px;
  line-height: 1.6;
  resize: vertical;
}

.wrapper
  .basic_site_inner_content_contact
  form.contact_form
  input[type="text"]:focus,
.wrapper
  .basic_site_inner_content_contact
  form.contact_form
  input[type="email"]:focus,
.wrapper .basic_site_inner_content_contact form.contact_form select:focus,
.wrapper .basic_site_inner_content_contact form.contact_form textarea:focus {
  border-color: var(--crvena);
  box-shadow: 0 0 0 3px rgba(200, 87, 79, 0.14);
  background: var(--bijela);
}

/* privola */
.wrapper
  .basic_site_inner_content_contact
  form.contact_form
  input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--crvena);
  margin-top: 3px;
}

/* gumbi */
.wrapper .basic_site_inner_content_contact form.contact_form input.form_submit {
  background: var(--crvena);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  padding: 14px 30px;
  cursor: pointer;
}

.wrapper
  .basic_site_inner_content_contact
  form.contact_form
  input.form_submit:hover {
  background: var(--crvena-tamna);
}

.wrapper .basic_site_inner_content_contact form.contact_form input.form_reset {
  background: none;
  border: 0;
  color: var(--tinta-60);
  font-family: var(--font-ui);
  font-size: 14.5px;
  text-decoration: underline;
  padding: 10px 6px;
  cursor: pointer;
  box-shadow: none;
}

.wrapper
  .basic_site_inner_content_contact
  form.contact_form
  input.form_reset:hover {
  color: var(--tinta);
}

/* karta na dnu */
.wrapper .basic_site_inner_content_contact iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--linija);
  border-radius: var(--r);
}

/* ================================================================
   3. LOKACIJSKE STRANICE — sve ispod <div class="dm-lok">
   ================================================================ */

.wrapper .dm-tekst .dm-lok {
  --b: #39c9a3;
} /* 46 Tresnjevka */
.wrapper .dm-tekst .dm-lok.dm-lok-rudes {
  --b: #3e9ad4;
}
.wrapper .dm-tekst .dm-lok.dm-lok-stenjevec {
  --b: #e8b23c;
}

/* pilula s kvartom: <p class="dm-kvart">Zagreb · Tresnjevka</p> */
.wrapper .dm-tekst .dm-lok .dm-kvart {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 16px;
  color: var(--tinta);
  background: rgba(30, 38, 48, 0.07);
}

@supports (color: color-mix(in srgb, #000 10%, transparent)) {
  .wrapper .dm-tekst .dm-lok .dm-kvart {
    color: color-mix(in srgb, var(--b) 72%, #1e2630);
    background: color-mix(in srgb, var(--b) 14%, transparent);
  }
}

/* naslovi sekcija s tockom u boji */
.wrapper .dm-tekst .dm-lok h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 34px 0 14px;
}

.wrapper .dm-tekst .dm-lok h2::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--b);
  flex: none;
}

/* popis usluga kao kartice */
.wrapper .dm-tekst .dm-lok ul.dm-usluge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.5;
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b);
  flex: none;
  margin-top: 8px;
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li strong {
  display: block;
  font-weight: 600;
  color: var(--tinta);
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li em {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--tinta-60);
  margin-top: 1px;
}

/* napomena u boji lokacije */
.wrapper .dm-tekst .dm-lok .dm-napomena {
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--tinta-80);
  background: rgba(30, 38, 48, 0.05);
  border: 1px solid var(--linija);
}

@supports (color: color-mix(in srgb, #000 10%, transparent)) {
  .wrapper .dm-tekst .dm-lok .dm-napomena {
    background: color-mix(in srgb, var(--b) 9%, transparent);
    border-color: color-mix(in srgb, var(--b) 22%, transparent);
  }
}

/* ploca s adresom i radnim vremenom */
.wrapper .dm-tekst .dm-lok .dm-adresa {
  margin: 30px 0 0;
  padding: 22px 24px;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
}

.wrapper .dm-tekst .dm-lok .dm-adresa dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 5px;
}

.wrapper .dm-tekst .dm-lok .dm-adresa dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta);
}

.wrapper .dm-tekst .dm-lok .dm-adresa dd a {
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
}

.wrapper .dm-tekst .dm-lok .dm-adresa dd a:hover {
  color: var(--crvena);
}

/* gumb za kartu */
.wrapper .dm-tekst .dm-lok a.dm-karta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 22px;
  border: 1px solid var(--linija);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
}

.wrapper .dm-tekst .dm-lok a.dm-karta::after {
  content: " →";
}
.wrapper .dm-tekst .dm-lok a.dm-karta:hover {
  border-color: var(--b);
}

/* --- uzak zaslon ------------------------------------------------ */

@media (max-width: 600px) {
  .wrapper .basic_site_inner_content_contact .right_column_contact {
    padding: 20px 16px 18px;
  }
  .wrapper .dm-tekst .dm-lok .dm-adresa {
    padding: 18px;
    gap: 16px;
  }
}

/* ============================================================
   dm-unutarnje-21  ·  ISPRAVCI NA KONTAKTU I LOKACIJAMA
   Zadatak 176 · 17.09.2026

   Tri kvara nadena mjerenjem na zivom novo., nakon sto je
   dm-unutarnje-18 postavljen.
   ============================================================ */

/* ================================================================
   1. KONTAKT — obrazac je stajao previsoko
   ================================================================
   Lijevi i desni stupac krecu s istog vrha, pa je obrazac bio u
   liniji s naslovom "Kontakt", a ne s prvom karticom lokacije.
   363 px je izmjerena razlika do vrha prve kartice.
   !important je nuzan: postojece pravilo drzi margin-top na 0.
   Ispod 1041 px stupci se slazu jedan ispod drugog i odmak se
   ne primjenjuje.                                               */

@media (min-width: 1041px) {
  .wrapper .basic_site_inner_content_contact .right_column_contact {
    margin-top: 363px !important;
  }
}

/* ================================================================
   2. LOKACIJE — dvostruki naslov i dvostruki uvod
   ================================================================
   Predlozak sam ispisuje <h1> i <em> iz zapisa stranice, a blok
   je donosio jos jedan <h1> i svoj uvod. Tri naslova zaredom.

   <h1> je maknut iz sadrzaja blokova (46, 47, 48) — nije CSS.
   Ovdje se sklanja samo <em> iz predloska, jer ponavlja naziv
   usluge koji vec stoji u <h1> iznad njega.

   Ovo je privremeno. Pravo rjesenje je isprazniti intro_text na
   te tri stranice, a to ide s ostalim sadrzajnim poslom.        */

.wrapper .dm-tekst article:has(> .dm-lok) > em {
  display: none;
}

.wrapper .dm-tekst .dm-lok > .dm-kvart {
  margin-top: 0;
}

/* ================================================================
   3. LOKACIJE — popis usluga
   ================================================================
   Tocka je bila postavljena apsolutno na left:3px, dakle na sam
   rub kartice i preko obruba. Uz to su naziv i pojedinost stajali
   u istom redu bez razmaka, pa se spajalo u jednu rijec.

   Sada: tocka u tijeku teksta, naziv u prvom redu, pojedinost u
   drugom, poravnata ispod naziva.                               */

.wrapper .dm-tekst .dm-lok ul.dm-usluge li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  padding: 14px 18px 14px 20px;
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li::before {
  position: static;
  display: block;
  order: 0;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: 0 12px 0 0;
  transform: translateY(-1px);
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li strong {
  order: 1;
  flex: 1 1 auto;
  display: block;
}

.wrapper .dm-tekst .dm-lok ul.dm-usluge li em {
  order: 2;
  flex: 1 1 100%;
  display: block;
  margin: 3px 0 0;
  padding-left: 19px;
}

/* ================================================================
   4. LOKACIJE — ploca s adresom
   ================================================================
   Bila je grid s repeat(auto-fit, minmax(190px, 1fr)), pa su dt i
   dd ulazili u celije redom: ADRESA | Gortanova | RADNO VRIJEME
   u prvom redu, pa ponedjeljak | TELEFON | broj u drugom.
   Naziv i vrijednost nisu bili jedno ispod drugog.

   Sada tri stupca, u svakom oznaka gore i vrijednost ispod.      */

.wrapper .dm-tekst .dm-lok .dm-adresa {
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr);
  gap: 5px 30px;
  align-items: start;
}

.wrapper .dm-tekst .dm-lok .dm-adresa dt {
  grid-row: 1;
  margin: 0;
}

.wrapper .dm-tekst .dm-lok .dm-adresa dd {
  grid-row: 2;
}

@media (max-width: 700px) {
  .wrapper .dm-tekst .dm-lok .dm-adresa {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .wrapper .dm-tekst .dm-lok .dm-adresa dt {
    grid-row: auto;
    margin-top: 12px;
  }
  .wrapper .dm-tekst .dm-lok .dm-adresa dd {
    grid-row: auto;
  }
}

/* ============================================================
   dm-unutarnje-20  ·  FOTOGRAFIJE U TEKSTU
   Zadatak 173 · 17.09.2026

   Uzrok neujednačenih veličina nije bio uploadani thumb, nego
   `display: table-cell` na <figure>. U tablici je širina
   prijedlog, a `float` se ignorira — pa se svaka slika crtala
   u svojoj prirodnoj veličini, kako je zatečena.

   Isti trap koji je držao FAQ uzak (dm-unutarnje-16).

   `float` nosi !important jer stara tema ima
   `figure { float: none !important }` u style.css.
   Nigdje drugdje !important nije potreban.
   ============================================================ */

.wrapper .dm-tekst article figure {
  display: block;
  float: left !important;
  width: min(340px, 38%);
  max-width: 100%;
  margin: 6px 30px 20px 0;
  padding: 0;
  overflow: visible;
  max-height: none;
  vertical-align: baseline;
}

.wrapper .dm-tekst article figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
}

/* osobne stranice — kvadrat umjesto 4:3 */
.wrapper .dm-osnovna .dm-tekst article figure img {
  aspect-ratio: 1 / 1;
}

.wrapper .dm-tekst article figure figcaption {
  display: block;
  margin-top: 9px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-60);
}

/* naslov ne ulazi u obtjecanje slike */
.wrapper .dm-tekst article h2,
.wrapper .dm-tekst article h3 {
  clear: both;
}

/* --- uzak zaslon --------------------------------------------- */

@media (max-width: 600px) {
  .wrapper .dm-tekst article figure {
    float: none !important;
    width: 100%;
    margin: 6px 0 20px;
  }
}

/* ============================================================
   CJENIK NA NASLOVNICI KAO NA STRANICI 30
   Kartice u .seg-cjenik dobivaju izgled ul.dm-cijene s cjenika:
   bijela kartica, obojena crta na vrhu, naziv lijevo, iznos desno
   u monospaceu, opis sivo ispod.
   Retke u tu strukturu (strong/span/em) slaze dm-skin.js, blok
   "dm-cjenik-naslovna", i dodaje klasu .dm-cjenik-slozen.
   Zadnji article (napomena i poveznica) se ne dira.
   ============================================================ */

/* --- kartica ------------------------------------------------- */
/* boja kartice ide kroz var(--boja, zadano): da je --boja postavljena u
   ovom pravilu, njegova veca specificnost (:not x2) pregazila bi boje
   po kartici ispod */

.wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) {
  padding: 18px 0 6px;
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-top: 2px solid var(--boja, #1e2630);
  border-radius: 18px;
  box-shadow: none;
}

.wrapper .seg.seg-cjenik > article:nth-child(2) {
  --boja: #3e9ad4;
}
.wrapper .seg.seg-cjenik > article:nth-child(3) {
  --boja: #39c9a3;
}
.wrapper .seg.seg-cjenik > article:nth-child(4) {
  --boja: #e8b23c;
}
.wrapper .seg.seg-cjenik > article:nth-child(5) {
  --boja: #7c6bd6;
}

/* naslov kartice u stilu glave podskupine (li.dm-glava) */
.wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) > h3 {
  margin: 0;
  padding: 0 20px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1e2630;
}

@supports (color: color-mix(in srgb, #000 10%, transparent)) {
  .wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) > h3 {
    color: color-mix(in srgb, var(--boja, #1e2630) 78%, #1e2630);
  }
}

.wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- redak --------------------------------------------------- */

.wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) li {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0 24px;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--linija);
  background: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
}

.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li:last-child {
  border-bottom: 0;
}

.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li::before,
.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li::marker {
  content: none;
}

/* naziv usluge — prvi red, lijevo */
.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li
  > strong {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--tinta);
}

.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li
  > strong
  a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li
  > strong
  a:hover,
.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li
  > strong
  a:focus-visible {
  color: var(--crvena);
}

/* iznos — prvi red, desno */
.wrapper
  .seg.seg-cjenik
  > article:not(:first-child):not(:last-child)
  li
  > span {
  order: 1;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinta);
}

/* pojedinost — drugi red, puna sirina */
.wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) li > em {
  order: 2;
  flex: 1 1 100%;
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-60);
}

/* --- uzak zaslon --------------------------------------------- */

@media (max-width: 600px) {
  .wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) > h3 {
    padding: 0 16px 6px;
  }
  .wrapper .seg.seg-cjenik > article:not(:first-child):not(:last-child) li {
    gap: 0 14px;
    padding: 14px 16px;
  }
  .wrapper
    .seg.seg-cjenik
    > article:not(:first-child):not(:last-child)
    li
    > strong {
    font-size: 15.5px;
  }
  .wrapper
    .seg.seg-cjenik
    > article:not(:first-child):not(:last-child)
    li
    > span {
    font-size: 14px;
  }
  .wrapper
    .seg.seg-cjenik
    > article:not(:first-child):not(:last-child)
    li
    > em {
    font-size: 13.5px;
  }
}

/* ==================================================================
   dm-unutarnje-23.css  —  IZBORNIK: poravnanje panela i kraj bljeskanja
   Dopisati NA SAM KRAJ dm-dizajn.css.
   Datum: 18.09.2026.

   IZMJERENO 18.09.2026., Chrome, 1920 px, /hrvatski/kontakt_9/:

     stavka           stavka x..x      panel x..x       odmak
     Za roditelje      585..706         376..706         -210
     Programi          710..818         503..1403        -207
     O nama            822..919         589..919         -233
     Za stručnjake     996..1131        801..1131        -194
     Lokacije         1135..1237        907..1237        -228

   Svaki panel visi 194 do 233 px ULIJEVO od svoje stavke. Uzrok: u
   dm-dizajn.css se nakupilo šest slojeva pravila koja si proturječe
   (blokovi 25, 26 i tri međuverzije), a posljednje kaže
   `left:auto; right:0`. Panel je širok 330 px, stavka oko 100 px, pa
   se desni rubovi poklope i panel ispadne 230 px lijevo.

   NAPOMENA O SPECIFIČNOSTI — zašto `:nth-child(n)`
   Pravilo koje trenutno pobjeđuje je
     .wrapper > header nav ul.menu_slick > li:nth-last-child(-n+4) > ul.submenu
   i ono ima jednu pseudo-klasu više od običnog selektora. Bez
   izjednačavanja specifičnosti ovaj blok ne bi imao učinka na
   Lokacije ni Za stručnjake — provjereno mjerenjem, prva verzija
   ovog bloka popravila je samo dvije od pet stavki. `:nth-child(n)`
   pogađa svaki <li> i služi isključivo za izjednačavanje težine.

   PROVJERENO NAKON IZMJENE, ista stranica i širina:
     Za roditelje   odmak 0    panel 585..915
     Programi       mega, centriran, 900 px, 503..1403
     O nama         odmak 0    panel 822..1152
     Za stručnjake  odmak 0    panel 996..1326
     Lokacije       odmak 0    panel 1135..1465
   Nijedan panel ne izlazi iz ekrana.
   ================================================================== */

@media only screen and (min-width: 801px) {
  /* ---- 1. PANEL SE PORAVNAVA S LIJEVIM RUBOM SVOJE STAVKE ---- */
  .wrapper > header nav ul.menu_slick > li:nth-child(n) > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n) > ul.submenu {
    left: 0;
    right: auto;
    max-width: min(380px, calc(100vw - 52px));
    transform: translateY(-8px);
  }

  .wrapper > header nav ul.menu_slick > li:nth-child(n):hover > ul.submenu,
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n):focus-within
    > ul.submenu,
  .wrapper > header nav ul.menu_slick > li:nth-child(n).otvoren > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n):hover > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n):focus-within > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n).otvoren > ul.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Zadnje tri stavke — zaštita da panel ne izađe iz ekrana ako se
     izbornik proširi. Danas su to Novosti, Kontakt i Dogovorite
     termin; nijedna nema panel, pa se pravilo ne okida. */
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n):nth-last-child(-n + 3)
    > ul.submenu,
  .wrapper
    > header
    ul.menu_slick
    > li:nth-child(n):nth-last-child(-n + 3)
    > ul.submenu {
    left: auto;
    right: 0;
  }

  /* ---- 2. MEGA PANEL (Programi) ----
     Klasu .ima-mega i dalje postavlja dm-skin.js. To je jedina stvar
     koju skripta radi s trakom, i ne mijenja raspored — klasa ne
     pomiče ništa. Provjereno: i "Za stručnjake" ima ugniježđeni <ul>,
     pa se mega NE smije prepoznavati po sadržaju. */
  .wrapper > header nav ul.menu_slick > li:nth-child(n).ima-mega > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n).ima-mega > ul.submenu {
    left: 50%;
    right: auto;
    width: min(900px, calc(100vw - 52px));
    max-width: none;
    transform: translate(-50%, -8px);
  }

  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n).ima-mega:hover
    > ul.submenu,
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n).ima-mega:focus-within
    > ul.submenu,
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n).ima-mega.otvoren
    > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n).ima-mega:hover > ul.submenu,
  .wrapper
    > header
    ul.menu_slick
    > li:nth-child(n).ima-mega.otvoren
    > ul.submenu {
    transform: translate(-50%, 0);
  }

  /* ---- 3. STRELICA IZ CSS-A, NE IZ SKRIPTE ----
     Dosad ju je dodavao dm-skin.js kao <i class="strelica"> pri
     pretvaranju <a> u <button>. Sada je čisti CSS, pa se ne pojavljuje
     naknadno i ništa ne pomiče. */
  .wrapper > header nav ul.menu_slick > li:has(> ul.submenu) > a::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: 3px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    opacity: 0.55;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s, opacity 0.18s;
  }

  .wrapper > header nav ul.menu_slick > li:has(> ul.submenu):hover > a::after,
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:has(> ul.submenu).otvoren
    > a::after {
    opacity: 1;
    transform: translateY(1px) rotate(225deg);
  }

  /* Ako stara skripta iz predmemorije ipak ubaci <i class="strelica">,
     ne smiju se vidjeti dvije strelice. */
  .wrapper > header nav ul.menu_slick > li > button > i.strelica {
    display: none;
  }

  /* ---- 4. ZADNJA STAVKA KAO GUMB ----
     "Dogovorite termin" postaje prava stavka izbornika u CMS-u, pa se
     ovo veže na položaj, ne na klasu koju dodaje skripta. */
  .wrapper > header nav ul.menu_slick > li:last-child > a {
    background: var(--bijela);
    box-shadow: inset 0 0 0 1.5px var(--linija);
    font-size: 13.5px;
    padding: 9px 16px;
    margin-left: 6px;
    letter-spacing: 0.01em;
  }

  .wrapper > header nav ul.menu_slick > li:last-child > a:hover {
    background: var(--tinta);
    color: #fff;
    font-size: 13.5px;
  }

  /* Zaštita dok stara skripta ne istekne iz predmemorije kod onih koji
     su stranicu učitali prije zadatka 184: ako ona ipak dopiše svoj
     gumb, ne smiju se vidjeti dva. Postavlja se TEK nakon što Filip
     doda stavku u CMS-u (korak A1), inače gumba nema. */
  .wrapper > header nav ul.menu_slick > li.nav-cta-li {
    display: none;
  }
}

/* ==================================================================
   dm-unutarnje-24.css  —  ISPRAVAK BLOKA 23
   Dopisati NA SAM KRAJ dm-dizajn.css, IZA bloka 23.
   Datum: 18.09.2026.

   Blok 23 je popravio tri panela od pet, a dvije stvari je promašio.
   Oboje izmjereno u Chromeu, 1920 px, na /cjenik..._30/, s NOVIM
   datotekama (dm-dizajn.css 219.333 B, dm-skin.js 30.605 B):

     stavka           odmak panela    klik na podstavku
     Za roditelje          0              NE RADI
     Programi           -230 (mega, OK)   NE RADI
     O nama                0              NE RADI
     Za stručnjake         0              NE RADI
     Lokacije           -232  <-- kvar    NE RADI


   KVAR 1 — Lokacije: panel i dalje visi 232 px ulijevo

   Blok 23 ima zaštitu "zadnje tri stavke otvaraju ulijevo da ne izađu
   iz ekrana". Napisao sam je pretpostavivši da su zadnje tri Novosti,
   Kontakt i Dogovorite termin. Stvarni redoslijed u izborniku je:

     1 Naslovna   2 Za roditelje   3 Programi   4 O nama   5 Cjenik
     6 Za stručnjake   7 Novosti   8 LOKACIJE   9 Kontakt   10 Dogovorite

   Lokacije su OSMA od deset, dakle unutar zadnje tri — pa se zaštita
   okinula baš na njima. Nisam provjerio stvarni redoslijed, nego sam
   ga pretpostavio. To je greška.

   Zaštita se ovdje gasi. Izmjereno je da nijedan panel ne izlazi iz
   ekrana kad je poravnat lijevo: najdesniji (Lokacije) završava na
   1465 px pri širini 1920, i na oko 1195 px pri širini 1280.


   KVAR 2 — podstavke se ne mogu kliknuti

   Izmjereno: na sredini svake podstavke `elementFromPoint` vraća <li>,
   a ne <a>. Sam <a> ima izračunatu `visibility: hidden` iako mu je
   roditelj vidljiv — pa nije ni vidljiv ni "kliknjiv" za preglednik.

   Uzrok: stari CSS ima `visibility` u popisu prijelaza
   (`transition: opacity .18s, transform .18s, visibility .18s`).
   `visibility` je diskretno svojstvo — dok prijelaz traje, preglednik
   drži staru vrijednost. Dok se panel otvarao PRELASKOM MIŠA to se nije
   vidjelo jer miš ostaje na mjestu i stanje se osvježi. Otkad se panel
   otvara KLIKOM (klasa `otvoren`), prijelaz ostane zaglavljen i
   poveznice ostanu nedodirljive.

   Ispravak: `visibility` van iz prijelaza, i izrijekom postavljena na
   `visible` na otvorenom panelu i na njegovim poveznicama.
   ================================================================== */

@media only screen and (min-width: 801px) {
  /* ---- 1. GASI SE ZAŠTITA ZA ZADNJE TRI STAVKE ----
     Svi uski paneli poravnavaju se lijevo uz svoju stavku. */
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n):nth-last-child(-n + 3)
    > ul.submenu,
  .wrapper
    > header
    ul.menu_slick
    > li:nth-child(n):nth-last-child(-n + 3)
    > ul.submenu {
    left: 0;
    right: auto;
  }

  /* Mega panel ostaje centriran — mora doći IZA gornjeg pravila. */
  .wrapper > header nav ul.menu_slick > li:nth-child(n).ima-mega > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n).ima-mega > ul.submenu {
    left: 50%;
    right: auto;
  }

  /* ---- 2. VIDLJIVOST VAN IZ PRIJELAZA ---- */
  .wrapper > header nav ul.menu_slick > li:nth-child(n) > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n) > ul.submenu {
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
  }

  /* ---- 3. OTVOREN PANEL: sve vidljivo i kliknjivo ---- */
  .wrapper > header nav ul.menu_slick > li:nth-child(n):hover > ul.submenu,
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n):focus-within
    > ul.submenu,
  .wrapper > header nav ul.menu_slick > li:nth-child(n).otvoren > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n):hover > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n):focus-within > ul.submenu,
  .wrapper > header ul.menu_slick > li:nth-child(n).otvoren > ul.submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Poveznice unutar otvorenog panela — izrijekom, da ih ne uhvati
     zaglavljeni prijelaz roditelja. */
  .wrapper > header nav ul.menu_slick > li:nth-child(n):hover > ul.submenu a,
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n):focus-within
    > ul.submenu
    a,
  .wrapper > header nav ul.menu_slick > li:nth-child(n).otvoren > ul.submenu a,
  .wrapper > header ul.menu_slick > li:nth-child(n):hover > ul.submenu a,
  .wrapper > header ul.menu_slick > li:nth-child(n):focus-within > ul.submenu a,
  .wrapper > header ul.menu_slick > li:nth-child(n).otvoren > ul.submenu a {
    visibility: visible;
    pointer-events: auto;
  }

  /* Zatvoren panel ne smije presretati miš iznad sadržaja stranice. */
  .wrapper
    > header
    nav
    ul.menu_slick
    > li:nth-child(n):not(:hover):not(.otvoren):not(:focus-within)
    > ul.submenu {
    pointer-events: none;
  }
}

/* ============================================================
   CESTA PITANJA (PODSTRANICA) — harmonika kao na naslovnici
   Markup slaze dm-skin.js, blok "dm-faq-podstranica":
   .faq-lista > .faq-stavka > button + .faq-odgovor > .unutra
   Isti izgled kao .seg-faq na naslovnici, samo u stupcu teksta.
   ============================================================ */

.wrapper .dm-tekst article .faq-lista {
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--linija);
}

.wrapper .dm-tekst article .faq-stavka {
  border-bottom: 1px solid var(--linija);
}

.wrapper .dm-tekst article .faq-stavka > button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 19px 44px 19px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--tinta);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.wrapper .dm-tekst article .faq-stavka > button:hover,
.wrapper .dm-tekst article .faq-stavka > button:focus-visible,
.wrapper .dm-tekst article .faq-stavka.otvoren > button {
  color: var(--crvena);
}

/* strelica desno, okrece se kad je odgovor otvoren */
.wrapper .dm-tekst article .faq-stavka > button::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 25px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--crvena);
  border-bottom: 2px solid var(--crvena);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.wrapper .dm-tekst article .faq-stavka > button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.wrapper .dm-tekst article .faq-odgovor[hidden] {
  display: none;
}

.wrapper .dm-tekst article .faq-odgovor .unutra {
  padding: 0 44px 20px 0;
}

.wrapper .dm-tekst article .faq-odgovor .unutra > *:first-child {
  margin-top: 0;
}

.wrapper .dm-tekst article .faq-odgovor .unutra p {
  margin: 0 0 12px;
  padding: 0;
}

.wrapper .dm-tekst article .faq-odgovor .unutra p:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .wrapper .dm-tekst article .faq-stavka > button {
    padding: 16px 36px 16px 0;
    font-size: 17px;
  }
  .wrapper .dm-tekst article .faq-stavka > button::after {
    top: 22px;
    right: 4px;
    width: 10px;
    height: 10px;
  }
  .wrapper .dm-tekst article .faq-odgovor .unutra {
    padding: 0 0 18px;
  }
}

/* ============================================================
   CETIRI KARTICE NA STRANICAMA PROGRAMA — DVIJE PO REDU
   Zatecено: flex s `flex: 1 1 160px`, pa su sve cetiri kartice
   isle u jedan red. Sada grid s dva stupca; ispod 720px jedan.
   Ide na kraj dm-dizajn.css, iza bloka dm-unutarnje-14.
   ============================================================ */

.wrapper .dm-tekst > .programs_columns_cnt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* u gridu se sirina odreduje stazom, `flex` osnova vise ne vrijedi */
.wrapper .dm-tekst > .programs_columns_cnt > article {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 720px) {
  .wrapper .dm-tekst > .programs_columns_cnt {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==================================================================
   dm-unutarnje-26.css  —  JACE ZAOBLJENJE FOTOGRAFIJA U SADRZAJU
   Dopisati NA SAM KRAJ dm-dizajn.css, iza bloka 25.
   Datum: 19.09.2026.

   Michael: na uslugama fotografije izgledaju ostrih kutova, osim
   Neurofeedbacka.

   IZMJERENO

     fotografija na usluzi (16, 28)   286 x 214 px   border-radius 18px
     Neurofeedback, naslovnica        737 x 553 px   border-radius 22px

   Radijus postoji svugdje, ali 18 px na slici od 286 px jedva se vidi,
   pogotovo kad su kutovi same fotografije svijetli — tada se zaobljenje
   stopi s podlogom stranice. Na velikoj tamnoj fotografiji
   Neurofeedbacka isto zaobljenje se jasno cita.

   ODLUKA: radijus na fotografijama u sadrzaju ide na 28 px, da se vidi
   bez obzira na velicinu i boju slike.

   OPSEG — fotografija unutar teksta stranice: usluge i stranice
   clanica tima. 18 stranica, 21 fotografija (popis u zadatku 191).

   NE DIRA SE:
     naslovnica — u bloku nema nijednog .seg- selektora
     stranica „Nas tim" i portreti u karticama tima
     modul Novosti
     logotipi i ikone
   ================================================================== */

.wrapper .dm-tekst article figure img,
.wrapper .basic_site_inner_content figure img {
  border-radius: 36px;
}