/* ============================================================
   Iskra aFMS – Deep Muscle Activation  v3.7.5

   Naslov cez celo sirino, pod njim slika/video levo in klikabilni
   odstavki desno. Klik na odstavek zamenja medij. Spodaj Key Effects.

   Tipografija po Figmi:
     H1      80/80, Inter 500, letter-spacing -2px
     Text 1  25/31 +.3px, Inter 400 (lead) / 500 (Key Effects)
     Text 2  17/27, Inter 400
   ============================================================ */

.iskra-afms {
	/* --- mere --- */
	--afms-pad-y:      clamp(56px, 6.9vw, 100px);
	--afms-pad-x:      clamp(20px, 9vw, 130px);
	--afms-stack-gap:  clamp(36px, 4.9vw, 70px);   /* naslov <-> vsebina */
	--afms-col-gap:    clamp(32px, 7.2vw, 104px);  /* medij <-> besedilo */
	--afms-media-w:    330px;
	--afms-media-ar:   330 / 589;
	--afms-media-r:    20px;
	--afms-rail-gap:   20px;

	/* razmiki v desnem stolpcu (iz Figme) */
	--afms-lead-gap:   50px;   /* lead <-> prvi odstavek (Figma) */
	--afms-step-pad:   18px;   /* navpicni padding odstavka */
	--afms-steps-gap:  50px;   /* zadnji odstavek <-> Key Effects (Figma) */
	--afms-box-pad:    28px 32px;
	--afms-box-r:      12px;

	/* --- tipografija --- */
	--afms-font:       Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--afms-h1-size:    clamp(40px, calc(22.97px + 3.96vw), 80px);
	--afms-h1-ls:      -2px;
	--afms-t1-size:    25px;
	--afms-t1-lh:      31px;
	--afms-t2-size:    17px;
	--afms-t2-lh:      27px;
	--afms-t3-size:    17px;   /* besedilo odstavkov; na mobilnem 14/17 */
	--afms-t3-lh:      27px;
	--afms-h1-weight:  500;    /* na mobilnem 400 */
	--afms-lead-weight: 400;   /* na mobilnem 600 */

	/* --- barve --- */
	--afms-bg:         var(--Fill-Iskra-White, #FFF);
	--afms-ink:        var(--Tesla-Black, #000);
	--afms-greige:     var(--Fill-ISKRA-Greige, #BEB7B0);
	--afms-rule-alpha: .6;
	--afms-box-bg:     #F7F5F3;
	--afms-dim:        .45;

	--afms-ease:       cubic-bezier(.4, 0, .2, 1);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--afms-stack-gap);
	padding: var(--afms-pad-y) var(--afms-pad-x);
	background: var(--afms-bg);

	font-family: var(--afms-font);
	font-feature-settings: 'liga' off, 'clig' off;
	color: var(--afms-ink);
}

/* ------------------------------------------------------------
   Naslov – dva dela, drugi v greige barvi
   ------------------------------------------------------------ */

.iskra-afms__title {
	margin: 0;
	text-align: center;
	font-size: var(--afms-h1-size);
	line-height: var(--afms-h1-size);
	font-weight: var(--afms-h1-weight);
	letter-spacing: var(--afms-h1-ls);
}

.iskra-afms__title-main {
	color: var(--afms-ink);
}

.iskra-afms__title-sub {
	display: block;
	color: var(--afms-greige);
}

/* ------------------------------------------------------------
   Vrstica: medij + vsebina
   ------------------------------------------------------------ */

.iskra-afms__row {
	display: flex;
	align-items: center;
	gap: var(--afms-col-gap);
	align-self: stretch;
}

/* ------------------------------------------------------------
   Medij – vsi sloji so v DOM-u, menja se le prosojnost
   ------------------------------------------------------------ */

.iskra-afms__media {
	position: relative;
	flex: 0 0 var(--afms-media-w);
	width: var(--afms-media-w);
	aspect-ratio: var(--afms-media-ar);
	border-radius: var(--afms-media-r);
	overflow: hidden;
	background: #EFEBE7;
}

.iskra-afms__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .45s var(--afms-ease);
}

.iskra-afms__slide.is-active {
	opacity: 1;
}

/* ------------------------------------------------------------
   Desni stolpec
   ------------------------------------------------------------ */

.iskra-afms__content {
	flex: 1 1 auto;
	min-width: 0;
}

.iskra-afms__lead {
	/* padding namesto margine: teme in Elementor pogosto prepisejo
	   margino na <p>, poleg tega se margina lahko sesede s sosednjo */
	margin: 0;
	padding-bottom: var(--afms-lead-gap);
	font-size: var(--afms-t1-size);
	line-height: var(--afms-t1-lh);
	font-weight: var(--afms-lead-weight);
	letter-spacing: .3px;
	color: var(--afms-ink);
}

/* ------------------------------------------------------------
   Klikabilni odstavki
   ------------------------------------------------------------ */

.iskra-afms__steps {
	margin: 0 0 var(--afms-steps-gap);
	padding: 0;
	list-style: none;
}

.iskra-afms__step {
	position: relative;
	padding: var(--afms-step-pad) 0 var(--afms-step-pad) var(--afms-rail-gap);
	cursor: pointer;
	font-size: var(--afms-t3-size);
	line-height: var(--afms-t3-lh);
	font-weight: 400;
	color: var(--afms-greige);
	transition: color .35s var(--afms-ease);
}

/* Vodoravna locnica med odstavki.
   Ni border-top na elementu, ker bi tekla tudi pod navpicno crto –
   ::after jo zamakne za --afms-rail-gap, torej se zacne tam,
   kjer se zacne besedilo, in se navpicne crte ne dotika. */
.iskra-afms__step + .iskra-afms__step::after {
	content: "";
	position: absolute;
	left: var(--afms-rail-gap);
	right: 0;
	top: 0;
	height: 1px;
	background: var(--afms-greige);
	opacity: var(--afms-rule-alpha);
}

.iskra-afms__step:first-child {
	padding-top: 0;
}
.iskra-afms__step:last-child {
	padding-bottom: 0;
}
/* navpicna crta: greige s prosojnostjo, ob izbranem crna in polna */
.iskra-afms__step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--afms-greige);
	opacity: var(--afms-rule-alpha);
	transition: background .35s var(--afms-ease), opacity .35s var(--afms-ease);
}

