/* Veerny – Resursi: stranica teksta, zbirna stranica i kartice.
   Veličine prate jedinicu razmere --u (kao naslovna); tekst ima donju granicu u rem (čitljivost, uvećanje fonta). */

.vr-clanak, .vr-resursi { --vr-link: #2F6A99; --vr-cream: #FFF4CC; position: relative; }

/* ===== Ukrasi (oblaci i zvezde) ===== */
.vr-cl-deco { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.vr-cl-deco svg { width: 100%; height: auto; display: block; overflow: visible; }
.vr-cl-deco--oblak1 { width: calc(250 * var(--u, 1px)); left: calc(50% - 900 * var(--u, 1px)); top: calc(100% - 130 * var(--u, 1px)); }
.vr-cl-deco--oblak2 { width: calc(170 * var(--u, 1px)); left: calc(50% + 590 * var(--u, 1px)); top: calc(118 * var(--u, 1px)); }
.vr-cl-deco--oblak3 { width: calc(240 * var(--u, 1px)); left: calc(50% + 600 * var(--u, 1px)); top: calc(70 * var(--u, 1px)); }
.vr-cl-deco--zvezda { width: calc(46 * var(--u, 1px)); left: calc(50% - 668 * var(--u, 1px)); top: calc(250 * var(--u, 1px)); transform: rotate(-12deg); }
.vr-cl-deco--zvezda2 { width: calc(92 * var(--u, 1px)); right: calc(-30 * var(--u, 1px)); bottom: calc(-40 * var(--u, 1px)); z-index: 2; transform: rotate(14deg); }

/* ===== Uvodni deo teksta ===== */
.vr-cl-hero { position: relative; padding: calc(190 * var(--u, 1px)) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) calc(110 * var(--u, 1px)); }
.vr-cl-hero__in {
	position: relative; z-index: 1;
	max-width: calc(1180 * var(--u, 1px)); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: calc(72 * var(--u, 1px)); align-items: center;
}
.vr-cl-hero--bez-slike .vr-cl-hero__in { grid-template-columns: minmax(0, calc(880 * var(--u, 1px))); justify-content: center; text-align: center; }
.vr-cl-hero--bez-slike .vr-cl-crumbs ol, .vr-cl-hero--bez-slike .vr-cl-tags, .vr-cl-hero--bez-slike .vr-cl-meta { justify-content: center; }
.vr-cl-hero__text { display: flex; flex-direction: column; gap: calc(22 * var(--u, 1px)); }
.vr-cl-hero__media { position: relative; }

.vr-cl-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; font: 500 max(1rem, calc(16 * var(--u, 1px)))/1.3 var(--vr-body); color: rgba(63, 50, 115, .85); }
.vr-cl-crumbs li + li::before { content: "›"; margin-right: .4em; }
.vr-cl-crumbs a { color: inherit; text-decoration: none; }
.vr-cl-crumbs a:hover, .vr-cl-crumbs a:focus-visible { color: var(--vr-purple-dark); text-decoration: underline; text-underline-offset: .2em; }

.vr-cl-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vr-cl-tag {
	display: inline-block; margin: 0; background: #fff; color: var(--vr-purple-mid);
	font: 700 1rem/1 var(--vr-body); letter-spacing: 1px; text-transform: uppercase;
	padding: 10px 18px; border-radius: 6px;
}
.vr-cl-tag--soft { background: rgba(255, 255, 255, .55); color: var(--vr-purple-dark); font-weight: 600; letter-spacing: 0; text-transform: none; }

.vr-cl-title { margin: 0; font-family: var(--vr-head); font-weight: 700; color: var(--vr-purple-dark); line-height: .95; font-size: clamp(2.75rem, 2rem + 3.3333vw, calc(80 * var(--u, 1px))); text-wrap: balance; }
.vr-cl-lead { margin: 0; max-width: 34em; font: 500 clamp(1.25rem, 1.1667rem + 0.3704vw, calc(24 * var(--u, 1px)))/1.4 var(--vr-body); color: rgba(63, 50, 115, .9); text-wrap: pretty; }
.vr-cl-hero--bez-slike .vr-cl-lead { margin-inline: auto; }
.vr-cl-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 max(1rem, calc(17 * var(--u, 1px)))/1.3 var(--vr-body); color: var(--vr-ink); }
.vr-cl-meta__min { display: inline-flex; align-items: center; gap: 8px; }
.vr-cl-meta__min svg { color: var(--vr-purple-dark); flex: 0 0 auto; }

