/* ==========================================================================
   PRIČA — dizajn sistem v2 (po Knjizi grafičkih standarda)
   Flat kompozicije, oblačići, multiply kolaži, chip labele — bez teških rubova.
   Fontovi: Sink (display, Đ/đ docrtani u woff2) + Barlow (tekst) — strogo po Knjizi standarda.
   ========================================================================== */

/* --- Tokeni ------------------------------------------------------------- */
:root {
	--c-cream:    #ebddcd;
	--c-cream-2:  #fff7ed;
	--c-yellow:   #fcce31;
	--c-yellow-2: #ffe682;
	--c-orange:   #f15a24;
	--c-orange-2: #ffa785;
	--c-purple:   #9a94ff;
	--c-purple-2: #d1cfff;
	--c-blue:     #91daff;
	--c-blue-2:   #c6edf7;
	--c-green:    #6fc07a;
	--c-green-2:  #9bdea4;
	--c-ink:      #17141a;
	--c-plum:     #3d2945;
	--c-muted:    #6f6875;
	--c-line:     rgba(23,20,26,.14);

	/* Strogo po Knjizi standarda: Sink (primarna) + Barlow (sekundarna) */
	--f-display: "Sink", "Barlow", system-ui, sans-serif;
	--f-round:   "Barlow", system-ui, sans-serif; /* polu-display elementi → Barlow Semibold */
	--f-body:    "Barlow", system-ui, -apple-system, sans-serif;

	--container: 1200px;
	--container-wide: 1520px;
	--gutter: clamp(1.1rem, 4vw, 2.5rem);
	--section-y: clamp(4rem, 8vw, 7.5rem);

	--rad-sm: 10px;
	--rad: 18px;
	--rad-lg: 28px;
	--rad-xl: 44px;
	--rad-pill: 999px;

	--shadow-soft: 0 24px 60px -30px rgba(61,41,69,.35);
	--ease-pop: cubic-bezier(.34,1.56,.64,1);

	/* sticker elementi (gumbi + kartice): crni rub + tvrda pop sjena */
	--bw: 2.5px;
	--shadow-pop: 6px 6px 0 var(--c-ink);
	--shadow-pop-sm: 4px 4px 0 var(--c-ink);
}

