/* =========================================================================
   PSIHOZOFIJA — main.css
   Sve vrednosti su izmerene iz PSD-a (canvas 1980 px, container 1543 px).
   Tipografija je 1:1 — dizajn nije skaliran.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENI
   ---------------------------------------------------------------------- */
:root{
	/* boje — očitane iz renderovanih piksela */
	--pz-plum:        #734061;
	--pz-plum-hov:    #5E3350;
	--pz-plum-deep:   #361C37;
	--pz-slate:       #52547C;
	--pz-slate-hov:   #43456B;
	--pz-slate-dark:  #4C4D70;
	--pz-slate-soft:  #686A91;   /* disk iza ikonica oblasti — pun, iz PSD-a */
	--pz-rose:        #B9848C;
	--pz-cream:       #FDF5E1;
	--pz-text:        #414141;
	--pz-text-dark:   #242424;
	--pz-rule:        #E2E2E2;
	--pz-white:       #FFFFFF;

	/* tipografija */
	--pz-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--pz-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* mreža */
	--pz-container: 1544px;
	--pz-side:      290px;
	--pz-gap:       44px;
	--pz-sect:      110px;

	/* pokret — dva ižeženja za ceo sajt */
	--pz-ease-color: .28s ease;
	--pz-ease-move:  .5s cubic-bezier(.22,.61,.36,1);

	--pz-shadow: 0 18px 44px -18px rgba(54,28,55,.28);

	/* maske koje se koriste na više mesta */
	--pz-plus-mask: url('../img/ui/plus.png');
	--pz-logo-mask: url('../img/logo.png');
}

/* -------------------------------------------------------------------------
   2. OSNOVA
   ---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	background:var(--pz-white);
	color:var(--pz-text);
	font-family:var(--pz-body);
	font-size:16px;
	line-height:27px;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--pz-plum); }

h1,h2,h3,h4,h5,h6{
	font-family:var(--pz-head);
	font-weight:500;
	color:var(--pz-text);
	margin:0;
	line-height:1.2;
	text-wrap:balance;
}

p{ margin:0 0 18px; }
p:last-child{ margin-bottom:0; }

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

/* U PSD-u sadržaj zauzima 1543 od 1980 px = 78% platna. Ranije je ovde stajalo
   92% i na laptopu se sve razvlačilo do ivica — meni je izlazio širi nego u
   dizajnu, a logo i tekst delovali uvećano. Držimo dizajnersku razmeru na
   širokim ekranima, a na užim popuštamo da margine ne pojedu sadržaj. */
.pz-container{
	width:min(78%, var(--pz-container));
	margin-inline:auto;
}
@media (max-width:1300px){ .pz-container{ width:86%; } }
@media (max-width:1024px){ .pz-container{ width:90%; } }
@media (max-width:768px){  .pz-container{ width:88%; } }

.pz-center{ text-align:center; }

.screen-reader-text{
	position:absolute!important; width:1px; height:1px;
	padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Zajednički naslovi sekcija. Krupna tipografija prati razmeru platna
   (46 px od 1980 = 2.32vw); tekst u telu ostaje fiksnih 16 px radi čitljivosti. */
.pz-sect-title{
	font-size:clamp(28px, 2.32vw, 46px);
	line-height:1.2;
	text-align:center;
	margin:0 0 14px;
}
.pz-eyebrow{
	font-family:var(--pz-body);
	font-size:16px;
	font-weight:600;
	line-height:30px;
	text-transform:uppercase;
	color:var(--pz-rose);
	margin:0 0 34px;
}

/* -------------------------------------------------------------------------
   3. TALAS — jedan oblik iz PSD-a, koristi se na hero i baneru
   ---------------------------------------------------------------------- */
.pz-wave{
	position:absolute;
	left:0; right:0; bottom:-1px;
	line-height:0;
	pointer-events:none;
	z-index:3;
}
.pz-wave svg{
	display:block;
	width:100%;
	height:clamp(48px, 6.5vw, 128px);
}
.pz-wave path{ fill:var(--pz-white); }

/* -------------------------------------------------------------------------
   4. ZAGLAVLJE  (kao u dizajnu — ne lepi se pri skrolu)
   ---------------------------------------------------------------------- */
.pz-header{ position:relative; z-index:20; background:var(--pz-white); }

/* Zaglavlje prati razmeru iz PSD-a: sve vrednosti su izražene kao udeo
   platna od 1980 px (npr. logo 171px = 8.64vw), sa donjom granicom da
   na manjim ekranima ne postane sitno i gornjom = tačna vrednost iz dizajna. */
.pz-topbar-in{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:clamp(24px, 2vw, 40px);
	padding:clamp(28px, 2.53vw, 50px) 0;
}

.pz-logo{
	display:flex;
	align-items:center;
	gap:clamp(14px, 1.31vw, 26px);
	text-decoration:none;
	flex:none;
}
.pz-logo img{
	width:clamp(118px, 8.64vw, 171px);
	height:auto;
	transition:transform var(--pz-ease-move);
}
.pz-logo:hover img{ transform:scale(1.04); }
.pz-logo-name{
	display:block;
	font-family:var(--pz-head);
	font-size:clamp(32px, 2.53vw, 50px);
	line-height:1;
	color:var(--pz-plum);
}
.pz-logo-sub{
	display:block;
	font-family:var(--pz-head);
	font-size:clamp(20px, 1.57vw, 31px);
	line-height:1.15;
	color:var(--pz-plum-deep);
	margin-top:clamp(3px, .3vw, 6px);
}

.pz-topinfo{
	display:flex;
	align-items:center;
	gap:clamp(26px, 2.83vw, 56px);
	list-style:none;
	margin:0; padding:0;
}
/* Ikonica u kružnoj podlozi se crta iz dva pseudo-elementa, bez ijednog
   dodatnog <span>-a u HTML-u: gornja traka je Elementor tekst widget, a
   TinyMCE briše prazne inline elemente čim klijent nešto otkuca. Vrsta
   ikonice dolazi iz klase na <li> (pz-ti--pin, pz-ti--phone…). */
.pz-topinfo li{
	--pz-ti-size:clamp(46px, 3.18vw, 63px);
	display:flex;
	align-items:center;
	gap:10px;
	position:relative;
	min-height:var(--pz-ti-size);
	padding-left:calc(var(--pz-ti-size) + 10px);
}
.pz-topinfo li::before,
.pz-topinfo li::after{
	content:"";
	position:absolute;
	left:0; top:50%;
	width:var(--pz-ti-size); height:var(--pz-ti-size);
	margin-top:calc(var(--pz-ti-size) / -2);
	transition:background var(--pz-ease-color), transform var(--pz-ease-move);
}
.pz-topinfo li::before{ border-radius:50%; background:var(--pz-plum); }
.pz-topinfo li::after{
	background:var(--pz-white);
	-webkit-mask:var(--pz-mask) center no-repeat;
	-webkit-mask-size:clamp(20px, 1.36vw, 27px);
	mask:var(--pz-mask) center no-repeat;
	mask-size:clamp(20px, 1.36vw, 27px);
}
.pz-topinfo li:hover::before{ background:var(--pz-plum-hov); transform:translateY(-2px); }
.pz-topinfo li:hover::after{ transform:translateY(-2px); }

.pz-ti--pin{   --pz-mask:url('../img/ui/pin.png'); }
.pz-ti--phone{ --pz-mask:url('../img/ui/phone.png'); }
.pz-ti--mail{  --pz-mask:url('../img/ui/mail.png'); }
.pz-ti-text{
	border-left:4px solid var(--pz-rule);
	padding-left:9px;
	line-height:25px;
}
.pz-ti-text b{
	display:block;
	font-size:clamp(13px, .909vw, 18px);
	font-weight:600;
	text-transform:uppercase;
	color:var(--pz-text);
	letter-spacing:.01em;
}
.pz-ti-text span,
.pz-ti-text a{
	font-size:clamp(12px, .808vw, 16px);
	font-weight:600;
	color:var(--pz-text);
	text-decoration:none;
	transition:color var(--pz-ease-color);
}
.pz-ti-text a:hover{ color:var(--pz-plum); }

/* nav traka */
.pz-nav{ background:var(--pz-plum); }
.pz-menu{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	list-style:none;
	margin:0; padding:0;
}
.pz-menu > li{ position:relative; }
.pz-menu > li > a{
	display:flex;
	align-items:center;
	height:clamp(52px, 3.33vw, 66px);
	padding:0 4px;
	font-family:var(--pz-head);
	font-size:clamp(13px, .909vw, 18px);
	line-height:1;
	text-transform:uppercase;
	color:var(--pz-white);
	text-decoration:none;
	white-space:nowrap;
	transition:color var(--pz-ease-color);
}
.pz-menu > li > a:hover{ color:var(--pz-cream); }

/* aktivna stavka — tanka roze traka tačno iznad nav bara (PSD: #F7E7E7, ~6 px) */
.pz-menu > li::before{
	content:"";
	position:absolute;
	left:-22px; right:-22px;
	bottom:100%;
	height:6px;
	background:#F7E7E7;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s cubic-bezier(.22,.61,.36,1);
	pointer-events:none;
}
.pz-menu > li:hover::before,
.pz-menu > li.current-menu-item::before,
.pz-menu > li.current-menu-ancestor::before,
.pz-menu > li.current-menu-parent::before,
.pz-menu > li.current_page_parent::before{ transform:scaleX(1); }

/* podmeni */
.pz-menu .sub-menu{
	position:absolute;
	top:100%; left:-22px;
	min-width:260px;
	background:var(--pz-plum);
	list-style:none;
	margin:0; padding:8px 0;
	box-shadow:var(--pz-shadow);
	opacity:0; visibility:hidden;
	transform:translateY(-8px);
	transition:opacity var(--pz-ease-color), transform var(--pz-ease-color), visibility var(--pz-ease-color);
	z-index:30;
}
.pz-menu > li:hover > .sub-menu,
.pz-menu > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.pz-menu .sub-menu a{
	display:block;
	padding:11px 22px;
	font-family:var(--pz-body);
	font-size:15px;
	color:var(--pz-white);
	text-decoration:none;
	transition:background var(--pz-ease-color), padding-left var(--pz-ease-color);
}
.pz-menu .sub-menu a:hover{ background:rgba(255,255,255,.1); padding-left:28px; }

/* hamburger */
.pz-burger{
	display:none;
	width:48px; height:48px;
	flex-direction:column; justify-content:center; gap:5px;
	padding:12px;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.2);
	border-radius:10px;
	cursor:pointer;
}
.pz-burger span{
	display:block; height:2.5px; width:100%;
	background:var(--pz-white); border-radius:2px;
	transition:transform .3s ease, opacity .3s ease;
}
.pz-burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.pz-burger.is-open span:nth-child(2){ opacity:0; }
.pz-burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   5. DUGMAD
   ---------------------------------------------------------------------- */
