/* ============================================================================
   O NAMA — stilovi stranice (page-o-nama.php, bira se po slugu „o-nama")
   1:1 prenos stare Gutenberg/UiCore stranice (post 384). Vrednosti su izmerene
   na staroj stranici (1920 · 1440 · 1024 · 768 · 440 · 390 · 360).

   ORGANIZACIJA: svaka sekcija drži SVA svoja pravila na jednom mestu — bazna,
   pa njeni @media override-i. Kad menjaš sekciju, tražiš SAMO njen blok.
   Sve je pod .onama-page — uicore-global.css se učitava POSLE ovog fajla, pa
   pravila iste specifičnosti (h1, p, button…) ne bi prošla.

   SADRŽAJ
     00  ZAJEDNIČKO (html/body protiv bukvar-trudnice.css, pozadina stranice)
     01  HERO
     02  O TATJANI („Saznaj više")
     03  BROJKE (beskonačna traka)
     04  O BRENDU (Lora uvod + opis, fotografija)
     05  MEĐUNARODNO ISKUSTVO (tamni boks: pilula + naslov + 2 kolone)
     06  ISKUSTVA RODITELJA  (→ pm-testimonials.css, ovde samo spoljni razmak)

   PRELOMNE TAČKE — preuzete iz starog UiCore/style.css ponašanja:
     ≤1024px     UiCore kontejner: width: var(--ui-bl-width-tablet) → taj var
                 nikad nije definisan → širina postaje AUTO (zato je npr. hero
                 kartica na tabletu uska, a kolone boksa na min-content širini).
     ≤1023.98px  pravila iz uicore-384-tablet.css (media 768–1024) koja
                 desktop fajl (min-width:1024, učitan posle) gazi na TAČNO 1024.
     ≤996px      style.css override-i (brojke, dugme, slika brenda, pilule).
     996–1550 / 996–1350   style.css (padding boksa / sekcije 05).
     ≤767px      UiCore „mobile".

   Tipografija naslova/pasusa (Lora/Inter, veličine po breakpointu) dolazi iz
   globalnih UiCore h1–h6/p pravila; ovde su samo vrednosti koje je blok menjao.
   Paleta: ink #584642 · brown #735E59 · blush #F4EBE7 · cream #FDFAF8
   ============================================================================ */


/* ==========================================================================
   00  ZAJEDNIČKO
   ======================================================================= */
/* bukvar-trudnice.css (učitava se zbog sekcije 06) ima globalno
   `html, body { overflow-x: hidden }` i `body { background: #FAF5F2 }`.
   Stara stranica taj fajl nije imala: body je bio providan, a body `hidden`
   bi ga pretvorio u scroll kontejner. `clip` jednako seče horizontalni višak,
   a ne pravi scroll kontejner (isto rešenje kao philipova-page.css).
   Fajl se učitava samo na ovoj stranici, posle bukvar CSS-a (deps). */
html, body { overflow-x: clip; }
body { background: transparent; }

/* Stari omotač #primary.content-area je nosio ovu pozadinu */
.onama-page {
    position: relative;
    background: #FDFAF8;
}


/* ==========================================================================
   01  HERO  (on-hero2 — novi dizajn; spec: scratchpad design-onama-hero/spec.md)
   Zaobljeni panel (kao hero naslovne), pilula hedera (40–136) sedi preko
   gornje ivice panela; kartica statistike visi preko donje ivice.
   Fotografija: fiksan okvir, kadar SAMO preko promenljivih --ph-h / --ph-pos /
   --fade-l po breakpointu (zamena slike = isti okvir, menja se src + 3 vrednosti).
   Breakpointi ovog bloka su iz spec-a (1100 / 860 / 480 / 380), ne stari UiCore.
   ======================================================================= */
