/* ============================================================
   Iskra Core 360  v3.10.1

   Levo slika s klikabilnimi tockami (+), desno naslov, opis in
   seznam obmocij. Izbrana tocka je modra, ostale bele; izbrano
   obmocje ima temno modro crto, ostala so zbledela.
   Povezava gre v obe smeri – klik na tocko ali na obmocje.
   ============================================================ */

.iskra-core {
	/* --- mere --- */
	--core-media-w:   545px;
	--core-media-r:   20px;
	--core-gap:       clamp(32px, 4.4vw, 64px);
	--core-pad-y:     clamp(48px, 6.9vw, 100px);
	--core-pad-x:     clamp(20px, 9vw, 130px);
	--core-spot:      25px;    /* premer tocke (iz Figme) */

	/* --- animacija izbrane tocke --- */
	--core-wave-scale: 3.8;    /* do kod se val razsiri */
	--core-wave-time:  1.8s;   /* trajanje enega vala */
	--core-wave-alpha: .9;     /* zacetna vidnost vala */
	--core-wave-width: 3px;    /* debelina vala */
	--core-pop-scale:  1.55;   /* kako mocno poskoci ob izbiri */
	--core-pop-time:   .55s;   /* trajanje utripa */
	--core-rail-gap:  20px;    /* odmik besedila od navpicne crte */

	/* --- tipografija --- */
	--core-font:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* naslov – H2 Desktop Medium 60/60, na mobilnem 40/40 */
	--core-h2-size:   clamp(40px, calc(29.78px + 2.376vw), 60px);

	/* uvodni odstavek – H3 Desktop Regular 40/40 */
	--core-desc-size: 40px;
	--core-desc-lh:   40px;
	--core-desc-ls:   -1px;
	--core-desc-wght: 400;

	/* dodatni opis (iskra_sub_title) – Text 1 Desktop Regular 25/31 */
	--core-sub-size:  25px;
	--core-sub-lh:    31px;
	--core-sub-ls:    .3px;
	--core-sub-wght:  400;
	--core-sub-gap:   clamp(12px, 1.2vw, 18px);

	/* seznam obmocij – ostaja nespremenjen */
	--core-t1-size:   25px;
	--core-t1-lh:     31px;
	--core-t2-size:   17px;
	--core-t2-lh:     27px;

	/* --- barve ---
	   --core-accent  navpicna crta ob izbranem obmocju  (shortcode: accent)
	   --core-icon    tocka (+) na sliki                 (shortcode: icon)
	   --core-pulse   valovi in sij okoli izbrane tocke  (shortcode: pulse)
	   Vsaka podeduje prejsnjo, ce je ne nastavis, zato en sam accent
	   pobarva vse tri tako kot doslej. */
	--core-ink:       var(--FMS-Deep-Blue, #002749);
	--core-head-ink:  var(--Fill-ISKRA-Black, #252628);   /* naslov, opis, podnaslov */
	--core-accent:    var(--FMS-Electric-Blue, #0046FF);
	--core-icon:      var(--core-accent);
	--core-pulse:     var(--core-icon);
	--core-spot-bg:   var(--Fill-Iskra-White, #FFF);
	--core-rule:      #C7D6E6;
	--core-dim:       .38;

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

	display: flex;
	align-items: flex-start;
	gap: var(--core-gap);
	padding: var(--core-pad-y) var(--core-pad-x);

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

/* ------------------------------------------------------------
   Slika s tockami
   ------------------------------------------------------------ */

.iskra-core__media {
	position: relative;
	flex: 0 0 var(--core-media-w);
	width: var(--core-media-w);
	border-radius: var(--core-media-r);
	overflow: hidden;
	line-height: 0;
}

.iskra-core__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------
   Tocka (+)

   left/top prideta iz PHP-ja kot odstotka, translate ju centrira,
   zato koordinati iz Figme vpises kot sta – brez preracunavanja.
   ------------------------------------------------------------ */

.iskra-core__spot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: block;
	width: var(--core-spot);
	height: var(--core-spot);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: none;
	line-height: 0;

	/* neaktivna: bel krog z modrim krizcem */
	color: var(--core-spot-bg);
	--core-plus: var(--core-icon);

	box-shadow: 0 2px 10px rgba(0, 39, 73, .18);
	transition:
		color      .3s var(--core-ease),
		transform  .3s var(--core-ease),
		box-shadow .3s var(--core-ease);
}

.iskra-core__mark {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------
   Valovi okoli izbrane tocke

   Dva enaka kroga z zamikom pol cikla, zato je zaporedje zvezno.
   Ker gumb ze ima transform, ustvarja lastni stacking context –
   z-index: -1 ju postavi za ikono, a se vedno znotraj gumba.
   ------------------------------------------------------------ */

.iskra-core__spot::before,
.iskra-core__spot::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	border: var(--core-wave-width) solid var(--core-pulse);
	background: color-mix(in srgb, var(--core-pulse) 12%, transparent);
	opacity: 0;
	pointer-events: none;
}

.iskra-core__spot.is-active::before,
.iskra-core__spot.is-active::after {
	animation: iskra-core-wave var(--core-wave-time) cubic-bezier(.12, .6, .3, 1) infinite;
}

.iskra-core__spot.is-active::after {
	animation-delay: calc(var(--core-wave-time) / 2);
}

@keyframes iskra-core-wave {
	0% {
		transform: scale(1);
		opacity: var(--core-wave-alpha);
	}
	60% {
		opacity: calc(var(--core-wave-alpha) * .35);
	}
	100% {
		transform: scale(var(--core-wave-scale));
		opacity: 0;
	}
}

/* stalen sij okoli izbrane tocke – vidna je tudi med valovoma */
.iskra-core__spot.is-active {
	animation: iskra-core-glow var(--core-wave-time) var(--core-ease) infinite;
}

@keyframes iskra-core-glow {
	0%, 100% {
		box-shadow:
			0 0 0 0 color-mix(in srgb, var(--core-pulse) 45%, transparent),
			0 4px 16px color-mix(in srgb, var(--core-pulse) 40%, transparent);
	}
	50% {
		box-shadow:
			0 0 0 9px color-mix(in srgb, var(--core-pulse) 16%, transparent),
			0 6px 24px color-mix(in srgb, var(--core-pulse) 60%, transparent);
	}
}

/* izrazit utrip v trenutku, ko tocka postane izbrana */
.iskra-core__spot.is-active .iskra-core__mark {
	animation: iskra-core-pop var(--core-pop-time) cubic-bezier(.34, 1.56, .64, 1) 1;
}

@keyframes iskra-core-pop {
	0%   { transform: scale(1); }
	30%  { transform: scale(var(--core-pop-scale)); }
	55%  { transform: scale(.9); }
	78%  { transform: scale(1.14); }
	100% { transform: scale(1); }
}

.iskra-core__spot:hover {
	transform: translate(-50%, -50%) scale(1.12);
}

/* aktivna: moder krog z belim krizcem */
.iskra-core__spot.is-active {
	color: var(--core-icon);
	--core-plus: var(--core-spot-bg);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--core-pulse) 35%, transparent);
}

.iskra-core__spot:focus-visible {
	outline: 2px solid var(--core-icon);
	outline-offset: 3px;
}

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

.iskra-core__content {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 640px;
}

.iskra-core__title {
	margin: 0 0 clamp(16px, 1.8vw, 26px);
	font-size: var(--core-h2-size);
	line-height: var(--core-h2-size);
	font-weight: 500;
	color: var(--core-head-ink);
}

.iskra-core__desc p {
	margin: 0 0 10px;
	font-size: var(--core-desc-size);
	line-height: var(--core-desc-lh);
	font-weight: var(--core-desc-wght);
	letter-spacing: var(--core-desc-ls);
	color: var(--core-head-ink);
}
.iskra-core__desc p:last-child {
	margin-bottom: 0;
}

/* dodatni opis (iskra_sub_title); ce je polje prazno, se sploh ne izrise */
.iskra-core__subtitle {
	margin-top: var(--core-sub-gap);
}

.iskra-core__subtitle p {
	margin: 0 0 8px;
	font-size: var(--core-sub-size);
	line-height: var(--core-sub-lh);
	font-weight: var(--core-sub-wght);
	letter-spacing: var(--core-sub-ls);
	color: var(--core-head-ink);
}

.iskra-core__subtitle p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   Seznam obmocij
   ------------------------------------------------------------ */

.iskra-core__list {
	margin: clamp(28px, 3.4vw, 50px) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
    flex-direction: column;
    gap: 20px;
}

.iskra-core__item {
	position: relative;
	padding: clamp(12px, 1.4vw, 18px) 0 clamp(12px, 1.4vw, 18px) var(--core-rail-gap);
	cursor: pointer;
	opacity: var(--core-dim);
	transition: opacity .35s var(--core-ease);
}

/* svetla crta ob vsakem obmocju, temna ob izbranem */
.iskra-core__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--core-rule);
	transition: background .35s var(--core-ease);
}