/* Isti izgled nosi i Elementorov Button widget na naslovnoj: omotač widgeta
   dobija klasu pz-btn-el (odn. pz-btn-el--slate), a stil pada na <a> unutra. */
.pz-btn,
.pz-btn-el .elementor-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:248px;
	min-height:65px;
	padding:0 34px;
	border:none;
	border-radius:999px;
	background:var(--pz-plum);
	color:var(--pz-white);
	font-family:var(--pz-body);
	font-size:14px;
	font-weight:600;
	line-height:1;
	letter-spacing:.05em;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	position:relative;
	overflow:hidden;
	transition:background var(--pz-ease-color), transform var(--pz-ease-move), box-shadow var(--pz-ease-move);
}
/* sjaj koji prelazi preko dugmeta */
.pz-btn::before,
.pz-btn-el .elementor-button::before{
	content:"";
	position:absolute;
	top:0; left:-80%;
	width:50%; height:100%;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
	transform:skewX(-20deg);
	transition:left .55s ease;
	pointer-events:none;
}
.pz-btn:hover::before,
.pz-btn-el .elementor-button:hover::before{ left:130%; }
/* Roditeljska tema ima `a:hover` (specifičnost 0,1,1) koje je nadjačavalo
   `.pz-btn` (0,1,0) — tekst na dugmetu je na hover postajao plav i nečitljiv.
   Zato se bela boja izričito ponavlja za sva stanja linka. */
.pz-btn:link,
.pz-btn:visited,
.pz-btn:hover,
.pz-btn:focus,
.pz-btn:active,
.pz-btn-el .elementor-button:is(:link,:visited,:hover,:focus,:active){ color:var(--pz-white); }

.pz-btn:hover,
.pz-btn-el .elementor-button:hover{
	background:var(--pz-plum-hov);
	transform:translateY(-3px);
	box-shadow:0 14px 28px -10px rgba(115,64,97,.55);
}
.pz-btn--slate,
.pz-btn-el--slate .elementor-button{ background:var(--pz-slate); }
.pz-btn--slate:hover,
.pz-btn-el--slate .elementor-button:hover{ background:var(--pz-slate-hov); box-shadow:0 14px 28px -10px rgba(82,84,124,.55); }
.pz-btn--ghost{ background:transparent; border:2px solid rgba(255,255,255,.8); }
.pz-btn--ghost:hover,
.pz-btn--ghost:focus{ background:var(--pz-white); color:var(--pz-plum); }

.pz-btnrow{ display:flex; flex-wrap:wrap; gap:24px; }

/* -------------------------------------------------------------------------
   6. HERO (naslovna)
   ---------------------------------------------------------------------- */
/* Slika heroja je izvučena iz PSD sloja „Rectangle 4" — obrada (leva polovina
   obezbojena i posvetljena, desna u punoj boji) je već u njoj, pa preko nje
   NE ide nikakav preliv. Ranije sam stavljao beli preliv i slika je izgledala
   isprano; dizajn to rešava prelazom iz sive u boju unutar same fotografije. */
.pz-hero{
	position:relative;
	min-height:639px;
	display:flex;
	align-items:center;
	background:#EDEDED top center/cover no-repeat;
	background-image:var(--pz-hero);
	padding:176px 0 228px;
	isolation:isolate;
}
.pz-hero .pz-container{ position:relative; z-index:2; }
.pz-hero-title{
	font-size:clamp(34px, 3.03vw, 60px);
	line-height:1.12;
	max-width:830px;   /* dva reda, kao u PSD-u */
	margin:0 0 36px;
}

/* -------------------------------------------------------------------------
   7. BANER unutrašnjih strana
   ---------------------------------------------------------------------- */
.pz-banner{
	position:relative;
	background:var(--pz-slate) center/cover no-repeat;
	background-image:var(--pz-banner);
	padding:96px 0 160px;
	isolation:isolate;
}
.pz-banner::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(90deg, rgba(54,28,55,.55) 0%, rgba(54,28,55,.22) 55%, rgba(54,28,55,0) 85%);
	z-index:1;
}
.pz-banner-in{ position:relative; z-index:2; }
.pz-banner-title{
	font-size:45px;
	color:var(--pz-white);
	margin:0 0 14px;
}

.pz-crumbs{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	font-size:18px;
	font-weight:600;
	color:var(--pz-white);
}
.pz-crumbs a{ color:var(--pz-white); text-decoration:none; transition:color var(--pz-ease-color); }
.pz-crumbs a:hover{ color:var(--pz-cream); }
.pz-crumbs-lead{ opacity:.9; }
.pz-crumb-sep{
	width:21px; height:21px;
	flex:none;
	border-radius:50%;
	background:var(--pz-plum);
	position:relative;
}
.pz-crumb-sep::after{
	content:"";
	position:absolute; inset:0; margin:auto;
	width:9px; height:9px;
	background:var(--pz-white);
	-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>') center/contain no-repeat;
	mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>') center/contain no-repeat;
}

/* -------------------------------------------------------------------------
   8. RASPORED unutrašnjih strana: bočni meni + sadržaj
   ---------------------------------------------------------------------- */
.pz-layout{
	display:grid;
	grid-template-columns:var(--pz-side) minmax(0,1fr);
	gap:var(--pz-gap);
	align-items:start;
	padding:56px 0 var(--pz-sect);
}

.pz-side-head{
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:38px;
}
.pz-side-mark{
	width:44px; height:44px;
	flex:none;
	border-radius:50%;
	border:1px solid var(--pz-rose);
	background:var(--pz-cream);
	position:relative;
}
.pz-side-mark::after{
	content:"";
	position:absolute; inset:0; margin:auto;
	width:26px; height:26px;
	background:var(--pz-plum);
	-webkit-mask:var(--pz-logo-mask) center/contain no-repeat;
	mask:var(--pz-logo-mask) center/contain no-repeat;
}
.pz-side-title{ font-size:45px; line-height:1; }

.pz-side-menu,
.pz-side-sub{ list-style:none; margin:0; padding:0; }

.pz-side-menu > li > a{
	display:flex;
	align-items:center;
	min-height:51px;
	padding:12px 0;
	border-bottom:1px solid var(--pz-rule);
	font-size:18px;
	font-weight:500;
	color:var(--pz-text-dark);
	text-decoration:none;
	transition:color var(--pz-ease-color), padding-left var(--pz-ease-color);
}
.pz-side-menu > li > a:hover{ color:var(--pz-plum); padding-left:8px; }

.pz-side-menu > li.is-current > a,
.pz-side-menu > li.is-open > a{
	color:var(--pz-plum);
	padding-left:34px;
	position:relative;
}
.pz-side-menu > li.is-current > a::before,
.pz-side-menu > li.is-open > a::before{
	content:"";
	position:absolute;
	left:0; top:50%;
	transform:translateY(-50%);
	width:21px; height:21px;
	border-radius:50%;
	background:var(--pz-plum) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>') center/9px no-repeat;
}

.pz-side-sub > li > a{
	display:flex;
	align-items:center;
	min-height:51px;
	padding:11px 0 11px 24px;
	border-bottom:1px solid var(--pz-rule);
	font-size:15px;
	font-weight:400;
	color:var(--pz-text-dark);
	text-decoration:none;
	transition:color var(--pz-ease-color), padding-left var(--pz-ease-color);
}
.pz-side-sub > li > a:hover{ color:var(--pz-plum); padding-left:30px; }
.pz-side-sub > li.is-current > a{ color:var(--pz-plum); font-weight:500; }

/* -------------------------------------------------------------------------
   9. SADRŽAJ strane
   ---------------------------------------------------------------------- */
.pz-content h1{ font-size:40px; margin:0 0 26px; }
.pz-content h2{ font-size:30px; margin:44px 0 16px; }
.pz-content h3{ font-size:25px; margin:34px 0 14px; }
.pz-content > h2:first-child,
.pz-content > h1:first-child{ margin-top:0; }
.pz-content p{ margin:0 0 22px; }

/* Sadržaj prebačen u Elementor (inc/elementorize.php): svaki naslov i pasus
   je widget u svom omotaču. Kad se vrhovni kontejner vrati u običan blok
   (dole), margine kroz omotače naležu jedna na drugu kao u čistom HTML-u,
   pa tipografska pravila iznad važe nepromenjena — samo se Elementorov
   razmak između widgeta (20px) i line-height:1 na naslovima moraju ukinuti. */
.pz-content .elementor-widget:not(:last-child){ margin-block-end:0; }
.pz-content .elementor-heading-title{ line-height:1.2; }
/* Vrhovni kontejner mora biti običan blok: flex sprečava naleganje margina,
   a na biografiji bi ceo tekst pobegao ispod plutajućeg portreta umesto da
   ga obavija. Ujedno gasi Elementorov padding od 10px. */
.pz-content > .elementor > .e-con{ display:block; padding:0; }
/* Istaknuta slika na unutrašnjoj strani: u PSD-u je 473 px od 1209 = 39%
   širine sadržaja, uz levu ivicu, zaobljena samo gore. Ranije je išla preko
   cele širine pa je bila znatno veća nego u dizajnu. */
.pz-page-slika{
	margin:0 0 28px;
	max-width:39%;
}
.pz-page-slika img{
	border-radius:30px 30px 0 0;
	width:100%;
}

/* Biografija — portret uz levu ivicu, tekst ga obavija zdesna (PSD 02). */
.pz-bio-portret{
	float:left;
	width:35%;
	margin:0 clamp(20px, 2.6%, 34px) 26px 0;
	shape-margin:20px;
}
.pz-bio-portret img{ border-radius:0 30px 30px 0; width:100%; }

.pz-potpis{ clear:both; max-width:41%; margin:38px 0 0; }

