/* ============================================================
   Раскладки подвала (inc/footer-layouts.php)
   ------------------------------------------------------------
   Классический подвал масла.сайт (.ft без .ftl) этих правил не
   видит. Здесь пять своих: brand / minimal / service / columns /
   trade. Общее — тёмная плита и типографическая иерархия;
   различается состав и то, что в подвале главное.
   ============================================================ */

.ftl {
	background: var(--bg-inverse, #13161D);
	color: var(--fg-on-dark, #fff);
	font-family: var(--font-body);
}

.ftl__wrap {
	max-width: var(--ms-maxw, 1240px);
	margin-inline: auto;
	padding-inline: var(--ms-pad-inline, 24px);
}

.ftl__top {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 64px);
	padding-block: clamp(40px, 5vw, 72px);
}

.ftl__col { flex: 1 1 200px; min-width: 0; }
.ftl__col--lead { flex: 1 1 280px; }
.ftl__col--wide { flex: 2 1 380px; }

/* --- бренд --------------------------------------------------- */
.ftl__logo { display: inline-block; text-decoration: none; color: inherit; }
.ftl__logo img { display: block; max-height: 40px; width: auto; }
.ftl__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: calc(20px * var(--ms-type-scale, 1));
	letter-spacing: -.01em;
}
.ftl__about {
	margin: 14px 0 0;
	max-width: 42ch;
	font-size: calc(14px * var(--ms-type-scale, 1));
	line-height: 1.6;
	/* Вторичный текст на тёмном тонируем от самого фона, а не серым:
	   серый на цветной плите выглядит грязным. */
	color: color-mix(in srgb, var(--fg-on-dark, #fff) 72%, transparent);
}

/* --- контакты ------------------------------------------------ */
.ftl__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
	font-size: calc(14px * var(--ms-type-scale, 1));
}
.ftl__contacts a { color: inherit; text-decoration: none; }
.ftl__contacts a:hover { text-decoration: underline; }
.ftl__phone {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: calc(19px * var(--ms-type-scale, 1));
	letter-spacing: -.01em;
}
.ftl__hours { color: color-mix(in srgb, var(--fg-on-dark, #fff) 65%, transparent); }

/* --- меню ---------------------------------------------------- */
.ftl__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: calc(14px * var(--ms-type-scale, 1));
}
.ftl__menu a {
	color: color-mix(in srgb, var(--fg-on-dark, #fff) 78%, transparent);
	text-decoration: none;
}
.ftl__menu a:hover { color: var(--fg-on-dark, #fff); }

/* --- подписка ------------------------------------------------ */
.ftl__subscribe { margin-bottom: 26px; }
.ftl__subtitle {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(17px * var(--ms-type-scale, 1));
}

/* --- пары «ключ → значение» (условия, реквизиты) -------------- */
.ftl__terms,
.ftl__req {
	flex: 2 1 380px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 20px;
	margin: 0;
	font-size: calc(13px * var(--ms-type-scale, 1));
	line-height: 1.5;
}
.ftl__terms dt,
.ftl__req dt {
	color: color-mix(in srgb, var(--fg-on-dark, #fff) 60%, transparent);
	white-space: nowrap;
}
.ftl__terms dd,
.ftl__req dd { margin: 0; }
/* Реквизиты сверяют посимвольно — моноширинным. */
.ftl__req dd { font-family: var(--font-mono); }

/* --- нижняя полоса ------------------------------------------- */
.ftl__base {
	border-top: 1px solid color-mix(in srgb, var(--fg-on-dark, #fff) 14%, transparent);
	font-size: calc(12px * var(--ms-type-scale, 1));
	color: color-mix(in srgb, var(--fg-on-dark, #fff) 62%, transparent);
}
.ftl__base .ftl__wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	padding-block: 18px;
}
.ftl__legal { display: flex; gap: 18px; margin-left: auto; }
.ftl__legal a { color: inherit; text-decoration: none; }
.ftl__legal a:hover { color: var(--fg-on-dark, #fff); }

/* ============================================================
   BRAND — крупный вордмарк и подписка
   ============================================================ */
.ftl--brand .ftl__wordmark { font-size: calc(30px * var(--ms-type-scale, 1)); }
.ftl--brand .ftl__top { align-items: flex-start; }
.ftl--brand .ftl__menu {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 26px;
}

/* ============================================================
   MINIMAL — одна строка
   ============================================================ */
.ftl--minimal .ftl__top {
	align-items: center;
	justify-content: space-between;
	padding-block: clamp(26px, 3vw, 40px);
}
.ftl--minimal .ftl__menu { flex-direction: row; gap: 22px; }
.ftl--minimal .ftl__contacts { flex-direction: row; gap: 18px; margin-top: 0; }
.ftl--minimal .ftl__phone { font-size: calc(14px * var(--ms-type-scale, 1)); font-weight: 400; }

/* ============================================================
   SERVICE — условия парами
   ============================================================ */
.ftl--service .ftl__terms dt { font-weight: 600; color: var(--fg-on-dark, #fff); }

/* ============================================================
   COLUMNS — колонки виджетов
   ============================================================ */
.ftl--columns .ftl__col :is(h2, h3, .widget-title) {
	margin: 0 0 14px;
	font-family: var(--font-display);
	font-size: calc(15px * var(--ms-type-scale, 1));
	font-weight: 600;
}
.ftl--columns .ftl__col :is(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: calc(14px * var(--ms-type-scale, 1));
}
.ftl--columns .ftl__col a {
	color: color-mix(in srgb, var(--fg-on-dark, #fff) 78%, transparent);
	text-decoration: none;
}

/* ============================================================
   TRADE — реквизиты на видном месте
   ============================================================ */
.ftl--trade .ftl__req dt { font-weight: 600; }

@media (max-width: 780px) {
	.ftl__top { gap: 26px; }
	.ftl--minimal .ftl__top { flex-direction: column; align-items: flex-start; }
	.ftl__terms,
	.ftl__req { grid-template-columns: 1fr; gap: 4px; }
	.ftl__req dt { margin-top: 8px; }
	.ftl__legal { margin-left: 0; }
}