/* ============================================================
   Iskra Application Grid  v3.11.0
   [iskra_app_grid] – staticne kartice: slika zgoraj, naslov, alineje.
   Iste podatke bere kot [iskra_app_cards] (isti JetEngine repeater),
   samo izgled je drugacen. Brez JS – hover je cist CSS.

   Figma: vrsta 1180px, gap 20px, kartica 280x442, radius 20px, bela.
   ============================================================ */

.iskra-iag {
	/* --- mere --- */
	--iag-max:        1180px;  /* sirina vrste iz Figme */
	--iag-gap:        20px;    /* razmik med karticami */
	--iag-card-w:     280px;   /* sirina kartice (layout="fixed") */
	--iag-h:          442px;   /* min. visina kartice */
	--iag-radius:     20px;
	--iag-pad-x:      20px;    /* levi/desni odmik besedila */
	--iag-pad-b:      50px;    /* spodnji odmik v kartici */
	--iag-img-ratio:  280 / 190;   /* razmerje slike */
	--iag-gap-img:    20px;    /* slika <-> naslov */
	--iag-gap-title:  30px;    /* naslov <-> alineje */
	--iag-gap-li:     12px;    /* med alinejami */
	--iag-bullet-pad: 28px;    /* zamik besedila alineje od ikone */

	/* --- tipografija --- */
	--iag-font:         Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--iag-title-size:   25px;
	--iag-title-lh:     31px;
	--iag-title-weight: 500;
	--iag-title-ls:     0.3px;
	--iag-text-size:    14px;
	--iag-text-lh:      17px;

	/* --- barve --- */
	--iag-ink:      var(--FMS-Deep-Blue, #002749);
	--iag-bg:       var(--Fill-Iskra-White, #FFF);
	--iag-accent:   var(--iskra-blue, #0046FF);
	--iag-img-bg:   var(--FMS-Care-Light-Blue, #EDF4F9);

	/* --- mobilni prekrivni slog (slika kot ozadje kartice) --- */
	--iag-m-h:        380px;      /* visina kartice, Figma mobile */
	--iag-m-pad:      20px 25px;  /* padding kartice */
	--iag-m-gap:      30px;       /* razmik med karticami */
	--iag-m-gap-title: 20px;      /* naslov <-> alineje */
	--iag-m-max:      480px;      /* najvecja sirina kartice na telefonu */
	--iag-fade-from:  38%;        /* kje se belina zacne */
	--iag-fade-to:    63%;        /* kje je ze cisto bela */

	/* --- hover --- */
	--iag-shadow-hover: 0 12px 28px rgba(0, 39, 73, .12), 0 0 6.4px rgba(0, 70, 255, .20);
	--iag-lift:         -4px;
	--iag-zoom:         1.04;

	/* --- easing --- */
	--iag-ease:  cubic-bezier(.4, 0, .2, 1);
	--iag-speed: .35s;

	max-width: var(--iag-max);
	margin-inline: auto;
	font-family: var(--iag-font);
	font-feature-settings: 'liga' off, 'clig' off;
}

/* neodvisno od teme – padding se steje v sirino */
.iskra-iag,
.iskra-iag *,
.iskra-iag *::before,
.iskra-iag *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------
   Vrsta kartic
   ------------------------------------------------------------ */

.iskra-iag__cards {
	display: grid;
	grid-template-columns: repeat(var(--iag-cols, 4), minmax(0, 1fr));
	align-items: stretch;
	gap: var(--iag-gap);
}

/* Varianta s tocnimi px iz Figme: [iskra_app_grid layout="fixed"] */
.iskra-iag--fixed .iskra-iag__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.iskra-iag--fixed .iskra-iag__card {
	flex: 0 0 auto;
	width: var(--iag-card-w);
}

/* ------------------------------------------------------------
   Kartica
   ------------------------------------------------------------ */

.iskra-iag__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--iag-gap-img);

	min-width: 0;
	min-height: var(--iag-h);
	padding-bottom: var(--iag-pad-b);

	border-radius: var(--iag-radius);
	background: var(--iag-bg);
	overflow: hidden;

	transition:
		transform  var(--iag-speed) var(--iag-ease),
		box-shadow var(--iag-speed) var(--iag-ease);
}

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

.iskra-iag__media {
	width: 100%;
	aspect-ratio: var(--iag-img-ratio);
	overflow: hidden;
	background-color: var(--iag-img-bg);
	border-radius: var(--iag-radius) var(--iag-radius) 0 0;
	flex: 0 0 auto;
}

.iskra-iag__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--iag-speed) var(--iag-ease);
}

