/* ============================================================
   Iskra Compare  v3.8.1

   Primerjalna preglednica. Ena mreza za celo tabelo, zato so
   celice v vrstici vedno enako visoke, prvi stolpec pa lahko
   ostane prilepljen ob levem robu, ko se na mobilnem drsi.
   ============================================================ */

.iskra-cmp {
	/* --- mere --- */
	--cmp-label-w:   clamp(180px, 20vw, 300px);
	--cmp-col-w:     190px;
	--cmp-radius:    30px;
	--cmp-cell-pad:  22px 30px;
	--cmp-head-pad:  26px 30px;

	/* --- tipografija --- */
	--cmp-font:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cmp-t1-size:   25px;   /* "Features" */
	--cmp-t1-lh:     31px;
	--cmp-t2-size:   17px;   /* celice */
	--cmp-t2-lh:     27px;

	/* --- barve --- */
	--cmp-ink:       var(--FMS-Deep-Blue, #002749);
	--cmp-head-bg:   var(--FMS-Deep-Blue, #002749);
	--cmp-head-ink:  var(--Fill-Iskra-White, #FFF);
	--cmp-row-odd:   #EAF1F9;
	--cmp-row-even:  var(--Fill-Iskra-White, #FFF);
	--cmp-border:    rgba(255, 255, 255, .9);
	--cmp-yes:       #35C46B;
	--cmp-no:        #E8866B;

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

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

/* ------------------------------------------------------------
   Drsnik
   ------------------------------------------------------------ */

.iskra-cmp__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* border-radius: var(--cmp-radius); */
}
.iskra-cmp__scroll::-webkit-scrollbar {
	display: none;
}

.iskra-cmp__grid {
	display: grid;
	/* grid-template-columns pride iz PHP-ja, ker je stevilo stolpcev znano sele tam */
	min-width: min-content;
	border: 1px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	overflow: hidden;
	background: var(--cmp-row-even);
}

/* ------------------------------------------------------------
   Celice
   ------------------------------------------------------------ */

.iskra-cmp__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cmp-cell-pad);
	text-align: center;
	font-size: var(--cmp-t2-size);
	line-height: var(--cmp-t2-lh);
	font-weight: 400;
	color: var(--cmp-ink);
	background: var(--cmp-row-even);
}

.iskra-cmp__cell.is-odd {
	background: var(--cmp-row-odd);
}

/* Edini otrok celice. Brez njega bi flex razbil besedilo, <strong>
   in <br> na locene elemente in bi se postavili drug ob drugega. */
.iskra-cmp__val {
	display: block;
	width: 100%;
}

.iskra-cmp__cell strong {
	font-weight: 600;
}

/* v prvem stolpcu je besedilo levo poravnano */
.iskra-cmp__cell--label .iskra-cmp__val {
	text-align: left;
}

/* prvi stolpec – prilepljen ob levem robu med drsenjem */
.iskra-cmp__cell--label {
	position: sticky;
	left: 0;
	z-index: 2;
	justify-content: flex-start;
	text-align: left;
	font-weight: 600;
}

/* glava */
.iskra-cmp__cell--head {
	padding: var(--cmp-head-pad);
	background: var(--cmp-head-bg);
	color: var(--cmp-head-ink);
	min-height: 96px;
}

.iskra-cmp__cell--head.iskra-cmp__cell--label {
	z-index: 3;
	font-size: var(--cmp-t1-size);
	line-height: var(--cmp-t1-lh);
	font-weight: 400;
	letter-spacing: .3px;
	color: var(--cmp-head-ink);
}

/* ------------------------------------------------------------
   Logotipi v glavi
   ------------------------------------------------------------ */

.iskra-cmp__logo,
.iskra-cmp__logo-img {
	display: block;
	max-width: 100%;
}

.iskra-cmp__logo svg {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(24px, 2.4vw, 38px);
}

.iskra-cmp__logo-img {
	height: clamp(24px, 2.4vw, 38px);
	width: auto;
	object-fit: contain;
}

.iskra-cmp__coltitle {
	font-size: var(--cmp-t1-size);
	line-height: var(--cmp-t1-lh);
	font-weight: 600;
	color: var(--cmp-head-ink);
}

/* ------------------------------------------------------------
   Kljukica in krizec
   ------------------------------------------------------------ */

.iskra-cmp__yes,
.iskra-cmp__no {
	width: 26px;
	height: 26px;
}

.iskra-cmp__yes {
	color: var(--cmp-yes);
}

.iskra-cmp__no {
	color: var(--cmp-no);
}

/* ------------------------------------------------------------
   Navigacija – vidna samo, ko tabela ne gre v sirino
   ------------------------------------------------------------ */

.iskra-cmp__nav {
	display: flex;
	gap: 10px;
	margin-top: 60px;
	padding-right: 41px;
	justify-content: flex-end;
}
.iskra-cmp__nav[hidden] {
	display: none;
}

.iskra-cmp__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	color: var(--cmp-head-ink);
	transition: opacity .25s var(--cmp-ease);
}

.iskra-cmp__arrow svg {
	width: 26px;
	height: 26px;
}

.iskra-cmp__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.iskra-cmp__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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

@media (max-width: 1024px) {
	.iskra-cmp {
		--cmp-cell-pad: 18px 20px;
		--cmp-head-pad: 22px 20px;
		--cmp-col-w:    180px;
	}
}

/* ============================================================
   MOBILE  (<= 767px)
   Prvi stolpec ostane viden, ostali drsijo.
   ============================================================ */

@media (max-width: 767px) {

	.iskra-cmp {
		--cmp-label-w:  150px;
		--cmp-col-w:    200px;
		--cmp-radius:   20px;
		--cmp-cell-pad: 16px 16px;
		--cmp-head-pad: 18px 16px;
		--cmp-t1-size:  18px;
		--cmp-t1-lh:    24px;
		--cmp-t2-size:  15px;
		--cmp-t2-lh:    22px;
	}

	.iskra-cmp__cell--head {
		min-height: 74px;
	}
	
	.iskra-cmp__scroll {
		padding-left: 51px;
		padding-right: 49px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.iskra-cmp__scroll {
		scroll-behavior: auto;
	}
}