/* =========================================================
   [iskra_stories] – Real Stories, Real Recovery
   Kartica: ozadje = izbrana slika, video se zazene na gumb.
   Vse mere so v spremenljivkah, da jih lahko po potrebi
   prepišeš v Elementor Custom CSS brez posega v plugin.
   ========================================================= */

.iskra-str {
	/* postavitev sekcije */
	--str-pad-y: 100px;
	--str-pad-x: 130px;
	--str-head-gap: 70px;

	/* kartica */
	--str-card-w: 402px;
	--str-card-h: 540px;
	--str-card-gap: 24px;
	--str-radius: 20px;
	--str-card-pad-x: 24px;
	--str-card-pad-b: 24px;

	/* tipografija */
	--str-title-size: 80px;
	--str-title-lh: 80px;
	--str-title-ls: -2px;
	--str-desc-size: 25px;
	--str-desc-lh: 31px;

	/* barve */
	--str-title-color: var(--FMS-Deep-Blue, #002749);
	--str-desc-color: var(--Vibrant-Fills-Vibrant-Secondary, rgba(127, 127, 127, 0.40));
	--str-accent: var(--FMS-Deep-Blue, #002749);
	--str-white: var(--Fill-Iskra-White, #FFF);

	width: 100%;
	padding: var(--str-pad-y) var(--str-pad-x);
	font-family: Inter, sans-serif;
	box-sizing: border-box;
}

.iskra-str *,
.iskra-str *::before,
.iskra-str *::after {
	box-sizing: border-box;
}

/* ---------- naslov in opis ---------- */

.iskra-str__head {
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}

.iskra-str__title {
	margin: 0;
	padding: 0;
	color: var(--str-title-color);
	font-family: Inter, sans-serif;
	font-size: var(--str-title-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--str-title-lh);
	letter-spacing: var(--str-title-ls);
	font-feature-settings: 'liga' off, 'clig' off;
}

.iskra-str__desc {
	max-width: 1080px;
	margin: 24px auto 0;
	color: var(--str-desc-color);
	font-family: Inter, sans-serif;
	font-size: var(--str-desc-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--str-desc-lh);
	letter-spacing: 0.3px;
	font-feature-settings: 'liga' off, 'clig' off;
}

.iskra-str__desc p {
	margin: 0;
}

.iskra-str__desc p + p {
	margin-top: 12px;
}

/* ---------- karusel ---------- */

.iskra-str__viewport {
	margin-top: var(--str-head-gap);
}

.iskra-str__track {
	display: flex;
	/* flex-start je nujen: kartica ima absolutno pozicionirano vsebino,
	   zato bi jo privzeti "stretch" na mobilcu (visina auto) sesul na 0 */
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--str-card-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.iskra-str__track::-webkit-scrollbar {
	display: none;
}

/* ko je vseh kartic manj kot je prostora, jih JS centrira */
.iskra-str__track.is-fit {
	justify-content: center;
}

.iskra-str__track:focus-visible {
	outline: 2px solid var(--str-accent);
	outline-offset: 6px;
	border-radius: 4px;
}

/* ---------- kartica ---------- */

.iskra-str__card {
	position: relative;
	flex: 0 0 var(--str-card-w);
	width: var(--str-card-w);
	height: var(--str-card-h);
	min-height: 220px;
	border-radius: var(--str-radius);
	overflow: hidden;
	background: #0d0d0d;
	scroll-snap-align: start;
	isolation: isolate;
}

.iskra-str__media {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.iskra-str__media img,
.iskra-str__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #0d0d0d;
}

.iskra-str__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
	transition: opacity 0.3s ease;
}

/* ---------- gumbi na sredini ---------- */

.iskra-str__controls {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 22px;
	z-index: 2;
	transition: opacity 0.3s ease;
}

.iskra-str__btn {
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--str-white);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.iskra-str__btn:hover {
	transform: scale(1.06);
}

.iskra-str__btn:focus-visible {
	outline: 2px solid var(--str-white);
	outline-offset: 4px;
	border-radius: 50%;
}

.iskra-str__btn--seek {
	width: 34px;
	height: 34px;
	opacity: 0.9;
}

.iskra-str__btn--seek svg {
	width: 100%;
	height: 100%;
}

.iskra-str__btn--play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.iskra-str__btn--play svg {
	width: 26px;
	height: 26px;
}

.iskra-str__icon--pause {
	display: none;
}

.iskra-str__card.is-playing .iskra-str__icon--play {
	display: none;
}

.iskra-str__card.is-playing .iskra-str__icon--pause {
	display: block;
}

/* med predvajanjem se besedilo in senca umakneta */
.iskra-str__card.is-playing .iskra-str__info,
.iskra-str__card.is-playing .iskra-str__shade {
	opacity: 0;
	pointer-events: none;
}

.iskra-str__card.is-playing .iskra-str__controls {
	opacity: 0.55;
}

.iskra-str__card.is-playing:hover .iskra-str__controls,
.iskra-str__card.is-playing:focus-within .iskra-str__controls {
	opacity: 1;
}

/* ---------- besedilo na kartici ---------- */

.iskra-str__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0 var(--str-card-pad-x) var(--str-card-pad-b);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.iskra-str__tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	color: var(--str-white);
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.5px;
	font-feature-settings: 'liga' off, 'clig' off;
}

.iskra-str__name {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 31px;
	font-feature-settings: 'liga' off, 'clig' off;
}

.iskra-str__text {
	margin: 0;
	color: var(--str-white);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.5px;
	font-feature-settings: 'liga' off, 'clig' off;
}

/* ---------- števec in puščice ---------- */

.iskra-str__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
	color: var(--str-accent);
}

.iskra-str__nav[hidden] {
	display: none;
}

.iskra-str__count {
	font-family: Inter, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.2px;
}

.iskra-str__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--str-accent);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.2s ease;
}

