/* ==========================================================================
   HSM 2026 — stilovi teme. Jedna datoteka, bez preprocesora.
   Identitet: sve rezano pod 45° (geometrija loga), muzejska crvena #E4002B.
   ========================================================================== */

/* ---------- 1. Tokeni ---------- */
:root {
	--hsm-red: #E4002B;
	--hsm-red-dark: #B80022;
	--hsm-orange: #EC9840;
	--hsm-purple: #951B81;
	--hsm-blue: #007DC2;
	--hsm-green: #008D37;
	--hsm-gray: #66686D;
	--hsm-gray-2: #9A9CA1;
	--hsm-light: #F1F1F1;
	--hsm-light-2: #F8F8F8;
	--hsm-light-3: #ECEDEF;   /* traka kalendara + sekcija Izložbe (stapaju se u jedan blok) */
	--hsm-line: #E3E4E6;
	--hsm-ink: #111214;
	--hsm-ink-2: #1C1D21;
	--hsm-navy: #0C111D;      /* mega-menu: tamno, vuče na plavu */
	--hsm-navy-2: #141B2B;
	--hsm-white: #fff;

	--font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wrap: 1280px;
	--pad: clamp(16px, 4vw, 40px);
	--cut: 40px;              /* standardni odrezani kut (kartice, kutije, pločice) */
	--cut-in: calc(var(--cut) - .41px); /* isti kut na bijeloj ispuni uvučenoj 1 px */
	--hsm-border: #D9DADE;    /* obrub kartica: jasan, ali tanak */
	--cut-l: 56px;            /* veliki kut (hero okvir, slike) */
	--header-h: 80px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--shadow: 0 10px 30px rgba(17, 18, 20, .08);
}

/* ---------- 2. Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* sidra iz heroja/izbornika: odmak za sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--hsm-ink);
	background: var(--hsm-white);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--hsm-red); outline-offset: 3px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.hsm-sr, .hsm-skip:not(:focus) {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hsm-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; background: var(--hsm-red); color: #fff; }

.hsm-wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }

/* ---------- 3. Tipografija ---------- */
.hsm-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hsm-gray);
}
.hsm-eyebrow::before {
	content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px;
	background: currentColor; transform: rotate(45deg);
}
.hsm-eyebrow--red { color: var(--hsm-red); }
.hsm-eyebrow--blue { color: var(--hsm-blue); }
.hsm-eyebrow--purple { color: #C94DB3; }
.hsm-eyebrow--orange { color: #D97E1E; }
.hsm-eyebrow--green { color: var(--hsm-green); }
.hsm-btn--green { background: var(--hsm-green); color: #fff; }

.hsm-h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.hsm-h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-top: 12px; }
.hsm-h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.25; }
.hsm-p { color: var(--hsm-gray); font-size: 16px; line-height: 1.7; margin-top: 16px; }
.hsm-p--max { max-width: 62ch; }
.hsm-lead { font-size: 18px; color: var(--hsm-gray); margin-top: 16px; }

/* ---------- 4. Gumbi i linkovi (odrezani kut 45°) ---------- */
.hsm-btn {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 14px 22px; min-height: 52px;
	font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	/* rez 45° samo dolje desno (kao kartice), sve ostalo ravno i zatvoreno */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
	position: relative; isolation: isolate; overflow: hidden;
	transition: color .3s var(--ease), background-color .3s var(--ease);
}
.hsm-btn::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var(--hsm-ink);
	/* -150 %: iskošeni sloj ni na uskom gumbu ne viri u lijevi kut (ostatak skewa = pola visine) */
	transform: translateX(-150%) skewX(-45deg); transform-origin: left;
	transition: transform .45s var(--ease);
}
.hsm-btn:hover::before, .hsm-btn:focus-visible::before { transform: translateX(0) skewX(0); }
.hsm-btn--red { background: var(--hsm-red); color: #fff; }
.hsm-btn--ghost { background: var(--hsm-ink); color: var(--hsm-ink); }
/* obrub 2 px koji prati i dijagonalu: podloga = boja obruba, bijela ispuna uvučena 2 px s istim rezom
   (kut 16 px na vanjskom rubu = 14.8 px na unutarnjem, jer je linija pod 45° udaljena 2 px) */
.hsm-btn--ghost::after {
	content: ''; position: absolute; inset: 2px; z-index: -2; background: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14.8px), calc(100% - 14.8px) 100%, 0 100%);
}
.hsm-btn--ghost:hover, .hsm-btn--ghost:focus-visible { color: #fff; }
.hsm-btn .hsm-ikona { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.hsm-btn:hover .hsm-ikona { transform: translate(4px, 0); }

.hsm-link {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hsm-red);
	padding-bottom: 4px; position: relative;
}
.hsm-link::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
	background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform .35s var(--ease);
}
.hsm-link:hover::after { transform: scaleX(1); }
.hsm-link .hsm-ikona { width: 18px; height: 18px; }
.hsm-link--white { color: #fff; }
.hsm-link--green { color: var(--hsm-green); } /* iza općeg .hsm-link, inače ga crvena pregazi */

.hsm-ikona { width: 24px; height: 24px; flex: none; }
.hsm-ikona--s { width: 14px; height: 14px; margin-left: 6px; }

.hsm-tag {
	display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	background: var(--hsm-light); color: var(--hsm-gray);
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.hsm-tag--video { position: absolute; left: 16px; bottom: 16px; z-index: 2; background: var(--c, var(--hsm-red)); color: #fff; }

/* odrezani kutovi za slike/blokove */
.hsm-cut { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.hsm-cut--tl { clip-path: polygon(var(--cut-l) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-l)); }
.hsm-cut--br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }

/* ---------- 5. Header ---------- */
.hsm-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	transition: box-shadow .3s var(--ease);
}
.hsm-header.is-scrolled { box-shadow: var(--shadow); }
.hsm-header__in {
	width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto;
	height: var(--header-h); display: flex; align-items: center; gap: 24px;
}
.hsm-header__linija { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; stroke: var(--hsm-line); }
.hsm-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.hsm-logo__znak { width: 72px; height: auto; }
.hsm-logo__tekst {
	display: flex; flex-direction: column; font-size: 11px; line-height: 1.15; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--hsm-ink);
}