.iskra-afms__step.is-active {
	color: var(--afms-ink);
}
.iskra-afms__step.is-active::before {
	background: var(--afms-ink);
	opacity: 1;
}

.iskra-afms__step:focus-visible {
	outline: 2px solid var(--afms-ink);
	outline-offset: 3px;
	color: var(--afms-ink);
}

/* ------------------------------------------------------------
   Key Effects
   ------------------------------------------------------------ */

.iskra-afms__effects {
	padding: var(--afms-box-pad);
	border-radius: var(--afms-box-r);
	background: var(--afms-box-bg);
}

.iskra-afms__effects-title {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--afms-greige);
	font-size: var(--afms-t1-size);
	line-height: var(--afms-t1-lh);
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--afms-ink);
}

.iskra-afms__effects-list {
	margin: 0;
	padding: 8px 0 0 0;
	list-style: none;
	column-count: 2;
	column-gap: clamp(24px, 3vw, 48px);
}

.iskra-afms__effects-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	font-size: var(--afms-t2-size);
	line-height: var(--afms-t2-lh);
	color: var(--afms-ink);
}

.iskra-afms__check {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 5px;
	color: var(--afms-greige);
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {
	.iskra-afms {
		--afms-media-w: 260px;
		/* Ozji razmik: pri 104px iz namizja bi besedilnemu stolpcu
		   ostalo premalo sirine in vrstice bi se razbile na drobce. */
		--afms-col-gap: clamp(24px, 3.6vw, 40px);
	}

	/*
	 * Slika se poravna na vrh besedila.
	 *
	 * align-items: center je na namizju neopazen — medij je visok 589px in
	 * skoraj tako visok kot besedilo, zato ostane nad njim 29px. Na tablici
	 * se medij skrci na 464px, besedilo pa zaradi ozjega stolpca zraste
	 * cez 970px: sredinjenje ga potisne 255px (pri 900px) oziroma 336px
	 * (pri 768px) navzdol in nad sliko zeva prazen pas.
	 */
	.iskra-afms__row {
		align-items: flex-start;
	}
}

/* ============================================================
   MOBILE  (<= 767px)

   Vse v en stolpec: naslov, medij, lead, odstavki, Key Effects.

   Tipografija po Figmi se tu vidno razlikuje od desktopa:
     naslov  40/40 Inter 400  (na desktopu 500)
     lead    25/31 Inter 600  (na desktopu 400)
     odstavki 14/17           (na desktopu 17/27)
     Key Effects naslov 25/31 Inter 500
     postavke 17/27
   ============================================================ */

@media (max-width: 767px) {

	.iskra-afms {
		--afms-h1-weight:   400;
		--afms-h1-ls:       -1px;
		--afms-lead-weight: 600;
		--afms-t3-size:     14px;
		--afms-t3-lh:       17px;

		--afms-media-w:     330px;
		--afms-media-ar:    330 / 289;

		--afms-lead-gap:    50px;
		--afms-step-pad:    14px;
		--afms-steps-gap:   50px;
		--afms-box-pad:     24px 22px;

		gap: 36px;
		padding: 75px 50px;
	}

	.iskra-afms__row {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	/* slika je enako siroka kot besedilo pod njo */
	.iskra-afms__media {
		flex: 0 0 auto;
		width: 100%;
	}

	.iskra-afms__effects-title {
		margin-bottom: 14px;
	}

	.iskra-afms__effects-list {
		column-count: 1;
	}
}

/* ============================================================
   Dostopnost
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.iskra-afms *,
	.iskra-afms *::before {
		transition-duration: .01ms !important;
	}
}