.vr-cl-photo {
	margin: 0; background: #fff; padding: calc(14 * var(--u, 1px)); border-radius: calc(28 * var(--u, 1px));
	transform: rotate(2.2deg); box-shadow: 0 calc(18 * var(--u, 1px)) calc(40 * var(--u, 1px)) rgba(63, 50, 115, .12);
	max-width: calc(560 * var(--u, 1px)); margin-inline: auto;
}
.vr-cl-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 11 / 8; object-fit: cover; border-radius: calc(18 * var(--u, 1px)); }

/* ===== Beli list sa tekstom ===== */
.vr-cl-sheet-wrap { position: relative; z-index: 1; padding: 0 clamp(.75rem, .5rem + 1vw, 1rem); }
.vr-cl-sheet {
	max-width: calc(1240 * var(--u, 1px)); margin: 0 auto; background: #fff; border-radius: calc(40 * var(--u, 1px));
	padding: calc(72 * var(--u, 1px)) calc(64 * var(--u, 1px)) calc(80 * var(--u, 1px));
	display: grid; grid-template-columns: calc(260 * var(--u, 1px)) minmax(0, calc(740 * var(--u, 1px))); gap: calc(72 * var(--u, 1px)); justify-content: center; align-items: start;
}
.vr-cl-sheet > .vr-cl-body:only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: calc(740 * var(--u, 1px)); }

/* Sadržaj teksta (prati skrol) */
.vr-cl-aside { position: sticky; top: calc(130 * var(--u, 1px)); display: flex; flex-direction: column; gap: calc(28 * var(--u, 1px)); }
.vr-cl-toc { background: var(--vr-cream); border-radius: calc(20 * var(--u, 1px)); padding: calc(24 * var(--u, 1px)); }
.vr-cl-toc summary, .vr-cl-share__label {
	margin: 0; font: 700 max(.9375rem, calc(14 * var(--u, 1px)))/1.2 var(--vr-body); letter-spacing: 1px; text-transform: uppercase; color: var(--vr-purple-mid);
}
.vr-cl-toc summary { list-style: none; cursor: default; pointer-events: none; }
.vr-cl-toc summary::-webkit-details-marker { display: none; }
.vr-cl-toc ol { margin: calc(14 * var(--u, 1px)) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: calc(12 * var(--u, 1px)); font: 500 max(1rem, calc(17 * var(--u, 1px)))/1.3 var(--vr-body); color: var(--vr-ink); }
.vr-cl-toc li::marker { color: var(--vr-purple-mid); font-weight: 600; }
.vr-cl-toc a { color: var(--vr-ink); text-decoration: none; transition: color .2s ease; }
.vr-cl-toc a:hover, .vr-cl-toc a:focus-visible, .vr-cl-toc a.is-active { color: var(--vr-purple-dark); }
.vr-cl-toc a.is-active { font-weight: 700; }
.vr-cl-share { display: flex; flex-direction: column; gap: 10px; }
.vr-cl-share__row { display: flex; gap: 10px; }
.vr-cl-share__btn {
	width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #F3EEFA; color: var(--vr-purple-dark);
	display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.vr-cl-share__btn:hover, .vr-cl-share__btn:focus-visible { background: var(--vr-lilac); color: var(--vr-purple-dark); transform: scale(1.08); }
.vr-cl-share__btn:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 2px; }
.vr-cl-share__ok { margin: 0; min-height: 1.3em; font: 500 1rem/1.3 var(--vr-body); color: var(--vr-green); }

