/*
 * Подвал сайта restyling.fi – свои стили вместо конструктора Avada.
 *
 * Что здесь есть и чего нет:
 *   ЕСТЬ  – сетка подвала (две части, колонки, отступы), оформление строк с иконками,
 *           кнопок соцсетей, логотипов и полосы со ссылкой на страницу о данных.
 *   НЕТ   – карусель «Miksi valita Restyling Point?»: её стили лежат в общем файле
 *           mu-plugins/loovl-stili/dop-stili.css (классы *-footer-2024, carousel-*-2024)
 *           и тут не повторяются, иначе будет два источника правды.
 *   НЕТ   – размеры заголовков h3: их задаёт тема (22 px), а на узких экранах
 *           пересчитывает её же скрипт fusion-responsive-typography.js – он проходит
 *           по всем h1–h6 страницы. Свой font-size сломал бы этот пересчёт.
 *
 * 🔴 Селекторы пишутся от .loovl-podval: правила темы вроде
 *    «.fusion-post-content p» точнее одного класса и молча перебивают его
 *    (грабля 14 в restyling.fi/CLAUDE.md).
 *
 * Сетка повторяет прежнюю: поля 30 px, полоса содержимого 1200 px, колонки 48% + 4%,
 * перелом на 1000 px – это --grid_main_break_point темы.
 */

.loovl-podval {
	background: #1e1e1e;
	color: #fff;
}

.loovl-podval *,
.loovl-podval *::before,
.loovl-podval *::after {
	box-sizing: border-box;
}

/* Верхняя часть – карусель. Поля только по бокам: сверху их даёт сам заголовок. */
.loovl-podval__miksi {
	padding: 0 30px;
}

.loovl-podval__tiedot {
	padding: 30px;
}

.loovl-podval__ryhma {
	max-width: 1200px;
	margin: 0 auto;
}

/* --- Нижняя часть: две колонки --- */

.loovl-podval__sarakkeet {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; /* колонки разной высоты не растягиваются – как было */
}

.loovl-podval__sarake {
	width: 48%;
}

.loovl-podval__sarake--yhteys {
	margin-right: 4%;
}

.loovl-podval .loovl-podval__otsikko {
	margin: 10px 0 15px;
	color: #fff;
	text-align: left;
}

/* Строки с иконками. Список, а не абзацы: это перечень.
   Отступ 16 px повторяет прежний – там были <p> с обычным отступом абзаца. */
.loovl-podval__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.loovl-podval__lista li {
	margin: 16px 0;
}

.loovl-podval__lista a {
	color: #c7081b;
	text-decoration: none;
}

.loovl-podval__lista a:hover {
	text-decoration: underline;
}

.loovl-podval__lista a:focus-visible {
	outline: 2px solid #c7081b;
	outline-offset: 2px;
}

.loovl-podval__ikoni {
	margin-right: 8px;
	color: #c7081b;
	font-size: 16px;
	line-height: 1;
	display: inline-block;
}

/* Две строки – Y-tunnus и WhatsApp – крупнее прочих: так было и раньше. */
.loovl-podval__ikoni--iso {
	margin-right: 10px;
	font-size: 20px;
}

/* Заголовки карточек карусели стали h3 (было h2 – по девять на каждой странице сайта).
   Шрифт заголовкам даёт тема по тегу, поэтому Teko здесь задаём сами: иначе карточка
   перешла бы на Montserrat и выросла на 32 px. Размер и цвет – в dop-stili.css. */
.loovl-podval .h2-footer-2024 {
	font-family: Teko, Arial, Helvetica, sans-serif;
	font-weight: 500;
	letter-spacing: .5px;
	font-style: normal;
}

/* --- Правая колонка: соцсети и логотипы --- */

.loovl-podval__some-rivi {
	display: flex;
	flex-wrap: wrap;
}

.loovl-podval__some-sarake {
	width: 48%;
	margin-right: 4%;
	text-align: center;
}

.loovl-podval__logo-sarake {
	width: 32%;
	text-align: center;
}

/* Отрицательный отступ съедает поля крайних кнопок: сами кнопки стоят через 5 px,
   а блок по высоте равен ровно кнопке (56 px), как у прежней вёрстки темы. */
.loovl-podval__some {
	margin: -5px 0;
	text-align: center;
}

.loovl-podval .loovl-podval__some-linkki {
	display: inline-block;
	margin: 5px;
	padding: 8px;
	border: 1px solid #c7081b;
	border-radius: 4px;
	background-color: #c7081b;
	color: #fff;
	font-size: 38px;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}