/* Slika na članku bloga je uža od kolone, datum stoji ispod nje (kao na Alevi).
   max-height + cover: uspravna fotografija se ne razvuče na dva ekrana.
   .pz-content ispred — bez njega margin-bottom gubi od `.pz-content figure img`. */
.pz-post-slika{ max-width:780px; margin:0 0 18px; }
.pz-content .pz-post-slika img{
	display:block;
	border-radius:0 30px 30px 0;
	width:100%;
	max-height:560px;
	object-fit:cover;
	margin-bottom:0;
}
.pz-content > .pz-date{ margin-bottom:20px; }

.pz-content > img,
.pz-content figure img{ margin-bottom:30px; }
/* :not(.pz-btn) — inače bi ovo pregazilo belu boju teksta na dugmadima.
   Hover se navodi izričito jer roditeljska tema ima a:hover{color:#336}. */
.pz-content a:not(.pz-btn){ color:var(--pz-plum); text-underline-offset:3px; }
.pz-content a:not(.pz-btn):hover{ color:var(--pz-plum-hov); }

/* :not(.pz-catgrid) — mreža oblasti je takođe <ul> unutar sadržaja,
   a ne sme da dobije strelice kao obična nabrajanja.
   ⚠️ 26.08: `[class*="elementor-"]` je OBAVEZAN izuzetak. Elementorova traka
   sa alatkama (uredi / umnoži / X) iznad svakog widgeta je
   <ul class="elementor-editor-element-settings"> i stoji UNUTAR .pz-content —
   bez izuzetka svaka njena ikonica dobije padding-left:26px i šljivin krug sa
   strelicom preko sebe, pa se ikonice preklapaju i „iksovi" se ne vide na
   hover. Isti obrazac je bio i na Dental Centru (main.css, .page-content ul).
   Argument stoji UNUTAR istog :not() — dodavanje drugog :not() bi diglo
   specifičnost sa 0,2,0 na 0,3,0 i pregazilo per-element stilove editora.
   Tema NIKAD ne sme da stilizuje liste bez ovog izuzetka. */
.pz-content ul:not(.pz-catgrid, .pz-contact-row, [class*="elementor-"]){ list-style:none; margin:0 0 24px; padding:0; }
.pz-content ul:not(.pz-catgrid, .pz-contact-row, [class*="elementor-"]) li{
	position:relative;
	padding-left:26px;
	margin-bottom:9px;
}
.pz-content ul:not(.pz-catgrid, .pz-contact-row, [class*="elementor-"]) li::before{
	content:"";
	position:absolute;
	left:0; top:9px;
	width:13px; height:13px;
	border-radius:50%;
	background:var(--pz-plum) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>') center/6px no-repeat;
}
.pz-content ol{ padding-left:22px; margin:0 0 24px; }
.pz-content ol li::marker{ color:var(--pz-plum); font-weight:600; }

.pz-content-foot{
	clear:both;
	margin-top:46px;
	padding-top:34px;
	border-top:1px solid var(--pz-rule);
}


/* -------------------------------------------------------------------------
   10. TRAKA SA ŠEST OBLASTI
   ---------------------------------------------------------------------- */
.pz-cats{
	background:var(--pz-slate);
	padding:72px 0 86px;
	color:var(--pz-white);
}
.pz-cats-title{
	font-size:clamp(28px, 2.32vw, 46px);
	line-height:1.2;
	color:var(--pz-white);
	text-align:center;
	margin:0 0 12px;
}
.pz-cats-sub{
	font-size:16px;
	font-weight:400;
	line-height:30px;
	text-transform:uppercase;
	text-align:center;
	color:var(--pz-white);
	margin:0 0 76px;
}
.pz-cats-list{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	list-style:none;
	margin:0; padding:0;
}
.pz-cats-list > li{ position:relative; }
.pz-cats-list > li + li::before{
	content:"";
	position:absolute;
	left:0; top:9px;
	width:4px; height:96px;
	background:rgba(255,255,255,.16);
}
.pz-cats-list a{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:18px;
	text-decoration:none;
	padding:0 10px;
}
/* U PSD-u je iza ikonice PUN disk oštre ivice (#686A91, 105 px), a ikonica
   je pomerena naniže pa viri ispod njega. Ranije je ovde stajao mek radijalni
   gradijent — otud „glow" kojeg u dizajnu nema. */
.pz-cat-ico{
	width:105px; height:116px;
	position:relative;
	display:block;
	transition:transform var(--pz-ease-move);
}
.pz-cat-ico::before{
	content:"";
	position:absolute;
	top:0; left:0;
	width:105px; height:105px;
	border-radius:50%;
	background:var(--pz-slate-soft);
	transition:background var(--pz-ease-color);
}
.pz-cat-ico::after{
	content:"";
	position:absolute;
	top:26px; left:50%;
	transform:translateX(-50%);
	width:106px; height:90px;
	background:var(--pz-cream);
	-webkit-mask:var(--pz-mask) center/contain no-repeat;
	mask:var(--pz-mask) center/contain no-repeat;
}
.pz-cats-list a:hover .pz-cat-ico{ transform:translateY(-6px); }
.pz-cats-list a:hover .pz-cat-ico::before{ background:#7B7DA4; }
.pz-cat-name{
	font-family:var(--pz-head);
	font-size:18px;
	line-height:1.2;
	text-transform:uppercase;
	text-align:center;
	color:var(--pz-white);
	transition:color var(--pz-ease-color);
}
.pz-cats-list a:hover .pz-cat-name{ color:var(--pz-cream); }

/* pregled strane Psihoterapija — iste ikonice, ali kao kartice na beloj */
.pz-catgrid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px;
	list-style:none;
	margin:0; padding:0;
}
.pz-catgrid a{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	padding:38px 24px;
	border:1px solid var(--pz-rule);
	border-radius:0 30px 30px 0;
	text-decoration:none;
	background:var(--pz-white);
	transition:transform var(--pz-ease-move), box-shadow var(--pz-ease-move), border-color var(--pz-ease-color);
}
.pz-catgrid a:hover{
	transform:translateY(-6px);
	box-shadow:var(--pz-shadow);
	border-color:transparent;
}
/* isti oblik na beloj podlozi — krem disk umesto plavo-sivog */
.pz-catgrid .pz-cat-ico::before{ background:var(--pz-cream); }
.pz-catgrid .pz-cat-ico::after{ background:var(--pz-plum); }
.pz-catgrid a:hover .pz-cat-ico::before{ background:#F6E9C9; }
.pz-catgrid .pz-cat-name{ color:var(--pz-text); font-size:22px; text-transform:none; }
.pz-catgrid a:hover .pz-cat-name{ color:var(--pz-plum); }

/* -------------------------------------------------------------------------
   11. KARTICE ČLANAKA
   ---------------------------------------------------------------------- */
.pz-blogstrip{ padding:var(--pz-sect) 0; }

.pz-cardgrid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:60px 46px;
}

.pz-card-thumb{
	display:block;
	position:relative;
	border-radius:0 30px 30px 0;
	overflow:hidden;
	aspect-ratio:380/240;
	background:var(--pz-slate);
}
.pz-card-thumb img{
	width:100%; height:100%;
	object-fit:cover;
	filter:grayscale(1);
	transition:transform .55s cubic-bezier(.22,.61,.36,1), filter var(--pz-ease-move);
}
.pz-card-thumb::after{
	content:"";
	position:absolute; inset:0;
	background:var(--pz-slate);
	mix-blend-mode:multiply;
	opacity:.55;
	transition:opacity var(--pz-ease-move);
	pointer-events:none;
}
.pz-card:hover .pz-card-thumb img{ transform:scale(1.06); }
.pz-card:hover .pz-card-thumb::after{ opacity:.3; }

/* beli krug sa "+" */
.pz-plus{
	position:absolute;
	right:8px; bottom:10px;
	width:52px; height:52px;
	border-radius:50%;
	background:var(--pz-white);
	display:grid;
	place-items:center;
	z-index:2;
	transition:transform var(--pz-ease-move), background var(--pz-ease-color);
}
.pz-plus::after{
	content:"";
	width:32px; height:32px;
	background:var(--pz-plum);
	-webkit-mask:var(--pz-plus-mask) center/contain no-repeat;
	mask:var(--pz-plus-mask) center/contain no-repeat;
	transition:background var(--pz-ease-color);
}
.pz-card:hover .pz-plus{ transform:rotate(90deg) scale(1.08); background:var(--pz-plum); }
.pz-card:hover .pz-plus::after{ background:var(--pz-white); }

.pz-card-body{ padding-top:22px; }
.pz-date{
	display:block;
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
	color:var(--pz-rose);
	margin-bottom:8px;
}
.pz-card-title{
	font-size:25px;
	line-height:1.35;
	margin:0 0 14px;
}
.pz-card-title a{
	color:var(--pz-text);
	text-decoration:none;
	transition:color var(--pz-ease-color);
}
.pz-card-title a:hover{ color:var(--pz-plum); }
.pz-card-excerpt p{ font-size:16px; line-height:30px; margin:0; }

/* horizontalna kartica — lista bloga */
.pz-postlist{ display:flex; flex-direction:column; gap:58px; }
.pz-post{
	display:grid;
	grid-template-columns:290px minmax(0,1fr);
	gap:32px;
	align-items:start;
}
/* Dugme „Pročitajte više" leži na donjoj ivici fotografije: telo je kolona
   rastegnuta na visinu reda, dugme pada na dno. Kad je tekst duži od slike
   (uži ekran, dugačak izvod), slika se rasteže za njim umesto da dugme visi
   ispod nje — zato min-height umesto aspect-ratio (kolona je uvek 290px, pa
   je 260px ista razmera) i slika van toka, da svojom visinom ne širi red. */
.pz-post .pz-card-thumb{ aspect-ratio:auto; min-height:260px; align-self:stretch; }
.pz-post .pz-card-thumb img{ position:absolute; inset:0; }
.pz-post .pz-card-body{ padding-top:0; align-self:stretch; display:flex; flex-direction:column; }
.pz-post .pz-card-excerpt{ margin-bottom:6px; }
.pz-post .pz-btn{ min-width:0; min-height:52px; padding:0 28px; margin-top:auto; align-self:flex-start; }

