/* ============================================================
   Iskra Science Behind  v3.5.4

   Levo: eyebrow, naslov, oštevilčeni klikabilni koraki.
   Desno: "kolo" – obroč s slikami. Aktivna slika se odmakne
   proti sredini in poveča, soseda ostaneta na obroču,
   ostale so skrite.

   Geometrija: obroč je narisan v viewBox 0 0 667 667, torej je
   središče točno na 50%/50% kolesa, polmer sredine poteze pa
   308.5/667 = 0.4625 velikosti.
   ============================================================ */

.iskra-sci {
	/* --- kolo --- */
	--sci-ring:        617px;                              /* premer obroča */
	--sci-radius:      calc(var(--sci-ring) * .4625);      /* polmer do sredine poteze */
	--sci-thumb:       118px;                              /* neaktivna slikica */
	--sci-active:      245px;                              /* aktivna slikica */
	--sci-active-r:    var(--sci-radius);                  /* polmer aktivne – enak obroču */
	--sci-base:        180deg;                             /* kje stoji aktivna: 180 = levo */
	--sci-spread:      90deg;                              /* kot med sosednjima slikama */
	--sci-bleed:       .30;                                /* kolikšen del kolesa gre čez desni rob */

	/* --- mere sekcije --- */
	--sci-pad-y:       clamp(56px, 6.9vw, 100px);
	--sci-pad-x:       clamp(20px, 9vw, 130px);
	--sci-col-gap:     clamp(30px, 4vw, 60px);
	--sci-left-max:    690px;

	/* --- tipografija (Figma) ---
	   H2      40/40 mobile -> 60/60 desktop, Inter 500
	   Text 1  25/31 +.3px, Inter 400  (eyebrow)
	   Text 2  17/27, Inter 400; krepko 600  (koraki)
	   Stevilka 60/60, Inter 300, letter-spacing -5px           */
	--sci-font:        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sci-h2-size:     clamp(40px, calc(29.78px + 2.376vw), 60px);
	--sci-t1-size:     25px;
	--sci-t1-lh:       31px;
	--sci-t2-size:     17px;
	--sci-t2-lh:       27px;
	--sci-num-size:    60px;
	--sci-num-ls:      -5px;
	--sci-rail-gap:    20px;   /* odmik besedila koraka od navpicne crte */

	/* --- barve --- */
	--sci-bg:          var(--FMS-Care-Light-Blue, #EDF4F9);
	--sci-ink:         var(--FMS-Deep-Blue, #002749);
	--sci-accent:      var(--FMS-Electric-Blue, #0046FF);
	--sci-num-off:     #C3CEDB;
	--sci-num-on:      var(--FMS-Salmon, #E8866B);
	--sci-rule:        #D5E0EC;
	--sci-dim:         .38;

	--sci-ease:        cubic-bezier(.4, 0, .2, 1);
	--sci-speed:       .65s;

	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sci-col-gap);
	padding: var(--sci-pad-y) var(--sci-pad-x);
	overflow: hidden;
	background: var(--sci-bg);

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

/* ------------------------------------------------------------
   Levi stolpec
   ------------------------------------------------------------ */

.iskra-sci__left {
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--sci-left-max);
}

.iskra-sci__eyebrow {
	margin: 0 0 clamp(8px, 1vw, 14px);
	font-size: var(--sci-t1-size);
	line-height: var(--sci-t1-lh);
	font-weight: 400;
	letter-spacing: .3px;
	color: var(--sci-accent);
}

.iskra-sci__title {
	margin: 0 0 clamp(36px, 5vw, 84px);
	font-size: var(--sci-h2-size);
	line-height: var(--sci-h2-size);
	font-weight: 500;
	color: var(--sci-ink);
}

/* ------------------------------------------------------------
   Koraki
   ------------------------------------------------------------ */

.iskra-sci__steps {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* neprekinjena svetla vodilna črta ob celotnem seznamu */
.iskra-sci__steps::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--sci-rule);
}

.iskra-sci__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 2vw, 30px);
	padding: clamp(16px, 1.7vw, 22px) 0 clamp(16px, 1.7vw, 22px) var(--sci-rail-gap);
	border-bottom: 1px solid var(--sci-rule);
	cursor: pointer;
	opacity: var(--sci-dim);
	transition: opacity .35s var(--sci-ease);
}

.iskra-sci__step:last-child {
	border-bottom: 0;
}

/* modra črta ob aktivnem koraku */
.iskra-sci__step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: -1px;
	width: 2px;
	border-radius: 2px;
	background: var(--sci-accent);
	opacity: 0;
	transition: opacity .35s var(--sci-ease);
}

.iskra-sci__step.is-active {
	opacity: 1;
}
.iskra-sci__step.is-active::before {
	opacity: 1;
}

.iskra-sci__step:focus-visible {
	outline: 2px solid var(--sci-accent);
	outline-offset: 3px;
	opacity: 1;
}

