/* Страница «Гарантии»: три секции карточек.
 * 1. guarantees_main_info — 2 колонки, классические карточки заголовок + текст.
 * 2. guarantees_begin — H2 + 4 колонки карточек с иконкой 66×66 и текстом.
 * 3. guarantees_rules — H2 + 2 колонки карточек.
 * Для списков внутри карточек: ul.lf-list-check (зелёная галочка), ul.lf-list-warning (восклицательный знак), ul без класса — обычные точки.
 * Для серого текста: span/p с классом .lf-muted. */

.lf-guarantee {
	width: 100%;
	padding: 0 0 clamp(32px, 6vw, 72px);
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #0a0a0a;
}

.lf-guarantee-empty {
	margin: 0 0 24px;
	padding: 16px 20px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	color: #9a3412;
	font-size: 15px;
}

.lf-guarantee-empty code {
	padding: 1px 6px;
	background: #fde68a;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	color: #78350f;
}

/* ───── Секции ───── */

.lf-guarantee-section {
	margin: 0 0 clamp(24px, 3vw, 48px);
}

.lf-guarantee-section:last-child {
	margin-bottom: 0;
}

.lf-guarantee-section__heading {
	margin: 0 0 clamp(16px, 2vw, 28px);
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-synthesis: none;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.25;
	color: #0a0a0a;
}

/* ───── Сетки ───── */

.lf-guarantee__grid {
	display: grid;
	gap: clamp(16px, 1.6vw, 24px);
}

.lf-guarantee__grid--2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lf-guarantee__grid--4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ───── Универсальная карточка (секции 1 и 3) ───── */

.lf-guarantee-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: clamp(20px, 2vw, 28px) clamp(24px, 2.4vw, 36px);
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.03);
}

.lf-guarantee-card__title {
	margin: 0 0 16px;
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.25;
	color: #404042;
}

/* Секция после H1 (guarantees_main_info): заголовки карточек — Lato 400 24px, gap снизу строго 24px */
.lf-guarantee-section--main .lf-guarantee-card__title {
	margin: 0 0 24px;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-synthesis: none;
	font-weight: 400;
	font-size: 24px;
}

/* Секция «Правила обмена и возврата» (guarantees_rules): заголовки карточек — Lato 400 24px, gap снизу строго 24px */
.lf-guarantee-section--rules .lf-guarantee-card__title {
	margin: 0 0 24px;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-synthesis: none;
	font-weight: 400;
	font-size: 24px;
}

.lf-guarantee-card__text {
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #0a0a0a;
}

/* Отступ между блоками текста карточки (абзацы, списки и т.п.) — ровно 24px.
 * Верхний margin задаём КАЖДОМУ блоку напрямую, а не только «второму и далее» через (* + *):
 * в контенте инфоблока абзац-вступление перед списком может быть «голым» текстовым узлом
 * без <p>, и селектор смежности на него не среагировал бы — список прилипал бы к тексту.
 * У первого блока этот margin-top схлопывается с margin-bottom заголовка карточки (тоже 24px),
 * поэтому отступ не удваивается. Иконочные карточки секции «С какого момента начинается
 * гарантия» сюда НЕ попадают — у них отдельный класс .lf-guarantee-icon-card__text. */
.lf-guarantee-card__text > * {
	margin-top: 24px;
	margin-bottom: 0;
}

.lf-guarantee-card__text strong {
	font-weight: 600;
}

/* ───── Карточка с иконкой (секция 2) ───── */

.lf-guarantee-icon-card {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.4vw, 20px);
	background: #fff;
	border-radius: 16px;
	padding: clamp(20px, 2vw, 28px);
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.03);
}

.lf-guarantee-icon-card__icon {
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lf-guarantee-icon-card__icon img {
	display: block;
	width: 66px;
	height: 66px;
	object-fit: contain;
}

.lf-guarantee-icon-card__text {
	flex: 1 1 auto;
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #0a0a0a;
}

.lf-guarantee-icon-card__text p {
	margin: 0 0 8px;
}

.lf-guarantee-icon-card__text p:last-child {
	margin-bottom: 0;
}

/* ───── Списки внутри карточек ───── */

/* Базовые стили для ВСЕХ ul в тексте (работает и с доп. классом lf-muted) — тёмная точка слева.
 * Вертикальный отступ списка (24px сверху) задаёт общее правило «.lf-guarantee-card__text > *»
 * выше, поэтому собственный margin у ul не задаём, чтобы не было двойного интервала. */
.lf-guarantee-card__text ul {
	list-style: none;
	padding: 0;
}

.lf-guarantee-card__text li {
	position: relative;
	padding-left: 18px;
	margin: 0 0 8px;
}

.lf-guarantee-card__text li:last-child {
	margin-bottom: 0;
}

.lf-guarantee-card__text li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

/* Список с зелёными галочками — .lf-list-check (переопределяет точку) */
.lf-guarantee-card__text ul.lf-list-check li {
	padding-left: 32px;
	margin-bottom: 12px;
	min-height: 24px;
}

.lf-guarantee-card__text ul.lf-list-check li::before {
	left: 0;
	top: 0;
	width: 24px;
	height: 1.5em;
	border-radius: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M15 10L11 14L9 12M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%2300A63E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat left center;
	background-size: 24px 24px;
}

/* Список с восклицательным знаком в кружке — .lf-list-warning (переопределяет точку).
 * Между пунктами — 24px во всех секциях. У последнего пункта отступ снимаем явно:
 * правило ниже специфичнее общего «li:last-child», иначе остался бы лишний 24px снизу. */
.lf-guarantee-card__text ul.lf-list-warning li {
	padding-left: 40px;
	margin-bottom: 24px;
	min-height: 32px;
}

.lf-guarantee-card__text ul.lf-list-warning li:last-child {
	margin-bottom: 0;
}

.lf-guarantee-card__text ul.lf-list-warning li::before {
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M16 21.3333V16.0001M16 10.6799V10.6667M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z' stroke='%23404042' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat;
	background-size: contain;
}

/* Серый текст — оборачивается в <span class="lf-muted"> или <p class="lf-muted"> */
.lf-guarantee .lf-muted {
	color: #6b7280;
}

/* ───────── Адаптив ───────── */

/* Большие планшеты / маленькие десктопы — 4-колоночная сетка → 2 колонки */
@media (max-width: 1199px) {
	.lf-guarantee__grid--4col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Планшеты ≤991px — секции 1 и 3 переходят в одну колонку */
@media (max-width: 991px) {
	.lf-guarantee__grid--2col {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Мобильные ≤767px — все сетки в одну колонку, шрифты ужимаем */
@media (max-width: 767px) {
	.lf-guarantee__grid--4col {
		grid-template-columns: minmax(0, 1fr);
	}

	.lf-guarantee-card {
		border-radius: 12px;
		padding: 20px 18px;
	}

	.lf-guarantee-card__title {
		font-size: 1.125rem;
	}

	.lf-guarantee-card__text {
		font-size: 15px;
	}

	.lf-guarantee-icon-card {
		border-radius: 12px;
		padding: 18px;
		gap: 14px;
	}

	.lf-guarantee-icon-card__text {
		font-size: 14px;
	}

	.lf-guarantee-section__heading {
		font-size: clamp(1.125rem, 4vw, 1.5rem);
	}
}