body.home #main-content.wrap,
body.front-page #main-content.wrap {
	width: 100%;
	max-width: none;
}


body.home .main-content-background,
body.front-page .main-content-background {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.home #main-content,
body.front-page #main-content {
	overflow-x: hidden;
}

body.home footer.footer,
body.front-page footer.footer {
	background: transparent !important;
	height: auto !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 5 !important;
}

body.home .footer.smo-footer,
body.front-page .footer.smo-footer {
	display: block !important;
}

body.home #ut-hero,
body.front-page #ut-hero {
	display: none !important;
}

/* ============================================================
   HOME HERO — Figma "Main Page" (1920): pasica 1183×497 na y=54,
   uvodni odstavek 944 px, 50 px pod pasico, 54 px do sekundarne navigacije.
   Vsi elementi pasice so merjeni v enotah --u = širina pasice / 1183
   (mobile: / 350), zato se layout tekoče skalira.
   ============================================================ */
.smo-home-hero {
	--hero-pad-y: calc(54px * var(--s));
	--hero-side: calc(24px * var(--s));
	position: relative;
	width: 100%;
	height: auto;
	padding: var(--hero-pad-y) var(--hero-side);
	background: #5F54DF;
	border-top: calc(6px * var(--s)) solid #FB7BE3; /* roza ločilna črta pod headerjem (Figma) */
	overflow: hidden;
	box-sizing: border-box;
}

.smo-home-hero__canvas {
	position: static;
	left: auto;
	width: 100%;
	height: auto;
	transform: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(50px * var(--s));
}

/* Pasica */
.smo-home-hero__slider {
	--u: calc(100cqw / 1183);
	position: relative;
	left: auto;
	top: auto;
	width: min(calc(1183px * var(--s)), 100%);
	aspect-ratio: 1183 / 497;
	height: auto;
	container-type: inline-size;
	transform: none;
	transition: none;
}

.smo-slider__viewport {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: visible;
	outline: none;
}
.smo-slider__viewport:focus-visible { outline: 2px solid #D3F342; outline-offset: 4px; }

.smo-slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity 420ms ease-out;
	text-decoration: none;
}
.smo-slide.is-active { opacity: 1; pointer-events: auto; }

/* roza polje 0–525, fotografija 525–1183 */
.smo-slide__left {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(525 * var(--u));
	height: auto;
}
.smo-slide__right {
	position: absolute;
	left: calc(525 * var(--u));
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: #050078;
}
.smo-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.smo-slide__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.08);
}

