/* ============================================================================
   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: #584642; --brown: #8B726C; --muted: #584642; --gold: #D6A14B;   /* ink: bilo #3E322E — 18. 9. sav tekst #584642 */
    --panel-a: #F0E8E6; --panel-b: #F2EDEB;     /* podloga mocka */
    --stats-bg: #F3E8E5; --divider: #DFD1D0;
    --btn-border: #B9A69E; --btn-text: #584642;   /* bilo #7E6660 (18. 9.) */
    --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% 34%;   /* 21. 9. tatjana-o-nama: glava na ~25% visine slike → kadar od glave do kukova */
    --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 — sedi NA donjoj ivici kartice statistike: pola preko kartice, pola ispod
   (odluka klijenta 18. 9.; ranije 40px ispod kartice). margin-top = −½ visine strelice;
   z-index 4 > kartica (3) → strelica je preko kartice. Kartica i strelica su obe centrirane u __wrap. */
.onama-page .on-hero2__down { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: -23px 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% 32%; }
    .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: 100%; --ph-pos: 50% 0%; --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: -22px auto 0; }   /* pola preko donje ivice trake (v. bazno pravilo) */
}
/* 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: 100%; --ph-pos: 50% 0%; }
    .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: 0; }   /* margin-top 0 (odluka klijenta 18. 9.; bilo 40px) */
.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: 0; }   /* 18. 9.: 0 i na mobilnom (bilo 24px) */
    .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/inspirisanadecom/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: #584642; }   /* bilo #735E59 (18. 9.) */
.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/inspirisanadecom/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/inspirisanadecom/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; }
}

/* ============================================================
   23. 9. 2026 — korekcije klijenta, SAMO TELEFON (≤767)
   Snimci: razmak oko pilule „O TATJANI" (strelica), uvod u „O BRENDU" (size),
   praznina pre sekcije „Međunarodno iskustvo" (empty).
   ============================================================ */
@media (max-width: 767px) {
    /* pilula „O TATJANI" ↔ tekst: bilo 62px */
    .onama-page .on-about__card { gap: 24px 0; }
    .onama-page .on-about__inner { gap: 24px 0; }
    .onama-page .on-about__label { gap: 12px; }
    /* uvod u „O BRENDU": bilo 24/34 */
    .onama-page .on-brand__lead { font-size: 20px; line-height: 29px; padding-top: 24px; }
    /* praznina pre „Međunarodno iskustvo": bilo 550px donjeg padinga (≈157px praznine) */
    .onama-page .on-brand__wrap { padding-bottom: 460px; }
}

/* ============================================================
   23. 9. 2026 (klijent) — HERO: izdvojena figura umesto studijske fotografije
   Siva pozadina je uklonjena (maska iz Vision-a), figura je okrenuta u ogledalu
   (gleda ka tekstu levo). Nema više pravougaonika, pa nema ni bočne maske, ni
   gornjeg sivog prelaza, ni sepia filtera — figura stoji na podlozi panela i
   prirodno prelazi u traku sa brojkama ispod.
   ============================================================ */
.onama-page .on-hero2__photo {
    width: 48%;
    -webkit-mask-image: none;
            mask-image: none;
}
.onama-page .on-hero2__photo::after { content: none; }
.onama-page .on-hero2__photo img {
    right: 2%;
    bottom: 0;
    width: 100%;
    height: 88%;             /* glava mora da bude ISPOD bele pilule headera (40–136px) */
    object-fit: contain;
    object-position: 50% 100%;
    filter: none;
}
@media (max-width: 1100px) { .onama-page .on-hero2__photo { width: 46%; } }
@media (max-width: 860px) {
    /* figura mora da počne ISPOD pilule headera (10–106px) i da ne dodiruje tekst:
       visina 70% panela, sidrena dole desno; tekst je za nijansu uži nego ranije. */
    .onama-page .on-hero2__photo { width: 46%; }
    .onama-page .on-hero2__photo img { right: -2%; height: 70%; }
    .onama-page .on-hero2__sub { max-width: 58%; }
    .onama-page .on-hero2__text { max-width: 190px; }
}
@media (min-width: 481px) and (max-width: 860px) {
    .onama-page .on-hero2__photo { width: 42%; }
    .onama-page .on-hero2__photo img { height: 78%; }
    .onama-page .on-hero2__sub, .onama-page .on-hero2__text { max-width: 380px; }
}
@media (max-width: 480px) {
    .onama-page .on-hero2__photo { width: 48%; }
    .onama-page .on-hero2__text { max-width: 185px; }
}