/* ===== Tekst (isto i u editoru) ===== */
:is(.vr-prose, .editor-styles-wrapper .is-root-container) {
	font-family: var(--vr-body); font-size: clamp(1.125rem, 1.0833rem + 0.1852vw, calc(20 * var(--u, 1px))); line-height: 1.65; color: var(--vr-ink);
}
.editor-styles-wrapper { background: #fff; }
.editor-styles-wrapper .editor-post-title { font-family: var(--vr-head); font-weight: 700; color: var(--vr-purple-dark); line-height: .95; font-size: 3rem; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) > * { margin-top: 0; margin-bottom: 1.15em; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) > p:first-child {
	font-size: clamp(1.25rem, 1.1667rem + 0.3704vw, calc(24 * var(--u, 1px))); line-height: 1.5; font-weight: 500; color: var(--vr-purple-dark);
}
:is(.vr-prose, .editor-styles-wrapper .is-root-container) h2 {
	font-family: var(--vr-head); font-weight: 700; line-height: 1; color: var(--vr-ink);
	font-size: clamp(1.875rem, 1.5833rem + 1.2963vw, calc(44 * var(--u, 1px)));
	margin-block: 2em .55em; scroll-margin-top: calc(140 * var(--u, 1px));
}
:is(.vr-prose, .editor-styles-wrapper .is-root-container) h3 {
	font-family: var(--vr-head); font-weight: 700; line-height: 1.05; color: var(--vr-purple-dark);
	font-size: clamp(1.375rem, 1.25rem + 0.5556vw, calc(28 * var(--u, 1px)));
	margin-block: 1.7em .45em; scroll-margin-top: calc(140 * var(--u, 1px));
}
:is(.vr-prose, .editor-styles-wrapper .is-root-container) h2 + h3 { margin-top: .8em; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) :is(p, li) a {
	color: var(--vr-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; transition: color .2s ease;
}
:is(.vr-prose, .editor-styles-wrapper .is-root-container) :is(p, li) a:hover { color: var(--vr-purple-dark); }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) strong { font-weight: 600; color: var(--vr-purple-dark); }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) :is(ul, ol) { margin-left: 0; margin-right: 0; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) :is(ul, ol):not([class*="is-style-vr"]) { padding-left: 1.3em; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) :is(ul, ol):not([class*="is-style-vr"]) li { margin-bottom: .45em; padding-left: .2em; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) :is(ul, ol):not([class*="is-style-vr"]) li::marker { color: var(--vr-purple-mid); font-weight: 600; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) img { border-radius: calc(18 * var(--u, 1px)); height: auto; }
:is(.vr-prose, .editor-styles-wrapper .is-root-container) figcaption { font-size: .85em; color: rgba(78, 73, 71, .85); text-align: center; margin-top: .6em; }

/* Citat (podrazumevano i stil „Izdvojeni citat“) */
:is(.vr-prose, .editor-styles-wrapper .is-root-container) blockquote {
	margin-block: 1.8em; padding: 0; border: 0; text-align: center;
}
:is(.vr-prose, .editor-styles-wrapper .is-root-container) blockquote p {
	margin: 0; font-family: var(--vr-head); font-weight: 700; line-height: 1.05; color: var(--vr-purple-dark);
	font-size: clamp(1.75rem, 1.5rem + 1.1111vw, calc(40 * var(--u, 1px))); text-wrap: balance;
}
:is(.vr-prose, .editor-styles-wrapper .is-root-container) blockquote cite { display: block; margin-top: .8em; font: 500 1rem/1.3 var(--vr-body); color: var(--vr-ink); }

