/*
Theme Name: Asia Cement
Theme URI: https://asiacement.ru/
Author: elevenLAB
Author URI: https://asiacement.ru/
Description: Кастомная тема для сайта ООО «Азия Цемент». Своя вёрстка на Bootstrap 5, ACF Pro. Стандартные шаблоны WP не используются.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: asiacement
*/

/*
  Основные стили темы находятся в /css/style.css и подключаются через wp_enqueue_style().
  Этот файл нужен WordPress только для заголовка темы.
  Ниже — точечные override-правила (этот файл грузится после css/style.css).
*/

/* Карточки товара: светло-серый фон блока изображения на всю ширину карточки
   (как в исходной вёрстке — студийный фон за мешком). */
.product-card__image {
	background-color: #ebeaef;
}

/* Изображение вписывается целиком, без обрезки (object-fit: contain).
   Перебивает глобальное правило .box img { object-fit: cover }.
   Небольшой вертикальный отступ (~24px), чтобы фото было чуть меньше и с воздухом сверху. */
.product-card__image .box img,
.product-card__image .box picture,
.product-card__image .box svg {
	-o-object-fit: contain;
	object-fit: contain;
	padding: 1.5rem 0;
}

/* Метки-преимущества товара: многострочный текст выравниваем по левому краю,
   а не по центру (маркер-точка остаётся слева через span::before). */
.label--benefit span {
	text-align: left;
}

/* Метка «применение» товара (label--app): длинный текст прижимаем влево,
   ширина по контенту, а не растянутый по центру блок (как у метки ГОСТ рядом). */
.label--app {
	-ms-flex-item-align: start;
	align-self: flex-start;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	text-align: left;
}

/* Одинаковая высота карточек товара в списке категории:
   карточка тянется на всю высоту колонки (колонки в ряду уже равной высоты),
   описание растягивается, а кнопка прижимается к низу. */
