/* ==========================================================================
   usp.css — Előnyök sor a hero alatt.
   MÉRT (DESIGN-SPEC.md 6.2): a sor 67 px, négy elem 270 px szélesen,
   40 px réssel. Szövegblokk 220x53, margin 7px 0. AZ IKON ELTÉR a
   tervtől (kliens-kérés): a 70x50-es mentazöld téglalap helyett háttér nélküli,
   KÉTSZÍNŰ (duotone) ikon, lásd a .usp__icon szabálynál.
   NULLA ÜRES SOR.
   ========================================================================== */
.usp__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.usp__row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-10);
	}
}
/* AZ IKON ES A SZOVEG EGY MAGASSAGBAN KEZDODIK (kliens-keres), tehat a sor
   nem fuggolegesen kozepre igazit. Igy a negy elem felso ele egy vonalban all
   akkor is, ha az egyikhez ket, a masikhoz harom sor szoveg tartozik. */
.usp__item {
	display: grid;
	grid-template-columns: 47px minmax(0, 1fr);
	align-content: start;
	min-height: 67px;
}
/* AZ IKON KETSZINU ES HATTER NELKUL all (kliens-keres, minta: pelenka.hu). A
   kek kor kikerult: a duotone ikonnak sajat tomege van, a kor csak elvette
   volna a helyet a rajztol.
   .
   A BOROSTYAN AKCENT az ikon KITOLTESE, a kek a reszlete (lasd a
   `vls_icon_set()` duotone blokkjat). Az ikon jelenteset a kek reszlet
   hordozza, tehat a halvanyabb akcent nem kontraszt-kerdes.
   .
   A 46 PIXEL a mert felso hatar: a sor negy eleme 270 pixel szeles, ebbol a
   szovegnek 220 kell, tehat az ikon-hasab 50 pixel korul a maximum. */
.usp__icon {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: 46px;
	height: 46px;
	padding: 0;
	background: none;
	color: var(--c-primary);
}
.usp__icon svg {
	width: 46px;
	height: 46px;
}
.usp__title {
	grid-column: 2;
	align-self: start;
	padding-left: var(--sp-3);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text);
}
.usp__sub {
	grid-column: 2;
	align-self: start;
	margin: 0;
	padding-left: var(--sp-3);
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--c-text-soft);
}
@media (max-width: 767px) {
	.usp__row {
		gap: var(--sp-5) var(--sp-4);
	}
	.usp__item {
		grid-template-columns: 38px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: start;
		column-gap: var(--sp-3);
		row-gap: var(--sp-2);
		min-height: 0;
	}
	.usp__icon {
		grid-row: 1;
		width: 38px;
		height: 38px;
		padding: 0;
	}
	.usp__icon svg {
		width: 38px;
		height: 38px;
	}
	.usp__title {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		margin: 0;
		padding-left: 0;
		font-size: var(--fs-base);
		line-height: 1.25;
	}
	.usp__sub {
		grid-column: 1 / -1;
		grid-row: 2;
		padding-left: 0;
		font-size: var(--fs-sm);
	}
}