.iskra-core__item.is-active {
	opacity: 1;
}
.iskra-core__item.is-active::before {
	background: var(--core-accent);
}

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

.iskra-core__label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--core-t1-size);
	line-height: var(--core-t1-lh);
	font-weight: 500;
	color: var(--core-ink);
}

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

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

@media (max-width: 1024px) {
	/*
	 * Na tablici je slika jemala prevec sirine: pri 768px je ostalo
	 * besedilu le 176px, uvodni odstavek pa je se vedno meril 40/40 —
	 * v tako ozkem stolpcu je to nekaj besed na vrstico. Zato slika ni
	 * vec fiksnih 400px, ampak delez sirine, stranski rob je ozji,
	 * tipografija pa stopnjo nizje. Namizje in mobilni prikaz ostaneta
	 * nespremenjena.
	 */
	.iskra-core {
		--core-media-w:   clamp(240px, 34vw, 380px);
		--core-pad-x:     clamp(20px, 4.5vw, 56px);

		--core-h2-size:   clamp(32px, calc(20.4px + 1.51vw), 44px);

		--core-desc-size: clamp(22px, calc(14.3px + 1vw), 30px);
		--core-desc-lh:   clamp(26px, calc(18.3px + 1vw), 34px);
		--core-desc-ls:   -.5px;

		--core-sub-size:  clamp(16px, calc(13.1px + .38vw), 19px);
		--core-sub-lh:    clamp(24px, calc(21.1px + .38vw), 27px);

		--core-t1-size:   clamp(18px, calc(14.1px + .51vw), 22px);
		--core-t1-lh:     27px;
		--core-t2-size:   clamp(14px, calc(12.1px + .25vw), 16px);
		--core-t2-lh:     clamp(21px, calc(18.1px + .38vw), 24px);
	}
}

/* ============================================================
   MOBILE  (<= 767px)
   Slika pod besedilom. Tocke ostanejo na istih odstotkih,
   zato se pravilno premaknejo skupaj s sliko.
   ============================================================ */

@media (max-width: 767px) {

	.iskra-core {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding: 48px 20px 56px;
	}

	/* na mobilnem gre slika na konec: naslov, opis, podnaslov,
	   seznam obmocij in sele nato slika s tockami */
	.iskra-core__content {
		order: 1;
		max-width: none;
	}

	/* mobilna tipografija glave: naslov 40/40 Medium,
	   opis 17/27 Medium, podnaslov 17/27 Regular – vse centrirano */
	.iskra-core {
		--core-desc-size: 17px;
		--core-desc-lh:   27px;
		--core-desc-ls:   normal;
		--core-desc-wght: 500;

		--core-sub-size:  17px;
		--core-sub-lh:    27px;
		--core-sub-ls:    normal;
		--core-sub-wght:  400;
	}

	.iskra-core__title,
	.iskra-core__desc,
	.iskra-core__subtitle {
		text-align: center;
	}

	.iskra-core__media {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
	}
}

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

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