.products-list .product-card {
	height: 100%;
}
.products-list .product-card__wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
}
.products-list .product-card__image {
	-ms-flex-negative: 0;
	flex-shrink: 0;
}
.products-list .product-card__desc {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* Навальный цемент: изображение горизонтальное (цементовоз) — увеличиваем его.
   Базовый размер задаётся высотой (height: 72%), из-за чего горизонтальная
   картинка выходит мелкой. Для навального переключаем управление размером на
   ширину, задавая её в процентах от контейнера-бокса (.item-main-screen__image
   имеет width: 111.25rem ≈ ширина вьюпорта, root font-size текучий). Серая
   «доступная» зона рамки идёт примерно до ~37% бокса (дальше — жёлто-синяя
   дуга). Цементовоз центрируется на 20.5% бокса, поэтому width: 34% заполняет
   серую зону почти целиком (кабина доходит до дуги, не перекрывая её) — это и
   есть ~90% доступной ширины. Высота — auto (пропорции сохраняются),
   центрирование и привязка к низу берутся из базовых правил.
   ВАЖНО: здесь 34% — это доля бокса (111.25rem), НЕ вьюпорта; значение 90%
   давало бы 90% от 111.25rem и цементовоз вылезал бы за рамку на заголовок.
   Отступ сверху: сдвигаем картинку вниз на 30px через translateY. Базовый
   transform — translateX(-50%) (горизонтальное центрирование), дополняем его
   вертикальным сдвигом: translate(-50%, 1.875rem). 1.875rem = 30px в дизайн-
   сетке 1920px и масштабируется вместе с картинкой (root font-size текучий).
   Остальные категории (вертикальный мешок) не затрагиваем. */
.item-main-screen__image--framed.item-main-screen__image--bulk .box .item-main-screen__bag {
	width: 34%;
	height: auto;
	-webkit-transform: translate(-50%, 1.875rem);
	transform: translate(-50%, 1.875rem);
}
/* Мобильная версия навального: рамка другая (bulk-cement-mob.png, дуга снизу),
   оставляем исходное увеличение по высоте. */
@media (max-width: 991.98px) {
	.item-main-screen__image-mob--framed.item-main-screen__image-mob--bulk .box .item-main-screen__bag {
		height: 100%;
	}
}

/* Мобильный: вернуть верхний отступ секции «Другие марки цемента»
   (в вёрстке .items-slider на ≤575.98px имеет padding-top: 0). */
@media (max-width: 575.98px) {
	.items-slider {
		padding-top: 3.75rem;
	}
}

/* Проверка на контрафакт: разделительная линия между заголовком и описанием
   в hero-секции. В варианте .main-screen-two-image базовый border-top у .__sub
   сбрасывается (border-top: none), из-за чего линия из макета пропала.
   Возвращаем её точечно только для этого блока через модификатор --line,
   не затрагивая остальные страницы с .main-screen-two-image. */
.main-screen-two-image .main-screen-two__sub--line {
	border-top: 0.0625rem solid #55c7f0;
	padding-top: 3rem;
}

/* Описание в этой hero-секции правым краем заходило под декоративный круг
   справа. Ограничиваем ширину текста, чтобы он оставался в пределах линии
   (линию не трогаем — она шире и играет роль разделителя, как в макете). */
@media (min-width: 992px) {
	.main-screen-two-image .main-screen-two__sub--line .main-screen-two__desc {
		max-width: 34.375rem;
	}
}

/* Видео-слайд кликабелен целиком — клик по постеру/подписи открывает ролик.
   Иконка ▶ (.main-screen-two-slider__play) — только визуальная подсказка. */
.main-screen-two-image-slider .main-screen-two-slider__slide.js-video-play {
	cursor: pointer;
}

/* ПРИЧИНА, почему клик по постеру не проходил: слайдер стоит на z-index:-3 и
   уходит НИЖЕ слоёв <main>/<body> — реальный клик по постеру попадает в них, а не
   в слайд (pointer-events это не лечит: отключить события на <main>/<body> нельзя).
   Решение — поднять слайдер в положительный слой (там он ловит клик), а синий фон
   (::after), текст с крошками и стрелки поднять ещё выше, сохранив исходную
   слоёность макета. Синий фон делаем «прозрачным» для кликов, чтобы он не
   перехватывал клик по иконке у своей правой кромки. */
.main-screen-two-image-slider .main-screen-two-slider {
	z-index: 1;
}
.main-screen-two-image-slider::after {
	z-index: 2;
	pointer-events: none;
}
.main-screen-two-image-slider .main-screen-two__left {
	position: relative;
	z-index: 3;
}
.main-screen-two-image-slider .main-screen-two-slider__arrows {
	z-index: 4;
}

/* Модальное окно с видео: контент без белых полей, видео/iframe во всю ширину. */
.modal-video .modal-content {
	background: transparent;
	border: 0;
}
.modal-video .modal-video__frame {
	overflow: hidden;
	border-radius: 0.75rem;
	background: #000000;
	line-height: 0;
}
.modal-video .modal-video__frame video,
.modal-video .modal-video__frame iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* «Лица компании»: снимаем фиксированную высоту фото сотрудников (в вёрстке
   высота бокса зашита в 26.875rem на ПК, а на мобильных — кроп через
   aspect-ratio 720/860). Показываем изображение целиком по высоте, ширина
   масштабируется пропорционально. Действует и на ПК, и на мобильных.
   Скругление углов и центрирование из вёрстки сохраняются. */
.team__image .box,
.team-item__image .box {
	height: auto;
	aspect-ratio: auto;
}
.team__image .box img,
.team-item__image .box img {
	width: 100%;
	height: auto;
	-o-object-fit: contain;
	object-fit: contain;
}

/* Фото генерального директора — как в вёрстке, того же размера, что карточки
   менеджмента: ширина = одна колонка сетки «Менеджемент» (col-four).
   Формула: (100% − лейбл 13.5rem − 3 гэпа по 1.0625rem) / 4 = (100% − 16.6875rem) / 4.
   Высота — натуральная, изображение выводится в оригинальной пропорции без
   обрезки по высоте/ширине (см. правило .team*__image .box img выше: object-fit
   contain, height auto). Только ПК; на мобильных фото и так во всю ширину. */
@media (min-width: 992px) {
	.team__group--main .team__image {
		width: calc((100% - 16.6875rem) / 4);
		margin-right: 12.875rem;
	}
	.team__group--main .team__image .box {
		width: 100%;
	}
}

/* «Жизнь в ритме»: слайдер-галерея внутри секции. Каждая секция имеет свой
   слайдер картинок (.career-life-tabs__slider внутри .career-life-tabs__image);
   стрелки привязаны к .career-life-tabs__section (см. js/script.js). Тянем
   слайдер и изображения на всю ширину блока изображения. */
.career-life-tabs__image .career-life-tabs__slider,
.career-life-tabs__image .slick-list,
.career-life-tabs__image .slick-track {
	width: 100%;
}
/* Убираем базлайн-зазор slick-обёрток под фото (line-height родителя создавал
   ~4px пустого места под слайдом), чтобы линия-разделитель ложилась вплотную
   на нижний край загруженного изображения — наложение по макету. */
.career-life-tabs__image,
.career-life-tabs__image .career-life-tabs__slider,
.career-life-tabs__image .slick-list,
.career-life-tabs__image .slick-track {
	line-height: 0;
}
.career-life-tabs__image .career-life-tabs__slide-img .box {
	line-height: 0;
	/* Стабильный «ландшафтный» кадр: изображения из админки (в т.ч. квадратные
	   или вытянутые) приводим к единому соотношению сторон, чтобы фото соседних
	   секций не пересекались, а высота дуги не превышала высоту фото. */
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.career-life-tabs__image .career-life-tabs__slide-img img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* «Жизнь в ритме»: декоративная дуга (жёлто-синие полоски) поверх слайдера.
   Файл (figure-left/right.png) задаётся в шаблоне в зависимости от расположения
   слайдера. Оверлей повторяет рамку фото (inset: 0) и обрезается по ней
   (overflow: hidden), поэтому дуга никогда не выходит за пределы картинки —
   в том числе на мобиле. Клики не ловит: стрелки/свайп работают через слайдер. */
.career-life-tabs__figure {
	position: absolute;
	inset: 0;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	z-index: 2;
}
.career-life-tabs__figure img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}

/* «Жизнь в ритме»: разделитель между контентом секции и блоком стрелок —
   еле заметная горизонтальная линия (как в оригинальной вёрстке). */
.career-life-tabs__bottom {
	border-top: 1px solid var(--border);
}

/* Вертикальный ритм секций «как в вёрстке»: расстояние между секциями задают
   внутренние отступы слайдов (padding) и блок стрелок, поэтому дополнительный
   margin убираем — иначе секции расходятся сильнее, чем в макете. Перекрытия
   фото нет: высоту изображения уже резервирует min-height группы (десктоп),
   а на мобиле картинка идёт в потоке. */
.career-life-tabs__section {
	margin-bottom: 0;
}

/* Хлебные крошки в hero новости/статьи (.main-screen-two-image): длинный
   заголовок в последней крошке тянулся в одну строку на всю ширину и заходил
   под жёлтую дугу с фото справа. Ограничиваем ширину крошек шириной заголовка
   (.main-screen-two__title = 48.4375rem) и разрешаем перенос длинного текста. */
.main-screen-two-image .breadcrumbs {
	max-width: 48.4375rem;
	width: 100%;
}
.main-screen-two-image .breadcrumbs .breadcrumb-item {
	min-width: 0;
}
.main-screen-two-image .breadcrumbs .breadcrumb-item.active {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Заголовок новости/статьи в hero (.main-screen-two-image): у длинных
   динамических заголовков нижние строки при max-width 48.4375rem заходили под
   жёлтую дугу с фото справа. Ограничиваем ширину заголовка безопасной зоной
   (41.875rem — ширина разделительной линии/подзаголовка, ровно по кромке дуги),
   чтобы все строки переносились левее дуги. Только страницы новости и статьи —
   на статических страницах заголовки короткие, там оставляем исходные 48.4375rem. */
.single-news .main-screen-two-image .main-screen-two__title,
.single-article .main-screen-two-image .main-screen-two__title {
	max-width: 41.875rem;
	overflow-wrap: anywhere;
}

/* Карточки блока «О компании» (about-items): высоту карточки должен задавать
   текст, а изображение — заполнять левую колонку по этой высоте (object-fit:
   cover). Фото, загруженные в ACF, имеют более вытянутый по высоте аспект и в
   обычном потоке растягивали карточку выше макета. Позиционируем изображение
   absolute внутри левой колонки (она уже position: relative) — так фото не
   участвует в расчёте высоты, и карточки становятся компактными, как в оригинале.
   Жёлтая дуга (::after у __left) рисуется поверх изображения и остаётся видимой. */
.about-items .project-stages-card__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* Блок «Лица компании» (about-company): уменьшаем зазор до «Ассоциаций» на 40px —
   нижний паддинг секции 6.25rem (100px) → 3.75rem (60px). Верхний не трогаем. */
.team.section-bp {
	padding-bottom: 3.75rem;
}

/* Кнопки в карточке товара (Подробнее / Заказать): на ПК показываем обе в ряд
   (col-lg-6). Базовые .btn-border-accent / .btn-accent-2 тянутся на всю ширину
   только в медиазапросах ≤991.98px, поэтому на десктопе кнопка сжималась по
   контенту и «Заказать» прижималась влево. Растягиваем кнопки на всю ширину
   колонки и на ПК, паддинг — как в мобильной версии (0), текст центрируется
   через уже заданный justify-content: center. Только внутри карточки товара. */
@media (min-width: 992px) {
	.product-card__buttons .btn-border-accent,
	.product-card__buttons .btn-accent-2 {
		width: 100%;
		padding: 0;
	}
}

/* Кнопка «Заказать» в карточке товара — заливка фирменным синим (--accent-1,
   #00AAE7) вместо жёлтого (--accent-2), hover — синий --hover-1 (#009BE0).
   Текст остаётся белым (--light из базового правила). Ограничено карточкой
   товара (.product-card__buttons), глобальные .btn-accent-2 на других
   страницах не затрагиваются. */
.product-card__buttons .btn-accent-2 {
	background-color: var(--accent-1);
}
.product-card__buttons .btn-accent-2:hover {
	background-color: var(--hover-1);
}

/* Блок «Контракт» → кнопка «Подробнее» / «Заключить договор» (.contract__btn).
   В исходной вёрстке это <button>, который с display:flex сжимается по контенту.
   В шаблоне варианта «Проверка на контрафакт» кнопка — это <a> (ссылка на
   страницу checking-for-counterfeit), а ссылка с display:flex ведёт себя как
   блок и растягивается на всю ширину .contract__desc. Возвращаем поведение
   вёрстки: кнопка по ширине текста с уже заданными паддингами (btn-small). */
.contract__btn {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

/* Экология: скругление верхних углов фото в карточке. border-radius на .box,
   т.к. у него overflow:hidden — он обрезает содержимое по своей форме. */
.ecology-items__item__image .box {
	border-radius: 1.25rem 1.25rem 0 0;
}

/* Экология: позиция декоративной волны (::after) — скорректирована под
   оригинальные пропорции загружаемых фото (ACF, full-size, без ресайза WP). */
.ecology-items__item::after {
	top: 5.9rem;
}
@media (max-width: 991.98px) {
	.ecology-items__item::after {
		top: 11rem;
	}
}

/* Охрана труда → «Результаты проведения специальной оценки условий труда».
   Список документов (ACF-повторитель) сворачивается до 3 карточек, остальные
   раскрываются кликом по кнопке «Показать еще». Реализация на чистом CSS через
   скрытый чекбокс #labor-docs-toggle + label.documents__more (без AJAX/JS). */

/* Сам чекбокс-переключатель не показываем (атрибут hidden + подстраховка). */
.documents__toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Свёрнутое состояние: видны только первые 3 карточки (4-я и далее скрыты). */
.documents__list--collapsed > .col-lg-4:nth-child(n+4) {
	display: none;
}

/* Вариант с 6 видимыми карточками (страница «Качество» → «Документация»):
   свёрнуто показываем первые 6, 7-я и далее скрыты. */
.documents__list--collapsed-6 > .col-lg-4:nth-child(n+7) {
	display: none;
}

/* После клика по «Показать еще» (чекбокс отмечен) — показываем все карточки. */
.documents__toggle-input:checked ~ .documents__list--collapsed > .col-lg-4:nth-child(n+4),
.documents__toggle-input:checked ~ .documents__list--collapsed-6 > .col-lg-4:nth-child(n+7) {
	display: block;
}

/* …и убираем саму кнопку «Показать еще». */
.documents__toggle-input:checked ~ .row .documents__more {
	display: none;
}

/* Страница отдельной новости (single-news): уменьшаем H1 до 2rem
   на всех разрешениях (ПК и мобильные). Специфичность в два класса
   перебивает брейкпоинт-правила компонента .main-screen-two__title. */
.single-news .main-screen-two__title,
.single-article .main-screen-two__title {
	font-size: 2rem;
}

/* ==========================================================================
   Подвал (footer) — точечные правки мобильной вёрстки
   ========================================================================== */

/* Телефон в контактах подвала переносился на 2 строки на узких экранах: справа
   от номера стоит блок соцсетей фикс. ширины (~174px = 3 кружка по 3.125rem +
   2 гэпа по 0.75rem), из-за чего на мобиле номер «8 (800) 550-55-66» при
   размере 1.875rem (30px) не влезал в одну строку и «66» падало вниз.
   Держим номер в одну строку (white-space: nowrap) и делаем размер текучим:
   на широких мобильных — исходные 30px, на узких плавно уменьшается, чтобы
   всегда помещаться рядом с соцсетями. calc(12vw - 28px) учитывает
   фиксированную ширину соцсетей, отступы контейнера и обязательный зазор до
   соцсетей; clamp ограничивает размер снизу (0.875rem) и сверху (1.875rem —
   как в макете).
   Дополнительно: гарантируем зазор между номером и соцсетями (gap на строке
   контактов) и запрещаем соцсетям сжиматься (flex-shrink: 0), чтобы телефон
   не прилипал к кружкам. */
@media (max-width: 991.98px) {
	.footer-top__contacts {
		gap: 1rem;
	}
	.footer-top__socials {
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}
	.footer-top__phone {
		white-space: nowrap;
		font-size: clamp(0.875rem, calc(12vw - 28px), 1.875rem);
	}
}

/* Отступ ~15px над email (первый блок на синем фоне) — чтобы контакты не
   прижимались вплотную к жёлтой дуге. Только мобильная раскладка (на ПК правый
   блок стоит сбоку, дуги над ним нет). 0.9375rem = 15px при базовом 16px. */
@media (max-width: 991.98px) {
	.footer-top__right {
		margin-top: 0.9375rem;
	}
}

/* Нижние логотипы (rusprofile, elevenLAB) заходили нижним краем за границу
   синего фона, а при увеличении высоты синий фон начинал перекрывать строку
   копирайта «© … Все права защищены». Причина хрупкости: синий фон — это ::after
   с ФИКСИРОВАННОЙ высотой от верха футера, а реальное положение копирайта зависит
   от контента (адреса могут переноситься), поэтому «поймать» границу ровно между
   логотипами и копирайтом фиксированной высотой невозможно.
   Решение — привязать границу к контенту: нижний блок с копирайтом и ссылками
   (.footer-bottom__cols) получает белую подложку и сам задаёт линию «синий/белый»
   своим верхним краем. Подложку рисуем псевдоэлементом ::before во всю ширину
   экрана (full-bleed: left/width:100vw + margin-left: calc(50% - 50vw)), иначе
   белый блок был бы уже контейнера и по бокам оставались синие полосы. У .footer
   стоит overflow: hidden, поэтому 100vw не даёт горизонтальной прокрутки.
   Небольшой синий отступ под логотипами создаём отдельным margin-top (часть
   прежнего padding-top 2.5rem переносим в margin — суммарный ритм сохраняется).
   Синий ::after делаем заведомо выше нужного: лишняя высота перекрывается белой
   подложкой копирайта, поэтому текст копирайта не попадает на синее ни при каком
   контенте, а логотипы гарантированно лежат на синем.
   Отступ под логотипами регулируется значением margin-top (сейчас 1.25rem). */
@media (max-width: 991.98px) {
	.footer-bottom__cols {
		position: relative;
		z-index: 0;
		margin-top: 1.25rem;
		padding-top: 1.25rem;
	}
	.footer-bottom__cols::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		background-color: #ffffff;
		z-index: -1;
	}
	.footer::after {
		height: 40rem;
	}
}
@media (max-width: 575.98px) {
	.footer::after {
		height: 36rem;
	}
}

/* ==========================================================================
   Главная → интерактивная карта регионов: Пензенская область (№17)
   ==========================================================================
   Пензенская область — домашний регион завода. На карте она уже отмечена
   логотипом «Азия Цемент» (.main-about__logo) и жёлтой заливкой, поэтому в
   отличие от регионов 1–16 у неё НЕ рисуется номерная точка. При наведении
   на пункт легенды (.main-about-region.penzenskaya-oblast) скрипт js/script.js
   добавляет класс .active соответствующей метке .penzenskaya-oblast-map по
   совпадению классов — правки JS не требуются.

   Модификатор --home прячет точку-маркер (::after), чтобы над логотипом не
   появлялась лишняя точка (в т.ч. белая в активном состоянии). Синяя подпись
   позиционируется справа от логотипа и появляется только при наведении. */
.main-about-region-map--home .main-about-region-map__block::after {
	display: none;
}
/* Без точки убираем левый отступ под неё — текст центрируется в «пилюле». */
.main-about-region-map--home .main-about-region-map-name {
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}

/* Позиция метки привязана к логотипу (.main-about__logo) на каждом брейкпоинте:
   подпись выводится справа от него, по вертикали — по центру логотипа.
   Десктоп: логотип left:53rem / top:32rem. */
.penzenskaya-oblast-map {
	top: 32.28125rem;
	left: 55.25rem;
}

/* Планшет/мобильный (≤991.98px): логотип left:13.9375rem / top:56.4375rem. */
@media (max-width: 991.98px) {
	.penzenskaya-oblast-map {
		top: 56.71875rem;
		left: 16.1875rem;
	}
}

/* Узкий мобильный (≤575.98px): логотип left:12.25rem / top:60.125rem. */
@media (max-width: 575.98px) {
	.penzenskaya-oblast-map {
		top: 60.40625rem;
		left: 14.5rem;
	}
}

/* ==========================================================================
   Главная → интерактивная карта регионов: точки новых регионов
   ==========================================================================
   Костромская (№5), Воронежская (№3) и Тульская (№17) области. Обводки этих
   регионов на карте (map.svg) уже есть; добавляем обычные номерные точки (как
   у остальных, кроме домашней Пензы). Координаты рассчитаны по геометрии их
   контуров в map.svg (центр области), поэтому точки ложатся в центр обводок.
   При необходимости легко подвинуть, меняя top/left ниже. */

/* Костромская область (№5): северо-восточнее Ярославской, южнее Вологодской. */
.kostromskaya-oblast-map {
	top: 22.375rem;
	left: 59.5rem;
}

/* Воронежская область (№3): южнее Липецкой, юго-западнее Тамбовской. */
.voronezhskaya-oblast-map {
	top: 32.125rem;
	left: 45.8125rem;
}

/* Тульская область (№17): западнее Рязанской, севернее Липецкой, южнее Московской. */
.tulskaya-oblast-map {
	top: 25.5rem;
	left: 47.0625rem;
}

/* Планшет/мобильный (≤991.98px). */
@media (max-width: 991.98px) {
	.kostromskaya-oblast-map {
		top: 49.8125rem;
		left: 18.5rem;
	}
	.voronezhskaya-oblast-map {
		top: 56.625rem;
		left: 9.0625rem;
	}
	.tulskaya-oblast-map {
		top: 52rem;
		left: 9.9375rem;
	}
}

/* Узкий мобильный (≤575.98px). */
@media (max-width: 575.98px) {
	.kostromskaya-oblast-map {
		top: 53.4375rem;
		left: 16.6875rem;
	}
	.voronezhskaya-oblast-map {
		top: 60.125rem;
		left: 7.125rem;
	}
	.tulskaya-oblast-map {
		top: 55.5625rem;
		left: 8.0625rem;
	}
}

/* -------------------------------------------------------------------------
   Слайдер-галерея в новости / полезной статье (.text-block__slider)
   ------------------------------------------------------------------------- */

/* Отступ стрелок от слайдера — в 2 раза меньше прежнего.
   В шаблонах у .text-block__slider убраны utility-классы mb-lg-5/mb-3/pb-lg-3
   (у Bootstrap-утилит !important, поэтому спейсинг задаём здесь напрямую). */
.text-block__slider {
	margin-bottom: 1.25rem;
	padding-bottom: 0.625rem;
}

/* Клик по фото галереи открывает его в лайтбоксе (Fancybox, инициализация в script.js). */
.text-block__image .box .js-gallery-zoom {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

/* -------------------------------------------------------------------------
   Карточки новостей / СМИ / статей (.news-card) — единая пропорция фото 16:9.
   Действует везде, где выводится карточка: архивы, слайдер новостей на главной,
   блоки «Другие новости» / «Другие статьи» под записью.
   ------------------------------------------------------------------------- */
.news-card__image .box {
	height: auto;
	aspect-ratio: 16 / 9;
}

/* -------------------------------------------------------------------------
   Hero «О компании» (main-screen-two-image-slider): видео-слайд.
   1) В подписи слайда — иконка ▶ слева от текста.
   2) Кнопка Play в центре постера — крупнее на 30% (3.125rem → 4.0625rem).
   ------------------------------------------------------------------------- */

/* Подпись слайда: иконка и текст в одну строку, по центру по вертикали. */
.main-screen-two-image .main-screen-two-slider__desc p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/* Иконка ▶ в подписи: фиксированный размер, не сжимается при длинном тексте. */
.main-screen-two-image .main-screen-two-slider__desc-icon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}

/* Кнопка Play на постере: +30% к размеру. right пересчитан (31.5rem → 31.03125rem),
   чтобы центр иконки остался ровно там же, где был до увеличения. */
.main-screen-two-image .main-screen-two-slider__play {
	width: 4.0625rem;
	height: 4.0625rem;
	right: 31.03125rem;
}

/* SVG тянется по контейнеру — размер задаётся только правилом выше. */
.main-screen-two-image .main-screen-two-slider__play .icon svg {
	width: 100%;
	height: 100%;
}

@media (max-width: 991.98px) {
	/* Мобильный: подпись центрируется — иконка едет вместе с текстом
	   (text-align на flex-контейнер не действует, нужен justify-content). */
	.main-screen-two-image .main-screen-two-slider__desc p {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	/* Кнопка Play остаётся по центру слайда (перебиваем right из правила выше). */
	.main-screen-two-image .main-screen-two-slider__play {
		right: 0;
		left: 0;
	}
}

/* -------------------------------------------------------------------------
   Баннер «Найти магазины рядом» (страница «Проверка на контрафакт»).
   Использует разметку .banner-registration, но иконка задана inline-SVG,
   а не картинкой — растягиваем её по контейнеру .box (5rem × 5rem).
   ------------------------------------------------------------------------- */
.banner-registration__icon .box svg {
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------
   Подвал: подпись «Мы в соцсетях:» над иконками социальных сетей.
   Оформление повторяет e-mail в левой колонке (.footer-top__email + .text-big),
   а сама группа прижата к верху блока контактов — чтобы подпись встала
   на одну горизонталь с e-mail.
   ------------------------------------------------------------------------- */
.footer-top__socials-group {
	-ms-flex-item-align: start;
	align-self: flex-start;
}

.footer-top__socials-title {
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Планшет/мобильный: e-mail в подвале уменьшается до 1.125rem — подпись следом. */
@media (max-width: 991.98px) {
	.footer-top__socials-title {
		font-size: 1.125rem;
	}
}

/* -------------------------------------------------------------------------
   Мобильный (≤575.98px): основной текст крупнее на 2px.
   Root font-size у темы текучий — calc(100vw * (16 / 480)), поэтому прибавку
   задаём в пикселях: так она одинакова на любом телефоне и не «плывёт»
   вместе с шириной экрана. Величину правки можно менять в одном месте —
   переменная --mobile-text-bump ниже.
   Заголовки (.title-page, .section-title, .item-title, .name, .h5) не трогаем,
   кроме точечных исключений в конце блока.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	:root {
		--mobile-text-bump: 2px;
	}

	/* Базовый размер — от него наследуются абзацы, списки и блоки .text. */
	body {
		font-size: calc(1rem + var(--mobile-text-bump));
	}

	/* Крупный текст (лиды, описания в text-big-group). */
	.text-big,
	.text-big-group {
		font-size: calc(1.125rem + var(--mobile-text-bump));
	}

	/* Страница «Карьера» (/kariera/): лид в правой колонке первого экрана
	   свёрстан заголовочным классом .h5 (на мобильном — 1.125rem), поэтому под
	   общее правило выше не попадает. Поднимаем его точечно — только на этом
	   шаблоне, остальные .h5 по сайту не затрагиваются.
	   Прибавка для этого лида своя (--career-lead-bump) и сейчас вдвое больше
	   общей: 4px вместо 2px. Меняется здесь же, одним значением. */
	#careerHero .main-screen-two__right .h5,
	.page-template-page-career .main-screen-two__right .h5 {
		--career-lead-bump: 4px;
		font-size: calc(1.125rem + var(--career-lead-bump));
	}

	/* Карточка товара: блок «Преимущества». На мобильном/планшете десктопные
	   .item-main-screen__item скрыты и выводится копия .item-main-screen__item-mob,
	   поэтому правим именно её. Заголовок свёрстан классом .h5 (1.125rem),
	   пункты — .label (0.875rem); оба под общее правило выше не попадают.
	   Прибавка для этого блока своя (--product-benefits-bump) и сейчас вдвое
	   больше общей: 4px вместо 2px. Меняется здесь же, одним значением. */
	.single-product .item-main-screen__item-mob {
		--product-benefits-bump: 4px;
	}

	.single-product .item-main-screen__item-mob .h5 {
		font-size: calc(1.125rem + var(--product-benefits-bump));
	}

	.single-product .item-main-screen__item-mob .label {
		font-size: calc(0.875rem + var(--product-benefits-bump));
	}

	/* Страница «Логистика» (/logistika/, шаблон page-carriers.php): заголовки
	   внутри карточки перевозчика — «Для перевозки цемента привлекаем…» и
	   «Объёмы … перевозок:» — свёрстаны классом .h5 (1.125rem) и выглядели
	   мельче подписи над кнопкой («Зарегистрируйтесь…», класс .name — 1.25rem).
	   Приравниваем их к .name. Два класса в селекторе перебивают правило
	   .carriers-types__title из основного css (@media ≤991.98px). */
	.carriers .carriers-types__title {
		font-size: 1.25rem;
	}

	/* Страница «О компании» (/o-kompanii/): стрелки слайдера первого экрана.
	   В основном css на мобильном им задаётся белая обводка и белая стрелка
	   (.slider-arrow--border-accent), а фон остаётся прозрачным — на светлом
	   кадре кнопки сливаются с фото. Делаем заливку фирменным синим
	   (--accent-1), обводку убираем, стрелку оставляем белой. Круглая форма
	   (border-radius: 50% у .arrow-prev/.arrow-next) сохраняется.
	   Правило ограничено слайдером этой страницы — .slider-arrow--border-accent
	   используется ещё на десятке шаблонов и там не меняется. */
	.main-screen-two-image-slider .main-screen-two-slider__arrows .slider-arrow--border-accent {
		background-color: var(--accent-1);
		border: none;
	}

	.main-screen-two-image-slider .main-screen-two-slider__arrows .slider-arrow--border-accent svg path {
		fill: #ffffff;
	}

	.main-screen-two-image-slider .main-screen-two-slider__arrows .slider-arrow--border-accent:hover {
		background-color: var(--hover-1);
	}
}

/* -------------------------------------------------------------------------
   Первый экран записи (новость / полезная статья) — единая вёрстка hero.
   Дублирует правила, которые раньше жили только в inline-<style> шаблона
   single-news.php, и распространяет их на страницы CPT «Полезные статьи».

   Пропорция изображения 16:9. Все rem в теме привязаны к ширине окна
   (html { font-size: calc(100vw * 16 / 1920) }), поэтому:
     • ширина области фото — 72rem;
     • высота секции — calc(71rem * 9 / 16);
   блок остаётся 16:9 и масштабируется вместе с окном, без «плавающего»
   отступа снизу при зуме.

   Декоративный сине-жёлтый разделитель воссоздан на CSS (radial-gradient,
   дуга большого круга) вместо SVG-«волны»: исходный SVG жёстко привязан к
   пропорции 1050×418 и при другой высоте открывал прозрачный «клин».
   CSS-версия резиновая и корректна на любой высоте.

   Только десктоп (≥992px) — мобильная вёрстка остаётся штатной.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.single-news .main-screen-two-image,
	.single-article .main-screen-two-image {
		min-height: calc(71rem * 9 / 16);
		padding-bottom: 0;
	}

	/* Прячем исходную SVG-«волну». */
	.single-news .main-screen-two-image::after,
	.single-article .main-screen-two-image::after {
		display: none;
	}

	/* Сине-жёлтый разделитель (резиновый, любая высота). */
	.single-news .main-screen-two-image::before,
	.single-article .main-screen-two-image::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		background: radial-gradient(circle farthest-corner at 105% 140%,
			rgba(0, 0, 0, 0) 0 57.5%,
			#FFB514 57.5% 58.5%,
			#00AAE7 58.5%);
	}

	.single-news .main-screen-two__image,
	.single-article .main-screen-two__image {
		width: 72rem;
		right: 0;
		left: auto;
		z-index: -3;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
}

/* -------------------------------------------------------------------------
   Изображения, вставленные через редактор в тело новости/статьи.
   В вёрстке все фото в текстовом блоке скруглены на 1.25rem
   (.text-block__image .box) — приводим к тому же радиусу картинки из
   редактора: одиночные <img>, блоки Гутенберга (figure.wp-block-image)
   и классические вставки с классами align... / size...
   Слайдер-галерея (.text-block__slider) сюда не попадает — он лежит вне
   .text и уже скруглён своим правилом.
   ------------------------------------------------------------------------- */
.text-block__content .text img,
.text-block__content .text figure img,
.text-block__content .text .wp-block-image img,
.text-block__content .text .wp-caption img {
	border-radius: 1.25rem;
}

/* У блока-фигуры скругление ставим и на обёртку — иначе фон/рамка темы
   (если появится) выглядывали бы прямыми углами из-под картинки. */
.text-block__content .text figure.wp-block-image {
	overflow: hidden;
	border-radius: 1.25rem;
}

/* -------------------------------------------------------------------------
   Подвал на планшете/мобильном: фоновая «волна» (.footer::after) задана
   фиксированными top/height в rem, поэтому не подстраивается под реальную
   высоту контента. На узких экранах это давало два дефекта:
     • жёлтая дуга наезжала на строку «Круглосуточно» (режим работы завода);
     • синяя зона обрывалась на логотипах rusprofile / elevenLAB.
   Смещаем начало фона ниже блока адресов и вытягиваем его до конца блока
   с логотипами, оставляя копирайт и правовые ссылки на светлом фоне.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.footer::after {
		top: 15.75rem;
		height: 35.5rem;
	}
}

@media (max-width: 575.98px) {
	/* На телефонах строка «Круглосуточно» всё ещё цепляла дугу — опускаем фон
	   ещё на 40px. Прибавка в пикселях (не в rem), чтобы сдвиг был одинаковым
	   на любой ширине экрана: rem здесь текучий и на узком телефоне «сжимается».
	   На те же 40px уменьшаем высоту, чтобы нижняя граница синей зоны осталась
	   на месте — под логотипами, но выше копирайта. */
	.footer::after {
		top: calc(18.75rem + 40px);
		height: calc(35.5rem - 40px);
	}
}

/* -------------------------------------------------------------------------
   Первый экран главной (.main-screen) на планшете/мобильном.
   В вёрстке синий фон с жёлтой дугой — это .main-screen::before фиксированной
   высоты (46.875rem / 44rem). Высота текста слайдера от неё не зависит: если
   строк оказывалось больше (крупный системный шрифт, увеличенный масштаб текста
   в мобильном браузере, длинный слайд), фон заканчивался выше фотографии — между
   дугой и фото появлялась белая полоса.

   Привязываем фон к самому текстовому блоку: он тянется по его высоте, поэтому
   дуга всегда садится ровно на верхнюю кромку фото, сколько бы строк ни занял
   текст. Фон растянут на всю ширину окна (calc(-50vw + 50%)), сверху уходит
   под шапку.

   Почему именно так:
     • background-size: 100% auto — дуга сохраняет пропорции и всегда прижата
       к низу блока (при cover её края обрезались по бокам и дуга «поднималась»,
       открывая белую полосу);
     • background-color — заливка верхней части блока, когда он выше картинки;
       низ блока совпадает с дугой (bottom: 0), поэтому синий не просвечивает
       под ней;
     • увеличенный padding-bottom — воздух между стрелками слайдера и дугой,
       иначе дуга проходит прямо по стрелкам. !important нужен, чтобы перебить
       Bootstrap-утилиту py-5 на этом блоке.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	/* Синяя заливка — на самой секции: она подстраивается под любую высоту
	   текста, а фото и белая плашка с цифрами перекрывают её снизу. */
	.main-screen {
		background-color: #00aae7;
	}

	.main-screen::before {
		display: none;
	}

	.main-screen__content {
		position: relative;
		padding-bottom: 6.25rem !important;
	}

	/* Только дуга: без заливки цветом — иначе она просвечивала бы синей полосой
	   в прозрачной зоне SVG под дугой. Блок выступает на 3.75rem ниже текста,
	   поэтому дуга ложится поверх верхней кромки фотографии. */
	.main-screen__content::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: -12.5rem;
		bottom: -3.75rem;
		left: calc(-50vw + 50%);
		right: calc(-50vw + 50%);
		background-image: url(img/index-page/main-screen/bg-image-mob.svg);
		background-repeat: no-repeat;
		background-position: bottom center;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
	}
}

/* -------------------------------------------------------------------------
   Страница «Карьера»: подпись на фото первого экрана
   («Вместе помогаем строить будущее!») на телефонах была мельче основного
   текста — 1.125rem против item-title 2rem на десктопе. Увеличиваем.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.main-screen-two.main-screen-two-left-image .main-screen-two__text-image {
		font-size: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   «Социальные инициативы»: на телефонах (≤575.98px) уменьшаем высоту
   изображения в карточке до 83%. На планшете (≤991.98px) — без изменений.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.social-initiatives .category-product-card__image {
		height: 83%;
	}
}

/* -------------------------------------------------------------------------
   Промо-блок «Качественный цемент напрямую от производителя» (.contract),
   когда он последний на странице (например «Отгрузка и доставка»).

   Штатный .contract рассчитан на длинный текст слева: фото внутри блока
   позиционируется absolute (bottom: 0, ширина 67.5rem ≈ высота 33rem), и если
   секция ниже фото — оно вылезает вверх, на предыдущий блок. Модификатор
   задаёт секции минимальную высоту под фото и увеличенные поля сверху и снизу,
   поэтому фото целиком помещается внутрь, а до подвала остаётся воздух.
   Мобильные значения padding-bottom = базовые из _contract.sass
   (25rem / 17.3125rem) + 6.25rem.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.contract.contract--gap-bottom {
		min-height: 45.5rem;
		padding-top: 12.5rem;
		padding-bottom: 12.5rem;
	}
}

.contract.contract--gap-bottom .contract__image {
	bottom: 6.25rem;
}

@media (max-width: 991.98px) {
	.contract.contract--gap-bottom {
		padding-bottom: 31.25rem;
	}
}

@media (max-width: 575.98px) {
	.contract.contract--gap-bottom {
		padding-bottom: 23.5625rem;
	}
}