/* ============================================================
   23. 9. 2026 (klijent) — POZADINSKI VIZUAL u praznini pre „Međunarodno iskustvo",
   SAMO TELEFON. Isti postupak kao na naslovnoj: slika + krem premaz + maska.
   Praznina koju je klijent označio sa „empty" sada nosi vizual, pa sme da bude veća.
   ============================================================ */
@media (max-width: 767px) {
    .onama-page .on-brand { position: relative; isolation: isolate; overflow: hidden; }
    .onama-page .on-brand.ivx-bg-on::before {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 400px;   /* iznad kutije „Međunarodno iskustvo" (ona ulazi 404px u ovu sekciju) */
        height: 320px;
        z-index: -2;
        background: url('../images/new-home/mhb-700.webp') center 35% / cover no-repeat;
        opacity: .85;
        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 34%, #000 74%, rgba(0,0,0,0) 100%);
                mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 34%, #000 74%, rgba(0,0,0,0) 100%);
    }
    .onama-page .on-brand::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 400px;
        height: 320px;
        z-index: -1;
        background: linear-gradient(180deg, rgba(252,246,244,.85) 0%, rgba(250,242,238,.42) 45%, rgba(224,203,194,.72) 100%);
    }
    .onama-page .on-brand__wrap { padding-bottom: 640px; }   /* 23. 9.: 520 → 640, klijent trazi jos vazduha oko vizuala */
}

/* ============================================================
   23. 9. 2026 (Mladen) — bočni razmaci i gradijent iza hero figure
   1) U koloni (≤1023.98) fotografija je bila uža od kartice (na 1000px: 615 vs 864).
   2) Na telefonu je svaka sekcija imala svoj bočni razmak (brojke 10, O Tatjani 24,
      O brendu 19, Međunarodno 40) → svuda 16px.
   3) Iza izdvojene figure u hero-u ide mek gradijent, da ne stoji na praznoj podlozi.
   ============================================================ */
@media (max-width: 1023.98px) {
    .onama-page .on-brand__media { width: 100%; }
    .onama-page .on-brand__photo { width: 100%; max-width: 100%; }
    .onama-page .on-brand__photo img { width: 100%; }
}
@media (max-width: 767px) {
    .onama-page .on-about__wrap,
    .onama-page .on-brand__wrap {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
    .onama-page .on-about__inner,
    .onama-page .on-brand__inner { width: 100%; margin: 0; }
    .onama-page .on-numbers { padding-left: 16px; padding-right: 16px; }
    .onama-page .on-numbers__row { width: 100%; }
    .onama-page .on-intl__holder { width: 100%; max-width: none; margin: 0; padding-left: 6px; padding-right: 6px; }   /* sekcija ima svojih 10px */
    .onama-page .on-intl__box { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
    /* bez pojasa sa teksturom iznad „O BRENDU" (klijent 23. 9.: ne znači ništa) */
    .onama-page .on-brand__wrap { padding-top: 110px; }
}

/* gradijent iza figure — topla svetlost, bez ivica */
.onama-page .on-hero2__photo::before {
    content: "";
    position: absolute;
    right: -6%;
    bottom: 0;
    width: 118%;
    height: 92%;
    background: radial-gradient(58% 54% at 58% 56%, rgba(215,189,178,.62) 0%, rgba(215,189,178,.32) 46%, rgba(215,189,178,0) 74%);
    pointer-events: none;
}
@media (max-width: 860px) {
    .onama-page .on-hero2__photo::before { right: -10%; width: 130%; height: 78%; }
}