/* 🔴 Глиф соцсети рисует ::before, и его цвет задаёт не наша кнопка, а правило темы
   для ссылок («#main .post h2 a … a::before»): оно точнее одного класса и красило
   значок в #c7081b – красным по красному фону. Снаружи это выглядело как три пустых
   красных квадрата, а замеры размеров и шрифта при этом сходились (20.09.2026). */
.loovl-podval .loovl-podval__some-linkki::before {
	color: inherit;
}

.loovl-podval .loovl-podval__some-linkki:hover {
	opacity: .8;
}

.loovl-podval .loovl-podval__some-linkki:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Логотип «Luotettava kumppani» – под кнопками, через тот же отступ, что и прежде. */
.loovl-podval__logo {
	margin-top: 10px;
}

.loovl-podval__logo img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/* Логотип «Suomen vahvimmat» стоит в белой рамке – так его рисовала прежняя тема.
   🔴 Рамка на ссылке, а не на самой картинке: иначе 150x215 превращались в 158x223
   (рамка входит в размер элемента) и знак вырастал на 8 px – замер 20.09.2026. */
.loovl-podval__logo--kehys a {
	display: inline-block;
	border: 4px solid #fff;
	line-height: 0;
}

.loovl-podval__logo-sarake .loovl-podval__logo {
	margin-top: 0;
}

/* --- Способы оплаты (0.2.2) --- одноцветные знаки одним рядом под обоими логотипами справа (48 % + 4 % + 32 %),
   приглушённые – подвал не пёстрый; при наведении белые. */
.loovl-podval__maksu {
	width: 84%;
	margin-top: 34px;
	text-align: center;
}

.loovl-podval__maksu-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.loovl-podval__maksu-lista li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, .62);
	transition: color .2s ease;
}

.loovl-podval__maksu-lista li:hover {
	color: #fff;
}

.loovl-podval__maksu-lista svg {
	display: block;
	fill: currentColor;
}

.loovl-podval__maksu-sana {
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1;
}

/* --- Полоса со ссылкой на страницу о данных --- */

.loovl-podval__palkki {
	padding: 14px 16px;
	text-align: center;
	line-height: 1.4;
}

.loovl-podval__palkki a {
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	text-decoration: none;
}

.loovl-podval__palkki a:hover {
	color: #fff;
	text-decoration: underline;
}

.loovl-podval__palkki a:focus-visible {
	outline: 2px solid #c7081b;
	outline-offset: 3px;
}

/* --- Узкие экраны: всё в один столбец, как было --- */

/* 🔴 Отступы заголовка у прежнего подвала менялись дважды, и не там, где ждёшь.
   Замер 20.09.2026 по восьми ширинам: 1920–1024 – 10/15, 900–778 – 10/10,
   640 и уже – 0/20. Повторяем ступени, иначе правая колонка съезжает
   на 16–19 px относительно прежней. */
@media only screen and (max-width: 1000px) {

	.loovl-podval .loovl-podval__otsikko {
		margin: 10px 0;
	}
}

@media only screen and (max-width: 640px) {

	.loovl-podval .loovl-podval__otsikko {
		margin: 0 0 20px;
	}
}

@media only screen and (max-width: 1000px) {

	.loovl-podval__sarake,
	.loovl-podval__some-sarake,
	.loovl-podval__logo-sarake {
		width: 100%;
		margin-right: 0;
	}

	.loovl-podval__logo-sarake .loovl-podval__logo {
		margin-top: 10px;
	}

	.loovl-podval__maksu {
		width: 100%;
		margin-top: 28px;
	}
}

/* Телефон (0.2.3): знаки меньше и одной ровной строкой. В две строки по три они стояли «вразброс» (владелец):
   столбцы брали ширину по самому широкому знаку и промежутки выходили разные. Размер задаёт стиль: знак из
   спрайта вписывается в рамку <svg> по своему viewBox. На 320 px строка может перенестись – это крайний случай. */
@media only screen and (max-width: 640px) {

	.loovl-podval__maksu-lista {
		gap: 12px 16px;
	}

	.loovl-podval__maksu-lista li:nth-child(1) svg { width: 36px; height: 12px; }
	.loovl-podval__maksu-lista li:nth-child(2) svg { width: 28px; height: 17px; }
	.loovl-podval__maksu-lista li:nth-child(3) svg { width: 20px; height: 20px; }
	.loovl-podval__maksu-lista li:nth-child(4) svg { width: 26px; height: 17px; }
	.loovl-podval__maksu-lista li:nth-child(5) svg { width: 35px; height: 14px; }

	.loovl-podval__maksu-sana {
		font-size: 12.5px;
	}
}