/* Besedilo pasice (naslov sme segati čez fotografijo, kot v Figmi) */
.smo-home-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.smo-home-hero__title {
	position: absolute;
	left: calc(10 * var(--u));
	top: calc(6 * var(--u));
	width: calc(525 * var(--u));
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(150 * var(--u));
	line-height: 0.85;
	letter-spacing: -0.01em;
	color: var(--smo-hero-title-color, #D3F342);
	white-space: normal;
	overflow-wrap: normal;
}
.smo-home-hero__subtitle {
	position: absolute;
	left: calc(10 * var(--u));
	top: calc(286 * var(--u));
	width: calc(500 * var(--u));
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(49 * var(--u));
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--smo-hero-subtitle-color, #D3F342);
	white-space: pre-line;
}
.smo-home-hero__box {
	position: absolute;
	left: calc(10 * var(--u));
	top: calc(350 * var(--u));
	width: calc(442 * var(--u));
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 500;
	font-size: calc(22 * var(--u));
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--smo-hero-box-color, #050078);
	white-space: pre-line;
}

/* Puščice: trikotnika 12×14 na robovih pasice, vertikalno na sredini (Figma y=241) */
.smo-home-hero__controls {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.smo-home-hero__controls .smo-slider__button { pointer-events: auto; }
.smo-slider__button {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	background: transparent !important;
	cursor: pointer;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}
.smo-slider__button--prev { left: -16px; }
.smo-slider__button--next { right: -16px; }
.smo-slider__button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.smo-slider__button--prev::before { border-right: 12px solid #DBF342; }
.smo-slider__button--next::before { border-left: 12px solid #DBF342; }
.smo-slider__button:focus-visible { outline: 2px solid #D3F342; border-radius: 50%; }

/* Pike: pod fotografijo, desno spodaj, da ne padejo na besedilo */
.smo-slider__dots {
	position: absolute;
	right: 16px;
	bottom: 12px;
	left: auto;
	transform: none;
	display: flex;
	gap: 8px;
}
.smo-slider__dot {
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	cursor: pointer;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}
.smo-slider__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D3F342;
	opacity: 0.4;
	transform: translate(-50%, -50%);
	transition: opacity 150ms ease-out;
}
.smo-slider__dot.is-active::before { opacity: 1; }

/* Uvodni odstavek: 944 px, Inter 20/30 */
.smo-home-hero__text {
	position: static;
	left: auto;
	top: auto;
	width: min(calc(944px * var(--s)), 100%);
	height: auto;
	padding: 0;
	transform: none;
	transition: none;
}
.smo-home-hero__text-body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 400;
	font-size: calc(20px * var(--s));
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--smo-hero-body-color, #D3F342);
}
.smo-home-hero__text-body .smo-theme-strong { font-weight: 700; }

/* Tablet / manjši desktop: manjši odmiki, odstavek 18 px */
@media (max-width: 1023px) {
	.smo-home-hero { --hero-pad-y: 40px; }
	.smo-home-hero__canvas { gap: 32px; }
	.smo-home-hero__text-body { font-size: 18px; line-height: 1.45; }
	.smo-slider__button--prev { left: -12px; }
	.smo-slider__button--next { right: -12px; }
}

/* Mobile — Figma "Bunner top Mob" 350×380: fotografija zgoraj (216), roza blok od 163 do dna */
@media (max-width: 767px) {
	.smo-home-hero { --hero-pad-y: 27px; --hero-side: 20px; }
	.smo-home-hero__canvas { gap: 14px; }

	.smo-home-hero__slider {
		--u: calc(100cqw / 350);
		aspect-ratio: 350 / 380;
	}
	.smo-slide__right {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		height: calc(216 * var(--u));
	}
	.smo-slide__left {
		top: calc(163 * var(--u));
		bottom: 0;
		width: 100%;
	}
	.smo-home-hero__title {
		left: calc(16 * var(--u));
		top: calc(170 * var(--u));
		width: calc(300 * var(--u));
		font-size: calc(51 * var(--u));
		letter-spacing: -0.01em;
	}
	.smo-home-hero__subtitle {
		left: calc(16 * var(--u));
		top: calc(283 * var(--u));
		width: calc(319 * var(--u));
		font-size: calc(28 * var(--u));
	}
	.smo-home-hero__box {
		left: calc(16 * var(--u));
		top: calc(319 * var(--u));
		width: calc(319 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(16 * var(--u));
	}
	.smo-slider__button {
		top: calc(190 * var(--u));
		margin-top: -22px;
	}
	.smo-slider__button--prev { left: -14px; }
	.smo-slider__button--next { right: -14px; }
	.smo-slider__dots { right: 10px; bottom: 6px; }

	.smo-home-hero__text-body { font-size: 16px; line-height: 1.4; letter-spacing: 0.01em; }
}

.smo-secondary-nav {
	background: #050078;
	width: 100%;
	min-height: 54px;
}

.smo-secondary-nav__canvas {
	position: relative;
	left: 50%;
	width: 1920px;
	min-height: 54px;
	transform: translateX(-50%);
}

.smo-secondary-nav__menu {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 0;
}

.smo-secondary-nav__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #F278E1;
	margin: 0 33px;
	flex: 0 0 auto;
}

.smo-secondary-nav .smo-nav__link,
.smo-secondary-nav .smo-nav__link:link,
.smo-secondary-nav .smo-nav__link:visited,
.smo-secondary-nav .smo-nav__link:hover,
.smo-secondary-nav .smo-nav__link:focus,
.smo-secondary-nav .smo-nav__link:active {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #D3F342;
	text-decoration: none;
	position: relative;
	transform-origin: center;
}

.smo-secondary-nav .smo-nav__link:hover {
	transform: none;
}

.smo-secondary-nav .smo-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #F278E0;
	top: calc(100% + 6px);
	display: none;
}

.smo-secondary-nav .smo-nav__link:hover::after,
.smo-secondary-nav .smo-nav__link:focus-visible::after {
	display: block;
}

.smo-home-third {
	--smo-home-third-scale: 1;
	background: linear-gradient(to bottom,
			#F278E0 0 6px,
			#EDFAB2 6px 574px);
	width: 100%;
	height: 574px;
	overflow: hidden;
}

.smo-home-third__canvas {
	position: relative;
	left: 50%;
	width: 1920px;
	height: 574px;
	transform: translateX(-50%) scale(var(--smo-home-third-scale));
	transform-origin: top left;
}

.smo-home-third__cards {
	--smo-home-third-gap: 10px;
	position: absolute;
	left: 365px;
	top: 103px;
	display: flex;
	gap: var(--smo-home-third-gap);
}
/* ============================================================
   NOVICE + GALERIJA — Figma "Page 3" (1920 × 1132): dva panela 578 × 864
   na y = 134, razmik 34; kartice novic 530 × 247 (foto 258 | besedilo 272);
   Instagram mreža 3 × 4 kvadrati 165 px. Vse mere × var(--s).
   ============================================================ */
.smo-home-fourth {
	--f4-pad-y: calc(134px * var(--s));
	--f4-side: calc(24px * var(--s));
	position: relative;
	width: 100%;
	height: auto;
	padding: var(--f4-pad-y) var(--f4-side);
	background: #5F54DF;
	border-top: calc(6px * var(--s)) solid #D3F342;
	overflow: hidden;
	box-sizing: border-box;
}
.smo-home-fourth__inner { width: 100%; }
.smo-home-fourth__canvas {
	position: static;
	left: auto;
	width: 100%;
	height: auto;
	transform: none;
	padding: 0;
}
.smo-home-fourth__panels {
	position: static;
	left: auto;
	top: auto;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: calc(34px * var(--s));
	width: 100%;
	max-width: calc(1190px * var(--s));
	margin: 0 auto;
}
.smo-home-fourth__panel {
	position: relative;
	flex: 0 1 calc(578px * var(--s));
	width: auto;
	max-width: calc(578px * var(--s));
	min-height: calc(864px * var(--s));
	height: auto;
	min-width: 0;
	background: #D3F342;
	overflow: hidden;
}
.smo-home-fourth__panel-canvas {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	transform: none;
	display: flex;
	flex-direction: column;
	padding: 0 calc(24px * var(--s)) calc(24px * var(--s));
}

/* Naslov panela (NOVICE / GALERIJA) – PP Neue World Regular 50 px, na levem robu panela */
.smo-home-fourth__heading {
	position: relative;
	left: auto;
	top: auto;
	margin: calc(6px * var(--s)) 0 0 calc(-16px * var(--s));
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(50px * var(--s));
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #050078;
}

/* Gumb VEČ – zgoraj desno, na robu panela */
.smo-home-fourth__button {
	position: absolute;
	right: 0;
	top: 0;
	left: auto;
	width: auto;
	min-width: calc(83px * var(--s));
	height: calc(33px * var(--s));
	padding: 0 calc(14px * var(--s));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 500;
	font-size: calc(14px * var(--s));
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #D3F342;
	background: #050078;
	text-decoration: none;
	transition: filter 150ms ease-out;
}
.smo-home-fourth__button:hover { transform: none; filter: brightness(1.15); }

/* ── Kartice novic ── */
.smo-news-cards {
	position: static;
	top: auto;
	width: 100%;
	margin: calc(8px * var(--s)) 0 0;
	display: flex;
	flex-direction: column;
	gap: calc(16px * var(--s));
}
.smo-news-card {
	display: flex;
	flex-direction: row;
	height: calc(247px * var(--s));
	text-decoration: none;
	overflow: hidden;
	flex-shrink: 0;
	transition: filter 140ms ease-out;
}
.smo-news-card:hover { opacity: 1; filter: brightness(1.05); }
.smo-news-card--1 { background: #050078; color: #D3F342; }
.smo-news-card--2 { background: #FB7BE3; color: #050078; }
.smo-news-card--3 { background: #5F54DF; color: #D3F342; }

.smo-news-card__image {
	width: 48.75%;
	flex: 0 0 48.75%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.15);
}
.smo-news-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.smo-news-card__content {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: calc(24px * var(--s)) calc(16px * var(--s)) calc(36px * var(--s));
	display: flex;
	flex-direction: column;
	gap: calc(12px * var(--s));
	overflow: hidden;
}
.smo-news-card__title {
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(24px * var(--s));
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: inherit;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.smo-news-card__excerpt {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 500;
	font-size: calc(13px * var(--s));
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: inherit;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.smo-news-card__btn {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	height: calc(27px * var(--s));
	padding: 0 calc(12px * var(--s));
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: calc(11px * var(--s));
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.smo-news-card--1 .smo-news-card__btn { background: #D3F342; color: #050078; }
.smo-news-card--2 .smo-news-card__btn { background: #050078; color: #D3F342; }
.smo-news-card--3 .smo-news-card__btn { background: #D3F342; color: #050078; }

/* ── Instagram ── */
.instagram-grid-container {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
	margin-top: calc(52px * var(--s)); /* v Figmi je nad mrežo prostor za @art_bsa + logo */
	min-width: 0;
	overflow: hidden;
}
.smo-ig-grid { gap: calc(12px * var(--s)) calc(16px * var(--s)); }

/* Tablet: panela drug pod drugim */
@media (max-width: 1023px) {
	.smo-home-fourth { --f4-pad-y: 60px; }
	.smo-home-fourth__panels { flex-direction: column; align-items: center; gap: 32px; }
	.smo-home-fourth__panel { flex: 0 0 auto; width: 100%; max-width: 578px; min-height: 0; }
}

/* Mobile (Figma Page 3 mobile): panel 350, kartica = foto zgoraj + besedilo, mreža 3 × 4 */
@media (max-width: 767px) {
	.smo-home-fourth { --f4-pad-y: 30px; --f4-side: 20px; }
	.smo-home-fourth__panel-canvas { padding: 0 14px 18px; }
	.smo-home-fourth__heading { font-size: 40px; margin-left: -6px; }
	.smo-home-fourth__button { height: 30px; font-size: 12px; min-width: 72px; }
	.smo-news-cards { gap: 12px; }
	.smo-news-card { flex-direction: column; height: auto; }
	.smo-news-card__image { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; }
	.smo-news-card__content { padding: 16px 14px 40px; gap: 10px; }
	.smo-news-card__title { font-size: 24px; }
	.smo-news-card__excerpt { font-size: 13px; -webkit-line-clamp: 5; }
	.smo-news-card__btn { height: 28px; font-size: 11px; }
	.instagram-grid-container { margin-top: 18px; }
	.smo-ig-grid { gap: 6px; }
	.instagram-grid-container #sb_instagram #sbi_images { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
	.instagram-grid-container #sb_instagram #sbi_images .sbi_item:nth-child(n+4) { display: block !important; }
}


/* ── NEWS CARDS ──────────────────────────────────────────── */

/* Card colours */

/* Desktop: absolutely placed inside the panel-canvas, below the heading/button */

/* ── Smash Balloon overrides ─────────────────────────────── */
/* Hide chrome: header, bio, load-more, follow button */
.instagram-grid-container #sb_instagram .sbi_header_outer,
.instagram-grid-container #sb_instagram .sb_instagram_header,
.instagram-grid-container #sb_instagram .sbi_bio_area,
.instagram-grid-container #sb_instagram #sbi_load,
.instagram-grid-container #sb_instagram .sbi_follow_btn {
	display: none !important;
}

/* ── Lastna Instagram mreža (inc/instagram.php) – 3 × 4 kvadrati kot v Figmi ── */
.smo-ig-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	width: 100%;
}
.smo-ig-item {
	position: relative;
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #050078;
}
.smo-ig-item a {
	display: block;
	width: 100%;
	height: 100%;
}
.smo-ig-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease-out, filter 220ms ease-out;
}
.smo-ig-item a:hover img,
.smo-ig-item a:focus-visible img {
	transform: scale(1.04);
	filter: brightness(1.06);
}
.smo-ig-item a:focus-visible { outline: 3px solid #D3F342; outline-offset: -3px; }

/* oznaki za video / album (zgoraj desno) */
.smo-ig-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	color: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
	pointer-events: none;
}
.smo-ig-badge--video::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 2px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid currentColor;
}
.smo-ig-badge--album::before,
.smo-ig-badge--album::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	border: 2px solid currentColor;
	border-radius: 2px;
	box-sizing: border-box;
}
.smo-ig-badge--album::before { left: 0; top: 5px; background: rgba(0, 0, 0, 0.25); }
.smo-ig-badge--album::after  { left: 5px; top: 0; }

/* Force 3-column grid, 4 rows = 12 items */
.instagram-grid-container #sb_instagram {
	width: 100% !important;
	padding: 0 !important;
}

.instagram-grid-container #sb_instagram #sbi_images {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: calc(12px * var(--s)) calc(16px * var(--s)) !important;
	width: 100% !important;
	float: none !important;
	line-height: 1.2;
}

.instagram-grid-container #sb_instagram #sbi_images .sbi_item {
	display: block !important;
	float: none !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
}

.instagram-grid-container #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap,
.instagram-grid-container #sb_instagram #sbi_images .sbi_item .sbi_photo,
.instagram-grid-container #sb_instagram #sbi_images .sbi_item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.smo-home-fifth {
	--smo-home-fifth-scale: 1;
	background: #FFD2E9;
	width: 100%;
	height: 625px;
	position: relative;
	overflow: hidden;
}

.smo-home-fifth::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 6px;
	background: #FB7BE3;
	z-index: 2;
}

.smo-home-fifth__canvas {
	position: relative;
	left: 50%;
	width: 1920px;
	height: 100%;
	transform: translateX(-50%) scale(var(--smo-home-fifth-scale));
	transform-origin: top left;
}

.smo-home-fifth__content {
	position: absolute;
	left: 240px;
	top: 0;
	width: 1440px;
	height: 100%;
	z-index: 1;
}

.smo-home-fifth__title {
	position: absolute;
	right: 150px;
	top: 30px;
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: 130px;
	line-height: 0.85;
	letter-spacing: -1px;
	color: #FB7BE3;
	white-space: nowrap;
}

.smo-home-fifth__intro {
	position: absolute;
	left: 10%;
	top: 20px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: calc(9px + 0.6rem);
	line-height: 0.7;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #050078;
	white-space: pre-line;
	text-align: left;
}

.smo-home-fifth__content {
	position: absolute;
	left: 240px;
	top: 0;
	width: 1440px;
	height: auto;
	min-height: 740px;
	z-index: 1;
}

/* ── PROJEKTI CARDS ──────────────────────────────────────── */
.smo-projekti-cards {
	position: absolute;
	left: 125px;
	top: 200px;
	width: 1192px;
	display: flex;
	gap: 10px;
}

.smo-projekti-card {
	display: flex;
	flex-direction: column;
	width: 390px;
	flex: 0 0 390px;
	text-decoration: none;
	overflow: hidden;
	transition: transform 150ms ease-out;
}

.smo-projekti-card:hover {
	transform: scale(1.0015);
}

.smo-projekti-card--1 { background: #D3F342; }
.smo-projekti-card--2 { background: #5F54DF; }
.smo-projekti-card--3 { background: #FB7BE3; }

.smo-projekti-card__img-wrap {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 390 / 260;
	overflow: hidden;
	flex-shrink: 0;
}

.smo-projekti-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.smo-projekti-card__title {
	position: absolute;
	left: 14px;
	top: 12px;
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(52px + 0.1rem);
	line-height: 0.8;
	letter-spacing: -0.5px;
	white-space: pre-line;
	max-width: 90%;
}

.smo-projekti-card--1 .smo-projekti-card__title { color: #D3F342; }
.smo-projekti-card--2 .smo-projekti-card__title { color: #5F54DF; }
.smo-projekti-card--3 .smo-projekti-card__title { color: #FB7BE3; }

.smo-projekti-card__bar {
	padding: 14px 16px 16px;
	flex: 1;
}

.smo-projekti-card--1 .smo-projekti-card__bar { color: #050078; }
.smo-projekti-card--2 .smo-projekti-card__bar { color: #D3F342; }
.smo-projekti-card--3 .smo-projekti-card__bar { color: #050078; }

.smo-projekti-card__sub {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 0.62 !important;
}


.smo-home-card {
	--smo-card-scale: 1;
	--smo-card-left-pad: 26px;
	--smo-card-vertical-x-offset: 0px;
	--smo-card-bg: #DBF342;
	--smo-card-text: #050078;
	--smo-card-vertical: #050078;
	--smo-card-label: #050078;
	--smo-card-cta-bg: #F278E0;
	--smo-card-cta-text: #050078;
	width: calc(390px * var(--smo-card-scale));
	height: calc(360px * var(--smo-card-scale));
	background: var(--smo-card-bg);
	position: relative;
	display: block;
	text-decoration: none;
	transform-origin: center;
	transition: transform 150ms ease-out;
	color: var(--smo-card-text);
	overflow: hidden;
}

.smo-home-card:hover {
	transform: scale(1.0015);
}

.smo-home-card__image {
	position: absolute;
	left: calc(97px * var(--smo-card-scale));
	top: 0;
	width: calc(266px * var(--smo-card-scale));
	height: calc(265px * var(--smo-card-scale));
	overflow: hidden;
}

.smo-home-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.smo-home-card__title {
	position: absolute;
	left: calc(97px * var(--smo-card-scale));
	top: calc(276px * var(--smo-card-scale));
	width: calc(258px * var(--smo-card-scale));
	height: calc(17px * var(--smo-card-scale));
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: calc(14px * var(--smo-card-scale));
	line-height: 1.05;
	letter-spacing: 1px;
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.smo-home-card__desc {
	position: absolute;
	left: calc(97px * var(--smo-card-scale));
	top: calc(293px * var(--smo-card-scale));
	width: calc(258px * var(--smo-card-scale));
	height: calc(55px * var(--smo-card-scale));
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: calc(14px * var(--smo-card-scale));
	line-height: 1.2;
	letter-spacing: 1px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.smo-home-card__desc>* {
	margin: 0;
}

.smo-home-third .smo-home-card__desc {
	top: calc(276px * var(--smo-card-scale));
	height: calc(72px * var(--smo-card-scale));
	-webkit-line-clamp: 4;
}

.smo-home-third .smo-home-card {
	--smo-home-third-bottom: calc(55px * var(--smo-card-scale));
}

.smo-home-card__cta {
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(130px * var(--smo-card-scale));
	height: calc(31px * var(--smo-card-scale));
	background: var(--smo-card-cta-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.smo-home-card__cta-text {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: calc(14px * var(--smo-card-scale));
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--smo-card-cta-text);
	white-space: nowrap;
}

.smo-home-card__vertical-wrap {
	position: absolute;
	left: calc((var(--smo-card-left-pad) + var(--smo-card-vertical-x-offset)) * var(--smo-card-scale));
	top: var(--smo-vertical-wrap-top, 0px);
	height: var(--smo-vertical-wrap-height, 110px);
	width: calc((64.53px + 28px) * var(--smo-card-scale));
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.smo-home-third .smo-home-card__vertical-wrap {
	left: 0;
	top: 0;
	bottom: var(--smo-home-third-bottom);
	height: auto;
	width: calc(97px * var(--smo-card-scale));
	overflow: visible;
	z-index: 2;
	pointer-events: none;
}

.smo-home-card__vertical {
	position: absolute;
	right: 0;
	top: 0;
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(33.53px * var(--smo-card-scale));
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--smo-card-vertical);
	transform: translateY(var(--smo-vertical-translate-y, var(--smo-vertical-wrap-height, 120px))) rotate(-90deg);
	transform-origin: top left;
	white-space: nowrap;
}

.smo-home-third .smo-home-card__vertical {
	position: absolute;
	left: calc(107px * var(--smo-card-scale));
	top: auto;
	bottom: 0;
	height: auto;
	font-size: calc(56px * var(--smo-card-scale));
	line-height: 1.2;
	display: inline-block;
	letter-spacing: 1px;
	transform: rotate(-90deg);
	transform-origin: bottom left;
	white-space: nowrap;
}

.smo-home-card__vertical-svg {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: calc(97px * var(--smo-card-scale));
	height: calc(360px * var(--smo-card-scale));
	object-fit: fill;
	z-index: 10;
}

.smo-home-card__label {
	position: absolute;
	left: calc(var(--smo-card-left-pad) * var(--smo-card-scale));
	bottom: calc(38px * var(--smo-card-scale));
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: calc(14px * var(--smo-card-scale));
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--smo-card-label);
	white-space: nowrap;
	z-index: 2;
}

.smo-home-card--skin2 {
	--smo-card-bg: #5F54DF;
	--smo-card-text: #D3F342;
	--smo-card-vertical: #FB7BE3;
	--smo-card-label: #FB7BE3;
	--smo-card-cta-bg: #D3F342;
	--smo-card-cta-text: #050078;
}

.smo-home-card--skin3 {
	--smo-card-bg: #FB7BE3;
	--smo-card-text: #050078;
	--smo-card-vertical: #D3F342;
	--smo-card-label: #D3F342;
	--smo-card-cta-bg: #5F54DF;
	--smo-card-cta-text: #D3F342;
}


/* ============================================================
   MEDIA SECTION
   ============================================================ */

/* ============================================================
   DESKTOP  (≤1440px)  — same responsive layout as 1024px but
   with more horizontal padding for larger viewports
   ============================================================ */
@media (max-width: 1440px) {

	/* ─ Hero ─ */

	/* ─ Secondary nav ─ */
	.smo-secondary-nav__canvas {
		position: relative;
		left: 50%;
		width: 1190px;
		min-height: 54px;
		transform: translateX(-50%);
	}

	/* ─ Third section ─ */
	.smo-home-third {
		background: linear-gradient(to bottom, #F278E0 0 6px, #EDFAB2 6px 100%);
		width: 100%;
		height: auto;
		overflow: visible;
	}
	.smo-home-third__inner { padding: 5vw 80px; box-sizing: border-box; }
	.smo-home-third__canvas {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		transform: none;
	}
	.smo-home-third__cards {
		--smo-home-third-gap: 20px;
		position: relative;
		left: 0; top: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: var(--smo-home-third-gap);
		align-items: center;
		padding: 10px 0 40px;
	}

	/* ─ Fourth section ─ */
	.instagram-grid-container #sb_instagram #sbi_images {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* ─ Fifth section ─ */

	.smo-home-fifth { height: auto; }
	.smo-home-fifth__inner { padding: 6vw 80px; box-sizing: border-box; }
	.smo-home-fifth__canvas {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		transform: none;
	}
	.smo-home-fifth__content {
		position: relative;
		left: 0; top: 0;
		width: 100%;
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.smo-home-fifth__title {
		position: relative;
		right: auto; top: auto;
		font-size: clamp(4rem, 5.5vw, 7rem);
		line-height: 1.05;
		letter-spacing: 1px;
		white-space: normal;
		order: 1;
	}
	.smo-home-fifth__intro {
		position: relative;
		left: 0; top: 0;
		font-size: clamp(0.9rem, 1.1vw, 1.2rem);
		line-height: 1.2;
		white-space: unset;
		text-align: left;
		order: 2;
	}
	.smo-projekti-cards {
		position: relative;
		left: 0; top: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		gap: 12px;
		order: 3;
	}
	.smo-projekti-card { width: min(390px, 100%); flex: 0 0 auto; }
	.smo-projekti-card__title { font-size: clamp(26px, 12.5vw, 52px); }
}

/* ============================================================
   LAPTOP  (≤1280px)  — reduce padding from 1440px
   ============================================================ */
@media (max-width: 1280px) {
	.smo-home-third__inner { padding: 5vw 60px; }
	.smo-home-fifth__inner { padding: 6vw 60px; }
	/* aspect-ratio handles img-wrap height proportionally */
}

@media (max-width: 1024px) {

	/* Tablet - Stack in column */
	.smo-home-fifth {
		--smo-home-fifth-scale: 1;
		background: #FFD2E9;
		width: 100%;
		min-height: 1325px;
		height: auto;
		position: relative;
		overflow: visible;
	}

	.smo-home-fifth__title {
		position: absolute;
		right: 380px;
		top: 0;
		font-family: "PP Neue World", serif;
		font-weight: 400;
		font-size: 90px;
		line-height: 1.05;
		letter-spacing: 1px;
		color: #FB7BE3;
		white-space: nowrap;
	}

	.smo-home-fifth__intro {
		position: absolute;
		left: 30%;
		top: 10px;
		font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		font-size: calc(5px + 0.57rem);
		line-height: 1.2;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #050078;
		white-space: pre-line;
		text-align: left;
	}

	.smo-projekti-cards {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 120px;
		width: 100%;
		max-width: 460px;
		flex-direction: column;
		gap: 10px;
	}

	.smo-projekti-card {
		width: min(390px, 100%);
		flex: 0 0 auto;
	}

	/* ── custom properties used for consistent positioning ── */

	/* ── canvas: un-scale, become normal flow ── */

	/* ── slider: inset by canvas gap ── */

	/* viewport needs an explicit height because slides are absolute inside it */

	/* slides stay absolute so only the active one is "visible";
	   flex-column so __right stacks above __left */

	/* __right = photo, on top */

	/* __left = colored panel, below the photo, fills remaining height */

	/* ── overlay: flex column so subtitle/box flow naturally ──
	   padding-top pushes subtitle to start just below "DONATE" */

	/* ── title: absolutely positioned to straddle the image/panel boundary ──
	   top = image_height - font_size
	   → bottom of "POK" lands exactly at the boundary (line-height: 1)
	   → "DONATE" falls into the colored panel below */

	/* ── subtitle: flows in overlay flex, left aligned ── */

	/* ── box: flows after subtitle, right aligned ── */

	/* ── buttons: vertically centered on image, inset by pad ── */

	/* ── dots: inside __left bottom padding ── */

	/* ── hero body text: un-position, flow below slider ── */

	.smo-secondary-nav__canvas {
		position: relative;
		left: 50%;
		width: 1190px;
		min-height: 54px;
		transform: translateX(-50%);
	}

	.smo-home-third {
		--smo-home-third-scale: 1;
		background: linear-gradient(to bottom,
				#F278E0 0 6px,
				#EDFAB2 6px 100%);
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.smo-home-third__canvas {
		position: relative;
		left: 50%;
		width: 100%;
		height: 1314px;
		transform: translateX(-50%) scale(var(--smo-home-third-scale));
		transform-origin: top left;
	}

	.smo-home-third__cards {
		--smo-home-third-gap: 10px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 103px;
		display: flex;
		flex-direction: column;
		gap: var(--smo-home-third-gap);
		align-items: center;
	}

	/* Tablet: news cards flow in the panel */

	/* Tablet: un-position, 2-column grid */

	.instagram-grid-container #sb_instagram #sbi_images {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ============================================================
   TABLET  (≤768px)  — fifth-section canvas reset + more padding
   This is the KEY FIX: forces mobile card layout for 481–768px
   ============================================================ */
@media (max-width: 768px) {

	/* ─ Hero: slightly less padding than 1024px ─ */

	/* ─ Third section ─ */
	.smo-home-third__inner { padding: 5vw 28px; }
	.smo-home-third .smo-home-card { --smo-card-scale: 0.82; }

	/* ─ Fourth section ─ */

	/* ─ Fifth section: full canvas reset ─ */
	.smo-home-fifth { height: auto; }
	.smo-home-fifth__inner { padding: 6vw 28px; box-sizing: border-box; }
	.smo-home-fifth__canvas {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		transform: none;
	}
	.smo-home-fifth__content {
		position: relative;
		left: 0; top: 0;
		width: 100%;
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.smo-home-fifth__title {
		position: relative;
		right: auto; top: auto;
		font-size: clamp(3rem, 5vw, 6rem);
		line-height: 1.05;
		letter-spacing: 1px;
		white-space: normal;
		order: 1;
	}
	.smo-home-fifth__intro {
		position: relative;
		left: 0; top: 0;
		font-size: clamp(0.9rem, 1.1vw, 1.2rem);
		line-height: 1.2;
		white-space: unset;
		text-align: left;
		order: 2;
	}
	.smo-projekti-cards {
		position: relative;
		left: 0; top: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		gap: 10px;
		order: 3;
	}
	.smo-projekti-card { width: min(390px, 100%); flex: 0 0 auto; }

	/* ─ Instagram: 2 columns ─ */
	.instagram-grid-container #sb_instagram #sbi_images {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ============================================================
   LARGE MOBILE  (≤640px)  — reduce padding from 768px
   ============================================================ */
@media (max-width: 640px) {
	.smo-home-third__inner { padding: 5vw 16px; }
	.smo-home-third .smo-home-card { --smo-card-scale: 0.78; }
	.smo-home-fifth__inner { padding: 6vw 20px; }
	/* aspect-ratio handles img-wrap height */
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 480px) {

	/* ═══════════════════════════════════════
	   HERO
	   ═══════════════════════════════════════ */

	/* ── CSS custom properties ── */

	/* viewport needs an explicit height because slides are absolute inside */

	/* flex-column so __right (photo) stacks above __left (panel) */

	/* title straddles the photo / panel boundary */

	/* ═══════════════════════════════════════
	   SECONDARY NAV
	   ═══════════════════════════════════════ */

	.smo-secondary-nav__canvas {
		position: relative;
		left: 0;
		width: 100%;
		min-height: auto;
		transform: none;
	}

	.smo-secondary-nav__menu {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 16px 0;
	}

	.smo-secondary-nav__dot {
		display: none;
	}

	/* ═══════════════════════════════════════
	   THIRD SECTION
	   ═══════════════════════════════════════ */

	.smo-home-third {
		background: linear-gradient(to bottom,
				#F278E0 0 6px,
				#EDFAB2 6px 100%);
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.smo-home-third__inner {
		padding: 5vw 10px;
		box-sizing: border-box;
	}

	.smo-home-third__canvas {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		transform: none;
	}

	.smo-home-third__cards {
		position: relative;
		left: 0;
		top: 0;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: var(--smo-home-third-gap);
		align-items: center;
	}

	.smo-home-third__cards {
		padding: 10px;
		gap: 20px;
	}

	.smo-home-third .smo-home-card {
		--smo-card-scale: 0.75;
	}

	/* ═══════════════════════════════════════
	   FOURTH SECTION
	   ═══════════════════════════════════════ */

	/* Mobile: news cards stack image above content */

	/* Mobile: 1-column grid */

	.instagram-grid-container #sb_instagram #sbi_images {
		grid-template-columns: repeat(3, 1fr) !important;
	}


	/* ═══════════════════════════════════════
	   FIFTH SECTION
	   ═══════════════════════════════════════ */

	.smo-home-fifth {
		background: #FFD2E9;
		width: 100%;
		height: auto;
		position: relative;
		overflow: hidden;
	}

	.smo-home-fifth__inner {
		padding: 6vw 16px;
		box-sizing: border-box;
	}

	.smo-home-fifth__canvas {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		transform: none;
	}

	.smo-home-fifth__content {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.smo-home-fifth__title {
		position: relative;
		right: auto;
		top: auto;
		font-size: clamp(3rem, 4.65vw, 5rem);
		line-height: 1.05;
		letter-spacing: 1px;
		white-space: normal;
		order: 1;
	}

	.smo-home-fifth__intro {
		position: relative;
		left: 0;
		top: 0;
		font-size: clamp(0.9rem, 1vw, 1.1rem);
		line-height: 1.2;
		white-space: unset;
		text-align: left;
		order: 2;
	}

	.smo-projekti-cards {
		position: relative;
		left: 0;
		top: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		gap: 8px;
		order: 3;
	}

	.smo-projekti-card {
		width: min(390px, 100%);
		flex: 0 0 auto;
	}
}

/* ============================================================
   MOBILE SMALL  (≤360px)  — tightest padding
   ============================================================ */
@media (max-width: 360px) {
	.smo-home-third__inner { padding: 5vw 8px; }
	.smo-home-fifth__inner { padding: 6vw 12px; }
	/* aspect-ratio handles img-wrap height */
}

/* ============================================================
   LARGE DESKTOP  (≥1600px)
   ============================================================ */

/* ============================================================
   ULTRA WIDE  (≥1920px)
   ============================================================ */

/* Final override: Home Projekti card excerpt leading */
body.home .smo-home-fifth .smo-projekti-card__bar .smo-projekti-card__sub,
body.front-page .smo-home-fifth .smo-projekti-card__bar .smo-projekti-card__sub {
	display: block;
	line-height: 0.98 !important;
}

/* Final override: Home Projekti card title size (+0.2rem) */
body.home .smo-home-fifth .smo-projekti-card__img-wrap .smo-projekti-card__title,
body.front-page .smo-home-fifth .smo-projekti-card__img-wrap .smo-projekti-card__title {
	font-size: calc(52px + 0.3rem) !important;
}
/* Galerija brez vira (ni žetona/vtičnika) */
.smo-ig-empty {
	display: inline-block;
	margin-top: calc(24px * var(--s));
	font-family: Inter, system-ui, sans-serif;
	font-weight: 600;
	font-size: calc(16px * var(--s));
	text-transform: uppercase;
	color: #050078;
	text-decoration: none;
	border-bottom: 2px solid #050078;
}