/* --- Baza ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: clamp(1rem, .55vw + .9rem, 1.13rem);
	line-height: 1.65;
	color: var(--c-ink);
	background: var(--c-cream-2);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
::selection { background: var(--c-yellow); color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 400;
	line-height: .98;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - var(--gutter) * 2, var(--container-wide)); margin-inline: auto; }

.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;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--c-ink); color: #fff; padding: .7rem 1.1rem; }
.skip-link:focus { left: 0; }

/* --- Utility ------------------------------------------------------------- */
.kicker {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--f-body); font-weight: 700;
	text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
	color: var(--c-orange); margin: 0 0 1rem;
}
.lead { font-size: clamp(1.08rem, 1.4vw, 1.3rem); color: #322d37; }
.pp-icon { flex: none; }

/* --- Mark blokovi iza riječi (hero naslov) -------------------------------- */
.mark {
	padding: .05em .28em; border-radius: 10px; display: inline-block;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mark--yellow { background: var(--c-yellow); }
.mark--orange { background: var(--c-orange); color: #fff; }
.mark--purple { background: var(--c-purple); }
.mark--blue   { background: var(--c-blue); }
.mark--green  { background: var(--c-green); }
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.3deg); }

/* --- Chip labele (iz plakata: "Više informacija…" / "Prijavite se!") ------ */
.chip {
	display: inline-block;
	font-family: var(--f-body); font-weight: 700; font-size: .95rem; line-height: 1.25;
	padding: .55em 1em; border-radius: 6px;
	text-decoration: none; cursor: pointer; border: 0;
	transition: transform .16s var(--ease-pop), filter .16s ease;
}
.chip:hover { transform: translateY(-2px) rotate(-.5deg); filter: brightness(1.06); }
.chip:active { transform: translateY(0); }
.chip--orange { background: var(--c-orange); color: #fff; }
.chip--ink    { background: var(--c-ink); color: #fff; }
.chip--yellow { background: var(--c-yellow); color: var(--c-ink); }
.chip--purple { background: var(--c-purple); color: var(--c-ink); }

/* Gumbi — sticker stil: zaobljeni pill, crni rub, pop sjena, bouncy hover
   (rub gumba je dio dizajna — zabrana "crta" vrijedi samo za separatore sekcija) */
.btn {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--f-round); font-weight: 600; font-size: 1rem; line-height: 1;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	padding: .9rem 1.5rem; border-radius: var(--rad-pill);
	background: var(--c-ink); color: #fff; border: var(--bw) solid var(--c-ink);
	box-shadow: var(--shadow-pop-sm);
	transition: transform .16s var(--ease-pop), box-shadow .16s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--c-ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--c-ink); }
.btn--lg { padding: 1.05rem 1.8rem; font-size: 1.1rem; }
.btn--ink { background: var(--c-ink); color: #fff; }
.btn--orange { background: var(--c-orange); border-color: var(--c-ink); }
.btn--yellow { background: var(--c-yellow); color: var(--c-ink); }
.btn--purple { background: var(--c-purple); color: var(--c-ink); }
.btn--outline { background: transparent; color: var(--c-ink); }
.btn--outline:hover { background: var(--c-yellow); }
.btn .pp-icon { transition: transform .18s ease; }
.btn:hover .pp-icon { transform: translateX(3px); }

/* --- Bubble highlight iza riječi (zeleni plakat) -------------------------- */
.bmark { position: relative; display: inline-block; padding: .06em .32em; z-index: 1; white-space: nowrap; }
.bmark--yellow { background: var(--c-yellow); }
.bmark--orange { background: var(--c-orange); color: #fff; }
.bmark--purple { background: var(--c-purple); }
.bmark--blue   { background: var(--c-blue); }
.bmark--green  { background: var(--c-green); }
.bmark--bubble { border-radius: .5em; }
.bmark--bubble::after { /* repić dolje-lijevo */
	content: ""; position: absolute; left: .55em; bottom: -.32em; width: .55em; height: .42em;
	background: inherit; border-radius: 0 0 .5em 0; transform: skewX(-16deg) rotate(8deg); z-index: -1;
}
.bmark--blob { border-radius: 48% 52% 55% 45% / 58% 50% 50% 42%; }
.bmark--blob::before, .bmark--blob::after {
	content: ""; position: absolute; background: inherit; border-radius: 50%; z-index: -1;
}
.bmark--blob::before { width: .34em; height: .34em; right: -.14em; top: -.14em; }
.bmark--blob::after  { width: .18em; height: .18em; right: -.3em; top: -.32em; }
.bmark--tag { border-radius: .35em; }
.bmark--tag::after {
	content: ""; position: absolute; right: .4em; top: -.26em; width: .45em; height: .35em;
	background: inherit; border-radius: 0 .4em 0 0; transform: skewX(14deg); z-index: -1;
}

/* --- Reveal -------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].in-view {
	opacity: 1; transform: none;
	transition: opacity .6s ease var(--d, 0s), transform .65s var(--ease-pop) var(--d, 0s);
}
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* --- Header --------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	/* blur živi na ::before — backdrop-filter na headeru bi slomio fixed overlay meni */
	background: transparent;
	transition: box-shadow .2s ease;
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: color-mix(in srgb, var(--c-cream-2) 92%, transparent);
	backdrop-filter: blur(10px);
}
.site-header.is-scrolled { box-shadow: 0 12px 34px -22px rgba(61,41,69,.45); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 96px; }
.site-logo { display: inline-flex; transition: transform .2s var(--ease-pop); }
.site-logo:hover { transform: rotate(-2deg) scale(1.04); }
.site-logo__img { height: 72px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.primary-nav__list { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.primary-nav__list a {
	font-family: var(--f-display); font-weight: 400; font-size: 1.06rem;
	text-transform: uppercase; letter-spacing: .035em; text-decoration: none;
	padding: .45rem .2rem; position: relative; white-space: nowrap;
}
.primary-nav__list a::after {
	content: ""; position: absolute; left: .2rem; right: 100%; bottom: 0; height: 4px;
	background: var(--c-orange); border-radius: 4px; transition: right .22s var(--ease-pop);
}
.primary-nav__list a:hover::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after { right: .2rem; }
.primary-nav__cta { font-size: .95rem; }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; z-index: 120; }
.nav-toggle__bars { display: block; width: 28px; }
.nav-toggle__bars span { display: block; height: 3.5px; background: var(--c-ink); border-radius: 4px; margin: 5px 0; transition: transform .22s ease, opacity .22s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* --- HERO (naslov sa šarenim mark blokovima) -------------------------------- */
.hero { position: relative; overflow: clip; padding-block: clamp(3.5rem, 8vw, 7rem); }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(1.2deg); } }

.hero__inner { position: relative; z-index: 2; max-width: 62rem; }
.hero__kicker { animation: rise .6s var(--ease-pop) both; }
.hero__title {
	font-size: clamp(3rem, 8.6vw, 7.2rem);
	line-height: .96; margin-bottom: 1.6rem;
}
.hero__line { display: block; animation: rise .7s var(--ease-pop) var(--d, 0s) both; }
.hero__lead { font-size: clamp(1.12rem, 1.6vw, 1.45rem); max-width: 42rem; margin-bottom: 2.2rem; animation: rise .7s var(--ease-pop) var(--d, 0s) both; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; animation: rise .7s var(--ease-pop) var(--d, 0s) both; }

.hero__blob { position: absolute; z-index: 1; pointer-events: none; }
.hero__blob--1 { width: 15vw; max-width: 210px; top: 6%; right: 24%; color: var(--c-blue-2); animation: floaty 9s ease-in-out infinite; }
.hero__blob--2 { width: 26vw; max-width: 350px; bottom: -14%; right: -4%; color: var(--c-yellow-2); animation: floaty 11s ease-in-out 1.2s infinite reverse; }

@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* --- Marquee --------------------------------------------------------------- */
.marquee {
	background: var(--c-ink);
	transform: rotate(-1.1deg) scale(1.02);
	margin-block: -.4rem; position: relative; z-index: 3;
	overflow: clip;
}
.marquee__track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__seq { display: flex; align-items: center; }
.marquee__item {
	font-family: var(--f-display); text-transform: uppercase;
	font-size: clamp(1.4rem, 2.6vw, 2.1rem); padding: .6em .55em; white-space: nowrap;
}
/* boje stavki cikliraju kao na plakatima */
.marquee__seq .marquee__item:nth-of-type(6n+1) { color: var(--c-yellow); }
.marquee__seq .marquee__item:nth-of-type(6n+2) { color: var(--c-green); }
.marquee__seq .marquee__item:nth-of-type(6n+3) { color: var(--c-orange-2); }
.marquee__seq .marquee__item:nth-of-type(6n+4) { color: var(--c-blue); }
.marquee__seq .marquee__item:nth-of-type(6n+5) { color: var(--c-purple); }
.marquee__seq .marquee__item:nth-of-type(6n+6) { color: var(--c-cream); }
.marquee__star { color: var(--c-orange); font-size: 1.1em; }
/* 4 kopije niza u tracku → pomak za točno jedan niz = −25% (bez rupe na širokim ekranima) */
@keyframes marquee { to { transform: translateX(-25%); } }

/* --- Sekcije ---------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--cream { background: var(--c-cream); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3.4rem); }
.section-head--split {
	max-width: none; display: flex; flex-wrap: wrap;
	align-items: flex-end; justify-content: space-between; gap: 1.4rem;
}
.section-head--split h2 { margin-bottom: 0; }

/* --- Foto-kolaž (photo-bubble template-part) ---------------------------------- */
.photo-bubble { width: 100%; height: auto; overflow: visible; }
.photo-bubble__img { filter: grayscale(1) contrast(1.06) brightness(1.04); }

/* --- O projektu + foto kolaž ------------------------------------------------ */
.about__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.about__title { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; }
.about__title .bmark { font-size: .94em; }
.about__kpis { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 2.2rem); margin: 1.6rem 0 1.8rem; }
.kpi { display: flex; flex-direction: column; }
.kpi__num { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--c-orange); }
.kpi__label { font-weight: 600; font-size: .92rem; color: var(--c-muted); }