/* Lista saveta sa kvačicama */
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-kvacice { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u, 1px)); margin-block: 1.4em 1.8em; }
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-kvacice li {
	position: relative; margin: 0; background: var(--vr-cream); border-radius: calc(18 * var(--u, 1px));
	padding: calc(18 * var(--u, 1px)) calc(22 * var(--u, 1px)) calc(18 * var(--u, 1px)) calc(72 * var(--u, 1px)); line-height: 1.5;
}
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-kvacice li::before {
	content: ""; position: absolute; left: calc(22 * var(--u, 1px)); top: calc(18 * var(--u, 1px)); width: calc(34 * var(--u, 1px)); height: calc(34 * var(--u, 1px));
	border-radius: 50%; background: var(--vr-purple-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD863' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 55% no-repeat;
}

/* Numerisane kartice (kao „4 laka koraka“) */
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-brojevi { list-style: none; padding: 0; counter-reset: vr-n; display: flex; flex-direction: column; gap: calc(12 * var(--u, 1px)); margin-block: 1.4em 1.8em; }
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-brojevi li {
	counter-increment: vr-n; position: relative; margin: 0; background: #fff; border: 2px solid var(--vr-cream); border-radius: calc(18 * var(--u, 1px));
	padding: calc(18 * var(--u, 1px)) calc(22 * var(--u, 1px)) calc(18 * var(--u, 1px)) calc(78 * var(--u, 1px)); line-height: 1.5; min-height: calc(78 * var(--u, 1px)); display: flex; align-items: center;
}
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-brojevi li::before {
	content: counter(vr-n); position: absolute; left: calc(18 * var(--u, 1px)); top: 50%; transform: translateY(-50%);
	width: calc(44 * var(--u, 1px)); height: calc(44 * var(--u, 1px)); border-radius: 50%; background: var(--vr-yellow);
	display: grid; place-items: center; font: 700 calc(24 * var(--u, 1px))/1 var(--vr-head); color: var(--vr-purple-dark);
}

/* Istaknuta brojka */
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-brojka {
	background: #C2423B; color: #fff; border-radius: calc(33 * var(--u, 1px)); padding: calc(32 * var(--u, 1px)) calc(36 * var(--u, 1px));
	transform: rotate(-1.2deg); margin-block: 1.6em 2em; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u, 1px)) calc(28 * var(--u, 1px));
}
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-brojka p { margin: 0 !important; color: #fff; }
/* GeneratePress obavija sadržaj grupe dodatnim slojem – za raspored ga preskačemo */
:is(.vr-prose, .editor-styles-wrapper) :is(.is-style-vr-brojka, .vr-kartice, .vr-kartica, .is-style-vr-okvir) > .wp-block-group__inner-container { display: contents; }
:is(.vr-prose, .editor-styles-wrapper) .vr-brojka__broj { font: 700 clamp(3rem, 2.5rem + 2.2vw, calc(76 * var(--u, 1px)))/.9 var(--vr-head) !important; flex: 0 0 auto; }
:is(.vr-prose, .editor-styles-wrapper) .vr-brojka__tekst { flex: 1 1 14em; font-weight: 600; line-height: 1.35; }
:is(.vr-prose, .editor-styles-wrapper) .vr-brojka__izvor { flex: 0 0 100%; font-size: max(1rem, .85em); opacity: .95; }

/* Tri kartice */
:is(.vr-prose, .editor-styles-wrapper) .vr-kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5em), 1fr)); gap: calc(18 * var(--u, 1px)); margin-block: 1.4em 2em; }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica { border-radius: calc(24 * var(--u, 1px)); padding: calc(24 * var(--u, 1px)); line-height: 1.45; font-size: max(1rem, .9em); }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica p { margin: 0 0 .5em; color: inherit; }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica p:last-child { margin-bottom: 0; }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica__naslov { font: 700 clamp(1.625rem, 1.4583rem + 0.7407vw, calc(34 * var(--u, 1px)))/.95 var(--vr-head) !important; }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica--zelena { background: #2E7D5B; color: #fff; transform: rotate(-1.5deg); }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica--plava { background: var(--vr-blue); color: #2B2550; transform: rotate(1deg); }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica--ljubicasta { background: var(--vr-purple-mid); color: #fff; transform: rotate(-.6deg); }
:is(.vr-prose, .editor-styles-wrapper) .vr-kartica--zelena strong, :is(.vr-prose, .editor-styles-wrapper) .vr-kartica--ljubicasta strong { color: #fff; }

/* Žuti okvir */
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-okvir { background: var(--vr-cream); border-radius: calc(20 * var(--u, 1px)); padding: calc(24 * var(--u, 1px)) calc(28 * var(--u, 1px)); margin-block: 1.4em 1.8em; }
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-okvir p { margin: 0 0 .8em; }
:is(.vr-prose, .editor-styles-wrapper) .is-style-vr-okvir p:last-child { margin-bottom: 0; }

/* ===== Poziv na kraju teksta ===== */
.vr-cl-cta {
	position: relative; background: var(--vr-lilac); border-radius: calc(33 * var(--u, 1px));
	padding: calc(40 * var(--u, 1px)); margin: calc(56 * var(--u, 1px)) 0 calc(40 * var(--u, 1px));
}
.vr-cl-cta__logo {
	display: block; width: calc(34 * var(--u, 1px)); height: calc(40 * var(--u, 1px)); margin-bottom: calc(16 * var(--u, 1px)); background: var(--vr-purple-dark);
	-webkit-mask: url("../img/veerny-logo.webp") center / contain no-repeat; mask: url("../img/veerny-logo.webp") center / contain no-repeat;
}
.vr-cl-cta__title { margin: 0 0 calc(14 * var(--u, 1px)); font: 700 clamp(1.625rem, 1.4583rem + 0.7407vw, calc(36 * var(--u, 1px)))/1.02 var(--vr-head); color: var(--vr-purple-dark); text-wrap: balance; }
.vr-cl-cta__text { margin: 0 0 calc(24 * var(--u, 1px)); font: 400 max(1.125rem, calc(19 * var(--u, 1px)))/1.5 var(--vr-body); color: #2B2550; }
.vr-cl-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(24 * var(--u, 1px)); }

.vr-cl-sources { border-top: 2px solid #F0E6C0; padding-top: calc(20 * var(--u, 1px)); }
.vr-cl-sources summary { cursor: pointer; font: 600 max(1.0625rem, calc(18 * var(--u, 1px)))/1.3 var(--vr-body); color: var(--vr-purple-dark); padding: 6px 0; }
.vr-cl-sources summary { list-style: none; display: inline-flex; align-items: center; gap: 12px; transition: color .2s ease; }
.vr-cl-sources summary::-webkit-details-marker { display: none; }
.vr-cl-sources summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vr-cl-sources[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.vr-cl-sources.is-closing summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.vr-cl-sources summary:hover { color: var(--vr-blue-dark); }
.vr-cl-sources summary:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 3px; border-radius: 4px; }
.vr-cl-sources ul { margin: 14px 0 0; padding-left: 1.2em; font: 400 max(1rem, calc(16 * var(--u, 1px)))/1.6 var(--vr-body); color: var(--vr-ink); }
.vr-cl-sources li { margin-bottom: .4em; }
.vr-cl-sources a { color: var(--vr-link); word-break: break-word; }

/* ===== Dugmad ===== */
.vr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-align: center; text-decoration: none;
	font: 700 clamp(1.0625rem, 0.9792rem + 0.3241vw, calc(20.5 * var(--u, 1px)))/1.1 var(--vr-body);
	min-height: 48px; padding: calc(18 * var(--u, 1px)) calc(30 * var(--u, 1px)); border-radius: 50px; border: 0; cursor: pointer;
	transition: color .5s ease .25s, background-color .3s ease;
}
.vr-btn:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 3px; }
.vr-btn--accent { background: var(--vr-orange); color: var(--vr-ink); --vr-iris-color: var(--vr-purple-dark); }
.vr-btn--accent:is(:hover, :focus-visible) { color: var(--vr-yellow); }
.vr-btn--white { background: #fff; color: var(--vr-purple-dark); }
.vr-btn--white:is(:hover, :focus-visible) { color: var(--vr-yellow); }
.vr-btn--secondary { background: var(--vr-purple-dark); color: #fff; --vr-iris-color: #D2AEE6; }
.vr-btn--secondary:is(:hover, :focus-visible) { color: var(--vr-purple-dark); }
/* bez skripte (mrlje): pozadina se samo oboji */
.vr-btn--accent:not(:has(.vr-iris)):is(:hover, :focus-visible), .vr-btn--white:not(:has(.vr-iris)):is(:hover, :focus-visible) { background: var(--vr-purple-dark); transition: color .2s ease, background-color .2s ease; }
.vr-btn--secondary:not(:has(.vr-iris)):is(:hover, :focus-visible) { background: var(--vr-lilac); transition: color .2s ease, background-color .2s ease; }

/* ===== Kartice tekstova ===== */
.vr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(32 * var(--u, 1px)); max-width: calc(1180 * var(--u, 1px)); margin: 0 auto; align-items: stretch; }
.vr-cards--1 { grid-template-columns: minmax(0, calc(380 * var(--u, 1px))); justify-content: center; }
.vr-cards--2 { grid-template-columns: repeat(2, minmax(0, calc(380 * var(--u, 1px)))); justify-content: center; }
.vr-card {
	display: flex; flex-direction: column; background: #fff; border-radius: calc(9 * var(--u, 1px));
	padding: calc(28 * var(--u, 1px)) calc(26 * var(--u, 1px)) calc(34 * var(--u, 1px)); text-decoration: none; color: var(--vr-ink);
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.vr-card:hover, .vr-card:focus-visible { transform: translateY(calc(-8 * var(--u, 1px))) rotate(-1deg); box-shadow: 0 calc(22 * var(--u, 1px)) calc(40 * var(--u, 1px)) calc(-24 * var(--u, 1px)) rgba(63, 50, 115, .5); color: var(--vr-ink); }
.vr-card:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 4px; }
.vr-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(6 * var(--u, 1px)); }
.vr-card__img--none { background: var(--vr-cream); }
.vr-card__meta { margin-top: calc(22 * var(--u, 1px)); padding: 0 calc(6 * var(--u, 1px)); font: 700 max(.9375rem, calc(14 * var(--u, 1px)))/1.2 var(--vr-body); letter-spacing: 1px; text-transform: uppercase; color: var(--vr-purple-mid); }
.vr-card__title { margin: calc(12 * var(--u, 1px)) 0 0; padding: 0 calc(6 * var(--u, 1px)); font: 700 clamp(1.75rem, 1.5rem + 1.1111vw, calc(36 * var(--u, 1px)))/.95 var(--vr-head); color: var(--vr-ink); text-wrap: balance; }
.vr-card__text { margin-top: calc(16 * var(--u, 1px)); padding: 0 calc(6 * var(--u, 1px)); font: 400 clamp(1.0625rem, 1.0069rem + 0.2469vw, calc(20 * var(--u, 1px)))/1.3 var(--vr-body); text-wrap: pretty; flex: 1 1 auto; }
.vr-card__more { display: inline-flex; align-items: center; gap: 12px; margin-top: calc(22 * var(--u, 1px)); padding: 0 calc(6 * var(--u, 1px)); font: 600 max(1rem, calc(18 * var(--u, 1px)))/1 var(--vr-body); color: var(--vr-link); }
.vr-card__more svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.vr-card:hover .vr-card__more svg { transform: translateX(5px); }

/* ===== Čitajte dalje ===== */
.vr-cl-related { position: relative; padding: calc(150 * var(--u, 1px)) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) calc(150 * var(--u, 1px)); }
.vr-cl-related__head { position: relative; z-index: 1; text-align: center; margin-bottom: calc(64 * var(--u, 1px)); }
.vr-cl-related .vr-cards { position: relative; z-index: 1; }
.vr-cl-related__all { position: relative; z-index: 1; margin: calc(64 * var(--u, 1px)) 0 0; text-align: center; }
.vr-h-xl { margin: 0; font: 700 clamp(2.75rem, 1.8611rem + 3.9506vw, calc(96 * var(--u, 1px)))/.95 var(--vr-head); color: var(--vr-ink); text-wrap: balance; }
.vr-h-l { margin: 0; font: 700 clamp(2.25rem, 1.6667rem + 2.5926vw, calc(64 * var(--u, 1px)))/.95 var(--vr-head); color: var(--vr-ink); }
.vr-text-xl { margin: calc(8 * var(--u, 1px)) 0 0; font: 400 clamp(1.375rem, 1.0417rem + 1.4815vw, calc(40 * var(--u, 1px)))/1.1 var(--vr-body); color: var(--vr-ink); }