.hsm-nav { flex: 1; display: flex; justify-content: center; }
.hsm-nav__list { display: flex; gap: 4px; }
.hsm-nav__link {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
	font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hsm-ink);
	position: relative;
}
.hsm-nav__link::after {
	content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
	background: var(--hsm-red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.hsm-nav__item:hover > .hsm-nav__link::after,
.hsm-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.hsm-nav__chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.hsm-nav__link[aria-expanded="true"] .hsm-nav__chev { transform: rotate(180deg); }

.hsm-header__tools { display: flex; align-items: center; gap: 18px; flex: none; }
.hsm-lang { display: flex; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--hsm-gray); }
.hsm-lang a[aria-current] { color: var(--hsm-ink); }
.hsm-header__tickets { min-height: 44px; padding: 10px 18px; }

.hsm-burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.hsm-burger__l { display: block; width: 24px; height: 2px; background: var(--hsm-ink); transition: transform .3s var(--ease), opacity .2s; }
.hsm-burger[aria-expanded="true"] .hsm-burger__l:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hsm-burger[aria-expanded="true"] .hsm-burger__l:nth-child(2) { opacity: 0; }
.hsm-burger[aria-expanded="true"] .hsm-burger__l:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Mega-menu (desktop) ---------- */
.hsm-backdrop {
	position: fixed; inset: 0; z-index: 50;
	background: rgba(17, 18, 20, .38);
	backdrop-filter: blur(14px) saturate(.8); -webkit-backdrop-filter: blur(14px) saturate(.8);
	opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.hsm-backdrop.is-on { opacity: 1; pointer-events: auto; }

.hsm-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	/* prozirno „staklo": tamnoplava nijansa + blur onoga iza panela */
	background: linear-gradient(135deg, rgba(20, 27, 43, .72), rgba(12, 17, 29, .78) 60%); color: #fff;
	backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, 0 100%);
	box-shadow: 0 30px 60px rgba(17, 18, 20, .18);
}
.hsm-mega::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hsm-red); }
.hsm-mega__in {
	width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto;
	display: grid; grid-template-columns: 1.3fr 1fr 1fr 320px; gap: 40px;
	padding: 40px 0 56px;
}
.hsm-mega .hsm-eyebrow { color: var(--hsm-gray-2); }
.hsm-mega__opis { margin: 14px 0 20px; font-size: 20px; font-weight: 600; line-height: 1.35; max-width: 20ch; color: #fff; }
.hsm-mega__col { padding-top: 6px; border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 24px; }
.hsm-mega__col a {
	display: flex; align-items: center; padding: 9px 0 9px 18px; font-size: 15px; font-weight: 600; position: relative;
	transition: color .2s; color: rgba(255, 255, 255, .88);
}
.hsm-mega__col a::before {
	content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px;
	border: 2px solid var(--hsm-red); transform: rotate(45deg) scale(.6); opacity: 0; transition: transform .25s var(--ease), opacity .2s;
}
.hsm-mega__col a:hover { color: #fff; }
.hsm-mega__col a:hover::before { opacity: 1; transform: rotate(45deg) scale(1); }
.hsm-mega__slika { display: block; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.hsm-mega__slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hsm-mega__slika:hover img { transform: scale(1.04); }

/* ---------- 7. Ladica (mobitel) ---------- */
.hsm-drawer {
	position: fixed; inset: 0; z-index: 70;
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	overflow: auto;
}
.hsm-drawer__in { padding: 16px var(--pad) 40px; min-height: 100%; display: flex; flex-direction: column; }
.hsm-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.hsm-drawer__close { width: 44px; height: 44px; display: grid; place-items: center; }
.hsm-drawer__list { margin-top: 20px; border-top: 1px solid var(--hsm-line); }
.hsm-drawer__list > li { border-bottom: 1px solid var(--hsm-line); }
.hsm-drawer__link {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0;
	font-size: 18px; font-weight: 700; text-align: left;
}
.hsm-drawer__link .hsm-ikona { transition: transform .3s var(--ease); }
.hsm-drawer__link[aria-expanded="true"] .hsm-ikona { transform: rotate(45deg); }
.hsm-drawer__sub { padding: 0 0 12px 16px; border-left: 2px solid var(--hsm-red); margin-bottom: 12px; }
.hsm-drawer__sub a { display: block; padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--hsm-gray); }
.hsm-drawer__foot { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 14px; color: var(--hsm-gray); }
.hsm-drawer__foot p { width: 100%; }

/* ---------- 8. Hero ---------- */
.hsm-hero {
	position: relative; overflow: hidden;
	background: #fff;
	background-image: radial-gradient(circle at 85% 20%, rgba(228, 0, 43, .05), transparent 45%);
}
.hsm-hero__linije { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hsm-linija { fill: none; stroke: var(--hsm-red); stroke-width: 6; vector-effect: non-scaling-stroke; }
.hsm-linija--tanka { stroke-width: 2; opacity: .5; }

.hsm-hero__in {
	display: grid; grid-template-columns: 45fr 55fr; gap: clamp(24px, 5vw, 72px); align-items: center;
	min-height: calc(100svh - var(--header-h) - 150px);
	padding: clamp(32px, 6vw, 72px) 0 clamp(24px, 4vw, 48px);
	position: relative;
}
.hsm-hero__nad { color: var(--hsm-red); }
.hsm-hero__slogan {
	font-size: clamp(36px, 4.3vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -.025em;
	margin-top: 18px; text-wrap: balance;
}
.hsm-hero__slogan .line { display: block; overflow: hidden; }
.hsm-hero__pod { margin-top: 22px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--hsm-gray); max-width: 46ch; }
.hsm-hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

.hsm-hero__scena { position: relative; }
.hsm-hero__okvir {
	position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hsm-ink);
	clip-path: polygon(var(--cut-l) 0, 100% 0, 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, 0 100%, 0 var(--cut-l));
}
.hsm-scena { position: absolute; inset: 0; margin: 0; opacity: 0; }
.hsm-scena.is-active { opacity: 1; }
.hsm-scena img { width: 100%; height: 100%; object-fit: cover; }
.hsm-scena figcaption {
	position: absolute; left: 0; bottom: 28px; padding: 8px 18px 8px 24px;
	background: var(--hsm-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.hsm-hero__tocke { position: absolute; right: 0; bottom: -28px; display: flex; gap: 10px; }
.hsm-hero__tocke button { width: 14px; height: 14px; background: var(--hsm-line); transform: rotate(45deg); transition: background .3s; }
.hsm-hero__tocke button[aria-current="true"] { background: var(--hsm-red); }

/* male kućice (rombovi) */
.hsm-kucice { position: relative; padding-bottom: 28px; }
.hsm-kucice__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hsm-kucica {
	--k: var(--hsm-red);
	display: flex; align-items: center; gap: 14px; padding: 15px 19px 15px 15px;
	background: var(--hsm-line); /* = boja obruba 1 px; bijela ispuna je ::after (obrub prati i dijagonalu) */
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
	position: relative; isolation: isolate; overflow: hidden;
	font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	transition: color .3s var(--ease), background-color .3s;
}
.hsm-kucica--purple { --k: var(--hsm-purple); }
.hsm-kucica--orange { --k: var(--hsm-orange); }
.hsm-kucica--blue { --k: var(--hsm-blue); }
.hsm-kucica::after {
	content: ''; position: absolute; inset: 1px; z-index: -2; background: #fff;
	clip-path: polygon(0 0, calc(100% - 13.4px) 0, 100% 13.4px, 100% 100%, 0 100%);
}
.hsm-kucica::before {
	content: ''; position: absolute; inset: 0; z-index: -1; background: var(--k);
	transform: translateX(-110%) skewX(-45deg); transition: transform .45s var(--ease);
}
.hsm-kucica:hover { color: #fff; background: var(--k); }
.hsm-kucica:hover::before { transform: translateX(0) skewX(0); }
.hsm-kucica__romb { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.hsm-kucica__romb span {
	width: 22px; height: 22px; border: 3px solid var(--k); transform: rotate(45deg);
	transition: background .3s, border-color .3s;
}
.hsm-kucica:hover .hsm-kucica__romb span { background: #fff; border-color: #fff; }
.hsm-kucica__naslov { flex: 1; }
.hsm-kucica__str { width: 18px; height: 18px; color: var(--k); transition: transform .3s var(--ease), color .3s; }
.hsm-kucica:hover .hsm-kucica__str { color: #fff; transform: translateX(4px); }

/* ---------- 9. Info traka ---------- */
/* info traka: crvena podloga, naslovi bijeli, tekst/ikone/razdjelnici svijetlo sivi (odluka korisnika 9. 11.) */
.hsm-info { --info-siva: rgba(255, 255, 255, .72); background: var(--hsm-red); color: #fff; }
.hsm-info__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.hsm-info__stavka {
	display: flex; align-items: center; gap: 14px; padding: 20px 20px 20px 0;
	border-right: 1px solid rgba(255, 255, 255, .45); margin-right: 20px;
	font-size: 13px; line-height: 1.35; transition: color .2s;
}
.hsm-info__stavka:last-child { border-right: 0; margin-right: 0; }
.hsm-info__stavka strong { display: block; font-size: 15px; font-weight: 700; }
.hsm-info__stavka span { color: var(--info-siva); }
.hsm-info__stavka .hsm-ikona { color: var(--info-siva); width: 28px; height: 28px; }
.hsm-info__stavka img { width: 40px; height: 40px; flex: none; filter: brightness(0) invert(1); opacity: .72; } /* Draženov logo u istoj svijetlo sivoj */
a.hsm-info__stavka:hover strong { text-decoration: underline; text-underline-offset: 4px; }
a.hsm-info__stavka:hover .hsm-ikona, a.hsm-info__stavka:hover img { color: #fff; opacity: 1; }

/* ---------- 10. Sekcije ---------- */
.hsm-sekcija { --sek-pad: clamp(48px, 6vw, 88px); padding-block: var(--sek-pad); }
/* dvije susjedne sekcije iste podloge: druga ima mali gornji razmak, da među njima ne zjapi prazno */
.hsm-sekcija--light + .hsm-sekcija--light, .hsm-sekcija--siva + .hsm-sekcija--siva,
.hsm-sekcija:not([class*="--"]) + .hsm-sekcija:not([class*="--"]) { padding-top: clamp(16px, 2.5vw, 32px); }
.hsm-sekcija--light { background: var(--hsm-light-2); }
.hsm-sekcija--siva { background: var(--hsm-light-3); } /* Planirajte posjet: ista siva kao traka kalendara i blok Izložbe */
.hsm-sekcija--ink { background: var(--hsm-ink); color: #fff; }
.hsm-sekcija--ink .hsm-p { color: var(--hsm-gray-2); }
.hsm-sekcija__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.hsm-sekcija__head--stack { display: block; }
.hsm-sekcija__head .hsm-link { margin-bottom: 6px; flex: none; }

.hsm-grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.hsm-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- 11. Kartice (odrezani kut + sweep na klik) ---------- */
.hsm-card {
	--c: var(--hsm-red);
	display: flex; flex-direction: column; padding: 1px; position: relative; isolation: isolate;
	transition: transform .4s var(--ease);
}
/* obrub 1 px koji prati i dijagonalu: ::after = obrub (odrezan 40), bijela ispuna = tijelo kartice uvučeno 1 px s istim rezom */
.hsm-card::after {
	content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hsm-border);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.hsm-card__body { background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%); }
/* kutije (nisu linkovi): podloga = obrub, bijela ispuna ::after uvučena 1 px */
.hsm-pbox::after, .hsm-mmc::after, .hsm-kal::after {
	content: ''; position: absolute; inset: 1px; z-index: -1; background: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%);
}
.hsm-card--blue { --c: var(--hsm-blue); }
.hsm-card--orange { --c: var(--hsm-orange); }
.hsm-card--purple { --c: var(--hsm-purple); }
.hsm-card--green { --c: var(--hsm-green); }
.hsm-card:hover { transform: translateY(-4px); }
/* hover: crta 3 px u boji sekcije IZVAN kartice (razmak 3 px), prati desni rub → kosi rez → donji rub,
   krakovi gore i lijevo otprilike duljine kosine (--arm). Jedan element, oblik = poligon debljine 3 px.
   Ulazi iz donjeg lijevog kuta prema gore desno. */
.hsm-card::before {
	--arm: 56px;
	content: ''; position: absolute; z-index: 6; pointer-events: none;
	right: -6px; bottom: -6px; width: calc(var(--cut) + 6px + var(--arm)); height: calc(var(--cut) + 6px + var(--arm));
	background: var(--c, var(--hsm-red));
	clip-path: polygon(
		calc(100% - 3px) 0, 100% 0,
		100% calc(100% - var(--cut) - 3.5px), calc(100% - var(--cut) - 3.5px) 100%,
		0 100%, 0 calc(100% - 3px),
		calc(100% - var(--cut) - 4.76px) calc(100% - 3px), calc(100% - 3px) calc(100% - var(--cut) - 4.76px)
	);
	/* iscrtavanje: kosa maska („\" front) prelazi preko oblika od donjeg lijevog kuta prema gore desno */
	-webkit-mask-image: linear-gradient(45deg, #000 49%, transparent 51%); mask-image: linear-gradient(45deg, #000 49%, transparent 51%);
	-webkit-mask-size: 300% 300%; mask-size: 300% 300%;
	-webkit-mask-position: 100% 0%; mask-position: 100% 0%;
	transition: -webkit-mask-position .6s var(--ease), mask-position .6s var(--ease);
}
.hsm-card:hover::before, .hsm-card:focus-visible::before { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
.hsm-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hsm-light); }
.hsm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.hsm-card:hover .hsm-card__media img { transform: scale(1.05); }
.hsm-card__media::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: var(--c); transition: width .5s var(--ease);
}
.hsm-card:hover .hsm-card__media::after { width: 100%; }
.hsm-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 28px; flex: 1; }
.hsm-card__meta { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hsm-gray); }
.hsm-card__naslov { font-size: 18px; font-weight: 700; line-height: 1.3; }
.hsm-card__sazetak { font-size: 14px; line-height: 1.6; color: var(--hsm-gray); }
.hsm-card__više {
	margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c);
}
.hsm-card__više .hsm-ikona { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.hsm-card:hover .hsm-card__više .hsm-ikona { transform: translateX(4px); }
.hsm-card__sweep {
	position: absolute; inset: 0; z-index: 5; background: var(--c); pointer-events: none; opacity: 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
	transform: translateX(-120%) skewX(-45deg); transform-origin: left;
}
/* datum u slici (novosti): bijela kocka, donji desni kut odrezan 45°, odmaknuta od ruba */
.hsm-card__datum {
	position: absolute; left: 16px; top: 16px; z-index: 2; min-width: 58px; padding: 8px 10px 7px;
	display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; text-align: center;
	background: #fff; color: var(--hsm-ink);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
	transition: background .3s, color .3s;
}
.hsm-card__datum strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hsm-card__datum span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hsm-card:hover .hsm-card__datum { background: var(--c); color: #fff; }
.hsm-card--h { flex-direction: row; align-items: stretch; }
.hsm-card--h .hsm-card__media--sq { aspect-ratio: auto; width: 38%; flex: none; }
.hsm-card--h .hsm-card__body { padding: 20px; }

/* ---------- 12. Stalni postav ---------- */
/* crvena sekcija, bijeli tekst; fotografije ostaju, gumb proziran s bijelim obrubom */
.hsm-postav { background: var(--hsm-red); color: #fff; }
.hsm-postav .hsm-eyebrow { color: #fff; }
.hsm-postav .hsm-p { color: rgba(255, 255, 255, .88); }
.hsm-postav__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
/* kompozicija 3 fotografije: velika (4:3) + dvije manje preko kutova; natpisi s crvenim rombom (kosa linija maknuta na zahtjev) */
.hsm-postav__slike { position: relative; aspect-ratio: 1 / .92; overflow: hidden; }
.hsm-postav__f { position: absolute; margin: 0; }
.hsm-postav__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hsm-postav__f--1 { left: 0; top: 6%; width: 74%; aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, 0 100%); }
.hsm-postav__f--2 { right: 0; top: 0; width: 40%; aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); box-shadow: 0 0 0 6px var(--hsm-red); }
.hsm-postav__f--3 { left: 58%; bottom: 0; width: 36%; aspect-ratio: 1; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); box-shadow: 0 0 0 6px var(--hsm-red); }
.hsm-postav__f figcaption {
	position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px;
	background: #fff; color: var(--hsm-ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); white-space: nowrap;
}
.hsm-postav__f figcaption::before { content: ''; width: 7px; height: 7px; background: var(--hsm-red); transform: rotate(45deg); flex: none; }
.hsm-postav__f--2 figcaption, .hsm-postav__f--3 figcaption { left: auto; right: 0; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
/* brojke: 4 pločice 2×2, jednake, bez linije — broj crveno, opis sivo, rez 45° */
.hsm-brojke { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0; }
.hsm-brojke li {
	padding: 18px 20px 16px 24px; background: rgba(255, 255, 255, .12); position: relative;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.hsm-brojke li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #fff; }
.hsm-brojke strong { display: block; font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; }
.hsm-brojke li > span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .8); }
.hsm-brojke strong small { font-size: .55em; font-weight: 700; margin-left: 2px; }

/* ---------- 13. Zbirke — traka pločica ---------- */
.hsm-zbirke { overflow: hidden; position: relative; isolation: isolate; background: var(--hsm-navy); }
/* fotografija postava iza, zamagljena + tamnoplavi sloj (skoro crn) */
.hsm-zbirke::before {
	content: ''; position: absolute; inset: -40px; z-index: -2;
	background: url('../img/demo/zbirke-pozadina-1600.webp') center / cover no-repeat;
	filter: blur(7px) saturate(.75) brightness(.85);
	transform: scale(1.04);
}
.hsm-zbirke::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12, 17, 29, .72), rgba(12, 17, 29, .5) 50%, rgba(8, 11, 20, .8));
}
.hsm-zbirke .hsm-plocica { background: rgba(20, 27, 43, .82); }
.hsm-zbirke .hsm-plocica__slika { background: rgba(255, 255, 255, .06); }
.hsm-traka { margin-top: clamp(24px, 3vw, 40px); }
.hsm-traka__list { display: flex; gap: 16px; width: max-content; padding-left: var(--pad); }
.hsm-plocica {
	--c: var(--hsm-purple);
	display: block; width: 220px; background: var(--hsm-ink-2); position: relative; isolation: isolate; overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
	transition: transform .4s var(--ease);
}
.hsm-plocica:hover { transform: translateY(-4px); }
.hsm-plocica__slika { display: block; aspect-ratio: 1; display: grid; place-items: center; background: #26272C; padding: 20px; }
.hsm-plocica__slika img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.hsm-plocica:hover .hsm-plocica__slika img { transform: scale(1.06); }
.hsm-plocica__romb { width: 64px; height: 64px; color: var(--hsm-purple); stroke-width: 1.2; }
.hsm-plocica__naslov { display: block; padding: 14px 16px 20px; font-size: 13px; font-weight: 700; line-height: 1.35; min-height: 72px; }

/* ---------- 14. MMC + newsletter ---------- */
.hsm-dvoje__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); }
.hsm-mmc { display: flex; flex-direction: column; padding: 33px; background: var(--hsm-border); position: relative; isolation: isolate; }
.hsm-mmc .hsm-link { margin-top: auto; padding-top: 20px; align-self: flex-start; }
/* tri kutije: ikona iste visine (56 px) i tanke linije kao Draženov profil */
.hsm-troje__ikona { display: block; height: 56px; width: auto; margin-bottom: 18px; flex: none; align-self: flex-start; }
svg.hsm-troje__ikona { width: 56px; stroke-width: .9; color: var(--hsm-red); }
.hsm-news svg.hsm-troje__ikona { color: #fff; }
.hsm-news { padding: 32px; background: var(--hsm-red); color: #fff; }
.hsm-news .hsm-p { color: rgba(255, 255, 255, .85); }
.hsm-news__form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.hsm-news__form .hsm-btn { width: 100%; justify-content: center; }
.hsm-news__form input[type="email"] {
	font: inherit; padding: 14px 16px; border: 0; background: #fff; color: var(--hsm-ink); min-width: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.hsm-news__form .hsm-btn--red { background: var(--hsm-ink); }
.hsm-news__privola { margin-top: 4px; font-size: 12px; display: flex; gap: 8px; align-items: center; }

/* ---------- 15. Footer ---------- */
.hsm-footer { background: var(--hsm-navy); color: #fff; position: relative; isolation: isolate; overflow: hidden; }
/* gimnastičar sa starog footera, zamagljen + tamnoplavi sloj */
.hsm-footer::before {
	content: ''; position: absolute; inset: -40px; z-index: -2;
	background: url('../img/demo/footer-gimnasticar-1440.webp') center 30% / cover no-repeat;
	filter: blur(3px) brightness(.9);
	transform: scale(1.04);
}
.hsm-footer::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12, 17, 29, .7), rgba(12, 17, 29, .52) 50%, rgba(8, 11, 20, .82));
}
.hsm-footer__in { position: relative; width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding: clamp(48px, 6vw, 80px) 0 40px; }
.hsm-footer__in--row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0 84px; font-size: 13px; color: var(--hsm-gray-2); } /* dno: prostor za plutajućeg Sokola */
.hsm-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hsm-footer__slogan { margin-top: 20px; font-size: 18px; font-weight: 700; line-height: 1.3; max-width: 24ch; }
.hsm-footer__h { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hsm-gray-2); margin-bottom: 16px; }
.hsm-footer__col p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.hsm-footer__col a:hover { color: var(--hsm-red); }
.hsm-footer__muted { color: var(--hsm-gray-2); font-size: 13px; }
.hsm-social { display: flex; gap: 18px; margin-top: 24px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hsm-social a::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--hsm-red); transform: rotate(45deg); vertical-align: 1px; }
.hsm-sati div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hsm-sati dt { color: var(--hsm-gray-2); }
.hsm-sati dd { margin: 0; font-weight: 700; }
.hsm-footer__bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, .1); }
.hsm-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.hsm-footer__legal a:hover { color: #fff; }

/* ---------- 16. Sokol (AI pomoćnik, demo) ---------- */
.sokol { position: fixed; right: 20px; bottom: 20px; z-index: 80; font-size: 14px; }
.sokol__launcher {
	display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; background: var(--hsm-red); color: #fff;
	font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
	box-shadow: 0 10px 30px rgba(228, 0, 43, .35);
	transition: transform .3s var(--ease);
}
.sokol__launcher:hover { transform: translateY(-3px); }
/* romb je izrezan unutar vlastitog okvira (ne rotiran), pa ne viri iz gumba */
.sokol__avatar { width: 52px; height: 52px; display: block; overflow: hidden; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sokol__avatar svg { width: 100%; height: 100%; display: block; }
.sokol__avatar--head { width: 48px; height: 48px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.sokol__panel {
	position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 40px)); max-height: min(640px, calc(100vh - 120px));
	display: flex; flex-direction: column; background: #fff; color: var(--hsm-ink);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
	box-shadow: 0 30px 60px rgba(17, 18, 20, .25);
}
.sokol__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--hsm-line); }
.sokol__head > div { flex: 1; min-width: 0; }
.sokol__title { font-size: 16px; font-weight: 800; }
.sokol__sub { font-size: 11px; color: var(--hsm-gray); line-height: 1.3; }
.sokol__ai { display: inline-block; padding: 1px 5px; background: var(--hsm-ink); color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .08em; }
.sokol__close { width: 36px; height: 36px; display: grid; place-items: center; }
.sokol__log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.sokol__msg { max-width: 88%; padding: 10px 14px; line-height: 1.5; font-size: 14px; }
.sokol__msg--bot { align-self: flex-start; background: var(--hsm-light); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.sokol__msg--user { align-self: flex-end; background: var(--hsm-red); color: #fff; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.sokol__msg a { color: var(--hsm-red); font-weight: 700; text-decoration: underline; }
.sokol__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.sokol__chips button { padding: 6px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--hsm-line); transition: border-color .2s, color .2s; }
.sokol__chips button:hover { border-color: var(--hsm-red); color: var(--hsm-red); }
.sokol__form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--hsm-line); }
.sokol__form input { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--hsm-line); min-width: 0; }
.sokol__form button { width: 44px; display: grid; place-items: center; background: var(--hsm-red); color: #fff; }
.sokol__foot { padding: 0 14px 12px; font-size: 11px; color: var(--hsm-gray); }
.sokol__msg--typing span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--hsm-gray-2); transform: rotate(45deg); animation: sk-tip 1s infinite; }
.sokol__msg--typing span:nth-child(2) { animation-delay: .15s; }
.sokol__msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sk-tip { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- 17. Ostalo ---------- */
.hsm-uizradi { min-height: 60vh; display: grid; align-items: center; }
.hsm-uizradi .hsm-btn { margin-top: 28px; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1180px) {
	.hsm-nav__link { padding: 10px 10px; font-size: 12px; }
	.hsm-mega__in { grid-template-columns: 1.2fr 1fr 1fr 260px; }
}
@media (max-width: 1024px) {
	:root { --header-h: 64px; }
	.hsm-nav, .hsm-header__tools .hsm-lang { display: none; }
	.hsm-burger { display: flex; }
	.hsm-logo__znak { width: 60px; }
	.hsm-logo__tekst { font-size: 10px; }
	.hsm-hero__in { grid-template-columns: 1fr; min-height: 0; gap: 32px; }
	.hsm-hero__linije { display: none; }
	.hsm-hero__tocke { bottom: -24px; }
	.hsm-kucice { padding-top: 12px; }
	.hsm-kucice__in { grid-template-columns: repeat(2, 1fr); }
	.hsm-info__in { grid-template-columns: repeat(2, 1fr); }
	.hsm-info__stavka:nth-child(2) { border-right: 0; }
	.hsm-postav__in { grid-template-columns: 1fr; }
	.hsm-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.hsm-dvoje__in { grid-template-columns: 1fr; }
	.hsm-footer__in { grid-template-columns: 1fr 1fr; }
	.hsm-traka { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.hsm-traka__list > li { scroll-snap-align: start; }
}
@media (max-width: 640px) {
	.hsm-zbirke::before { background-image: url('../img/demo/zbirke-pozadina-960.webp'); }
	.hsm-footer::before { background-image: url('../img/demo/footer-gimnasticar-960.webp'); }
	.hsm-header__tickets span { display: none; }
	.hsm-header__tickets { padding: 10px 12px; }
	.hsm-hero__slogan { font-size: clamp(34px, 9.5vw, 44px); }
	.hsm-hero__cta .hsm-btn { width: 100%; justify-content: center; }
	.hsm-kucice__in { grid-template-columns: 1fr 1fr; gap: 8px; }
	.hsm-kucica { padding: 10px 12px 10px 8px; font-size: 12px; gap: 8px; }
	.hsm-kucica__str { display: none; }
	.hsm-info__in { grid-template-columns: 1fr; }
	.hsm-info__stavka { border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); padding: 14px 0; }
	.hsm-info__stavka:last-child { border-bottom: 0; }
	.hsm-sekcija__head { flex-direction: column; align-items: flex-start; }
	.hsm-grid--3 { grid-template-columns: 1fr; }
	.hsm-brojke { grid-template-columns: 1fr 1fr; gap: 10px; }
	.hsm-brojke li { padding: 14px 14px 12px 18px; }
	.hsm-postav__slike { aspect-ratio: 1 / 1; }
	.hsm-postav__f figcaption { font-size: 9px; padding: 5px 10px 5px 8px; }
	.hsm-postav__f--2 figcaption, .hsm-postav__f--3 figcaption { display: none; }
	.hsm-card--h .hsm-card__media--sq { width: 34%; }
	.hsm-footer__in { grid-template-columns: 1fr; gap: 28px; }
	.sokol { right: 12px; bottom: 12px; }
	.sokol__launcher-text { display: none; }
	.sokol__launcher { padding: 6px; }
}


/* ---------- 19. Hero B — video u pozadini + rombovi ---------- */
.hsm-hero--b { background: var(--hsm-navy); color: #fff; }
.hsm-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hsm-hero__video { width: 100%; height: 100%; object-fit: cover; }
.hsm-hero__bg::after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 17, 29, .88) 0%, rgba(12, 17, 29, .62) 45%, rgba(12, 17, 29, .42) 100%),
		linear-gradient(180deg, rgba(12, 17, 29, .35), transparent 30%, transparent 70%, rgba(12, 17, 29, .55));
}
.hsm-hero--b .hsm-hero__in { min-height: calc(100svh - var(--header-h)); padding-bottom: clamp(40px, 6vw, 80px); grid-template-columns: 48fr 52fr; }
.hsm-hero--b .hsm-hero__pod { color: rgba(255, 255, 255, .82); }
/* bijeli obrubni gumb u heroju: prozirna sredina, bijeli prsten 2 px koji prati rez (evenodd), na hover cijeli bijel s crvenim tekstom i ikonom */
.hsm-btn--ghost-w { background: transparent; color: #fff; }
.hsm-btn--ghost-w::after {
	inset: 0; background: #fff;
	/* evenodd prsten: vanjska kontura se zatvori (natrag u 0 0), pa unutarnja (natrag u 2px 2px) — inače lijevi rub ne postoji */
	clip-path: polygon(evenodd,
		0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 0,
		2px 2px, 2px calc(100% - 2px), calc(100% - 16.83px) calc(100% - 2px), calc(100% - 2px) calc(100% - 16.83px), calc(100% - 2px) 2px, 2px 2px);
}
.hsm-btn--ghost-w::before { background: #fff; }
.hsm-btn--ghost-w:hover, .hsm-btn--ghost-w:focus-visible { color: var(--hsm-red); }

.hsm-rombi { position: relative; aspect-ratio: 1; width: min(100%, 620px); margin-left: auto; }
.hsm-rombi__linije { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hsm-rombi__linije .hsm-linija { stroke-width: 5; }
.hsm-romb {
	position: absolute; left: var(--x); top: var(--y); width: var(--v); aspect-ratio: 1;
	transform: translate(-50%, -50%); display: block;
}
.hsm-romb__box {
	position: absolute; inset: 0; display: grid; place-items: center;
	transition: transform .4s var(--ease);
}
/* obrub = bijeli prsten (evenodd romb s rupom), ispuna = prozirno tamno staklo; ništa se ne preklapa pa nema sive */
.hsm-romb__box::after {
	content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, .92);
	clip-path: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 3px, 3px 50%, 50% calc(100% - 3px), calc(100% - 3px) 50%);
	transition: background .3s var(--ease);
}
.hsm-romb__box::before {
	content: ''; position: absolute; inset: 3px; z-index: 0;
	background: rgba(12, 17, 29, .34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: background .3s var(--ease);
}
.hsm-romb__naslov {
	position: relative; z-index: 1; padding: 0 18%; text-align: center;
	font-size: clamp(10px, .9vw, 13px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; color: #fff;
}
.hsm-romb:hover .hsm-romb__box, .hsm-romb:focus-visible .hsm-romb__box { transform: scale(1.06); }
.hsm-romb:hover .hsm-romb__box::after, .hsm-romb:focus-visible .hsm-romb__box::after { background: var(--hsm-red); }
.hsm-romb:hover .hsm-romb__box::before, .hsm-romb:focus-visible .hsm-romb__box::before { background: var(--hsm-red); }
.hsm-romb:focus-visible { outline: 0; }

@media (max-width: 1024px) {
	.hsm-hero--b .hsm-hero__in { grid-template-columns: 1fr; min-height: 0; }
	.hsm-rombi { margin-inline: auto; width: min(100%, 480px); }
	.hsm-romb__naslov { font-size: 11px; }
}

/* ---------- 20. Hero: red o otvorenju postava ---------- */
.hsm-hero__otvorenje {
	margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .8);
}
.hsm-hero__otvorenje::before { content: ''; width: 8px; height: 8px; background: var(--hsm-red); transform: rotate(45deg); flex: none; }

/* ---------- 21. Planirajte posjet ---------- */
.hsm-posjet { padding-top: clamp(32px, 4vw, 56px); } /* odmah ispod sive trake kalendara: stapaju se u jedan blok */
.hsm-pbox {
	display: flex; flex-direction: column; gap: 16px; padding: 29px 29px 31px;
	background: var(--hsm-border); position: relative; isolation: isolate;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.hsm-pbox__h { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; line-height: 1.2; }
.hsm-pbox__h .hsm-ikona { width: 32px; height: 32px; color: var(--hsm-red); }
.hsm-cjenik div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hsm-line); font-size: 14px; line-height: 1.4; }
.hsm-cjenik dt { color: var(--hsm-ink); }
.hsm-cjenik dd { margin: 0; font-weight: 800; white-space: nowrap; color: var(--hsm-red); }
.hsm-pbox__nap { font-size: 13px; line-height: 1.55; color: var(--hsm-gray); }
.hsm-lista li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
.hsm-lista li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; background: var(--hsm-red); transform: rotate(45deg); }
.hsm-pbox .hsm-link { margin-top: auto; align-self: flex-start; }
.hsm-pbox__akcije { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hsm-pbox__akcije .hsm-link { margin-top: 0; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
/* traka termina: prozirna s crvenim obrubom 2 px (evenodd prsten prati rezove), crveni tekst i ikone;
   na hover se puni crveno (sweep pod 45°), sve postaje bijelo */
.hsm-termin {
	margin-top: clamp(20px, 3vw, 32px); display: flex; align-items: center; gap: 18px; padding: 18px 24px;
	position: relative; isolation: isolate; overflow: hidden; color: var(--hsm-red); transition: color .3s var(--ease);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.hsm-termin::after {
	content: ''; position: absolute; inset: 0; z-index: -2; background: var(--hsm-red);
	clip-path: polygon(evenodd,
		16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px, 16px 0,
		16.83px 2px, 2px 16.83px, 2px calc(100% - 2px), calc(100% - 16.83px) calc(100% - 2px), calc(100% - 2px) calc(100% - 16.83px), calc(100% - 2px) 2px, 16.83px 2px);
}
.hsm-termin::before {
	content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hsm-red);
	transform: translateX(-110%) skewX(-45deg); transform-origin: left; transition: transform .45s var(--ease);
}
.hsm-termin:hover, .hsm-termin:focus-visible { color: #fff; }
.hsm-termin:hover::before, .hsm-termin:focus-visible::before { transform: translateX(0) skewX(0); }
.hsm-termin > .hsm-ikona { width: 30px; height: 30px; }
.hsm-termin__tekst { flex: 1; font-size: 14px; line-height: 1.5; }
.hsm-termin__tekst strong { font-weight: 800; }
.hsm-termin__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hsm-termin__cta .hsm-ikona { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.hsm-termin:hover .hsm-termin__cta .hsm-ikona { transform: translateX(4px); }

/* ---------- 22. Program (kalendar) ---------- */
.hsm-program__list { border-top: 2px solid var(--hsm-ink); }
.hsm-dogadaj {
	--c: var(--hsm-red);
	display: grid; grid-template-columns: 76px 1fr 32px; gap: 24px; align-items: center;
	padding: 18px 0; border-bottom: 1px solid var(--hsm-line);
	position: relative; isolation: isolate; overflow: hidden;
}
.hsm-dogadaj__datum {
	width: 76px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; line-height: 1;
	background: var(--hsm-light); color: var(--hsm-ink);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
	transition: background .3s, color .3s;
}
.hsm-dogadaj__datum small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hsm-gray); transition: color .3s; }
.hsm-dogadaj__datum strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 2px; }
.hsm-dogadaj__datum span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hsm-dogadaj__datum--do { background: var(--hsm-ink); color: #fff; }
.hsm-dogadaj__datum--do small { color: var(--hsm-gray-2); }
.hsm-dogadaj:hover .hsm-dogadaj__datum { background: var(--hsm-red); color: #fff; }
.hsm-dogadaj:hover .hsm-dogadaj__datum small { color: rgba(255, 255, 255, .8); }
.hsm-dogadaj__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hsm-dogadaj__body .hsm-card__meta { flex-wrap: wrap; row-gap: 4px; }
.hsm-dogadaj__naslov { font-size: 17px; font-weight: 700; line-height: 1.3; transition: color .3s; }
.hsm-dogadaj__info { font-size: 13px; color: var(--hsm-gray); }
.hsm-dogadaj:hover .hsm-dogadaj__naslov { color: var(--hsm-red); }
.hsm-dogadaj__str { width: 32px; height: 32px; display: grid; place-items: center; color: var(--hsm-red); transition: transform .3s var(--ease); }
.hsm-dogadaj:hover .hsm-dogadaj__str { transform: translate(4px, -4px); }
.hsm-sekcija__akcije { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; flex: none; margin-bottom: 6px; }

/* ---------- 23. Pitanja i odgovori ---------- */
.hsm-faq__in { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.hsm-faq__uvod { position: sticky; top: calc(var(--header-h) + 24px); }
.hsm-faq__uvod .hsm-link { margin-top: 24px; }
.hsm-faq__list { border-top: 2px solid var(--hsm-ink); }
.hsm-faq__item { border-bottom: 1px solid var(--hsm-line); }
.hsm-faq__item summary {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 20px 0; font-size: 17px; font-weight: 700; line-height: 1.35; cursor: pointer; transition: color .25s;
}
.hsm-faq__item summary::-webkit-details-marker { display: none; }
.hsm-faq__item summary:hover, .hsm-faq__item[open] summary { color: var(--hsm-red); }
.hsm-faq__ikona { position: relative; flex: none; width: 28px; height: 28px; transition: transform .35s var(--ease); }
.hsm-faq__ikona::before, .hsm-faq__ikona::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.hsm-faq__ikona::before { width: 16px; height: 2px; }
.hsm-faq__ikona::after { width: 2px; height: 16px; }
.hsm-faq__item[open] .hsm-faq__ikona { transform: rotate(45deg); }
.hsm-faq__odg { padding: 0 48px 22px 0; }
.hsm-faq__odg p { font-size: 15px; line-height: 1.7; color: var(--hsm-gray); max-width: 64ch; }

/* ---------- 24. MMC + aplikacija + newsletter ---------- */
.hsm-troje__in { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); align-items: stretch; }
.hsm-app { display: flex; flex-direction: column; padding: 32px; background: var(--hsm-ink); color: #fff; }
.hsm-app > .hsm-ikona { color: var(--hsm-red); }
.hsm-app .hsm-p { color: var(--hsm-gray-2); }
.hsm-app__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 24px; }
.hsm-badge {
	display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 16px; background: #fff; color: var(--hsm-ink); line-height: 1.2;
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	transition: background .3s, color .3s;
}
.hsm-badge small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.hsm-badge strong { font-size: 15px; font-weight: 800; }
.hsm-badge:hover { background: var(--hsm-red); color: #fff; }

/* ---------- 25. Footer: pretraga + aplikacije ---------- */
.hsm-footer__search { display: flex; margin-top: 22px; max-width: 320px; }
.hsm-footer__search input {
	flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 12px 14px; border: 0;
	background: rgba(255, 255, 255, .1); color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.hsm-footer__search input::placeholder { color: var(--hsm-gray-2); }
.hsm-footer__search input:focus { outline: 0; background: rgba(255, 255, 255, .16); }
.hsm-footer__search button { width: 46px; display: grid; place-items: center; background: var(--hsm-red); color: #fff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.hsm-footer__apps { font-size: 13px; }
.hsm-footer__apps a { color: var(--hsm-gray-2); text-decoration: underline; text-underline-offset: 3px; }
.hsm-footer__apps a:hover { color: #fff; }

@media (max-width: 1024px) {
	.hsm-faq__in { grid-template-columns: 1fr; }
	.hsm-faq__uvod { position: static; }
	.hsm-troje__in { grid-template-columns: 1fr 1fr; }
	.hsm-troje .hsm-news { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.hsm-termin { flex-wrap: wrap; gap: 12px 16px; }
	.hsm-termin__tekst { flex-basis: calc(100% - 46px); }
	.hsm-dogadaj { grid-template-columns: 64px 1fr; gap: 16px; }
	.hsm-dogadaj__datum { width: 64px; }
	.hsm-dogadaj__datum strong { font-size: 24px; }
	.hsm-dogadaj__str { display: none; }
	.hsm-dogadaj__naslov { font-size: 15px; }
	.hsm-troje__in { grid-template-columns: 1fr; }
	.hsm-faq__item summary { font-size: 15px; }
	.hsm-faq__odg { padding-right: 0; }
	.hsm-sekcija__akcije .hsm-btn { width: 100%; justify-content: center; }
}

/* ---------- 26. Novosti: slider + kalendar (dvije cjeline jedna uz drugu) ---------- */
.hsm-novosti { overflow: hidden; } /* siva traka kalendara ide do desnog ruba ekrana */
.hsm-novosti__in { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.hsm-slider { min-width: 0; display: flex; flex-direction: column; }
.hsm-novosti__head { margin-bottom: clamp(20px, 2.5vw, 32px); }
.hsm-novosti__naslov { font-size: clamp(26px, 2.6vw, 36px); }
.hsm-novosti__head .hsm-p { margin-top: 12px; font-size: 15px; }
/* desni stupac = druga cjelina: tamnija siva traka od vrha do dna sekcije i do desnog ruba ekrana (::before),
   kalendar zadržava punu širinu stupca; traka ima rez 45° dolje lijevo */
.hsm-novosti__kal { position: relative; isolation: isolate; }
.hsm-novosti__kal::before {
	content: ''; position: absolute; z-index: -1; background: var(--hsm-light-3);
	top: calc(-1 * var(--sek-pad)); bottom: calc(-1 * var(--sek-pad)); left: calc(-28px - var(--cut)); right: -100vw;
	/* lijevi rub ravan na -28 px; pri dnu se izvlači ulijevo kosinom „/" (paralelno s rezom kartice pored) —
	   ispod je ista siva (Izložbe), pa kosina postaje prijelaz bijelog stupca u sivi blok */
	/* gore: lijevi kut uvučen pod 45° („/"), dolje: izvučen ulijevo istom kosinom */
	clip-path: polygon(calc(2 * var(--cut)) 0, 100% 0, 100% 100%, 0 100%, var(--cut) calc(100% - var(--cut)), var(--cut) var(--cut));
}
/* kartice u slideru rastegnute do dna kalendara: fotografija ostaje fiksna 16:10 (jednaka na svim karticama),
   višak visine ide tijelu kartice — „Pročitajte" je uvijek pri dnu (margin-top: auto) */
/* kontrole iznad kartica: strelice lijevo, „Sve novosti" desno */
.hsm-slider__kontrole { padding-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hsm-slider__track {
	--vis: 2; --gap: clamp(16px, 2.5vw, 28px);
	flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: 1fr; grid-auto-columns: calc((100% - 8px - (var(--vis) - 1) * var(--gap)) / var(--vis)); gap: var(--gap);
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	/* scroll okvir reže sve što viri: 6 px gore za podizanje, 10 px dolje i 8 px desno za hover zagradu (krak uz desni rub) */
	padding: 6px 8px 10px 0; margin: -6px -8px -10px 0; scroll-padding-right: 8px;
}
.hsm-slider__track::-webkit-scrollbar { display: none; }
.hsm-slider__track > * { scroll-snap-align: start; }
.hsm-slider__nav { display: flex; gap: 8px; }
.hsm-slider__btn {
	width: 46px; height: 46px; display: grid; place-items: center; background: var(--hsm-red); color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
	transition: background .3s, opacity .3s;
}
.hsm-slider__btn:hover { background: var(--hsm-ink); }
.hsm-slider__btn[disabled] { opacity: .35; cursor: default; background: var(--hsm-red); }
/* Novosti = muzejska plava, Kalendar = muzejska narančasta (odluka korisnika 9. 11.; u ta dva bloka nema crvene) */
.hsm-slider .hsm-link, .hsm-slider .hsm-eyebrow--blue { color: var(--hsm-blue); }
.hsm-slider__btn, .hsm-slider__btn[disabled] { background: var(--hsm-blue); }
.hsm-novosti__kal .hsm-eyebrow--orange { color: #D97E1E; }
.hsm-slider__btn--prev .hsm-ikona { transform: scaleX(-1); }

.hsm-kal {
	position: relative; isolation: isolate; padding: 23px; background: var(--hsm-border);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.hsm-kal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.hsm-kal__naslov { font-size: 16px; font-weight: 800; }
.hsm-kal__nav {
	width: 36px; height: 36px; display: grid; place-items: center; background: var(--hsm-red); color: #fff; flex: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background .3s, opacity .3s;
}
.hsm-kal__nav { background: var(--hsm-orange); color: var(--hsm-ink); }
.hsm-kal__nav:hover { background: var(--hsm-ink); color: #fff; }
.hsm-kal__nav[disabled] { opacity: .3; cursor: default; background: var(--hsm-orange); color: var(--hsm-ink); }
.hsm-kal__nav .hsm-ikona { width: 18px; height: 18px; }
.hsm-kal__nav--prev .hsm-ikona { transform: scaleX(-1); }
.hsm-kal__mreza { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hsm-kal__mreza th { padding-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hsm-gray); }
.hsm-kal__mreza td { padding: 2px; text-align: center; }
.hsm-kal__dan { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 13px; color: var(--hsm-gray-2); }
.hsm-kal__dan--danas { box-shadow: inset 0 0 0 1px var(--hsm-ink); color: var(--hsm-ink); font-weight: 700; }
.hsm-kal__dan--ima {
	background: var(--hsm-orange); color: var(--hsm-ink); font-weight: 700; box-shadow: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background .25s, color .25s;
}
.hsm-kal__dan--ima:hover, .hsm-kal__dan--ima[aria-pressed="true"] { background: var(--hsm-ink); color: #fff; }
.hsm-kal__lista { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hsm-line); }
.hsm-kal__lista-naslov { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #D97E1E; }
.hsm-kal__lista-naslov button { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hsm-gray); text-decoration: underline; text-underline-offset: 3px; }
.hsm-kal__stavka a { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hsm-line); }
.hsm-kal__stavka:last-child a { border-bottom: 0; }
.hsm-kal__datum {
	aspect-ratio: 1; display: grid; place-content: center; text-align: center; line-height: 1;
	background: var(--hsm-light); color: var(--hsm-ink); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background .25s, color .25s;
}
.hsm-kal__datum strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: 0; margin-bottom: 3px; }
.hsm-kal__tekst { min-width: 0; }
.hsm-kal__tekst strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.hsm-kal__tekst span { font-size: 11px; color: var(--hsm-gray); }
.hsm-kal__stavka a:hover .hsm-kal__datum { background: var(--hsm-orange); color: var(--hsm-ink); }
.hsm-kal__stavka a:hover .hsm-kal__tekst strong { color: #D97E1E; }
.hsm-kal__traje { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--hsm-gray); }
.hsm-kal__traje a { font-weight: 700; color: var(--hsm-ink); }
.hsm-kal__traje a:hover { color: #D97E1E; }
.hsm-kal__prazno { font-size: 12px; color: var(--hsm-gray); }

@media (max-width: 1024px) {
	.hsm-novosti__in { grid-template-columns: 1fr; }
	.hsm-novosti__kal { padding-top: 40px; }
	.hsm-novosti__kal::before { top: 0; left: -100vw; clip-path: none; }
	.hsm-novosti__kal .hsm-kal { max-width: 440px; }
	.hsm-slider__track { flex: none; grid-template-rows: auto; }
}
@media (max-width: 640px) {
	.hsm-slider__track { --vis: 1; }
}

/* ---------- 27. Izložbe: full-width slider (ljubičasta) ---------- */
.hsm-izlozbe .hsm-eyebrow--purple { color: var(--hsm-purple); }
.hsm-link--purple { color: var(--hsm-purple); }
.hsm-btn--purple { background: var(--hsm-purple); color: #fff; }
.hsm-tag--purple { background: var(--hsm-purple); color: #fff; }
.hsm-izlozbe { padding-bottom: 0; background: #fff; } /* bijela: sekcije se izmjenjuju (siva Planirajte posjet → bijele Izložbe → crveni Postav) */
.hsm-izlozbe .hsm-sekcija__head { margin-bottom: clamp(24px, 3vw, 40px); }

.hsm-izslider {
	position: relative; overflow: hidden; isolation: isolate; outline-offset: -3px;
	height: clamp(520px, 72vh, 760px); max-width: 1920px; margin-inline: auto; background: var(--hsm-navy); color: #fff;
}
.hsm-izslide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.hsm-izslide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.hsm-izslide__slika { position: absolute; inset: 0; overflow: hidden; }
.hsm-izslide__slika img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
/* tamni sloj slijeva da tekst ostane čitljiv (kao na starom webu), blago prema dnu */
.hsm-izslide__slika::after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 17, 29, .88) 0%, rgba(12, 17, 29, .62) 38%, rgba(12, 17, 29, .18) 68%, rgba(12, 17, 29, .05) 100%),
		linear-gradient(180deg, transparent 60%, rgba(12, 17, 29, .55) 100%);
}
/* kose ljubičaste linije pod 45° kroz sliku (lanac iz loga) — zajednički sloj iznad slajdova, GSAP ga pomiče */
.hsm-izslider__kose { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hsm-kosa {
	position: absolute; top: -60%; left: 64%; width: 6px; height: 220%; background: var(--hsm-purple);
	transform: rotate(45deg); transform-origin: center; opacity: .9;
}
.hsm-kosa--tanka { left: calc(64% + 44px); width: 2px; opacity: .5; }
.hsm-izslide__in { position: relative; height: 100%; display: flex; align-items: center; padding-bottom: 72px; }
.hsm-izslide__tekst { max-width: 560px; position: relative; }
/* ljubičasta linija ispod meta retka koja ide do lijevog ruba ekrana (kao crvena na starom webu) */
.hsm-izslide__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 14px; position: relative;
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.hsm-izslide__meta::after { content: ''; position: absolute; left: -100vw; right: 0; bottom: 0; height: 4px; background: var(--hsm-purple); }
.hsm-izslide__naslov { margin-top: 26px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.hsm-izslide__opis { margin-top: 16px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 50ch; }
.hsm-izslide__tekst .hsm-btn { margin-top: 28px; }


/* navigacija: točkice (rombovi) lijevo, brojač, strelice desno — preko donjeg ruba slidera */
.hsm-izslider__nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 20px; padding-bottom: 22px; }
.hsm-izslider__tocke { display: flex; gap: 14px; align-items: center; }
.hsm-izslider__tocka {
	width: 12px; height: 12px; border: 2px solid #fff; transform: rotate(45deg); transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.hsm-izslider__tocka:hover { transform: rotate(45deg) scale(1.2); }
.hsm-izslider__tocka[aria-selected="true"] { background: var(--hsm-purple); border-color: var(--hsm-purple); }
.hsm-izslider__br { margin-left: 6px; font-size: 13px; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.hsm-izslider__br strong { color: #fff; font-weight: 800; }
.hsm-izslider__btns { margin-left: 10px; display: flex; gap: 8px; } /* lijevo uz točkice — dolje desno pluta Sokol */
.hsm-izslider__btn {
	width: 46px; height: 46px; display: grid; place-items: center; background: var(--hsm-purple); color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background .3s;
}
.hsm-izslider__btn:hover { background: #fff; color: var(--hsm-purple); }
.hsm-izslider__btn--prev .hsm-ikona { transform: scaleX(-1); }

@media (max-width: 1024px) {
	.hsm-kosa { left: 74%; }
}
@media (max-width: 640px) {
	.hsm-izslider { height: clamp(460px, 86vh, 600px); }
	.hsm-izslide__slika::after { background: linear-gradient(180deg, rgba(12, 17, 29, .25) 0%, rgba(12, 17, 29, .55) 40%, rgba(12, 17, 29, .9) 100%); }
	.hsm-izslide__in { align-items: flex-end; padding-bottom: 92px; }
	.hsm-izslider__kose { display: none; }
	.hsm-izslide__naslov { font-size: clamp(26px, 7.5vw, 32px); margin-top: 18px; }
	.hsm-izslide__opis { font-size: 14px; }
	.hsm-izslide__tekst .hsm-btn { margin-top: 20px; }
	.hsm-izslider__br { display: none; }
	.hsm-izslider__nav { padding-bottom: 18px; }
}