/* ------------------------------------------------------------
   Besedilo
   ------------------------------------------------------------ */

.iskra-iag__body {
	display: flex;
	flex-direction: column;
	gap: var(--iag-gap-title);
	width: 100%;
	min-width: 0;
	padding-inline: var(--iag-pad-x);
}

.iskra-iag__title {
	margin: 0;
	color: var(--iag-ink);
	font-family: inherit;
	font-size: var(--iag-title-size);
	font-style: normal;
	font-weight: var(--iag-title-weight);
	line-height: var(--iag-title-lh);
	letter-spacing: var(--iag-title-ls);
	text-align: left;
}

.iskra-iag__list {
	display: flex;
	flex-direction: column;
	gap: var(--iag-gap-li);
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
}

.iskra-iag__list li {
	position: relative;
	margin: 0;
	padding-left: var(--iag-bullet-pad);
	color: var(--iag-ink);
	font-family: inherit;
	font-size: var(--iag-text-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--iag-text-lh);
}

/* modra obrocna kljukica, enaka kot pri [iskra_app_cards] */
.iskra-iag__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1.5px solid var(--iag-accent);
	background: no-repeat center / 9px 9px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2l3 3L10.5 2.5' fill='none' stroke='%230046FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   Hover  ([iskra_app_grid hover="lift" | "shadow" | "none"])
   ------------------------------------------------------------ */

@media (hover: hover) {

	.iskra-iag--hover-lift .iskra-iag__card:hover,
	.iskra-iag--hover-shadow .iskra-iag__card:hover {
		box-shadow: var(--iag-shadow-hover);
	}

	.iskra-iag--hover-lift .iskra-iag__card:hover {
		transform: translateY(var(--iag-lift));
	}

	.iskra-iag--hover-lift .iskra-iag__card:hover .iskra-iag__img {
		transform: scale(var(--iag-zoom));
	}
}

/* ============================================================
   TABLET  (2 stolpca, kartica ostane v namiznem slogu)
   Za tablico ni locene Figme – vzeta je namizna kartica v 2 stolpcih.
   ============================================================ */

@media (max-width: 1024px) {
	.iskra-iag__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.iskra-iag--fixed .iskra-iag__cards {
		max-width: calc(var(--iag-card-w) * 2 + var(--iag-gap));
		margin-inline: auto;
	}
}

/* ============================================================
   MOBILE  (<= 600px)  – Figma mobile: kartica 300x380, padding 20/25,
   slika je ozadje cele kartice in se spodaj zblede v belo,
   naslov + alineje sedijo na dnu.
   Z mobile="stack" ostane namizni slog (slika zgoraj) tudi na telefonu.
   ============================================================ */

@media (max-width: 600px) {

	.iskra-iag {
		--iag-gap: var(--iag-m-gap);
		--iag-title-ls: normal;   /* mobilna tipografija je brez letter-spacinga */
	}

	.iskra-iag__cards {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.iskra-iag__card,
	.iskra-iag--fixed .iskra-iag__card {
		width: 100%;
		max-width: var(--iag-m-max);
	}

	/* --- prekrivni slog (privzeto) --- */

	.iskra-iag--mobile-overlay .iskra-iag__card {
		min-height: var(--iag-m-h);
		justify-content: flex-end;
		padding: var(--iag-m-pad);
	}

	.iskra-iag--mobile-overlay .iskra-iag__media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		border-radius: var(--iag-radius);
	}

	/* bel preliv, da je besedilo citljivo */
	.iskra-iag--mobile-overlay .iskra-iag__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0) var(--iag-fade-from),
			var(--iag-bg) var(--iag-fade-to)
		);
	}

	.iskra-iag--mobile-overlay .iskra-iag__body {
		position: relative;
		z-index: 1;
		gap: var(--iag-m-gap-title);
		padding-inline: 0;
	}

	/* na telefonu ni hoverja – slika naj ostane pri miru */
	.iskra-iag--mobile-overlay .iskra-iag__img {
		transform: none;
	}

	/* --- mobile="stack": namizni slog tudi na telefonu --- */

	.iskra-iag--mobile-stack {
		--iag-h: auto;
	}
	.iskra-iag--mobile-stack .iskra-iag__card {
		min-height: 0;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.iskra-iag__card,
	.iskra-iag__img {
		transition-duration: .01ms !important;
	}
	.iskra-iag--hover-lift .iskra-iag__card:hover {
		transform: none;
	}
	.iskra-iag--hover-lift .iskra-iag__card:hover .iskra-iag__img {
		transform: none;
	}
}