.iskra-str__arrow svg {
	width: 22px;
	height: 22px;
}

.iskra-str__arrow:hover {
	opacity: 0.65;
}

.iskra-str__arrow:focus-visible {
	outline: 2px solid var(--str-accent);
	outline-offset: 3px;
	border-radius: 50%;
}

/* ---------- vdelan predvajalnik (YouTube / Vimeo) ---------- */

.iskra-str__media iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.iskra-str__card--embed.is-playing .iskra-str__controls {
	display: none;
}

/* ---------- opozorilo za urednika ---------- */

.iskra-str__hint {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 3;
	padding: 8px 12px;
	background: rgba(204, 0, 0, 0.92);
	color: #fff;
	font: 500 12px/1.4 Inter, sans-serif;
}

.iskra-str__card.is-failed::after {
	content: attr(data-failed);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 8px 12px;
	background: rgba(204, 0, 0, 0.92);
	color: #fff;
	font: 500 12px/1.4 Inter, sans-serif;
}

/* ---------- tablica ---------- */

@media (max-width: 1024px) {
	.iskra-str {
		--str-pad-y: 80px;
		--str-pad-x: 60px;
		--str-head-gap: 50px;
		--str-title-size: 56px;
		--str-title-lh: 60px;
		--str-title-ls: -1.5px;
		--str-desc-size: 20px;
		--str-desc-lh: 28px;
		--str-card-w: 340px;
		--str-card-h: 457px;
	}
}

/* ---------- mobilnik ---------- */

@media (max-width: 767px) {
	.iskra-str {
		--str-pad-y: 60px;
		--str-pad-x: 20px;
		--str-head-gap: 40px;
		--str-title-size: 40px;
		--str-title-lh: 44px;
		--str-title-ls: -1px;
		--str-desc-size: 17px;
		--str-desc-lh: 24px;
		--str-card-gap: 16px;
		/* visino racunamo iz sirine (razmerje 402:540), ker "auto" v
		   flex vrstici ne da zanesljivega rezultata */
		--str-card-w: min(340px, 82vw);
		--str-card-h: calc(var(--str-card-w) * 1.3433);
	}

	.iskra-str__track.is-fit {
		justify-content: flex-start;
	}

	.iskra-str__btn--play {
		width: 56px;
		height: 56px;
	}

	.iskra-str__btn--play svg {
		width: 22px;
		height: 22px;
	}

	.iskra-str__controls {
		gap: 18px;
	}
}

/* ---------- manj gibanja ---------- */

@media (prefers-reduced-motion: reduce) {
	.iskra-str__track {
		scroll-behavior: auto;
	}

	.iskra-str__btn,
	.iskra-str__shade,
	.iskra-str__info,
	.iskra-str__controls {
		transition: none;
	}
}