/* ============================================================
   Iskra Biological Approach  v3.2.0
   Desktop: slika levo (405px), vsebina desno
   Mobile:  naslov, opis, slika, alineje, opomba

   Tipografija po Figmi, clamp() za 430–1440px:
     H2            60/60      Inter 500
     Text 1        25/31 +.3  Inter 400   (opis, "It enables:")
     Text 1 Medium 25/31 +.3  Inter 500   (opomba)
     Text 2        17/27      Inter 400   (alineje)
   ============================================================ */

.iskra-bio {
	/* --- mere --- */
	--bio-media-w:   405px;
	--bio-gap:       clamp(40px, 5vw, 90px);
	--bio-pad-y:     clamp(48px, 6.9vw, 100px);
	--bio-pad-x:     clamp(20px, 9vw, 130px);
	--bio-radius:    20px;
	--bio-media-min: 520px;
	--bio-rail-gap:  22px;

	/* --- tipografija --- */
	--bio-font:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--bio-h2-size:   clamp(36px, calc(25.78px + 2.376vw), 60px);
	--bio-h2-lh:     clamp(36px, calc(25.78px + 2.376vw), 60px);

	--bio-t1-size:   clamp(18px, calc(15.02px + .693vw), 25px);
	--bio-t1-lh:     clamp(22px, calc(18.17px + .891vw), 31px);

	--bio-t2-size:   clamp(15px, calc(14.15px + .198vw), 17px);
	--bio-t2-lh:     clamp(23px, calc(21.30px + .396vw), 27px);

	/* --- barve --- */
	--bio-bg:        var(--Fill-Iskra-White, #FFF);
	--bio-ink:       var(--FMS-Deep-Blue, #002749);
	--bio-accent:    var(--iskra-blue, #0046FF);
	--bio-rule:      var(--iskra-line-light, #DDE5EF);
	--bio-rail:      var(--iskra-line-light, #C9DAF2);
	--bio-note-bg:   var(--FMS-Care-Light-Blue, #EDF4F9);

	/* prosojnost neaktivnih alinej */
	--bio-dim:       .35;

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

	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--bio-gap);
	padding: var(--bio-pad-y) var(--bio-pad-x);
	background: var(--bio-bg);

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

/* ------------------------------------------------------------
   Slika
   ------------------------------------------------------------ */

.iskra-bio__media {
	position: relative;
	flex: 0 0 var(--bio-media-w);
	width: var(--bio-media-w);
	align-self: stretch;
	min-height: var(--bio-media-min);
	border-radius: var(--bio-radius);
	overflow: hidden;
	background: #d3d3d3;
}

.iskra-bio__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%!important;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0;
	transition: opacity .45s var(--bio-ease);
}

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

/* Overlay ikona zgoraj desno na glavni sliki */
.iskra-bio__icon {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 2;

	width: 160px;
	height: auto;

	opacity: 0;
	pointer-events: none;
	transition: opacity .45s var(--bio-ease);
}

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

@media (max-width: 767px) {
	.iskra-bio__icon {
		display: none;
	}
}

/* ------------------------------------------------------------
   Vsebina
   ------------------------------------------------------------ */

.iskra-bio__content {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 720px;
}

/* H2 – 60/60, Inter Medium */
.iskra-bio__title {
	margin: 0 0 clamp(20px, 2.2vw, 34px);
	font-family: var(--bio-font);
	font-size: var(--bio-h2-size);
	line-height: var(--bio-h2-lh);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	color: var(--bio-ink);
}

/* Text 1 Regular – 25/31, letter-spacing .3px */
.iskra-bio__desc {
	color: var(--bio-ink);
}
.iskra-bio__desc p {
	margin: 0 0 var(--bio-t1-lh);
	font-size: var(--bio-t1-size);
	line-height: var(--bio-t1-lh);
	font-weight: 400;
	letter-spacing: .3px;
}
.iskra-bio__desc p:last-child {
	margin-bottom: 0;
}

/* "It enables:" – Text 1 Regular */
.iskra-bio__enables {
	/*margin: clamp(40px, 5.3vw, 84px) 0 clamp(18px, 2vw, 30px);*/
	margin: 70px 0 30px;
	font-size: var(--bio-t1-size);
	line-height: var(--bio-t1-lh);
	font-weight: 400;
	letter-spacing: .3px;
	color: var(--bio-ink);
}

/* ------------------------------------------------------------
   Klikabilne alineje – Text 2, 17/27
   ------------------------------------------------------------ */

.iskra-bio__list {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--bio-rail-gap);
	list-style: none;
}

/* neprekinjena svetla navpična črta ob celotnem seznamu */
.iskra-bio__list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--bio-rail);
}

.iskra-bio__item {
	position: relative;
	padding: clamp(12px, 1.2vw, 16px) 0;
	border-bottom: 1px solid var(--bio-rule);
	cursor: pointer;
	opacity: var(--bio-dim);
	transition: opacity .35s var(--bio-ease);
}

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

/* temna črta ob aktivni alineji – prekrije svetlo podlago */
.iskra-bio__item::before {
	content: "";
	position: absolute;
	left: calc(var(--bio-rail-gap) * -1);
	top: 0;
	bottom: -1px;
	width: 2px;
	border-radius: 2px;
	background: var(--bio-accent);
	opacity: 0;
	transition: opacity .35s var(--bio-ease);
}

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

.iskra-bio__item:focus-visible {
	outline: 2px solid var(--bio-accent);
	outline-offset: 4px;
	opacity: 1;
}

.iskra-bio__label {
	display: block;
	margin-bottom: clamp(2px, .4vw, 6px);
	font-size: var(--bio-t2-size);
	line-height: var(--bio-t2-lh);
	font-weight: 500;
	letter-spacing: .2px;
	text-transform: uppercase;
	color: var(--bio-ink);
}

.iskra-bio__item.is-active .iskra-bio__label {
	font-weight: 700;
}

.iskra-bio__text {
	display: block;
	font-size: var(--bio-t2-size);
	line-height: var(--bio-t2-lh);
	font-weight: 400;
	color: var(--bio-ink);
}

/* ------------------------------------------------------------
   Opomba – Text 1 Medium
   ------------------------------------------------------------ */

.iskra-bio__note {
	margin-top: clamp(32px, 4.2vw, 66px);
	padding: clamp(18px, 1.9vw, 28px) clamp(20px, 2.2vw, 32px);
	border-radius: 12px;
	background: var(--bio-note-bg);
	font-size: var(--bio-t1-size);
	line-height: var(--bio-t1-lh);
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--bio-ink);
}

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

@media (max-width: 1024px) {
	.iskra-bio {
		--bio-media-w: 320px;
		--bio-media-min: 460px;
	}
}

/* ============================================================
   MOBILE  (<= 767px)
   Vrstni red: naslov, opis, slika, "It enables", alineje, opomba
   ============================================================ */

@media (max-width: 767px) {

	.iskra-bio {
		--bio-rail-gap: 18px;

		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 48px 20px 56px;
	}

	/* otroci .iskra-bio__content postanejo neposredni flex elementi */
	.iskra-bio__content {
		display: contents;
	}

	.iskra-bio__title   { order: 1; }
	.iskra-bio__desc    { order: 2; }
	.iskra-bio__media   { order: 3; }
	.iskra-bio__enables { order: 4; }
	.iskra-bio__list    { order: 5; }
	.iskra-bio__note    { order: 6; }

	.iskra-bio__media {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		aspect-ratio: 11 / 10;
		margin: 40px 0 0;
	}

	.iskra-bio__enables {
		margin: 40px 0 22px;
	}

	.iskra-bio__note {
		margin-top: 44px;
	}
}

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

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