.iskra-sci__num {
	flex: 0 0 auto;
	font-size: var(--sci-num-size);
	line-height: var(--sci-num-size);
	font-weight: 300;
	letter-spacing: var(--sci-num-ls);
	/* negativni razmik odreze tudi za zadnjo cifro – nadomestimo ga */
	padding-right: calc(var(--sci-num-ls) * -1);
	font-variant-numeric: tabular-nums;
	color: var(--sci-num-off);
	transition: color .35s var(--sci-ease);
}

.iskra-sci__step.is-active .iskra-sci__num {
	color: var(--sci-num-on);
}

.iskra-sci__text {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
}
.iskra-sci__text p {
	margin: 0 0 8px;
	font-size: var(--sci-t2-size);
	line-height: var(--sci-t2-lh);
	font-weight: 400;
	color: var(--sci-ink);
}
.iskra-sci__text p:last-child {
	margin-bottom: 0;
}
/* Text 2 Semibold */
.iskra-sci__text strong,
.iskra-sci__text b {
	font-weight: 600;
}

/* ------------------------------------------------------------
   Desni stolpec – kolo
   ------------------------------------------------------------ */

.iskra-sci__right {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.iskra-sci__wheel {
	position: relative;
	width: var(--sci-ring);
	height: var(--sci-ring);

	/* aktivna slika sega cez levi rob kolesa, zato rezerviramo pol njene sirine */
	margin-left: calc(var(--sci-active) * .5);
	margin-right: calc(var(--sci-ring) * var(--sci-bleed) * -1);
}

.iskra-sci__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.iskra-sci__thumbs {
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------
   Slikice na kolesu

   --a  kot na obroču (0deg = desno, raste v smeri urinega kazalca)
   --r  polmer; aktivna dobi majhen negativen odmik proti levi
   Vrstni red transformacij: najprej centriramo, nato zavrtimo,
   odmaknemo po polmeru in zavrtimo nazaj, da slika ostane pokončna.
   ------------------------------------------------------------ */

.iskra-sci__thumb {
	--a: 0deg;
	--r: var(--sci-radius);

	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--sci-thumb);
	height: var(--sci-thumb);
	border-radius: 50%;
	background-color: #dfe8f2;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0 8px 30px rgba(0, 39, 73, .10);

	transform:
		translate(-50%, -50%)
		rotate(var(--a))
		translateX(var(--r))
		rotate(calc(var(--a) * -1));

	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--sci-speed) var(--sci-ease),
		width     var(--sci-speed) var(--sci-ease),
		height    var(--sci-speed) var(--sci-ease),
		opacity   .45s var(--sci-ease);
}

/* soseda – vidna na obroču */
.iskra-sci__thumb.is-near {
	opacity: 1;
}

/* izbrana – na istem obroču kot sosedi, samo večja */
.iskra-sci__thumb.is-active {
	--r: var(--sci-active-r);
	width: var(--sci-active);
	height: var(--sci-active);
	opacity: 1;
	z-index: 2;
	box-shadow: 0 18px 60px rgba(0, 39, 73, .16);
}

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

@media (max-width: 1200px) {
	.iskra-sci {
		--sci-ring:       480px;
		--sci-thumb:      92px;
		--sci-active:     190px;
		--sci-bleed:      .34;
		--sci-left-max:   560px;
	}
}

@media (max-width: 900px) {
	.iskra-sci {
		--sci-ring:       380px;
		--sci-thumb:      74px;
		--sci-active:     150px;
		--sci-bleed:      .38;
	}
}

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

   Kolo gre POD korake in se pogrezne cez spodnji rob sekcije.
   Aktivna slika stoji na vrhu kroga in je vodoravno centrirana,
   soseda pa levo in desno od sredisca – torej nizje in ob straneh.
   Isti mehanizem kot na desktopu, samo drug izhodiscni kot.
   ============================================================ */

@media (max-width: 767px) {

	.iskra-sci {
		--sci-ring:       min(460px, 118vw);
		--sci-thumb:      96px;
		--sci-active:     175px;
		--sci-base:       270deg;   /* aktivna na vrhu kroga */
		--sci-spread:     90deg;    /* soseda levo in desno od sredisca */
		--sci-bleed:      0;
		--sci-sink:       .58;      /* koliksen del kolesa gre pod rob sekcije */

		/* tipografija je enaka kot na desktopu (Text 1 25/31, Text 2 17/27,
		   stevilka 60/60), skalira se samo H2 – ta je tu na spodnjem robu */

		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 75px 0 0 0;
	}

	.iskra-sci__left {
		max-width: none;
		padding: 0 50px;
	}

	.iskra-sci__title {
		margin-bottom: 32px;
	}

	.iskra-sci__right {
		justify-content: center;
		overflow: hidden;
	}

	.iskra-sci__wheel {
		/* prostor nad kolesom za polovico aktivne slike, ki gleda cez zgornji rob */
		margin: calc(var(--sci-active) * .5 + 24px) auto
		        calc(var(--sci-ring) * var(--sci-sink) * -1);
	}
}

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

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