/* paginacija */
.pz-pagination{
	display:flex;
	justify-content:center;
	gap:8px;
	margin-top:64px;
}
.pz-pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:46px; height:46px;
	padding:0 10px;
	border-radius:50%;
	color:var(--pz-text);
	font-weight:600;
	text-decoration:none;
	transition:background var(--pz-ease-color), color var(--pz-ease-color);
}
.pz-pagination .page-numbers:hover,
.pz-pagination .page-numbers.current{ background:var(--pz-plum); color:var(--pz-white); }

/* -------------------------------------------------------------------------
   12. KARTICA "Partnerski odnosi" (naslovna)
   ---------------------------------------------------------------------- */
.pz-split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:80px;
	align-items:center;
	padding:var(--pz-sect) 0;
}
.pz-split-title{ font-size:clamp(28px, 2.32vw, 46px); margin:0 0 14px; }

/* Uvodna sekcija naslovne. U PSD-u (sadržaj 1543 px): portret 389 px = 25%,
   razmak 163 px = 11%, tekst 863 px = 56%. Fiksnih 430 px je pravilo portret
   prevelikim na laptopu i guralo naslov u tri reda umesto u dva. */
.pz-split--intro{ grid-template-columns:27% 62%; gap:11%; }

/* Uglovi su u dizajnu naizmenični: portret je oštar levo, obao desno
   (izmereno na PSD renderu: gore-levo 0, gore-desno ~30). Ranije je bilo
   obrnuto pa je slika delovala „presečeno" na pogrešnu stranu. */
.pz-portrait{ position:relative; }
.pz-portrait img{ border-radius:0 30px 30px 0; width:100%; }
/* Medaljon je u PSD-u 207 px na portretu od 389 px = 53% njegove širine,
   sa prepustom 19% desno i 9% dole. Fiksnih 207 px je na laptopu ispadalo
   preveliko, pa ide u procentima portreta. */
.pz-portrait-badge{
	position:absolute;
	right:-19.3%; bottom:-8.9%;
	width:53.2%;
	aspect-ratio:1;
	border-radius:50%;
	background:var(--pz-cream);
	display:grid;
	place-items:center;
	transition:transform var(--pz-ease-move);
}
/* Ljubičasti prsten je ~7 px debeo, SA SPOLJNE strane kruga, i postoji samo
   uz polovinu okrenutu fotografiji (u CSS conic uglovima: 180°→360°).
   Nad belom podlogom, sa desne strane, u dizajnu ga nema. */
.pz-portrait-badge::before{
	content:"";
	position:absolute;
	inset:calc(-1 * var(--pz-ring));
	--pz-ring:clamp(4px, .35vw, 7px);
	border-radius:50%;
	padding:var(--pz-ring);
	background:conic-gradient(
		transparent 0deg,
		transparent 172deg,
		var(--pz-plum) 190deg,
		var(--pz-plum) 350deg,
		transparent 360deg
	);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
	pointer-events:none;
}
.pz-portrait:hover .pz-portrait-badge{ transform:scale(1.04) rotate(-3deg); }
.pz-portrait-badge::after{
	content:"";
	width:68.6%; aspect-ratio:142/104; height:auto;
	background:var(--pz-plum);
	-webkit-mask:var(--pz-logo-mask) center/contain no-repeat;
	mask:var(--pz-logo-mask) center/contain no-repeat;
}

