/* ========================================================================== HR dizajn za Pragmin konačni tekst (v05, 5. 10. 2026). Odluka vlasnika projekta (5. 10. 2026, „Pragmin tekst, prilagodi dizajn"): na hrvatskom ide Pragmin tekst doslovno; gdje ne staje u dizajn, mijenja se DIZAJN — naslov forme smije u dva reda, naslov heroja naslovne je manji, dugmad su šira. Naša ranija skraćenja teksta se ne vraćaju. Učitava se POSLJEDNJI (functions.php, smile_assets(): 'hr' iza 'mobilno'). SVAKO pravilo počinje s `html:lang(hr)`: HR stranice imaju , IT , pa talijanski ispis ostaje piksel-isti. `html:lang(hr)` dodaje razred i element težine, pa pravila ovdje tuku istoimena pravila rasporeda bez `!important`. Dokazi i mjerenje (van repoa): oko/rad/prevod-hr/provjera/v05-tekst/ (mjeri_dizajn.js, dizajn/). Granica alata: `text-wrap: balance` u Chromiumu NE radi u bloku koji ima ručni prelom (
) — tada preglednik lomi pohlepno. Zato naslovi s
ovdje dobijaju prostor ili veličinu, a ne samo `balance`. ========================================================================== */ /* --- 1. Naslov forme (B6) ------------------------------------------------------ Desktop: naslov je apsolutan i imao je samo `left`, pa je HR rečenica („Ispunite obrazac i naručite se na prvi besplatan pregled u Poliklinici Smile.") išla 43 px preko okvira dizajna (1102,8 od 1286, desni rub 81,6 = 5,1rem) i ostavljala „Smile." samu u drugom redu. Okvir dobija i desni rub (isti kao centrirani naslov), a prelom je uravnotežen. Prored 38 (2,375rem) je mjera dvorednog naslova forme iz dizajna (prva forma 04_Prima visita, `.fs-30`): dva reda tako završavaju 18 px iznad polja „Ime", kao u dizajnu, a kartica ostaje 348 px. Ta prva forma Prvog pregleda (`.fs-30`, centrirana, dva reda i u IT) na HR ima ručni prelom iza „…što vas brine", pa je drugi red („Javit ćemo vam se … prve korisne informacije.") na 30 px širi od okvira i „informacije." je padala u treći red, preko polja. Na 26 px (1,625rem) drugi red staje (1052 od 1102,8): dva reda, isti prored 38, kartica ista. */ @media (min-width: 1024px) { html:lang(hr) .smile-form__title:not(.fs-30) { right: 5.1rem; /* 81,6 — okvir dizajna */ line-height: 2.375rem; /* 38 */ text-wrap: balance; } html:lang(hr) .smile-form[style*="--form-dx"] .smile-form__title:not(.fs-30) { right: calc(5.1rem - var(--form-dx)); } html:lang(hr) .smile-form .smile-form__title.fs-30 { font-size: 1.625rem; } /* 26 */ } /* Telefon: naslov je u toku, centriran; uravnotežen prelom. Ručni prelom naslova forme se na telefonu skriva (form.css: u IT je to prelom širine desktop kartice), ali u HR naslovu `.fs-30` on dijeli dvije rečenice („…što vas brine / Javit ćemo…", bez točke) — skriven, spajao ih je u jednu. Na HR ostaje vidljiv. */ html:lang(hr) .smile-form__title { text-wrap: balance; } @media (max-width: 1023px) { html:lang(hr) .smile-form__title.fs-30 br { display: inline; } } /* --- 2. Dugmad (pilule s krugom) ------------------------------------------------ Pilula fiksne širine (`text-band--cw`, polje `cta_w`: Digitalna stomatologija s3, Iskustva pacijenata s6) je za IT natpis; HR natpis „Naručite se na prvi besplatan pregled" je bio širi od nje i prelazio krug. Na HR širina iz dizajna postaje NAJMANJA širina: pilula raste s natpisom, a razmak natpis -> krug je 18,5 (heroj, ista mala obitelj 36,9). Ostala dugmad (heroj, modul 45) već rastu s natpisom (components.css). */ @media (min-width: 1024px) { html:lang(hr) .text-band--cw > .btn.btn { width: auto; min-width: var(--tb-cta-w); --btn-gap: 1.15625rem; /* 18,5 */ } } /* Uski ekran: natpis smije u dva reda (components.css, korak 3) — redovi uravnoteženi („Naručite se na prvi / besplatan pregled", ne „…pregled" sam ispod) i centrirani: natpis u dva reda zauzima cijeli prostor do kruga, pa bi lijevo poravnati kraći redovi ostavili rupu ispred kruga. Jednoredni natpis je širok koliko i tekst, pa ga ovo ne pomjera. Samo sadržaj stranice (`main`): dugme zaglavlja se ne dira. */ @media (max-width: 1023px) { html:lang(hr) main .btn__label { text-wrap: balance; text-align: center; } } /* --- 3. Naslov heroja naslovne -------------------------------------------------- Pragmin naslov „Tamo gdje drugi / vide ograničenje, / mi vidimo mogućnost / liječenja." na 51 px u okviru od 421 px (sections.css, `.hero--hp .hero__title-box--right`) davao je 6 redova (IT 4). Na 48 px (3rem, isti omjer proreda 1,0588) drugi red staje u okvir, a treći se lomi jednom: 5 redova, 254 px — i dalje u istom bloku (naslov počinje na 388, dno sadržaja heroja je 772). Samo naslovna HR (`body.home`). Telefon: okvir naslova je 100vw − 2 × 3,425rem (layout-a.css), a najduži red koji se ne smije lomiti („vide ograničenje,") je 8,32 em. Veličina = okvir / 8,45, najviše 36 px (IT): tako „Tamo gdje drugi" i „vide ograničenje," ostaju u jednom redu, lomi se samo „mi vidimo / mogućnost" — 5 redova na 360–490 (IT 4), 4 reda od ~640 px. Prored ide s veličinom u omjeru iz dizajna (44 / 36). */ @media (min-width: 1024px) { html:lang(hr) body.home .hero--hp h1.hero__title, html:lang(hr) body.home .hero--hp .hero__title .fs-51 { font-size: 3rem; } } @media (max-width: 1023px) { html:lang(hr) body.home .hero--hp { --hr-hero-fs: min(2.25rem, calc((100vw - 6.85rem) / 8.45)); } html:lang(hr) body.home .hero--hp h1.hero__title { font-size: var(--hr-hero-fs); line-height: calc(var(--hr-hero-fs) * 1.2222); } html:lang(hr) body.home .hero--hp .hero__title .fs-51 { font-size: var(--hr-hero-fs); } } /* --- 4. Siročad i višak redova u naslovima i natpisima -------------------------- HR rečenice su duže od IT, pa se naslov lomi i ostavlja jednu riječ samu u zadnjem redu. `text-wrap: balance` raspoređuje riječi u ISTI broj redova (visina se ne mijenja). Vrijedi za sve naslove (h1–h6), pitanja (kartice, FAQ), natpise brojki i tekst trake poziva (`cta-banner`, ručni prelom je na telefonu skriven, pa `balance` tamo radi). */ html:lang(hr) :is(h1, h2, h3, h4, h5, h6, .qcards__q, .qcards__label, .numbers__label, .faq__q, .cta-banner__text) { text-wrap: balance; } /* Odlomci teksta: `pretty` (kao `--kol-prelom` u kolone.css) pomjera riječ iz pretposljednjeg reda kad bi zadnji ostao s jednom riječi — npr. uvod modula 152/40 „…njegove faze i ukupan / trošak." → „…njegove faze i / ukupan trošak.". Broj redova i visina ostaju isti; odlomak s ručnim prelomom Chromium ostavlja kakav jest. Pitanja i natpisi gore (

) imaju `balance` (jača težina). */ html:lang(hr) main p { text-wrap: pretty; } @media (min-width: 1024px) { /* Naslov kartice smije u desni unutrašnji razmak, do 0,75rem (12 px) od ruba kartice, najviše 1,5rem dalje nego danas. Naslovi kartica imaju ručni prelom (
), pa `balance` ne pomaže: „Složene terapije / u svakodnevnom / radu" (Poliklinika Smile s2) tako staje u dva reda, bez riječi same u redu. Tekst ispod naslova ostaje na razmaku iz dizajna. Razmak kartice je lanac varijabli iz layout-a.css (stavka → sekcija → zadano obitelji). */ html:lang(hr) .cols--2.cols--cards > .cols__item > .cols__title { margin-right: min(0px, max(-1.5rem, calc(.75rem - var(--ci-pr, var(--cols-pad-r, var(--cols-pad-x, 4.0625rem)))))); } html:lang(hr) .cols--3.cols--cards > .cols__item > .cols__title { margin-right: min(0px, max(-1.5rem, calc(.75rem - var(--ci-pr, var(--cols-pad-r, var(--cols-pad-x, 1.3125rem)))))); } html:lang(hr) .cols--4.cols--cards > .cols__item > .cols__title { margin-right: min(0px, max(-1.5rem, calc(.75rem - var(--ci-pr, var(--cols-pad-r, var(--cols-pad-x, 1.4375rem)))))); } /* Straumann modul (V1 i V2, znak gore desno): naslov „Među 12 Straumann Pro Arch / Center of Excellence centara" je na 38 px u okviru teksta od 530 px ostavljao „centara" samu u trećem redu (drugi red 537 px). Na 36 px (2,25rem) staje u dva reda, kao IT; oba modula isto. */ html:lang(hr) .media-text--znak-gd .sec__title { font-size: 2.25rem; } } /* Naslov kartice heroja (`hero_card`, npr. Digital Smile Design) na telefonu: ručni prelom je tu skriven, pa `balance` radi, ali su HR riječi duge za okvir od 240–294 px na 38 px („Digital Smile / Design: / pogledajte / planirani / osmijeh / prije liječenja" — 6 redova na 360–414, IT 4–6). Na 32 px (2rem): 4 reda na 414, 5 na 390, 6 na 360 — koliko i IT. */ @media (max-width: 767px) { html:lang(hr) .hero-card__title { font-size: 2rem; } } /* Kartice pitanja (naslovna s2) imaju razmak 2,5rem s obje strane na svim širinama (sections.css, layout-a.css): pitanje smije do 0,75rem od desnog ruba. „Imate oštećene zube" (258,6 px na 25 px) tako staje u red (do 262): 3 reda umjesto 4, bez „zube" same u drugom redu. „mostove?" ostaje sama u zadnjem redu — drugi dio iza
se lomi pohlepno, a za „ili dotrajale krunice / i mostove?" bi trebao `balance` (vidi gore). */ /* Samo ≥ 1024 (pregled S4, 6. 10.): na telefonu je pomak davao vidljivu asimetriju (tekst 18–23 px od desnog ruba naspram 40 px lijevo); tamo pitanje ima 4–5 redova, bez preljeva. */ @media (min-width: 1024px) { html:lang(hr) .qcards__item > .qcards__q { margin-right: -1.75rem; } } /* --- 5. Kartice u boji (`cols--cards`): donji razmak ---------------------------- Kartica ima visinu iz dizajna (`--cols-card-h`) i donji razmak 0 (`--cols-pad-b`: No Bone s2, All on 4 s2, Digitalna stomatologija s2): duži HR tekst je dolazio do samog dna kartice. Na HR donji razmak je najmanje 1,25rem (20); kartica (i red kartica) raste tek kad tekst ne stane u visinu iz dizajna. Samo sekcije s upisanim `--cols-pad-b` — bez njega vrijede zadani razmaci obitelji (layout-a.css) i ne diraju se. */ @media (min-width: 1024px) { html:lang(hr) .cols--cards[style*="--cols-pad-b"] > .cols__item { padding-bottom: max(var(--cols-pad-b), 1.25rem); } } /* --- Kontakt, stupac uz kartu (pregled D2 N1, 6. 10.): Pragmina adresa s orijentirima na 360 px ostavljala je „Savoy." samu u četvrtom redu. Uravnotežen prelom, samo HR i samo uski telefoni. */ @media (max-width: 375px) { html:lang(hr) .map__col-text { text-wrap: pretty; } } /* --- Tamni modul „Prvi pregled" (modul 45: /stomatoloska-poliklinika-smile/, /opca-stomatologija/), 6. 10. 2026 --- Pragmin natpis „Naručite se na prvi besplatan pregled" daje pilulu od 385 px u stupcu od 355 px (1512; 20–30 px viška na 1024–1920). Stupac je poravnat desno, pa je pilula izlazila udesno i prelazila 3–4 px preko fotografije (završna kontrola v05, K-01). Stupac (desno poravnat, max-width 355 iz layout-b.css) se na HR širi za 2rem ulijevo, a tekst kartice dobija isti lijevi uvlak, pa mu redovi ostaju isti: pilula staje U stupac (QA zdravlje ne javlja prelijevanje), desni rub joj ostaje na desnom rubu stupca kao na IT, a ulazi u prazan lijevi dio kartice. */ @media (min-width: 1024px) { html:lang(hr) .sec--v-dark .prima:not(.prima--bez-glave) .prima__body { max-width: calc(22.1875rem + 2rem); } html:lang(hr) .sec--v-dark .prima:not(.prima--bez-glave) .prima__card-text { padding-left: 2rem; } } /* --- Naslovna, kartica pitanja 5 („Imate oštećene zube
ili dotrajale krunice i mostove?"), 6. 10. 2026 --- Ručni prelom iza „zube" ostavljao je „mostove?" samu u trećem redu (≥ 1024, 414–490) i „zube" samu na 390–360. Ispred
je razmak, pa se prelom smije sakriti: uravnoteženo „Imate oštećene / zube ili dotrajale / krunice i mostove?". Samo ova kartica (ostale nose namjerne prelome; nth-child prati redoslijed kartica u modulu). */ html:lang(hr) .qcards__item:nth-child(5) > .qcards__q br { display: none; }