/* --- Program oblačići -------------------------------------------------------- */
.programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1.6rem 1.2rem; }
.program-card {
	position: relative; display: flex; flex-direction: column; justify-content: space-between;
	min-height: 165px; padding: 1.15rem 1.25rem; text-decoration: none; color: var(--c-ink);
	border: var(--bw) solid var(--c-ink);
	border-radius: var(--rad-lg) var(--rad-lg) var(--rad-lg) 8px;
	box-shadow: var(--shadow-pop-sm);
	transition: transform .2s var(--ease-pop), box-shadow .2s ease;
}
.program-card:hover { transform: translate(-3px,-5px) rotate(-1.4deg); box-shadow: 8px 9px 0 var(--c-ink); }
.program-card::after { /* repić govornog oblačića */
	content: ""; position: absolute; left: 24px; bottom: -15px; width: 26px; height: 26px;
	background: inherit; border-right: var(--bw) solid var(--c-ink); border-bottom: var(--bw) solid var(--c-ink);
	border-radius: 0 0 6px 0; transform: rotate(41deg) skewX(-9deg);
}
.program-card--dots::after { /* varijanta: misaoni oblačić s točkicama */
	width: 15px; height: 15px; border: var(--bw) solid var(--c-ink); border-radius: 50%; bottom: -11px; transform: none;
}
.program-card--dots::before {
	content: ""; position: absolute; left: 52px; bottom: -20px; width: 9px; height: 9px;
	border-radius: 50%; background: inherit; border: var(--bw) solid var(--c-ink); box-sizing: border-box;
}
.program-card__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1; }
.program-card__num { font-weight: 700; opacity: .45; font-size: .85rem; }
.program-card.yellow { background: var(--c-yellow); }
.program-card.orange { background: var(--c-orange); color: #fff; }
.program-card.purple { background: var(--c-purple); }
.program-card.blue   { background: var(--c-blue); }
.program-card.green  { background: var(--c-green); }
.program-card.cream  { background: var(--c-cream); }

/* --- Kartice novosti ---------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.card {
	display: flex; flex-direction: column; background: #fff;
	border: var(--bw) solid var(--c-ink); border-radius: var(--rad-lg); overflow: hidden;
	box-shadow: var(--shadow-pop-sm);
	transition: transform .2s var(--ease-pop), box-shadow .2s ease;
}
.card:hover { transform: translate(-2px,-5px) rotate(-.5deg); box-shadow: 7px 9px 0 var(--c-ink); }
.card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--c-purple-2); display: grid; place-items: center; position: relative; }
.card__media img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: transform .4s ease, filter .4s ease;
}
.card:hover .card__media img { transform: scale(1.04); filter: grayscale(0) contrast(1); }
.card__media::after { /* pastelni overlay preko c/b fotke */
	content: ""; position: absolute; inset: 0; background: var(--c-purple); mix-blend-mode: multiply; opacity: .28;
	transition: opacity .4s ease; pointer-events: none;
}
.card:hover .card__media::after { opacity: 0; }
.card__media-fallback { color: var(--c-purple); }
.card__body { padding: 1.25rem 1.35rem 1.45rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card__meta { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-orange); }
.card__title { font-size: 1.28rem; margin: 0; text-transform: none; font-family: var(--f-round); font-weight: 600; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--c-orange); }
.card__excerpt { color: #3a353f; margin: 0; }
.card__more { margin-top: auto; font-family: var(--f-round); font-weight: 600; color: var(--c-orange); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.card__more .pp-icon { transition: transform .18s ease; }
.card__more:hover .pp-icon { transform: translateX(3px); }

/* --- Page head (mini plakat) ------------------------------------------------------ */
.page-head { position: relative; overflow: clip; padding-block: clamp(4rem, 7.5vw, 6.5rem); }
.page-head.cream  { background: var(--c-cream); }
.page-head.yellow { background: var(--c-yellow); }
.page-head.orange { background: var(--c-orange); color: #fff; }
.page-head.purple { background: var(--c-purple); }
.page-head.blue   { background: var(--c-blue); }
.page-head.green  { background: var(--c-green); }

/* line-art dekoracija (oblici iz loga) */
.page-head__art {
	position: absolute; right: -6%; top: 50%; translate: 0 -50%;
	width: min(52vw, 700px); z-index: 1; pointer-events: none;
	animation: floaty 12s ease-in-out infinite;
}
.page-head__art-a { stroke: rgba(255,255,255,.75); }
.page-head__art-b { stroke: rgba(23,20,26,.28); }
.page-head__art-c { fill: rgba(255,255,255,.32); }
.page-head__art-dot { fill: rgba(23,20,26,.22); }
.page-head.cream .page-head__art-a { stroke: var(--c-orange); opacity: .6; }
.page-head.cream .page-head__art-b { stroke: var(--c-purple); opacity: .7; }
.page-head.cream .page-head__art-c { fill: var(--c-yellow); opacity: .55; }
.page-head.orange .page-head__art-b { stroke: rgba(255,255,255,.4); }
.page-head.orange .page-head__art-dot { fill: rgba(255,255,255,.35); }

/* max-width = --container: lijevi rub poravnat sa sadržajem ispod */
.page-head__inner { position: relative; z-index: 2; max-width: var(--container); }

/* naslov u velikom govornom oblačiću (produžetak koncepta loga) */
.page-head__bubble {
	position: relative; display: inline-block;
	background: var(--c-cream-2);
	border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 10px;
	padding: clamp(1rem, 2.4vw, 1.9rem) clamp(1.5rem, 3.5vw, 3rem);
	transform: rotate(-1.8deg);
	margin: .5rem 0 2.2rem;
}
.page-head__bubble::after { /* repić */
	content: ""; position: absolute; left: 40px; bottom: -16px; width: 32px; height: 30px;
	background: inherit; border-radius: 0 0 22px 2px; transform: skewX(-14deg) rotate(10deg);
}
.page-head__dot { position: absolute; background: var(--c-cream-2); border-radius: 50%; }
.page-head__dot--1 { width: 15px; height: 15px; left: 96px; bottom: -30px; }
.page-head__dot--2 { width: 8px; height: 8px; left: 120px; bottom: -42px; }
.page-head__title { margin: 0; color: var(--c-ink); font-size: clamp(2.7rem, 6.2vw, 5.2rem); line-height: 1; }
.page-head__lead { font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 40rem; margin: 0; font-weight: 500; }
.page-head.orange .page-head__lead { color: #fff; }

.breadcrumbs { font-size: .85rem; font-weight: 700; margin-bottom: .6rem; opacity: .8; }
.page-head.orange .breadcrumbs { color: #fff; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* --- Aktivnosti: poster redovi (kao "Radionice stripa" plakat) -------------------- */
.act-intro { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.act-intro__lead { max-width: 52rem; }
.act-list { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.act-poster {
	display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
	background: var(--c-ink); color: #efe9f2;
	border-radius: var(--rad-xl);
	padding: clamp(1.6rem, 3.5vw, 3.2rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	scroll-margin-top: 120px;
	overflow: clip;
}
.act-poster--flip .act-poster__media { order: 2; }
.act-poster__media { min-width: 0; }
.act-poster__body { min-width: 0; }
.act-poster__num {
	font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--c-orange-2); margin: 0 0 .8rem;
}
.act-poster__title {
	color: var(--act-c, var(--c-green));
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	line-height: .95; margin: 0 0 .35rem;
}
.act-poster__sub {
	font-family: var(--f-display); text-transform: uppercase;
	color: var(--c-orange); font-size: clamp(1rem, 1.6vw, 1.3rem);
	margin: 0 0 1.1rem; letter-spacing: .02em;
}
.act-poster__desc { color: #d8d2dc; margin: 0 0 1.2rem; max-width: 34rem; }
.act-poster__contact { margin: 0; font-weight: 600; color: #b9b2bf; }
.act-poster__contact a { color: var(--c-yellow); text-decoration: underline; text-decoration-color: var(--c-yellow); text-underline-offset: 3px; }
.act-poster__contact a:hover { color: var(--c-yellow-2); }
.act-outro { text-align: center; }
.act-outro__inner { max-width: 44rem; }
.act-outro__title { font-size: clamp(2rem, 4vw, 3.2rem); }
.act-outro__chips { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.2rem; }

/* --- Sadržaj --------------------------------------------------------------------- */
.entry { padding-block: var(--section-y); }
.entry__content { max-width: 46rem; }
.entry__content.wide { max-width: var(--container); }
.entry__content > * + * { margin-top: 1.1em; }
.entry__content > :first-child { margin-top: 0; }
/* prvi paragraf sadržaja automatski dobiva lead stil — bez class="lead" u editoru */
.entry__content > p:first-child { font-size: clamp(1.08rem, 1.4vw, 1.3rem); color: #322d37; }
.entry__content h2 { margin-top: 1.9em; font-size: clamp(1.7rem, 3vw, 2.3rem); position: relative; padding-left: .95em; }
.entry__content h2::before { /* blob oznaka u boji (cikliraju) */
	content: ""; position: absolute; left: 0; top: .16em; width: .58em; height: .52em;
	background: var(--c-orange); border-radius: 48% 52% 55% 45% / 58% 50% 50% 42%;
}
@media (min-width: 900px) {
	/* blob visi u lijevoj margini — tekst naslova poravnat s paragrafima */
	.entry__content h2 { padding-left: 0; }
	.entry__content h2::before { left: -.95em; }
}
.entry__content h2:nth-of-type(4n+2)::before { background: var(--c-purple); }
.entry__content h2:nth-of-type(4n+3)::before { background: var(--c-green); }
.entry__content h2:nth-of-type(4n)::before   { background: var(--c-blue); }
.entry__content h3 { margin-top: 1.4em; }
.entry__content img { border-radius: var(--rad); }
.entry__content a { font-weight: 600; }
.entry__content blockquote {
	margin: 1.6em 0; padding: 1.2em 1.5em; background: var(--c-purple-2);
	border-radius: var(--rad);
	font-family: var(--f-round); font-weight: 500; font-size: 1.15rem;
}
.entry__content ul { list-style: none; padding-left: .2em; }
.entry__content ul li { position: relative; padding-left: 1.5em; margin-bottom: .4em; }
.entry__content ul li::before {
	content: ""; position: absolute; left: 0; top: .48em; width: .55em; height: .55em;
	border-radius: 50%; background: var(--c-purple);
}
.entry__content ul li:nth-child(3n+2)::before { background: var(--c-orange); }
.entry__content ul li:nth-child(3n)::before   { background: var(--c-green); }

.project-table {
	width: 100%; border-collapse: collapse; margin: 1.5em 0; background: #fff;
	border: var(--bw) solid var(--c-ink);
	border-radius: var(--rad); overflow: hidden; box-shadow: var(--shadow-pop-sm);
}
.project-table th, .project-table td { text-align: left; padding: .9rem 1.15rem; }
.project-table th { width: 38%; font-weight: 700; background: var(--c-cream-2); }
.project-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-cream-2) 55%, #fff); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
.feature {
	background: #fff; border: var(--bw) solid var(--c-ink); border-radius: var(--rad-lg);
	box-shadow: var(--shadow-pop-sm);
	padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .6rem;
	transition: transform .2s var(--ease-pop), box-shadow .2s ease;
}
.feature:hover { transform: translate(-2px,-4px); box-shadow: 6px 7px 0 var(--c-ink); }
.feature h3 { margin: 0; font-family: var(--f-round); font-weight: 600; text-transform: none; }
.feature__logo { height: 60px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; margin-bottom: .3rem; align-self: flex-start; border-radius: 0 !important; /* logotipi se nikad ne zaobljuju (pregazi .entry__content img) */ }
.feature__meta { margin: 0; font-size: .85rem; font-weight: 700; }
.feature__meta .bmark { font-size: .82rem; }

/* --- Galerija ---------------------------------------------------------------------- */
.gallery, .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.gallery-item, .wp-block-image { margin: 0; }
.gallery-item img, .wp-block-gallery img { border-radius: var(--rad); aspect-ratio: 1; object-fit: cover; width: 100%; }

/* --- Single ------------------------------------------------------------------------- */
.single-hero__media { aspect-ratio: 21/9; overflow: hidden; }
.single-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.post-nav__inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* --- CTA (narančasti oblačić na breskvi) --------------------------------------------- */
.cta {
	position: relative; overflow: clip;
	background: var(--c-orange-2);
	padding-block: clamp(4.5rem, 9vw, 8rem);
	text-align: center;
}
.cta__bubble {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	width: min(120vw, 1050px); transform: translate(-50%, -52%);
	pointer-events: none;
}
.cta__inner { position: relative; z-index: 2; max-width: 44rem; }
.cta__title { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: .4rem; }
.cta__text { color: #ffe4d4; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; margin-bottom: 1.8rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* --- EU band (OBVEZNO — ESF+ vidljivost) ---------------------------------------------- */
.eu-band { background: #fff; }
.eu-band__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding-block: 1.7rem; }
.eu-band__emblem { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); flex: none; }
/* EU amblem mora biti barem jednako istaknut kao ostali logotipi — lockup ≥ ESF+ logo */
.eu-band__lockup { width: clamp(180px, 18vw, 240px); height: auto; }
.eu-band__esf { width: clamp(150px, 15vw, 200px); height: auto; }
.eu-band__statement { font-family: var(--f-round); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin: 0 0 .25rem; }
.eu-band__note { font-size: .92rem; color: var(--c-muted); margin: 0; }
.eu-inline { display: flex; align-items: center; gap: .8rem; }
.eu-inline__flag { width: 60px; border-radius: 3px; }
.eu-inline__text { font-size: .92rem; margin: 0; color: var(--c-muted); }

/* Plutajuća EU oznaka — fiksno desno dolje, iznad sadržaja (ESF+ vidljivost u svakom trenutku).
   Skriva se kad je full-width .eu-band u viewportu — vizualno se "raširi" u traku. */
.eu-float {
	position: fixed; right: clamp(.8rem, 2vw, 1.4rem); bottom: clamp(.8rem, 2vw, 1.4rem);
	z-index: 105; /* iznad headera (100), ispod mobilnog overlay menija (110) */
	display: flex; align-items: center; gap: .6rem;
	background: #fff; padding: .55rem .8rem; border-radius: 12px;
	box-shadow: 0 12px 32px -12px rgba(23,20,26,.4);
	pointer-events: none; /* čisto informativno — ne blokira klikove ispod */
	transition: opacity .3s ease, transform .3s ease;
}
.eu-float__lockup { width: 160px; height: auto; display: block; }
.eu-float.is-hidden { opacity: 0; transform: translateY(14px); }
@media (max-width: 560px) {
	.eu-float { padding: .45rem .6rem; }
	.eu-float__lockup { width: 128px; }
}
@media print { .eu-float { display: none; } }

/* --- Footer ----------------------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: #f4f0ea; overflow: clip; }
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.8rem, 5vw, 4.2rem) 1rem; }
.site-footer__logo-img { height: 58px; width: auto; }
.site-footer a { color: #f4f0ea; }
.site-footer__slogan { margin-top: 1rem; max-width: 26ch; color: #c7c0cb; }
.site-footer__heading { font-size: 1rem; letter-spacing: .08em; color: var(--c-yellow); margin: 0 0 .9rem; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__menu a { text-decoration: none; }
.site-footer__menu a:hover { color: var(--c-yellow); }
.site-footer__wordmark {
	font-family: var(--f-display); text-transform: uppercase;
	font-size: clamp(6rem, 22vw, 22rem); line-height: .8; text-align: center;
	color: transparent; -webkit-text-stroke: 2px rgba(154,148,255,.4); /* lila kao naslovnica knjige standarda */
	user-select: none; margin-top: 1rem; translate: 0 12%;
}
.site-footer__wordmark-dot { color: var(--c-orange); -webkit-text-stroke: 0; }
.site-footer__bar { position: relative; z-index: 2; background: var(--c-ink); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-block: 1.1rem; font-size: .85rem; color: #b8b1bd; }
.site-footer__bar p { margin: 0; }
.site-footer__credit { display: inline-flex; align-items: center; opacity: .6; transition: opacity .2s; }
.site-footer__credit:hover { opacity: 1; }
.site-footer__credit img { height: 16px; width: auto; display: block; filter: brightness(0) invert(1); }

/* --- Paginacija --------------------------------------------------------------------------- */
.pagination { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 2.6rem; }
.pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .6rem;
	background: #fff; border: var(--bw) solid var(--c-ink); border-radius: var(--rad-pill);
	text-decoration: none; font-weight: 700; box-shadow: var(--shadow-pop-sm);
}
.pagination .current { background: var(--c-ink); color: #fff; }
.pagination a:hover { background: var(--c-yellow); }

/* --- Responsive ----------------------------------------------------------------------------- */
@media (max-width: 1279px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav {
		position: fixed; inset: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 110;
		flex-direction: column; align-items: flex-start; justify-content: center; gap: 2rem;
		background: var(--c-cream-2);
		padding: 6rem var(--gutter) 3rem;
		overflow-y: auto;
		visibility: hidden;
		transform: translateY(-102%); transition: transform .32s var(--ease-pop), visibility 0s .32s;
	}
	.primary-nav.is-open { visibility: visible; transform: none; transition: transform .32s var(--ease-pop), visibility 0s; }
	.primary-nav__list { flex-direction: column; align-items: flex-start; gap: .2rem; }
	.primary-nav__list a {
		font-family: var(--f-display); text-transform: uppercase;
		font-size: clamp(1.7rem, 6.5vw, 3rem); padding: .12em 0; letter-spacing: .01em;
		white-space: normal;
	}
	.primary-nav__list a::after { height: 6px; bottom: .1em; }
	.primary-nav__cta { font-size: 1.05rem; }
}

@media (max-width: 1020px) {
	.hero__grid { grid-template-columns: 1fr; align-items: start; }
	.hero__lineart { right: -16%; top: 0; width: 68vw; opacity: .5; }
	.hero__side { margin-top: .5rem; }
	.hero__programs { display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
	.about__grid { grid-template-columns: 1fr; }
	.about__media { max-width: 540px; margin-inline: auto; }
}

@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
	.eu-band__inner { flex-direction: column; text-align: center; }
	.marquee { transform: rotate(0deg); margin-block: 0; }
	.act-poster { grid-template-columns: 1fr; }
	.act-poster--flip .act-poster__media { order: 0; }
	.act-poster__media { max-width: 420px; margin-inline: auto; }
	.page-head__art { right: -30%; width: 90vw; opacity: .55; }
}
@media (max-width: 560px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.hero__row--indent { padding-left: 0; }
}

/* --- Reduced motion --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}