/*
 * Фактуры и фоновые покрытия.
 *
 * Выбранная комбинация:
 *   1. Тихий фон  — мелкое зерно на светлых секциях (почти незаметное).
 *   3. Тёплые пятна — жёлтые отсветы в ключевых секциях.
 *   5. Тёмный асфальт — графитовые секции с усиленным зерном и отсветом.
 *
 * Варианты «заметная фактура» (штриховка) и «разметка» (полосы) не используются.
 *
 * Все фактуры — встроенные SVG-текстуры (около 300 байт), внешних картинок нет.
 * Файл подключается после blocks.css, поэтому может дополнять заливки блоков.
 *
 * Регулировка: изменить opacity в текстурах --asf-grain / --asf-grain-dark
 * и прозрачность градиентов ниже.
 */

:root {
	/* Тихая фактура для светлых секций */
	--asf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");

	/* Усиленная фактура для графитовых секций: на тёмном зерно должно быть заметнее */
	--asf-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.10'/%3E%3C/svg%3E");

	/* Тёплые пятна фирменного жёлтого */
	--asf-warm: radial-gradient(70% 80% at 8% 0%, rgba(255, 207, 0, .28), transparent 58%),
		radial-gradient(60% 70% at 100% 100%, rgba(255, 207, 0, .18), transparent 60%);

	/* Мягкий отсвет для полосы доверия */
	--asf-warm-soft: radial-gradient(60% 140% at 50% 0%, rgba(255, 207, 0, .12), transparent 70%);

	/* Отсвет на графите */
	--asf-dark-glow: radial-gradient(120% 110% at 88% 0%, rgba(255, 207, 0, .16), transparent 58%);

	/*
	 * Слои фона для блоков. Значения по умолчанию совпадают с вёрсткой;
	 * их переопределяет модуль настроек (inc/theme-options.php) в зависимости
	 * от выбора «Внешний вид → Настроить → Дизайн сайта → Фоновый рисунок».
	 */
	--asf-bg-light: var(--asf-grain), var(--asf-warm);
	--asf-bg-grain: var(--asf-grain);
	--asf-bg-warm: var(--asf-grain), var(--asf-warm);
	--asf-bg-trust: var(--asf-grain), var(--asf-warm-soft);
	--asf-bg-dark: var(--asf-grain-dark), var(--asf-dark-glow);
}

/* ============================================================
   1. Первый экран: тихое зерно + тёплые пятна
   ============================================================ */
.hero {
	background-image: var(--asf-bg-light);
}

/* ============================================================
   1.1 Заливка секции на всю ширину экрана

   Класс .wrap ограничивает ширину контейнером, а .hero и .section несут
   фоновую заливку. Когда оба класса стоят на одном элементе, заливка
   обрывается по краям контейнера — на широком экране виден вертикальный шов.
   Поэтому такой элемент растягиваем на всю ширину, а его содержимое
   оставляем в контейнере той же ширины, что и раньше.
   ============================================================ */
.wrap.hero,
.wrap.section {
	width: 100%;
	max-width: none;
}

.wrap.hero > *,
.wrap.section > * {
	width: min(var(--max), calc(100% - 40px));
	margin-inline: auto;
}

/* На узких экранах у контейнера другой отступ — сохраняем его. */
@media (max-width: 680px) {
	.wrap.hero > *,
	.wrap.section > * {
		width: min(100% - 28px, var(--max));
	}
}

/* ============================================================
   2. Светлые секции: только тихое зерно
   ============================================================ */
.section {
	background-image: var(--asf-bg-grain);
}

.section--white {
	background-color: #fff;
	background-image: var(--asf-bg-grain), linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
}

.section--sand {
	background-color: var(--sand);
	background-image: var(--asf-bg-grain), linear-gradient(180deg, #f4f5f3 0%, #eceeeb 100%);
}

/* Ключевая секция с решением — тёплые пятна */
.section--warm {
	background-color: #fdfbf2;
	background-image: var(--asf-bg-warm);
}

/* ============================================================
   3. Полоса доверия
   ============================================================ */
.asf-trust {
	background-color: var(--sand);
	background-image: var(--asf-bg-trust);
}

/* ============================================================
   4. Графитовые секции: тёмный асфальт
   Перекрываем заливку из blocks.css, добавляя фактуру.
   ============================================================ */
.asf-counters,
.asf-dark-section,
.footer {
	background-color: var(--graphite);
	background-image: var(--asf-bg-dark);
	color: #fff;
}

.footer {
	background-color: var(--graphite-dark);
}

.asf-tile--wide {
	background-image: var(--asf-bg-dark);
}

/* Светлый текст в графитовых секциях */
.asf-counters .section__head h2,
.asf-dark-section .section__head h2 {
	color: #fff;
}

.asf-counters .section__head p,
.asf-dark-section .section__head p {
	color: rgba(255, 255, 255, .78);
}

.asf-counters .eyebrow,
.asf-dark-section .eyebrow {
	color: var(--accent);
}

.asf-counters .eyebrow::before,
.asf-dark-section .eyebrow::before {
	background: var(--accent);
}

/* ============================================================
   5. Блок заявки: белая карточка на графите
   Форма и кнопки мессенджеров рассчитаны на светлый фон,
   поэтому на тёмной секции они лежат в белой карточке.
   ============================================================ */
.asf-form-card {
	background: #fff;
	border-radius: 24px;
	padding: clamp(20px, 3vw, 34px);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .30);
}

.asf-form-card .asf-messengers {
	margin-top: 22px;
}

/* ============================================================
   6. Уважение к настройкам системы
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
	.hero,
	.section,
	.section--white,
	.section--sand,
	.section--warm,
	.asf-trust,
	.asf-counters,
	.asf-dark-section,
	.footer {
		background-image: none;
	}
}