.onama-page .on-hero2 {
    --ink: #3E322E; --brown: #8B726C; --muted: #584642; --gold: #D6A14B;
    --panel-a: #F0E8E6; --panel-b: #F2EDEB;     /* podloga mocka */
    --stats-bg: #F3E8E5; --divider: #DFD1D0;
    --btn-border: #B9A69E; --btn-text: #7E6660;
    --sign: #A88C86; --circle: #C39887;
    position: relative; padding: 80px 0 40px;   /* pilula 40–136 sedi preko gornje ivice panela */
}
.onama-page .on-hero2 *, .onama-page .on-hero2 *::before, .onama-page .on-hero2 *::after { box-sizing: border-box; }
.onama-page .on-hero2__wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.onama-page .on-hero2__panel {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 24px;
    background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
    min-height: 664px; padding: 120px 0 88px 72px;   /* naslov na 200px = 64px ispod pilule */
}

/* tekst */
.onama-page .on-hero2__content { position: relative; z-index: 2; max-width: 500px; }
.onama-page .on-hero2__title { margin: 0; font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: clamp(52px, 4.6vw, 66px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.onama-page .on-hero2__line { display: block; width: 64px; height: 2px; border-radius: 2px; margin: 24px 0 26px; background: linear-gradient(90deg, #B08D80 0%, var(--gold) 60%, #D9C1B5 100%); }
.onama-page .on-hero2__sub { margin: 0; max-width: 460px; font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.35; color: var(--ink); }
.onama-page .on-hero2__text { margin: 18px 0 0; max-width: 420px; font-family: 'Inter', system-ui, sans-serif; font-size: 17px; line-height: 1.68; color: var(--muted); }

/* potpis: beli SVG teme → CSS maska, boja iz background-a (putanja relativna na assets/css/) */
.onama-page .on-hero2__sign {
    display: block; width: 212px; aspect-ratio: 288 / 88; margin: 30px 0 0; background: var(--sign);
    -webkit-mask: url('../images/new-home/hero-signature.svg') left center / contain no-repeat;
            mask: url('../images/new-home/hero-signature.svg') left center / contain no-repeat;
}

.onama-page .on-hero2__btn {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; height: 56px; padding: 0 30px;
    border: 1.5px solid var(--btn-border); border-radius: 999px; background: transparent; color: var(--btn-text); text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.onama-page .on-hero2__btn svg { width: 20px; height: 20px; flex: none; transition: transform .2s ease; }
.onama-page .on-hero2__btn:hover { background: var(--brown); border-color: var(--brown); color: #FDFAF8; }
.onama-page .on-hero2__btn:hover svg { transform: translateX(4px); }

/* fotografija — fiksan okvir, kadar SAMO preko promenljivih (zamena slike = isti okvir) */
.onama-page .on-hero2__photo {
    position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 60%; pointer-events: none; overflow: hidden;
    --ph-h: 100%; --ph-pos: 50% 86%;        /* tatjana-01: teme ~185px od vrha strane, ruke ~600, kartica seče od butina */
    --fade-l: 34%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 16%, #000 var(--fade-l));
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 16%, #000 var(--fade-l));
}
.onama-page .on-hero2__photo img {
    position: absolute; right: 0; bottom: 0; display: block; width: 100%; height: var(--ph-h); max-width: none;
    object-fit: cover; object-position: var(--ph-pos);
    filter: sepia(.08) brightness(1.03);     /* blago topljenje sa bež podlogom; ukloniti kad stigne prava (bela) fotografija */
}
/* gornji fade — beli header ne „seče" zid fotografije ispod pilule */
.onama-page .on-hero2__photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; background: linear-gradient(180deg, rgba(240,232,230,.7), rgba(240,232,230,0)); }

/* kartica statistike — visi preko donje ivice panela */
.onama-page .on-hero2__stats {
    list-style: none; position: relative; z-index: 3; width: 960px; max-width: calc(100% - 80px); margin: -70px auto 0; padding: 30px 20px 28px;
    background: var(--stats-bg); border-radius: 20px;
    box-shadow: 0 24px 56px -20px rgba(88,70,66,.30), 0 2px 8px rgba(88,70,66,.05);
    display: grid; grid-template-columns: repeat(3, 1fr);
}
.onama-page .on-hero2__stat { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 4px 16px; text-align: center; }
.onama-page .on-hero2__stat + .on-hero2__stat { border-left: 1px solid var(--divider); }
.onama-page .on-hero2__ico { display: block; width: 34px; height: 34px; margin-bottom: 4px; }
/* !important: style.css ima globalno `strong { font-weight: 600 !important }` */
.onama-page .on-hero2__num { font-family: 'Lora', Georgia, serif; font-weight: 400 !important; font-size: 32px; line-height: 1.1; letter-spacing: -.005em; color: var(--ink); }
.onama-page .on-hero2__num--text { font-size: 26px; line-height: 1.2; }
.onama-page .on-hero2__label { font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; line-height: 1.4; color: var(--muted); }

/* okrugla strelica nadole */
.onama-page .on-hero2__down { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 40px auto 0; border-radius: 50%; background: var(--circle); color: #fff; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.onama-page .on-hero2__down svg { width: 18px; height: 18px; }
.onama-page .on-hero2__down:hover { background: var(--brown); transform: translateY(2px); }

/* ≤1100 (tablet vodoravno / mali laptop) */
@media (max-width: 1100px) {
    .onama-page .on-hero2__panel { min-height: 620px; padding: 108px 0 80px 56px; }
    .onama-page .on-hero2__content { max-width: 440px; }
    .onama-page .on-hero2__sub { font-size: 25px; max-width: 400px; }
    .onama-page .on-hero2__text { font-size: 16px; max-width: 380px; }
    .onama-page .on-hero2__photo { width: 56%; --ph-pos: 50% 84%; }
    .onama-page .on-hero2__stats { width: auto; max-width: calc(100% - 64px); padding: 26px 12px 24px; }
    .onama-page .on-hero2__num { font-size: 28px; }
    .onama-page .on-hero2__num--text { font-size: 23px; }
    .onama-page .on-hero2__label { font-size: 14px; }
}
/* ≤860 — MOBILNI, verno mocku: panel postaje full-bleed, traka bez radijusa/senke */
@media (max-width: 860px) {
    .onama-page .on-hero2 { padding: 0 0 40px; }
    .onama-page .on-hero2__wrap { padding: 0; max-width: none; }
    .onama-page .on-hero2__panel { border-radius: 0; min-height: 0; padding: 160px 24px 64px; }   /* pilula 10–106 → naslov na 160 (≈54px vazduha, kao mock) */
    .onama-page .on-hero2__content { max-width: 100%; }
    .onama-page .on-hero2__title { font-size: clamp(42px, 12vw, 54px); line-height: 1.02; }          /* mock ima krupan naslov */
    .onama-page .on-hero2__line { width: 48px; margin: 20px 0 22px; }
    .onama-page .on-hero2__sub { font-size: clamp(17px, 4.6vw, 20px); line-height: 1.4; max-width: 62%; }
    .onama-page .on-hero2__text { font-size: 15px; line-height: 1.6; margin-top: 16px; max-width: 215px; }   /* 3 reda kao mock */
    .onama-page .on-hero2__sign { width: 150px; margin-top: 26px; }
    .onama-page .on-hero2__btn { margin-top: 30px; height: 46px; padding: 0 22px; gap: 12px; font-size: 11.5px; letter-spacing: .14em; }
    .onama-page .on-hero2__btn svg { width: 17px; height: 17px; }

    /* foto: okvir 62 % širine desno, slika 1,35× sidrena dole → teme ≈150px, oči ≈205px, lice na ~77 % širine ekrana */
    .onama-page .on-hero2__photo { width: 62%; --ph-h: 135%; --ph-pos: 36% 50%; --fade-l: 38%; }
    .onama-page .on-hero2__photo img { filter: none; }
    .onama-page .on-hero2__photo::after { height: 112px; }   /* mek prelaz ispod mobilne pilule */

    .onama-page .on-hero2__stats { width: auto; max-width: none; margin: 0; padding: 30px 6px 34px; border-radius: 0; box-shadow: none; background: #F2E7E5; }
    .onama-page .on-hero2__stat { gap: 8px; padding: 2px 6px; }
    .onama-page .on-hero2__ico { width: 30px; height: 30px; margin-bottom: 2px; }
    .onama-page .on-hero2__num { font-size: 24px; }
    .onama-page .on-hero2__num--text { font-size: 20px; }
    .onama-page .on-hero2__label { font-size: 13px; line-height: 1.35; }
    .onama-page .on-hero2__down { width: 44px; height: 44px; margin: 44px auto 0; }
}
/* tablet uspravno: širi ekran → uži foto okvir, tekst do 400px */
@media (min-width: 481px) and (max-width: 860px) {
    .onama-page .on-hero2__panel { padding-left: 32px; padding-right: 32px; }
    .onama-page .on-hero2__photo { width: 52%; --ph-h: 125%; --ph-pos: 40% 50%; }
    .onama-page .on-hero2__sub, .onama-page .on-hero2__text { max-width: 400px; }
}
@media (max-width: 480px) {
    .onama-page .on-hero2__photo { width: 64%; }
    .onama-page .on-hero2__sub { max-width: 64%; }
    .onama-page .on-hero2__text { max-width: 205px; font-size: 14.5px; }
    .onama-page .on-hero2__num { font-size: 22px; }
    .onama-page .on-hero2__num--text { font-size: 19px; }
    .onama-page .on-hero2__label { font-size: 12.5px; }
}
@media (max-width: 380px) {
    .onama-page .on-hero2__sub, .onama-page .on-hero2__text { max-width: 68%; }
}


/* ==========================================================================
   02  O TATJANI
   bela kartica: pilula u prvom redu, ispod ceo tekst (9 pasusa) — bez „Saznaj više" (15. 9.)
   ======================================================================= */
/* Razmak strelica hero-a → kartica = 40px (padding-bottom hero-a) + margin-top ispod.
   Bilo 100px + min-height: 700px kartice sa centriranim sadržajem (prazan beli pojas
   iznad pilule) ≈ 350px od strelice do pilule na 1440. */
.onama-page .on-about { position: relative; display: flex; flex-direction: column; margin: 40px 0 0; }
.onama-page .on-about__wrap {
    display: flex; flex-direction: column; gap: 20px;
    width: 95%; max-width: 1240px; margin: 0 auto; padding: 0 0 100px;
}
.onama-page .on-about__card {
    position: relative; display: flex; flex-direction: row; flex-wrap: wrap;
    align-content: center; align-items: center; gap: 62px 0;
    width: 100%; padding: 40px;
    background: #FFFFFF; border-radius: 24px;
    box-shadow: 0 40px 70px 70px rgba(206, 134, 103, .05);
}
.onama-page .on-about__inner {
    display: flex; flex-direction: inherit; flex-wrap: inherit;
    align-items: inherit; justify-content: inherit; gap: 62px 0;
    width: 95%; max-width: 1240px; margin: 0 auto; padding: 40px;
}
.onama-page .on-about__label { position: relative; display: flex; flex-direction: column; gap: 20px; width: 50%; padding: 0; }
.onama-page .on-about__body { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 0; }
/* 9 pasusa, svi vidljivi; razmak među njima = gap tela (20px).
   Font/visina reda dolaze iz globalnog UiCore `p`; bold = globalni strong (600). */
.onama-page .on-about__para { position: relative; margin: 0; }

@media (max-width: 1024px) {
    /* kolona; pilula se centrira (širina auto) — kao na staroj UiCore stranici */
    .onama-page .on-about__card { flex-direction: column; width: auto; }
    .onama-page .on-about__label,
    .onama-page .on-about__body { width: auto; }
}
@media (max-width: 767px) {
    .onama-page .on-about { margin-top: 24px; }   /* strelica → kartica 40 + 24 = 64px (bilo 90) */
    .onama-page .on-about__wrap { padding: 0 10px 50px; }
    .onama-page .on-about__card { align-content: flex-start; align-items: flex-start; padding: 25px; }
    .onama-page .on-about__inner { padding: 25px; }
}


/* ==========================================================================
   03  BROJKE
   logo levo + traka sa brojkama koja se beskonačno pomera
   ======================================================================= */
.onama-page .on-numbers {
    position: relative; display: flex; flex-direction: column; gap: 20px; padding: 10px;
    background: linear-gradient(27deg, #735E59 0, #D1AD9F 100%) 0 0 / auto no-repeat;
}
.onama-page .on-numbers__row {
    position: relative; display: flex; flex-direction: row; justify-content: space-between;
    align-items: center; gap: 20px; padding: 10px;
}
.onama-page .on-numbers__logo {
    position: relative; display: flex; flex-direction: column;
    align-content: flex-end; align-items: flex-end; justify-content: center;
    gap: 20px; width: 33.3333%; padding: 10px;
}
/* zamućeni prelaz između logoa i trake */
.onama-page .on-numbers__logo::after {
    content: ''; position: absolute; right: -50px; z-index: 99; width: 33px; height: 100%;
    background: url('/wp-content/themes/uicore-pro-child/assets/images/uploads/2025/12/Mask-Group-32-1.svg') center / cover no-repeat;
    filter: blur(5px);
}
.onama-page .on-numbers__logo-img { position: relative; display: block; max-width: fit-content; }
.onama-page .on-numbers__logo-img img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.onama-page .on-numbers__slider {
    position: relative; display: flex; flex-direction: column;
    align-content: center; align-items: center; justify-content: center;
    gap: 20px; width: 100%; padding: 10px; overflow: hidden;
}
/* Stavka ima FIKSNU širinu izmerenu na staroj stranici (299.5px; ≤996: 179.2px).
   ⚠️ Ne vraćati procentnu širinu (calc(40% / 3) trake): na max-content traci ona zavisi
   od DUŽINE TEKSTA, pa su kraće brojke sa naslovne dale stavke od 180px i praznu rupu
   do 292px na kraju svakog kruga. Pomeraj = --on-n × širina stavke = TAČNO jedan set →
   petlja bez skoka za bilo koji broj brojki (--on-n ispisuje šablon iz
   ivx_numbers_items()). Brzina ista kao ranije: 6.4s po stavci (≤996: 4.8s). */
.onama-page .on-numbers__track {
    --on-n: 4;
    display: flex; width: max-content; will-change: transform;
    animation: on-numbers-scroll calc(var(--on-n) * 6.4s) linear infinite;
}
.onama-page .on-numbers__item {
    position: relative; display: flex; flex-direction: column; gap: 0; padding: 10px;
    flex: 0 0 299.5px; min-width: 299.5px; text-align: center;
}
.onama-page .on-numbers__value { position: relative; margin: 0; font-size: 40px; color: #F3F0F4; }
.onama-page .on-numbers__label { position: relative; margin: 0; font-family: Inter; font-size: 18px; color: #E0DEE1; }

@keyframes on-numbers-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--on-n) * -299.5px)); }
}
@keyframes on-numbers-scroll-sm {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--on-n) * -179.2px)); }
}

@media (max-width: 1024px) {
    .onama-page .on-numbers__logo { width: auto; }
}
@media (max-width: 1023.98px) {
    .onama-page .on-numbers__row { flex-direction: column; }
}
@media (max-width: 996px) {
    .onama-page .on-numbers__row { flex-direction: row; }
    .onama-page .on-numbers__track { animation-name: on-numbers-scroll-sm; animation-duration: calc(var(--on-n) * 4.8s); }
    .onama-page .on-numbers__item { flex: 0 0 179.2px; min-width: 179.2px; text-align: left; }
    .onama-page .on-numbers__value { font-size: 20px; }
    .onama-page .on-numbers__label { font-size: 14px; }
}


/* ==========================================================================
   04  O BRENDU
   kartica + fotografija na gradijentu; donjih 550px je ispod boksa iz 05
   ======================================================================= */
.onama-page .on-brand {
    position: relative; display: flex; flex-direction: column;
    align-content: stretch; align-items: stretch; justify-content: space-between;
    background: linear-gradient(180deg, #FCF6F4 0, #D7BDB2 100%) 0 0 / auto no-repeat;
}
.onama-page .on-brand__wrap {
    display: flex; flex-direction: inherit; align-items: inherit; justify-content: inherit; gap: 20px;
    width: 95%; max-width: 1240px; margin: 0 auto; padding: 200px 0 550px;
}
.onama-page .on-brand__row {
    position: relative; display: flex; flex-direction: row;
    align-content: center; align-items: center; justify-content: space-between;
    gap: 20px; width: 100%; padding: 10px;
}
.onama-page .on-brand__inner {
    display: flex; flex-direction: inherit; align-items: inherit; justify-content: inherit; gap: 20px;
    width: 95%; max-width: 1240px; margin: 0 auto; padding: 10px;
}
.onama-page .on-brand__card {
    position: relative; display: flex; flex-direction: column;
    align-content: flex-start; align-items: flex-start; justify-content: flex-start;
    gap: 20px; width: 50%; padding: 80px; background: #FFFFFF; border-radius: 24px;
}
/* Uvod = prvi pasus (PDF nema naslov): Lora kao stari h2 (400, #584642), ali manji
   (28px/1.4 umesto 40px) jer je pun pasus, ne dvoredni naslov. */
.onama-page .on-brand__lead {
    position: relative; margin: 0; font-family: 'Lora', Georgia, serif; font-weight: 400;
    font-size: 28px; line-height: 1.4; color: #584642;
}
/* Opis = 4 pasusa; razmak među njima 20px kao gap kartice. Bold = globalni strong (600). */
.onama-page .on-brand__desc { position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0; }
.onama-page .on-brand__desc p { position: relative; margin: 0; font-family: Inter; font-weight: 300; font-size: 16px; color: #735E59; }
.onama-page .on-brand__media { position: relative; display: flex; flex-direction: column; gap: 20px; width: 50%; padding: 0; }
.onama-page .on-brand__photo { position: relative; display: block; max-width: fit-content; }
.onama-page .on-brand__photo img {
    display: block; width: 100%; max-width: 100%; height: 664px; border-radius: 24px; object-fit: cover;
}

@media (max-width: 1024px) {
    .onama-page .on-brand__row,
    .onama-page .on-brand__card,
    .onama-page .on-brand__media { width: auto; }
}
@media (max-width: 1023.98px) {
    .onama-page .on-brand__row { flex-direction: column; }
}
@media (max-width: 996px) {
    .onama-page .on-brand__photo { width: 100%; max-width: 100%; }
}
@media (max-width: 767px) {
    .onama-page .on-brand__wrap { padding: 100px 0 550px; }
    .onama-page .on-brand__row { flex-direction: column-reverse; padding: 0; }
    .onama-page .on-brand__inner { padding: 0; }
    .onama-page .on-brand__card { padding: 30px 30px 45px; }
    .onama-page .on-brand__lead { padding: 30px 0 0; font-size: 24px; line-height: 34px; }
    .onama-page .on-brand__media { width: 100%; }
    .onama-page .on-brand__photo img { height: 370px; }
}


/* ==========================================================================
   05  MEĐUNARODNO ISKUSTVO
   tamni boks (radial gradijent) povučen -404px preko sekcije 04 — ISTI boks kao
   stari „Vrednosti"; unutra: pilula + naslov (glava) pa 2 kolone teksta (2 + 2 pasusa)
   ======================================================================= */
/* Stara sekcija je imala height: 500px, a boks je na tabletu (≈768–1350px) izlazio
   ispod nje i stari testimonials blok je PREKRIVAO donji deo boksa (na 768 ~1040px:
   kolone „Najveći benefiti" i „Naš cilj" nisu se videle). To je bila greška stare
   stranice → NAMERNA razlika: sekcija raste koliko je boks viši, pa se vidi ceo boks
   (na desktopu je boks niži od 500 pa je rezultat identičan). */
.onama-page .on-intl {
    position: relative; display: flex; flex-direction: column; gap: 20px;
    height: auto; min-height: 500px; padding: 0 100px; background-color: #F4EBE7;
}
.onama-page .on-intl__holder { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 10px; }
/* boks: gradijent/radius/preklop (-404px) kao stari; sadržaj u koloni (glava → kolone).
   min-height 640 (stari 800): novi sadržaj je upola kraći od starih 3 kolona, pa bi
   ostajalo ~400px praznog gradijenta; razmak boksa do sekcije 06 je zadržan tako što
   je min-height SEKCIJE smanjen za istih 160px (v. dno bloka). */
.onama-page .on-intl__box {
    position: relative; display: flex; flex-direction: column; gap: 40px 0;
    width: 100%; min-height: 640px; margin: -404px 0 0; padding: 100px; border-radius: 24px;
    background-image: radial-gradient(closest-side at 50% -34%, #D1AD9F 89%, #735E59 220%);
    background-repeat: no-repeat;
}
/* zamućena svetla mrlja pri dnu boksa */
.onama-page .on-intl__box::after {
    content: ''; position: absolute; bottom: 10px; left: 0; z-index: 0; width: 100%; height: 185px;
    background: url('/wp-content/themes/uicore-pro-child/assets/images/uploads/2025/12/Path-17558.svg') no-repeat;
    opacity: .5; filter: blur(50px);
}
/* glava: pilula (globalni .tooltip.icon: 14px Inter, beli okvir, margin-bottom 30px) + naslov;
   padding 10px kao kolone, da se leva ivica poravna sa tekstom */
.onama-page .on-intl__head { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 0 10px; }
/* ikonica pilule: globus iz hero-a (isti fajl kao .on-hero2__ico), umesto starih .one/.two/.three */
.onama-page .on-intl__pill::after {
    width: 22px; height: 22px; left: 17px;
    background-image: url('/wp-content/themes/uicore-pro-child/assets/images/philipova/icon-globe.svg');
}
.onama-page .on-intl__title {
    position: relative; max-width: 720px; margin: 0; font-family: 'Lora', Georgia, serif; font-weight: 400;
    font-size: 36px; line-height: 1.25; color: #FFFFFF;
}
/* kolone: isti raspored kao stare (50% + padding 10px, razmak 150px, tanka linija desno od prve) */
.onama-page .on-intl__cols { position: relative; z-index: 1; display: flex; flex-direction: row; gap: 0 150px; width: 100%; }
/* flex: 1 1 0 → kolone su JEDNAKE i na 1024 (tamo `width: auto` pravilo ispod inače da
   širinu po sadržaju, pa bi 2 kolone bile nejednake — sa 3 stare kolone to nije smetalo) */
.onama-page .on-intl__col { position: relative; display: flex; flex: 1 1 0; flex-direction: column; gap: 20px; width: 50%; min-width: 0; padding: 10px; }
.onama-page .on-intl__col--line::after {
    content: ''; position: absolute; right: -70px; top: 0; width: 1px; height: 100%; background: #FFFFFF14;
}
.onama-page .on-intl__copy { position: relative; margin: 0; font-weight: 300; font-size: 16px; line-height: 26px; color: #FFFFFF; }

@media (max-width: 1024px) {
    .onama-page .on-intl__holder,
    .onama-page .on-intl__box,
    .onama-page .on-intl__col { width: auto; }
}
@media (max-width: 1023.98px) {
    /* kolone jedna ispod druge; linija između kolona nema smisla u koloni */
    .onama-page .on-intl__cols { flex-direction: column; }
    .onama-page .on-intl__col { flex: 0 0 auto; }       /* u koloni visina = sadržaj */
    .onama-page .on-intl__col--line::after { display: none; }
    .onama-page .on-intl__title { font-size: 32px; }
}
@media (max-width: 996px) {
    /* globalni .tooltip.icon tu ima padding-left 40px (!important) → manja ikonica, bliže ivici */
    .onama-page .on-intl__pill::after { width: 20px; height: 20px; left: 12px; }
}
@media (min-width: 996px) and (max-width: 1550px) {
    .onama-page .on-intl__box { padding: 30px; }
}
@media (min-width: 996px) and (max-width: 1350px) {
    .onama-page .on-intl { padding: 0 30px; }
}
@media (max-width: 767px) {
    .onama-page .on-intl { min-height: 0; padding: 0 10px; }
    .onama-page .on-intl__holder { flex-direction: row; }
    .onama-page .on-intl__box { gap: 30px 0; padding: 30px; }
    .onama-page .on-intl__cols { gap: 20px 0; }
    .onama-page .on-intl__title { font-size: 28px; }
}
/* Razmak do sekcije 06 je DEO ove sekcije (roze pozadina), a ne margina komponente.
   Na tabletu/mobilnom sekcija se završava 10px ispod boksa — sa marginom na .pm-testi
   ostajala je tanka roze traka pa tvrd rez u krem odmah ispod boksa. min-height raste
   za isti razmak, pa je desktop identičan (500 + 120 / ≤996: 500 + 80).
   ⚠️ Mora da stoji POSLE `padding` shorthand-ova iznad (oni nuliraju padding-bottom). */
.onama-page .on-intl { min-height: 460px; padding-bottom: 120px; }   /* 620 − 160 (niži boks) */
@media (max-width: 996px) {
    .onama-page .on-intl { min-height: 420px; padding-bottom: 80px; } /* 580 − 160 */
}
@media (max-width: 767px) {
    .onama-page .on-intl { min-height: 0; }
}


/* ==========================================================================
   06  ISKUSTVA RODITELJA
   [bukvar_testimonials] — stilovi komponente su u pm-testimonials.css (deli se
   sa Philipova metodom). Ovde SAMO okruženje, kao stari testimonials blok:
   · razmak od boksa (120px, ≤996: 80px) je u sekciji 05 (v. tamo);
   · isti razmak do footera je padding-bottom komponente — ne pomera ništa unutar nje;
   · pozadina je roze #F4EBE7 kao stari blok, pa sekcija 05 → recenzije → footer ide
     bez reza (komponenta sama nosi krem, kao na Philipova stranici).
   ======================================================================= */
.onama-page .pm-testi { padding-bottom: 120px; background-color: #F4EBE7; }
/* Na Philipova stranici komponenta dobija i reset stranice (philipova-page.css,
   blok 00): pasusi recenzija nasleđuju font/visinu reda/boju od
   .bukvar-testi__text umesto globalnog UiCore `p`. Taj reset NIJE u
   pm-testimonials.css, pa je ovde prenet DOSLOVNO — ista specifičnost
   ((0,0,2) i (0,1,1) kroz :where) i isti položaj u kaskadi (posle
   pm-testimonials.css, pre uicore-global.css) → komponenta je identična. */
:where(.onama-page .pm-testi) :is(h1,h2,h3,h4,p,ul,ol,li):is(h1,h2,h3,h4,p,ul,ol,li) { margin: 0; }
:where(.onama-page .pm-testi) :is(p,ul,ol,li):is(p,ul,ol,li) { letter-spacing: inherit; }
:where(.onama-page .pm-testi) :is(ul,ol):is(ul,ol) { padding: 0; list-style: none; }
:where(.onama-page .pm-testi) [class*="__text"] p,
:where(.onama-page .pm-testi) [class*="__body"] p {
    font-size: inherit; line-height: inherit; font-family: inherit; color: inherit;
}

@media (max-width: 996px) {
    .onama-page .pm-testi { padding-bottom: 80px; }
}