/* ===== Zbirna stranica Resursi ===== */
.vr-rs-hero { position: relative; padding: calc(200 * var(--u, 1px)) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) calc(110 * var(--u, 1px)); text-align: center; }
.vr-rs-hero__in { position: relative; z-index: 1; max-width: calc(980 * var(--u, 1px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--u, 1px)); }
.vr-rs-title { margin: 0; font: 700 clamp(3rem, 1.9444rem + 4.6914vw, calc(112 * var(--u, 1px)))/.9 var(--vr-head); color: var(--vr-ink); text-wrap: balance; }
.vr-rs-title span { color: var(--vr-purple-dark); }
.vr-rs-lead { margin: 0; max-width: 30em; font: 500 clamp(1.25rem, 1.1667rem + 0.3704vw, calc(26 * var(--u, 1px)))/1.4 var(--vr-body); color: rgba(63, 50, 115, .9); text-wrap: pretty; }
.vr-rs-zvezda { width: calc(96 * var(--u, 1px)); left: calc(50% + 540 * var(--u, 1px)); top: calc(400 * var(--u, 1px)); transform: rotate(10deg); }
.vr-rs-zvezda2 { width: calc(52 * var(--u, 1px)); left: calc(50% - 560 * var(--u, 1px)); top: calc(205 * var(--u, 1px)); transform: rotate(-12deg); }
.vr-resursi .vr-cl-deco--oblak1 { top: calc(100% - 170 * var(--u, 1px)); }
.vr-rs-list { padding: 0 clamp(1rem, 0.848rem + 0.758vw, 1.5rem) calc(150 * var(--u, 1px)); }
.vr-rs-list__head { max-width: calc(1180 * var(--u, 1px)); margin: 0 auto calc(40 * var(--u, 1px)); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.vr-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.vr-pill {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--vr-ink);
	font: 500 max(1rem, calc(17 * var(--u, 1px)))/1 var(--vr-body); text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.vr-pill:hover, .vr-pill:focus-visible, .vr-pill[aria-current="page"] { background: var(--vr-purple-dark); color: var(--vr-yellow); }
.vr-pill:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 3px; }
.vr-rs-empty { text-align: center; font: 500 1.25rem/1.4 var(--vr-body); }
.vr-pages { max-width: calc(1180 * var(--u, 1px)); margin: calc(48 * var(--u, 1px)) auto 0; }
.vr-pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vr-pages .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--vr-ink); font: 600 1rem/1 var(--vr-body); text-decoration: none; }
.vr-pages .page-numbers.current, .vr-pages a.page-numbers:hover { background: var(--vr-purple-dark); color: var(--vr-yellow); }