.pz-feature{
	position:relative;
	display:block;
	border-radius:48px 0 0 48px;
	overflow:hidden;
	aspect-ratio:792/414;
	text-decoration:none;
}
.pz-feature img{
	width:100%; height:100%;
	object-fit:cover;
	transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.pz-feature::after{
	content:"";
	position:absolute; inset:0;
	background:var(--pz-slate);
	opacity:.62;
	transition:opacity var(--pz-ease-move);
}
.pz-feature:hover img{ transform:scale(1.05); }
.pz-feature:hover::after{ opacity:.45; }
.pz-feature-label{
	position:absolute;
	left:38px; bottom:34px;
	z-index:2;
	font-family:var(--pz-head);
	font-size:30px;
	color:var(--pz-white);
}
.pz-feature .pz-plus{
	right:24px; bottom:26px;
	width:57px; height:57px;
}

/* -------------------------------------------------------------------------
   13. CTA traka "Zakažite posetu"
   ---------------------------------------------------------------------- */
/* U PSD-u je traka visoka 253 px: 64 px razmaka gore/dole i tekst u dva reda.
   Fiksnih 64 px + tekst od 16 px lomio je rečenicu u četiri reda na laptopu i
   traka je ispadala znatno viša nego u dizajnu — otud i razmak i tekst prate
   razmeru platna. */
.pz-cta{
	position:relative;
	background:var(--pz-slate) center/cover no-repeat;
	background-image:var(--pz-cta);
	padding:clamp(36px, 3.23vw, 64px) 0;
	isolation:isolate;
	color:var(--pz-white);
}
.pz-cta::after{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(90deg, var(--pz-slate) 0%, var(--pz-slate) 52%, rgba(82,84,124,.86) 100%);
	z-index:1;
}
/* PSD: tekst 990 px (64%), razmak 150 px (9.7%), dugme 325 px (21%). */
.pz-cta-in{
	position:relative; z-index:2;
	display:grid;
	grid-template-columns:64% auto;
	justify-content:space-between;
	align-items:center;
	gap:9.7%;
}
.pz-cta-title{ font-size:clamp(28px, 2.32vw, 46px); color:var(--pz-white); margin:0 0 12px; }
.pz-cta p{
	font-size:clamp(14px, .808vw, 16px);
	line-height:clamp(24px, 1.51vw, 30px);
	margin:0;
	max-width:none;
}

/* -------------------------------------------------------------------------
   14. FUTER
   ---------------------------------------------------------------------- */
.pz-footer{ position:relative; color:var(--pz-white); }

.pz-foot-social{
	background:var(--pz-slate);
	padding:26px 0;
}
.pz-foot-social ul{
	display:flex;
	justify-content:center;
	gap:30px;
	list-style:none;
	margin:0; padding:0;
}
/* Ikonice mreža su PNG-ovi punog kruga sa izrezanim znakom. Kroz masku se
   farba BELO — tako se dobija beo krug kroz čiji znak proviruje plavo-siva
   podloga, kao u dizajnu. Ranije sam farbao plavo-sivo preko belog kruga,
   pa je ispadalo obrnuto: taman krug sa belim znakom. */
.pz-foot-social a{
	display:grid;
	place-items:center;
	width:57px; height:57px;
	background:transparent;
	transition:transform var(--pz-ease-move);
}
.pz-foot-social a::after{
	content:"";
	width:57px; height:57px;
	background:var(--pz-white);
	-webkit-mask:var(--pz-mask) center/contain no-repeat;
	mask:var(--pz-mask) center/contain no-repeat;
	transition:background var(--pz-ease-color);
}
.pz-foot-social a:hover{ transform:translateY(-4px); }
.pz-foot-social a:hover::after{ background:var(--pz-cream); }

.pz-foot-main{
	position:relative;
	/* boja i ovde, ne samo na .pz-footer omotaču: u uređivaču dela
	   „Futer (sadržaj)" omotača nema, pa bi tekst bio taman */
	color:var(--pz-white);
	background:var(--pz-plum) center/cover no-repeat;
	background-image:var(--pz-foot);
	padding:clamp(48px, 3.84vw, 76px) 0 clamp(44px, 3.54vw, 70px);
	isolation:isolate;
}
.pz-foot-main::after{
	content:"";
	position:absolute; inset:0;
	background:var(--pz-plum);
	opacity:.9;
	z-index:1;
}
.pz-foot-grid{
	position:relative; z-index:2;
	display:grid;
	grid-template-columns:1fr 1.4fr 1fr;
	gap:clamp(32px, 3.03vw, 60px);
	align-items:start;
}
/* Futer prati istu razmeru kao zaglavlje: vrednosti iz PSD-a izražene kao
   udeo platna od 1980 px (logo 150 px = 7.58vw, ime 45 px = 2.27vw…).
   Sa fiksnim px-ima je na laptopu ispadao krupniji nego u dizajnu. */
.pz-foot-title{
	font-size:clamp(19px, 1.26vw, 25px);
	line-height:1.2;
	color:var(--pz-white);
	margin:0 0 clamp(18px, 1.31vw, 26px);
}
.pz-foot-mid{ text-align:center; }
.pz-foot-mid img{ width:clamp(100px, 7.58vw, 150px); margin:0 auto 14px; }
.pz-foot-name{ display:block; font-family:var(--pz-head); font-size:clamp(28px, 2.27vw, 45px); line-height:1; }
.pz-foot-sub{ display:block; font-family:var(--pz-head); font-size:clamp(18px, 1.41vw, 28px); line-height:1.2; margin-top:4px; }
/* U PSD-u je ovaj pasus širok 401 px i lomi se u četiri reda; bez ograničenja
   se u široj koloni lomio u pet i futer je ispadao viši. */
.pz-foot-mid p{
	font-size:14px;
	line-height:25px;
	font-weight:600;
	margin:clamp(16px, 1.21vw, 24px) auto 0;
	max-width:min(100%, 30em);
}

.pz-foot-contact{ list-style:none; margin:0; padding:0; }
.pz-foot-contact li{
	--pz-fi-size:clamp(28px, 2.02vw, 40px);
	display:flex;
	align-items:center;
	position:relative;
	min-height:var(--pz-fi-size);
	padding-left:calc(var(--pz-fi-size) + clamp(14px, 1.11vw, 22px));
	margin-bottom:26px;
	font-size:14px;
}
/* isti razlog kao u gornjoj traci: ikonica ne sme da bude prazan <span>,
   jer je ovo Elementor tekst widget koji prolazi kroz TinyMCE */
.pz-foot-contact li::before{
	content:"";
	position:absolute; left:0; top:50%;
	width:var(--pz-fi-size); height:var(--pz-fi-size);
	margin-top:calc(var(--pz-fi-size) / -2);
	background:var(--pz-white);
	-webkit-mask:var(--pz-mask) center/contain no-repeat;
	mask:var(--pz-mask) center/contain no-repeat;
}
.pz-foot-contact a{ color:var(--pz-white); text-decoration:none; transition:color var(--pz-ease-color); }
.pz-foot-contact a:hover{ color:var(--pz-cream); text-decoration:underline; text-underline-offset:3px; }

.pz-fi--pin{   --pz-mask:url('../img/ui/pin.png'); }
.pz-fi--phone{ --pz-mask:url('../img/ui/phone.png'); }
.pz-fi--mail{  --pz-mask:url('../img/ui/mail.png'); }

.pz-foot-links{ list-style:none; margin:0; padding:0; text-align:right; }
.pz-foot-links li{ margin-bottom:19px; }
.pz-foot-links a{
	font-size:14px;
	font-weight:600;
	color:var(--pz-white);
	text-decoration:none;
	transition:color var(--pz-ease-color);
}
.pz-foot-links a:hover{ color:var(--pz-cream); }

.pz-foot-bottom{
	background:var(--pz-slate-dark);
	padding:16px 0;
	text-align:center;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:.02em;
}
.pz-foot-bottom a{ color:var(--pz-white); text-decoration:none; }
.pz-foot-bottom a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* -------------------------------------------------------------------------
   15. KONTAKT
   ---------------------------------------------------------------------- */
.pz-contact-row{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px;
	margin:0 0 44px;
}
/* Kartica crta kvadrat sa ikonicom iz dva pseudo-elementa, bez praznog
   <span>-a: posle konverzije je ovo Elementor tekst widget, a TinyMCE
   briše prazne inline elemente čim klijent nešto otkuca. Vrsta ikonice
   dolazi iz klase na stavci (pz-ci--pin, pz-ci--phone, pz-ci--mail). */
ul.pz-contact-row{ list-style:none; padding:0; }
.pz-ci{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:82px;
	padding-left:100px;   /* 82 kvadrat + 18 razmaka */
}
.pz-ci::before,
.pz-ci::after{
	content:"";
	position:absolute;
	top:50%;
	transition:background var(--pz-ease-color), transform var(--pz-ease-move);
}
.pz-ci::before{
	left:0;
	width:82px; height:82px;
	margin-top:-41px;
	border-radius:15px;
	background:var(--pz-plum);
}
.pz-ci::after{
	left:22px;
	width:38px; height:38px;
	margin-top:-19px;
	background:var(--pz-white);
	-webkit-mask:var(--pz-mask) center/contain no-repeat;
	mask:var(--pz-mask) center/contain no-repeat;
}
.pz-ci:hover::before{ background:var(--pz-slate); transform:translateY(-3px); }
.pz-ci:hover::after{ transform:translateY(-3px); }
.pz-ci--pin{   --pz-mask:url('../img/ui/pin.png'); }
.pz-ci--phone{ --pz-mask:url('../img/ui/phone.png'); }
.pz-ci--mail{  --pz-mask:url('../img/ui/mail.png'); }
.pz-ci b{
	display:block;
	font-size:18px;
	font-weight:600;
	color:var(--pz-text);
	margin-bottom:2px;
}
.pz-ci,
.pz-ci a{
	font-size:14px;
	line-height:25px;
	color:var(--pz-text);
	text-decoration:none;
}
.pz-ci a:hover{ color:var(--pz-plum); }

.pz-map{
	border-radius:20px;
	overflow:hidden;
	margin:0 0 56px;
	line-height:0;
}
.pz-map iframe{
	width:100%;
	height:480px;
	border:0;
	filter:saturate(0) contrast(1.05);
	transition:filter var(--pz-ease-move);
}
.pz-map:hover iframe{ filter:saturate(1) contrast(1); }

/* forma — WPForms, stilizovana da prati dizajn */
.pz-form-title{ font-size:30px; margin:0 0 26px; }
/* Kontakt kao Elementor dokument: naslov forme je heading widget. Razmak
   iznad ide na omotač (margin-top na widgetu radi normalno; margine <h2>
   unutra Elementor ne dira, pa .pz-content h2 pravilo važi kao i u čistom
   markupu — uključujući i to da njegovih 16px donje margine bije 26px sa
   .pz-form-title, isto kao pre konverzije). Sidro je na omotaču widgeta. */
.pz-content .elementor-widget.pz-form-title{ margin-top:56px; }
#zakazivanje{ scroll-margin-top:24px; }

/* WPForms „modern" markup se najčistije preuzima preko njegovih promenljivih. */
.wpforms-container.wpforms-render-modern{
	--wpforms-field-border-radius: 18px;
	--wpforms-field-border-size: 1px;
	--wpforms-field-border-style: solid;
	--wpforms-field-background-color: #FFFFFF;
	--wpforms-field-border-color: var(--pz-rule);
	--wpforms-field-text-color: var(--pz-text);
	--wpforms-label-color: var(--pz-text);
	--wpforms-label-sublabel-color: #8A8A8A;
	--wpforms-label-error-color: #A6404C;
	--wpforms-button-border-radius: 999px;
	--wpforms-button-background-color: var(--pz-plum);
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-field-size-input-height: 59px;
	--wpforms-field-size-input-spacing: 20px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-line-height: 27px;
	--wpforms-field-size-padding-h: 20px;
	--wpforms-field-size-checkbox-size: 20px;
	--wpforms-field-size-input-max-width: 100%;
	--wpforms-button-size-font-size: 14px;
	--wpforms-button-size-height: 65px;
	--wpforms-button-size-padding-h: 34px;
	--wpforms-button-size-margin-top: 8px;

	margin:0;
	font-family:var(--pz-body);
}

/* tri polja u redu, poruka i saglasnost preko cele širine */
.wpforms-container .wpforms-field-container{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px 30px;
	align-items:start;
}
.wpforms-container .wpforms-field{ padding:0; width:auto; max-width:none; }
.wpforms-container .wpforms-field-textarea,
.wpforms-container .wpforms-field-checkbox{ grid-column:1 / -1; }

.wpforms-container .wpforms-field-label{
	font-family:var(--pz-body);
	font-size:14px;
	font-weight:600;
	color:var(--pz-text);
	margin:0 0 8px;
}
.wpforms-container .wpforms-required-label{ color:var(--pz-rose); }

.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea{
	width:100%;
	max-width:100%;
	min-height:59px;
	padding:14px 20px;
	background:var(--pz-white);
	border:1px solid var(--pz-rule);
	border-radius:18px;
	font-family:var(--pz-body);
	font-size:16px;
	line-height:27px;
	color:var(--pz-text);
	box-shadow:none;
	transition:border-color var(--pz-ease-color), box-shadow var(--pz-ease-color);
}
.wpforms-container textarea{ min-height:180px; resize:vertical; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{
	outline:none;
	border-color:var(--pz-plum);
	box-shadow:0 0 0 3px rgba(115,64,97,.14);
}
.wpforms-container ::placeholder{ color:#9A9A9A; opacity:1; }

/* saglasnost */
.wpforms-container .wpforms-field-checkbox ul{ list-style:none; margin:0; padding:0; }
.wpforms-container .wpforms-field-checkbox li{ display:flex; align-items:flex-start; gap:12px; }
.wpforms-container .wpforms-field-checkbox input[type=checkbox]{
	width:20px; height:20px;
	min-height:0;
	margin:4px 0 0;
	flex:none;
	accent-color:var(--pz-plum);
}
.wpforms-container .wpforms-field-label-inline{
	font-size:14px;
	line-height:24px;
	font-weight:400;
	color:var(--pz-text);
	margin:0;
}

/* dugme */
.wpforms-container .wpforms-submit-container{ margin-top:30px; }
.wpforms-container button.wpforms-submit,
.wpforms-container input[type=submit].wpforms-submit{
	min-width:248px;
	height:65px;
	padding:0 34px;
	border:none;
	border-radius:999px;
	background:var(--pz-plum);
	color:var(--pz-white);
	font-family:var(--pz-body);
	font-size:14px;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	cursor:pointer;
	box-shadow:none;
	transition:background var(--pz-ease-color), transform var(--pz-ease-move), box-shadow var(--pz-ease-move);
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container input[type=submit].wpforms-submit:hover{
	background:var(--pz-plum-hov);
	transform:translateY(-3px);
	box-shadow:0 14px 28px -10px rgba(115,64,97,.55);
}

/* greške i potvrda */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error{
	color:#A6404C;
	font-size:13px;
	font-style:normal;
	margin-top:6px;
	display:block;
}
.wpforms-container .wpforms-field-large.wpforms-error,
.wpforms-container .wpforms-error{ border-color:#A6404C; }
.wpforms-confirmation-container-full{
	background:var(--pz-cream);
	border:1px solid var(--pz-rose);
	border-radius:18px;
	padding:22px 26px;
	color:var(--pz-text);
	margin:0;
}

/* -------------------------------------------------------------------------
   16. OTKRIVANJE PRI SKROLU  (isti rečnik kao Beculax)
   ---------------------------------------------------------------------- */
body.pz-js .pz-reveal{
	opacity:0;
	transform:translateX(-46px);
	transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
	transition-delay:var(--pz-delay, 0s);
	will-change:opacity, transform;
}
body.pz-js .pz-reveal.pz-in{
	opacity:1;
	transform:translateX(0);
}

/* -------------------------------------------------------------------------
   17. RESPONZIVNO  (dizajna za mobilni nema — prelomi su moja procena)
   ---------------------------------------------------------------------- */
@media (max-width:1400px){
	:root{ --pz-sect:88px; }
	/* Naslovi, logo, kontakt blokovi i meni se skaliraju već u osnovnim
	   pravilima (clamp vezan za vw = razmera PSD platna od 1980 px).
	   Ranija pravila su ovde bila veća od te razmere i kvarila proporcije. */
}

@media (max-width:1200px){
	.pz-cats-list{ grid-template-columns:repeat(3,1fr); gap:44px 0; }
	.pz-cats-list > li:nth-child(3n+1)::before{ display:none; }
	.pz-catgrid{ grid-template-columns:repeat(2,1fr); }
	.pz-split{ gap:48px; }
	.pz-cta-in{ grid-template-columns:1fr; justify-items:start; align-items:start; gap:26px; }
}

@media (max-width:1024px){
	:root{ --pz-sect:70px; }

	/* zaglavlje: logo levo, hamburger desno, kontakt info se sklanja */
	.pz-topbar-in{ padding:26px 0; }
	.pz-topinfo{ display:none; }
	.pz-nav .pz-container{
		display:flex;
		align-items:center;
		justify-content:flex-end;
		position:relative;
	}
	.pz-burger{ display:flex; margin:9px 0; }
	.pz-menu{
		position:absolute;
		top:calc(100% + 9px); right:0;
		flex-direction:column;
		align-items:stretch;
		min-width:280px;
		background:var(--pz-plum);
		border-radius:14px;
		padding:10px 0;
		box-shadow:0 24px 54px -18px rgba(54,28,55,.6);
		opacity:0; visibility:hidden;
		transform:translateY(-8px);
		transition:opacity var(--pz-ease-color), transform var(--pz-ease-color), visibility var(--pz-ease-color);
		z-index:40;
	}
	.pz-menu.is-open{ opacity:1; visibility:visible; transform:none; }
	.pz-menu > li::before{ display:none; }
	.pz-menu > li > a{ height:auto; padding:13px 24px; }
	.pz-menu > li.current-menu-item > a{ color:var(--pz-cream); }
	.pz-menu .sub-menu{
		position:static;
		opacity:1; visibility:visible; transform:none;
		box-shadow:none;
		background:rgba(0,0,0,.12);
		padding:4px 0;
		min-width:0;
	}

	/* raspored: bočni meni ide ispod sadržaja */
	.pz-layout{ grid-template-columns:1fr; gap:52px; }
	.pz-side{ order:2; }

	.pz-split,
	.pz-split--intro{ grid-template-columns:1fr; gap:38px; }
	.pz-portrait{ max-width:430px; }
	.pz-cardgrid{ grid-template-columns:repeat(2,1fr); gap:44px 32px; }
	.pz-contact-row{ grid-template-columns:1fr; gap:22px; }
	.pz-foot-grid{ grid-template-columns:1fr; gap:46px; text-align:center; }
	.pz-foot-links{ text-align:center; }
	/* Ikonica je ::before na left:0 — centriranje SADRŽAJA bi je ostavilo
	   zalepljenu za levu ivicu, odvojenu od svog teksta. Umesto toga se
	   centrira cela stavka: širina po sadržaju + auto margine. */
	.pz-foot-contact li{
		justify-content:flex-start;
		width:max-content;
		max-width:100%;
		margin-left:auto; margin-right:auto;
		text-align:left;
	}
	.pz-map iframe{ height:340px; }
	.wpforms-container .wpforms-field-container{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px){
	body{ font-size:15.5px; line-height:26px; }

	.pz-banner{ padding:64px 0 110px; }
	.pz-banner-title{ font-size:clamp(28px,7vw,45px); }
	.pz-crumbs{ font-size:15px; }

	/* Na uskom ekranu se vidi samo sredina slike, pa naslov ume da padne na
	   šareni deo — tek tu dodajemo blagi beli veo radi čitljivosti. */
	.pz-hero{ min-height:0; padding:64px 0 120px; background-position:left center; }
	.pz-hero::after{
		content:"";
		position:absolute; inset:0;
		background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.25) 100%);
		z-index:1;
	}

	.pz-content h1{ font-size:29px; }
	.pz-content h2{ font-size:24px; margin-top:34px; }
	.pz-content h3{ font-size:20px; }

	.pz-cats-list{ grid-template-columns:repeat(2,1fr); }
	.pz-cats-list > li::before{ display:none!important; }
	/* dve u redu, isto kao Elementor verzija u sekciji 22 */
	.pz-cat-ico{ width:88px; height:97px; }
	.pz-cat-ico::before{ width:88px; height:88px; }
	.pz-cat-ico::after{ top:22px; width:89px; height:75px; }
	.pz-catgrid{ grid-template-columns:repeat(2,1fr); gap:16px; }
	.pz-catgrid a{ padding:26px 10px; }

	.pz-cardgrid{ grid-template-columns:1fr; gap:44px; }
	.pz-post{ grid-template-columns:1fr; gap:20px; }
	.pz-post .pz-card-thumb{ aspect-ratio:16/9; min-height:0; }

	.pz-btn,
	.pz-btn-el .elementor-button{ min-width:0; width:100%; }
	.pz-btnrow{ gap:14px; width:100%; }

	/* medaljon sa leptirom se smanjuje i ulazi u okvir slike */
	.pz-portrait-badge{ width:40%; right:2%; bottom:-6%; }
	/* right ostavlja mesta belom krugu sa „+" — bez toga natpis prolazi ispod njega */
	.pz-feature-label{ left:24px; right:96px; bottom:24px; font-size:23px; }
	/* Elementor bliznakinje ovih dvaju pravila su u sekciji 24 — moraju tamo,
	   jer su im bazna pravila iste specifičnosti (0,3,0) i stoje niže u fajlu. */

	.wpforms-container .wpforms-field-container{ grid-template-columns:1fr; }
	.wpforms-container button.wpforms-submit{ width:100%; min-width:0; }
	.pz-side-title{ font-size:34px; }
}

@media (max-width:560px){
	.pz-logo{ gap:14px; }
	.pz-logo-name{ font-size:30px; }
	.pz-logo-sub{ font-size:18px; }
	.pz-foot-name{ font-size:32px; }
	.pz-foot-sub{ font-size:21px; }
}

/* -------------------------------------------------------------------------
   18. SMANJEN POKRET
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	body.pz-js .pz-reveal{ opacity:1; transform:none; transition:none; }
	*,*::before,*::after{
		animation-duration:.001ms!important;
		animation-iteration-count:1!important;
		transition-duration:.001ms!important;
	}
}

/* -------------------------------------------------------------------------
   19. ELEMENTOR — neutralizacija, stil je naš
   ---------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container{ max-width:var(--pz-container); }
.elementor-widget:not(:last-child){ margin-block-end:0; }

/* Naslovna kao Elementor dokument (inc/elementorize.php): raspored i mere
   drže postojeće pz- klase na kontejnerima i omotačima widgeta; ovde se samo
   obaraju Elementorove podrazumevane vrednosti koje bi ih pokvarile. */

/* klasa za veličinu (pz-hero-title, pz-split-title, pz-cta-title…) stoji na
   omotaču widgeta, pa naslov unutra preuzima veličinu i boju nasleđem */
.pz-front .elementor-heading-title{ font-size:inherit; color:inherit; }
.pz-hero-title .elementor-heading-title{ line-height:1.12; }

/* Elementor omotaču daje max-width:100% kroz `.elementor.elementor .e-con >
   .elementor-widget` (0,4,0), a naše globalno pravilo iznad guta
   margin-block-end — zato se mere sa klasa ponavljaju jačom specifičnošću */
.pz-front .e-con > .elementor-widget.pz-hero-title{ max-width:830px; }
.pz-front .elementor-widget.pz-hero-title{ margin-block-end:36px; }
.pz-front .elementor-widget.pz-split-title{ margin-block-end:14px; }
.pz-front .elementor-widget.pz-cta-title{ margin-block-end:12px; }

/* talas, medaljon i oznake na kartici su apsolutni prema sekciji, a Elementor
   svakom widgetu daje position:relative — omotač mora biti proziran */
.pz-front .elementor-widget-shortcode,
.pz-front .elementor-widget-html{ position:static; }

/* e-con je podrazumevano flex kolona; ovim sekcijama raspored diktiraju
   pz- klase (specifičnost .e-con.pz-* nadjačava Elementorov .e-con) */
.e-con.pz-hero{ flex-direction:row; align-items:center; }
.e-con.pz-split{ display:grid; }
.e-con.pz-cta-in{ display:grid; }
.e-con.pz-btnrow{ flex-direction:row; }
.e-con.pz-feature{ display:block; }
.pz-feature .elementor-widget-image{ height:100%; }

/* Na telefonu red dugmadi postaje kolona, a dugmad se rastežu preko širine —
   isto što `.pz-btnrow{width:100%}` iz sekcije 17 radi PHP verziji. Mora ovde,
   ispod pravila iznad: `.e-con.pz-btnrow` je 0,2,0 i sekcija 17 ga ne dohvata.
   `width:100%` na dugmetu sam po sebi nije dovoljan — u flex REDU se widget
   skuplja na sadržaj, pa je 100% od te skupljene širine. */
@media (max-width:768px){
	.e-con.pz-btnrow{ flex-direction:column; align-items:stretch; }
}

/* -------------------------------------------------------------------------
   20. SITNICE DODATE POSLE PRVE ISPORUKE
   ---------------------------------------------------------------------- */

/* napomena za nedostajući sadržaj/dodatak — vidljivo, ali nenametljivo */
.pz-todo{
	background:var(--pz-cream);
	border-left:3px solid var(--pz-rose);
	border-radius:0 10px 10px 0;
	padding:14px 18px;
	font-size:15px;
	color:var(--pz-text);
}

/* rezervni kontakt ispod forme */
.pz-kontakt-fallback{
	list-style:none;
	margin:26px 0 0;
	padding:0;
	font-size:15px;
}
.pz-kontakt-fallback li{ margin-bottom:6px; }

@media (max-width:768px){
	/* portret i slika strane idu preko cele širine, bez obavijanja teksta */
	.pz-bio-portret{ float:none; width:100%; margin:0 0 24px; }
	.pz-page-slika{ max-width:100%; }
	.pz-potpis{ max-width:70%; }
}

/* -------------------------------------------------------------------------
   21. DELOVI SAJTA KAO ELEMENTOR SADRŽAJ
   Zaglavlje, futer i dve trake su Elementor dokumenti (inc/delovi.php).

   Raspored i dalje drži tema. Elementor za SVAKI kontejner štampa pravilo
   specifičnosti 0,3,0 (`.elementor-45 .elementor-element.elementor-element-x
   {--display:flex}`) iz per-page datoteke koja se učitava posle main.css —
   i na sajtu i u uređivaču. Zato se ovde ide na 0,4,0 i menjaju se NJEGOVE
   promenljive umesto da se njegova pravila nadjačavaju silom (bez ijednog
   !important). Zaključano je samo ono što drži dizajn: raspored kolona,
   širina i razmaci sekcija. Sve ostalo — boje, tipografija, slike, linkovi,
   dodavanje i uklanjanje elemenata — ostaje klijentu u panelu.
   ---------------------------------------------------------------------- */

/* Ova pravila moraju ići ovim redom: .pz-container je na istim kontejnerima
   kao .pz-topbar-in i .pz-foot-grid, a specifičnost im je izjednačena. */
.pz-deo .elementor .elementor-element.pz-container{
	--display:block;
	--width:min(78%, var(--pz-container));
	--content-width:100%;
}
@media (max-width:1300px){ .pz-deo .elementor .elementor-element.pz-container{ --width:86%; } }
@media (max-width:1024px){ .pz-deo .elementor .elementor-element.pz-container{ --width:90%; } }
@media (max-width:768px){  .pz-deo .elementor .elementor-element.pz-container{ --width:88%; } }

/* --- zaglavlje: logo levo, kontakt desno --- */
.pz-deo .elementor .elementor-element.pz-topbar-in{
	--display:flex;
	--flex-direction:row;
	--align-items:center;
	--justify-content:space-between;
	--gap:clamp(24px, 2vw, 40px);
	--row-gap:0px;
	--column-gap:clamp(24px, 2vw, 40px);
	--padding-top:clamp(28px, 2.53vw, 50px);
	--padding-bottom:clamp(28px, 2.53vw, 50px);
}
.pz-deo .elementor .elementor-element.pz-logo{
	--display:flex;
	--flex-direction:row;
	--align-items:center;
	--gap:clamp(14px, 1.31vw, 26px);
	--column-gap:clamp(14px, 1.31vw, 26px);
	--row-gap:0px;
	--width:auto;
	--flex-shrink:0;
}
.pz-deo .elementor .elementor-element.pz-logo-text{ --display:block; --width:auto; }

/* --- futer --- */
.pz-deo .elementor .elementor-element.pz-foot-social{
	--display:block;
	--padding-top:26px;
	--padding-bottom:26px;
}
.pz-deo .elementor .elementor-element.pz-foot-main{
	--display:block;
	--padding-top:clamp(48px, 3.84vw, 76px);
	--padding-bottom:clamp(44px, 3.54vw, 70px);
}
.pz-deo .elementor .elementor-element.pz-foot-grid{
	--display:grid;
	--gap:clamp(32px, 3.03vw, 60px);
	--row-gap:clamp(32px, 3.03vw, 60px);
	--column-gap:clamp(32px, 3.03vw, 60px);
}
.pz-deo .elementor .elementor-element.pz-foot-col{ --display:block; --width:auto; }

/* --- trake --- */
.pz-deo .elementor .elementor-element.pz-cats{
	--display:block;
	--padding-top:72px;
	--padding-bottom:86px;
}
.pz-deo .elementor .elementor-element.pz-blogstrip{
	--display:block;
	--padding-top:var(--pz-sect);
	--padding-bottom:var(--pz-sect);
}

/* Tipografija stoji na omotaču widgeta, element unutra je nasleđuje — tako
   iste klase rade i u ručnom markupu (rezerva u šablonu) i u Elementoru. */
.pz-deo .elementor-heading-title,
.pz-deo .pz-cats-sub .elementor-widget-container > *,
.pz-deo .pz-eyebrow .elementor-widget-container > *{
	font-size:inherit;
	line-height:inherit;
	color:inherit;
	margin:0;
}

/* Donja margina na widgetu se ne može postaviti (`.e-con .elementor-widget
   .elementor-widget{margin-block-end:0}`, 0,3,0) — svaki razmak iz dizajna
   ide kao GORNJA margina na sledećem elementu. */
.pz-deo .elementor-widget.pz-cats-sub{ margin-top:12px; }
/* sused može biti i kontejner (mreža oblasti „po elementima"), ne samo widget */
.pz-deo .elementor-widget.pz-cats-sub + :is(.elementor-widget, .e-con){ margin-top:76px; }
.pz-deo .elementor-widget.pz-eyebrow{ margin-top:14px; }
.pz-deo .elementor-widget.pz-eyebrow + :is(.elementor-widget, .e-con){ margin-top:34px; }
.pz-deo .elementor-widget.pz-foot-title + .elementor-widget{ margin-top:clamp(18px, 1.31vw, 26px); }
.pz-deo .pz-foot-mid .elementor-widget-text-editor{ margin-top:clamp(16px, 1.21vw, 24px); }

/* Društvene mreže su Elementorov social-icons widget: klijent dodaje mrežu i
   upisuje link kroz panel. Ikonice iz dizajna (beo krug sa izrezanim znakom)
   crta CSS preko maske; mreža za koju nemamo sliku zadrži Elementorovu
   ikonicu, umesto da ostane prazan beo kvadrat. */
/* razmak među mrežama ide kroz Elementorovu kontrolu (Stil → Razmak,
   `--grid-column-gap`) — ovde se samo centrira */
.pz-foot-social .elementor-social-icons-wrapper{
	display:flex;
	justify-content:center;
}
.pz-foot-social .elementor-grid-item{ display:block; }
.pz-foot-social .elementor-social-icon{
	display:grid;
	place-items:center;
	width:57px; height:57px;
	padding:0;
	background-color:transparent;
	color:var(--pz-white);
	transition:transform var(--pz-ease-move), color var(--pz-ease-color);
}
.pz-foot-social .elementor-social-icon:hover{ transform:translateY(-4px); color:var(--pz-cream); }
.pz-foot-social :is(.elementor-social-icon-instagram, .elementor-social-icon-facebook, .elementor-social-icon-youtube) :is(i, svg){ display:none; }
.pz-foot-social :is(.elementor-social-icon-instagram, .elementor-social-icon-facebook, .elementor-social-icon-youtube)::after{
	content:"";
	width:57px; height:57px;
	background:currentColor;
	-webkit-mask:var(--pz-mask) center/contain no-repeat;
	mask:var(--pz-mask) center/contain no-repeat;
}
.pz-foot-social .elementor-social-icon-instagram{ --pz-mask:url('../img/ui/instagram.png'); }
.pz-foot-social .elementor-social-icon-facebook{  --pz-mask:url('../img/ui/facebook.png'); }
.pz-foot-social .elementor-social-icon-youtube{   --pz-mask:url('../img/ui/youtube.png'); }

/* -------------------------------------------------------------------------
   22. OBLASTI „PO ELEMENTIMA"
   Svaka oblast je kontejner-link (klasa pz-kat) sa image widgetom (ikonica,
   klasa pz-kat-ico) i heading widgetom (naziv, postojeća klasa pz-cat-name):
   klik na ikonicu otvara panel slike, klik na naziv panel teksta. Ikonice su
   obojeni PNG-ovi (icons/cream, icons/plum) generisani iz alfa-maski — slika
   se menja kroz medijateku, disk iza nje crta tema. PHP verzije listi
   (rezerve u šablonima) i dalje koriste li/a selektore iz sekcije 10.
   Kao u sekciji 21: raspored na 0,4,0 kroz Elementorove promenljive, da bi
   važio i u uređivaču, gde se per-element stilovi učitavaju posle teme.
   ---------------------------------------------------------------------- */

.elementor .elementor-element.e-con.pz-cats-list{
	--display:grid;
	--gap:0px; --row-gap:0px; --column-gap:0px;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
}
.elementor .elementor-element.e-con.pz-catgrid{
	--display:grid;
	--gap:26px; --row-gap:26px; --column-gap:26px;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
}
.e-con.pz-cats-list{ grid-template-columns:repeat(6,1fr); }
.e-con.pz-catgrid{ grid-template-columns:repeat(3,1fr); }
/* margina liste na strani Psihoterapija — u šablonu je stajala inline */
.pz-content .e-con.pz-catgrid{ margin-top:38px; }

.elementor .elementor-element.e-con.pz-kat{
	--display:flex;
	--flex-direction:column;
	--align-items:center;
	--gap:18px; --row-gap:18px; --column-gap:18px;
	--padding-top:0px; --padding-right:10px; --padding-bottom:0px; --padding-left:10px;
}
.elementor .e-con.pz-catgrid > .elementor-element.pz-kat{
	--gap:16px; --row-gap:16px; --column-gap:16px;
	--padding-top:38px; --padding-right:24px; --padding-bottom:38px; --padding-left:24px;
}
a.pz-kat{ text-decoration:none; }

/* uspravna linija između stavki trake — kao li + li::before u sekciji 10 */
.pz-cats-list > .pz-kat + .pz-kat::before{
	content:"";
	position:absolute;
	left:0; top:9px;
	width:4px; height:96px;
	background:rgba(255,255,255,.16);
	opacity:1;
}

/* kartica na strani Psihoterapija */
.pz-catgrid > .pz-kat{
	border:1px solid var(--pz-rule);
	border-radius:0 30px 30px 0;
	background:var(--pz-white);
	transition:transform var(--pz-ease-move), box-shadow var(--pz-ease-move), border-color var(--pz-ease-color);
}
.pz-catgrid > .pz-kat:hover{
	transform:translateY(-6px);
	box-shadow:var(--pz-shadow);
	border-color:transparent;
}

/* ikonica: image widget u kutiji 105×116 — disk crta tema (::before),
   slika stoji tačno gde je stajala maska (top 26, 90×90 contain) */
.pz-kat .elementor-widget.pz-kat-ico{
	width:105px; height:116px;
	position:relative;
	transition:transform var(--pz-ease-move);
}
.pz-kat-ico::before{
	content:"";
	position:absolute;
	top:0; left:0;
	width:105px; height:105px;
	border-radius:50%;
	background:var(--pz-slate-soft);
	transition:background var(--pz-ease-color);
}
.pz-kat-ico img{
	position:absolute;
	top:26px; left:50%;
	transform:translateX(-50%);
	width:90px; height:90px;
	object-fit:contain;
}
.pz-kat:hover .pz-kat-ico{ transform:translateY(-6px); }
.pz-cats-list .pz-kat:hover .pz-kat-ico::before{ background:#7B7DA4; }
.pz-catgrid .pz-kat-ico::before{ background:var(--pz-cream); }
.pz-catgrid .pz-kat:hover .pz-kat-ico::before{ background:#F6E9C9; }

/* naziv: tipografija stoji na omotaču (pz-cat-name), element unutra je
   nasleđuje — isto pravilo kao za delove u sekciji 21 */
.pz-kat .elementor-widget-heading .elementor-heading-title{
	font:inherit;
	font-size:inherit;
	line-height:inherit;
	color:inherit;
	text-transform:inherit;
	text-align:inherit;
	letter-spacing:inherit;
	margin:0;
}
.pz-cats-list .pz-kat:hover .pz-cat-name{ color:var(--pz-cream); }
.pz-catgrid .pz-kat:hover .pz-cat-name{ color:var(--pz-plum); }

/* dugme „Zakažite posetu" na dnu sadržaja kao button widget — ista crta
   i razmak kao .pz-content-foot u šablonima */
.pz-content .elementor-widget.pz-content-foot{
	margin-top:46px;
	padding-top:34px;
	border-top:1px solid var(--pz-rule);
}

/* ⚠️ 26.08: broj kolona MORA da stoji i ovde. Prelomi iz sekcije 17 gađaju
   PHP rezervu (`.pz-cats-list`, `.pz-catgrid` — 0,1,0), a Elementorova
   verzija je `.e-con.pz-cats-list` (0,2,0) i bije ih. Dok ovoga nije bilo,
   traka je i na telefonu ostajala na ŠEST kolona: imena oblasti su se
   preklapala i šesta ikonica je visila van ekrana (vodoravno klizanje).
   Pravilo: svaki prelom za traku/mrežu piše se na OBA mesta. */
@media (max-width:1200px){
	.e-con.pz-cats-list{ grid-template-columns:repeat(3,1fr); }
	.e-con.pz-catgrid{ grid-template-columns:repeat(2,1fr); }
	.pz-cats-list > .pz-kat:nth-child(3n+1)::before{ display:none; }
	.elementor .elementor-element.e-con.pz-cats-list{ --row-gap:44px; --column-gap:0px; --gap:44px 0px; }
}
@media (max-width:768px){
	.e-con.pz-cats-list{ grid-template-columns:repeat(2,1fr); }
	/* Kartice ostaju dve u redu i na telefonu — u jednoj koloni je strana
	   narasla na 2870 px samo za šest kartica; ovako je 1620 px i svih šest
	   se vidi bez dugog skrolovanja. Padding i razmak su smanjeni da bi
	   duža imena („Životne krize i promene") stala u tri reda. */
	.e-con.pz-catgrid{ grid-template-columns:repeat(2,1fr); }
	.elementor .elementor-element.e-con.pz-catgrid{ --gap:16px; --row-gap:16px; --column-gap:16px; }
	.elementor .e-con.pz-catgrid > .elementor-element.pz-kat{
		--padding-top:26px; --padding-right:10px; --padding-bottom:26px; --padding-left:10px;
	}
	.pz-cats-list > .pz-kat::before{ display:none!important; }
	.pz-kat .elementor-widget.pz-kat-ico{ width:88px; height:97px; }
	.pz-kat-ico::before{ width:88px; height:88px; }
	.pz-kat-ico img{ top:22px; width:75px; height:75px; }
	/* dva u redu: razmak među redovima drži imena razdvojena, a bočni
	   padding sprečava da duža imena zalepe za susednu kolonu */
	.elementor .elementor-element.e-con.pz-cats-list{ --row-gap:38px; --gap:38px 0px; }
	.elementor .elementor-element.e-con.pz-kat{ --padding-right:6px; --padding-left:6px; }
	.pz-cat-name{ font-size:16px; }
}

/* -------------------------------------------------------------------------
   23. LISTE I KONTAKT KARTICE „PO ELEMENTIMA"
   Nabrajanje iz sadržaja: kontejner pz-lista sa po jednim tekst widgetom po
   stavci (pz-li) — ista strelica, razmaci i završna margina kao <ul> iz
   sekcije 9, samo što se svaka stavka bira i menja za sebe u uređivaču.
   ---------------------------------------------------------------------- */
.elementor .elementor-element.e-con.pz-lista{
	--display:block;
	--gap:0px; --row-gap:0px; --column-gap:0px;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
}
/* margina cele liste — kao margin na <ul> (naslov posle nje je i dalje
   nadjača svojim margin-top kroz naleganje, isto kao pre) */
.pz-content .e-con.pz-lista{ margin-bottom:24px; }
.pz-lista .elementor-widget.pz-li{
	position:relative;
	padding-left:26px;
}
.pz-lista .elementor-widget.pz-li + .elementor-widget.pz-li{ margin-top:9px; }
.pz-lista .pz-li p{ margin:0; }
.pz-li::before{
	content:"";
	position:absolute;
	left:0; top:9px;
	width:13px; height:13px;
	border-radius:50%;
	background:var(--pz-plum) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>') center/6px no-repeat;
}

/* kontakt kartice kao tri widgeta u grid kontejneru */
.elementor .elementor-element.e-con.pz-contact-row{
	--display:grid;
	--gap:26px; --row-gap:26px; --column-gap:26px;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
}
.e-con.pz-contact-row{ grid-template-columns:repeat(3,1fr); }
.pz-content .e-con.pz-contact-row{ margin-bottom:44px; }
.pz-content .pz-contact-row .elementor-widget p{ margin:0; }

/* 1024, ne 768 — PHP verzija (.pz-contact-row u sekciji 17) se lomi tu */
@media (max-width:1024px){
	.e-con.pz-contact-row{ grid-template-columns:1fr; }
	.elementor .elementor-element.e-con.pz-contact-row{ --gap:22px; --row-gap:22px; --column-gap:22px; }
}

/* -------------------------------------------------------------------------
   24. NASLOVNA — medaljon i natpis kartice „po elementima"
   Medaljon: leptir je image widget (pz-portrait-badge-w na omotaču) — krem
   disk, ljubičasti prsten i lebdenje na prelaz mišem crta tema, slika se
   menja kroz medijateku. Natpis „Pročitajte ceo tekst" je tekst widget;
   beli krug sa „+" je ::before na kartici (dekoracija bez teksta).
   Stara pravila za span verzije (sekcija 12) ostaju za PHP rezervu.
   ---------------------------------------------------------------------- */
.pz-portrait .elementor-widget.pz-portrait-badge-w{
	position:absolute;
	right:-19.3%; bottom:-8.9%;
	width:53.2%;
	aspect-ratio:1;
	border-radius:50%;
	background:var(--pz-cream);
	display:grid;
	place-items:center;
	transition:transform var(--pz-ease-move);
}
.pz-portrait-badge-w > .elementor-widget-container{ display:contents; }
.pz-portrait:hover .elementor-widget.pz-portrait-badge-w{ transform:scale(1.04) rotate(-3deg); }
/* isti prsten kao na span verziji — samo uz polovinu okrenutu fotografiji */
.pz-portrait-badge-w::before{
	content:"";
	position:absolute;
	inset:calc(-1 * var(--pz-ring));
	--pz-ring:clamp(4px, .35vw, 7px);
	border-radius:50%;
	padding:var(--pz-ring);
	background:conic-gradient(
		transparent 0deg,
		transparent 172deg,
		var(--pz-plum) 190deg,
		var(--pz-plum) 350deg,
		transparent 360deg
	);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude;
	pointer-events:none;
}
/* .pz-portrait img inače zaobljava i razvlači na 100% — leptir ne sme */
.pz-portrait .pz-portrait-badge-w img{
	border-radius:0;
	width:68.6%;
	aspect-ratio:142/104;
	height:auto;
	object-fit:contain;
}

.e-con.pz-feature .elementor-widget.pz-feature-label-w{
	position:absolute;
	left:38px; bottom:34px;
	z-index:2;
	width:auto;
}
.pz-feature-label-w p{
	margin:0;
	font-family:var(--pz-head);
	font-size:30px;
	color:var(--pz-white);
}
/* beli krug sa „+" — kao .pz-feature .pz-plus, samo bez elementa u markupu */
.e-con.pz-feature::before{
	content:"";
	position:absolute;
	/* Elementorovo .e-con:before (prekrivač) daje top:0/left:0 — bez auto
	   bi fiksna širina zakačila krug za gornji levi ugao */
	top:auto; left:auto;
	right:24px; bottom:26px;
	width:57px; height:57px;
	border-radius:50%;
	background:var(--pz-white) url('../img/ui/plus-plum.png') center/32px no-repeat;
	z-index:2;
	opacity:1;
}

/* traka oblasti kao deo naslovne (widgeti u dokumentu, ne shortcode):
   ista tipografija i razmaci kao u delu — pravila iz sekcije 21 su vezana
   za .pz-deo, pa se ovde ponavljaju za .pz-front */
.pz-front .elementor-widget.pz-cats-title .elementor-heading-title{ line-height:1.2; }
.pz-front .elementor-widget.pz-cats-sub p{ margin:0; }
.pz-front .elementor-widget.pz-cats-sub{ margin-top:12px; }
.pz-front .elementor-widget.pz-cats-sub + :is(.elementor-widget, .e-con){ margin-top:76px; }

/* ⚠️ 26.08: mobilni prelom za medaljon i natpis kartice MORA da stoji ovde, a
   ne uz PHP verzije u sekciji 17. Bazna pravila iznad su 0,3,0 — tačno koliko
   i ova — pa kod izjednačene specifičnosti odlučuje redosled u fajlu i sekcija
   17 bi izgubila. Bez ovoga je medaljon na telefonu virio 43 px van ekrana i
   pravio vodoravno klizanje na celoj naslovnoj. */
@media (max-width:768px){
	.pz-portrait .elementor-widget.pz-portrait-badge-w{ width:40%; right:2%; bottom:-6%; }
	.e-con.pz-feature .elementor-widget.pz-feature-label-w{ left:24px; right:96px; bottom:24px; width:auto; }
	.pz-feature-label-w p{ font-size:23px; line-height:1.15; }
}

/* -------------------------------------------------------------------------
   25. BIOGRAFIJA „PO ELEMENTIMA" + baner iz Prilagodi
   Portret i potpis su image widgeti — float na omotaču radi isto kao na
   <figure>, jer je vrhovni kontejner sadržaja običan blok (sekcija 9).
   ---------------------------------------------------------------------- */
.pz-content .elementor-widget.pz-bio-portret-w{
	float:left;
	width:35%;
	margin:0 clamp(20px, 2.6%, 34px) 26px 0;
}
.pz-content .pz-bio-portret-w img{ border-radius:0 30px 30px 0; width:100%; }
/* Elementorov image widget centrira sliku — potpis stoji uz levu ivicu */
.pz-content .elementor-widget.pz-potpis-w{ clear:both; margin-top:38px; text-align:left; }
.pz-content .pz-potpis-w img{ max-width:41%; }

@media (max-width:768px){
	.pz-content .elementor-widget.pz-bio-portret-w{ float:none; width:100%; margin:0 0 24px; }
	.pz-content .pz-potpis-w img{ max-width:70%; }
}