/* ==========================================================================
   PREČO SA VZDELÁVAŤ S NAMI

   Nadpis cez celú šírku, pod ním fotka vľavo a zoznam dôvodov vpravo.
   Zoznam nezačína v jednej línii s fotkou — visí nižšie, tak je to
   nakreslené. Dizajn je kreslený na 1728 × 990 px, obsah od 200 px.
   ========================================================================== */

.shs-reasons {
	--shs-reasons-inset: max(clamp(var(--shs-gutter), 11.57vw, 200px), calc((100% - var(--shs-container)) / 2 + 140px));

	padding-block: calc(var(--shs-space-96) + var(--shs-space-11))
		calc(2 * var(--shs-space-96) + var(--shs-space-32));
	color: var(--shs-brand);
	background: var(--shs-cream);
}

.shs-reasons__head,
.shs-reasons__inner {
	padding-inline: var(--shs-reasons-inset);
}

.shs-reasons__inner {
	display: grid;
	/* Fotka 602 px, medzera 77 px — obe z návrhu. */
	grid-template-columns: minmax(0, 602px) minmax(0, 1fr);
	column-gap: 4.46%;
	align-items: start;
	margin-top: var(--shs-space-80);
}

.shs-reasons__media {
	margin: 0;
	aspect-ratio: 602 / 425;
	overflow: hidden;
}

/* Video sedí v ráme rovnako ako fotka — je to tá istá plocha sekcie. */
.shs-reasons__media :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Zoznam ------------------------------------------------------------- */

.shs-reasons__list {
	display: grid;
	/* 100 px pod hornou hranou fotky — percento je z návrhovej šírky. */
	row-gap: var(--shs-space-64);
	margin: 0;
	padding: min(5.79vw, 100px) 0 0;
	list-style: none;
}

.shs-reasons__item {
	display: flex;
	align-items: center;
	gap: var(--shs-space-32);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/*
 * Znamienko pri dôvode sú dva prekryté krúžky — v návrhu majú 33 px
 * a prekrývajú sa o 12 px. Kreslí ich CSS, nie ikona: je to čistý tvar
 * bez detailu a takto sa dá odvodiť z farby textu.
 */
.shs-reasons__icon {
	position: relative;
	flex: 0 0 auto;
	width: 54px;
	height: 33px;
}

.shs-reasons__icon::before,
.shs-reasons__icon::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 33px;
	border: var(--shs-hairline) solid currentcolor;
	border-radius: 50%;
}

.shs-reasons__icon::before {
	left: 0;
}

.shs-reasons__icon::after {
	right: 0;
}

/* ---- Mobil -------------------------------------------------------------- */

@media (max-width: 900px) {
	.shs-reasons {
		padding-block: var(--shs-space-64);
	}

	.shs-reasons__head,
	.shs-reasons__inner {
		padding-inline: var(--shs-gutter);
	}

	.shs-reasons__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-42);
		margin-top: var(--shs-space-48);
	}

	.shs-reasons__list {
		row-gap: var(--shs-space-32);
		padding-top: 0;
	}

	.shs-reasons__item {
		gap: var(--shs-space-24);
		font-size: var(--shs-fs-base);
	}

	.shs-reasons__icon {
		width: 40px;
		height: 24px;
	}

	.shs-reasons__icon::before,
	.shs-reasons__icon::after {
		width: 24px;
	}
}