/* Podnožje posle žute sekcije */
body.vr-resursi-page .vr-footer { padding-top: calc(32 * var(--u, 1px)); }

/* =====================================================================================
   TABLET I TELEFON (≤1024px)
   ===================================================================================== */
@media (max-width: 1024px) {
	.vr-cl-hero { padding-top: 130px; padding-bottom: 80px; }
	.vr-cl-hero__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.vr-cl-hero__media { max-width: 560px; width: 100%; justify-self: center; }
	.vr-cl-deco--oblak1 { width: 170px; left: -64px; top: calc(100% - 64px); }
	.vr-cl-deco--oblak2 { width: 120px; left: auto; right: -40px; top: 92px; }
	.vr-cl-deco--zvezda { display: none; }
	.vr-cl-deco--zvezda2 { width: 70px; right: -6px; bottom: -30px; }
	.vr-cl-deco--oblak3 { width: 120px; left: auto; right: -46px; top: 14px; }

	.vr-cl-sheet { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 22px 48px; border-radius: 28px; }
	.vr-cl-aside { position: static; gap: 18px; }
	.vr-cl-toc { padding: 0; }
	.vr-cl-toc summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; }
	.vr-cl-toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease; }
	.vr-cl-toc[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
	.vr-cl-toc.is-closing summary::after { transform: rotate(45deg) translate(-2px, -2px); }
	.vr-cl-toc summary:focus-visible { outline: 3px solid var(--vr-purple-dark); outline-offset: 2px; border-radius: 20px; }
	.vr-cl-toc ol { margin: 0; padding: 4px 20px 20px 40px; }
	.vr-cl-share { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
	.vr-cl-share__ok { flex: 0 0 100%; min-height: 0; }
	.vr-cl-cta { padding: 28px 22px; border-radius: 26px; }

	.vr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.vr-cards--1 { grid-template-columns: minmax(0, 420px); }
	.vr-cl-related { padding-block: 100px; }
	.vr-rs-hero { padding-top: 140px; padding-bottom: 72px; }
	.vr-rs-zvezda { width: 52px; left: 5%; top: 100px; }
	.vr-resursi .vr-cl-deco--oblak1 { display: none; }
	.vr-rs-zvezda2 { display: none; }
	.vr-rs-list { padding-bottom: 100px; }
}
@media (max-width: 767px) {
	.vr-cards, .vr-cards--2 { grid-template-columns: minmax(0, 1fr); }
	.vr-rs-list__head { align-items: flex-start; flex-direction: column; }
	.vr-cl-photo { transform: rotate(1.5deg); }
	:is(.vr-prose) .is-style-vr-brojka { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vr-card, .vr-card__more svg, .vr-cl-share__btn { transition: none; }
	.vr-card:hover, .vr-card:focus-visible { transform: none; }
}