/**
 * Hero Blocks Styles - OPTIMIZED VERSION
 * Apple-inspired hero sections with full responsiveness
 * Mobile-first approach with progressive enhancement
 * 
 * ИСПРАВЛЕНИЯ (v2.1):
 * - Убраны ограничения max-height для изображений
 * - Изменен object-fit с contain на cover для правильного заполнения
 * - Исправлен конфликт width: 50% у изображения на desktop
 * - Добавлен aspect-ratio для стабильности отображения
 * - Оптимизирована высота image-wrapper
 *
 * @version 2.1
 * @date 2026-01-20
 */

/* ============================================================================
   RESET И БАЗОВЫЕ СТИЛИ
   ============================================================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ============================================================================
   ГЛАВНЫЙ КОНТЕЙНЕР
   ============================================================================ */
.a23102025-hero-blocks-wrapper {
	width: 100%;
	overflow-x: hidden;
	background: #000;
}

/* Flex-контейнер для поддержки блоков разной ширины */
.a23102025-hero-blocks-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
}

/* ============================================================================
   HERO BLOCK - ОСНОВНОЙ БЛОК
   ============================================================================ */
.a23102025-hero-block {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-height: 580px;
	width: 100%; /* По умолчанию 100% на мобильных */
	overflow: hidden;
	background-color: #000;
}

/* Класс для блоков полной ширины (100%) */
.a23102025-hero-block--full {
	width: 100%;
}

/* Класс для блоков половинной ширины (50% на планшетах и десктопе) */
.a23102025-hero-block--half {
	width: 100%; /* На мобильных всегда 100% */
}

/* ============================================================================
   КОНТЕНТ БЛОКА
   ============================================================================ */
.a23102025-hero-block__content {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px 40px;
	text-align: center;
}

/* ============================================================================
   ТИПОГРАФИКА
   ============================================================================ */
.a23102025-hero-block__title {
	margin-bottom: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #fff;
}

.a23102025-hero-block__subtitle {
	margin-bottom: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: #fff;
}

.a23102025-hero-block__additional-text {
	margin-bottom: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: #86868b;
}

/* ============================================================================
   КНОПКИ
   ============================================================================ */
.a23102025-hero-block__buttons {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.a23102025-hero-block__button {
	display: inline-block;
	padding: 12px 22px;
	min-width: 120px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: transparent;
	border: none;
	border-radius: 980px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.a23102025-hero-block__button:hover {
	-webkit-transform: scale(1.02);
	-ms-transform: scale(1.02);
	transform: scale(1.02);
}

.a23102025-hero-block__button:active {
	-webkit-transform: scale(0.98);
	-ms-transform: scale(0.98);
	transform: scale(0.98);
}

.a23102025-hero-block__button--primary {
	background-color: #0071e3;
	color: #fff;
}

.a23102025-hero-block__button--primary:hover {
	background-color: #0077ed;
	text-decoration: none;
}

.a23102025-hero-block__button--secondary {
	background-color: transparent;
	color: #2997ff;
	border: 1px solid #2997ff;
}

.a23102025-hero-block__button--secondary:hover {
	background-color: #2997ff;
	color: #fff;
	text-decoration: none;
}

/* ============================================================================
   ИЗОБРАЖЕНИЯ - ОПТИМИЗИРОВАННАЯ ВЕРСИЯ
   ============================================================================ */

/**
 * ИЗМЕНЕНИЯ ДЛЯ КОРРЕКТНОГО ОТОБРАЖЕНИЯ ИЗОБРАЖЕНИЙ:
 * 1. Убрана фиксированная высота wrapper (height: auto)
 * 2. Изменен object-fit с contain на cover для заполнения без пустот
 * 3. Добавлен min-height для гарантии видимости
 * 4. Убраны все max-height ограничения
 * 5. Добавлен aspect-ratio для стабильности
 */
.a23102025-hero-block__image-wrapper {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	/* ИСПРАВЛЕНИЕ: убрана фиксированная высота, теперь адаптируется к изображению */
	min-height: 200px; /* Минимальная высота для защиты от коллапса */
}

.a23102025-hero-block__image {
	/* display: block; */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: auto; /* ИСПРАВЛЕНИЕ: auto вместо фиксированных значений */
	/* ИСПРАВЛЕНИЕ: object-fit cover вместо contain - изображение заполняет весь контейнер */
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	/* ИСПРАВЛЕНИЕ: убран max-height, который обрезал изображения */
	/* Опционально: можно добавить aspect-ratio для квадратных изображений */
	aspect-ratio: auto;
	margin: 0 auto;
}

/* ============================================================================
   ЦВЕТОВЫЕ СХЕМЫ
   ============================================================================ */

/* Темная схема */
.a23102025-hero-block--dark {
	background-color: #000;
}

.a23102025-hero-block--dark .a23102025-hero-block__title,
.a23102025-hero-block--dark .a23102025-hero-block__subtitle {
	color: #f5f5f7;
}

.a23102025-hero-block--dark .a23102025-hero-block__additional-text {
	color: #86868b;
}

/* Светлая схема */
.a23102025-hero-block--light {
	background: linear-gradient(180deg, #fbfbfd, #8B8B8B);
}

.a23102025-hero-block--light .a23102025-hero-block__title,
.a23102025-hero-block--light .a23102025-hero-block__subtitle {
	color: #1d1d1f;
}

.a23102025-hero-block--light .a23102025-hero-block__additional-text {
	color: #6e6e73;
}

.a23102025-hero-block--light .a23102025-hero-block__button--secondary {
	color: #0071e3;
	border-color: #0071e3;
}

.a23102025-hero-block--light .a23102025-hero-block__button--secondary:hover {
	background-color: #0071e3;
	color: #fff;
	text-decoration: none;
}

/* Синяя схема */
.a23102025-hero-block--blue {
	background: -webkit-gradient(linear, left top, left bottom, from(#1e3a8a), to(#1e40af));
	background: -webkit-linear-gradient(top, #1e3a8a, #1e40af);
	background: -o-linear-gradient(top, #1e3a8a, #1e40af);
	background: linear-gradient(180deg, #1e3a8a, #1e40af);
}

.a23102025-hero-block--blue .a23102025-hero-block__title,
.a23102025-hero-block--blue .a23102025-hero-block__subtitle {
	color: #fff;
}

.a23102025-hero-block--blue .a23102025-hero-block__additional-text {
	color: #bfdbfe;
}

.a23102025-hero-block--blue .a23102025-hero-block__button--secondary {
	color: #fff;
	border-color: #fff;
}

.a23102025-hero-block--blue .a23102025-hero-block__button--secondary:hover {
	background-color: #fff;
	color: #1e3a8a;
	text-decoration: none;
}

/* Фиолетовая схема */
.a23102025-hero-block--purple {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4158D0), color-stop(46%, #C850C0), to(#FFCC70));
	background: -webkit-linear-gradient(top, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	background: -o-linear-gradient(top, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	background: linear-gradient(180deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.a23102025-hero-block--purple .a23102025-hero-block__title,
.a23102025-hero-block--purple .a23102025-hero-block__subtitle {
	color: #fff;
}

.a23102025-hero-block--purple .a23102025-hero-block__additional-text {
	color: #e9d5ff;
}

.a23102025-hero-block--purple .a23102025-hero-block__button--secondary {
	color: #fff;
	border-color: #fff;
}

.a23102025-hero-block--purple .a23102025-hero-block__button--secondary:hover {
	background-color: #fff;
	color: #581c87;
	text-decoration: none;
}

/* ============================================================================
   АДАПТИВНОСТЬ - MOBILE FIRST
   ============================================================================ */

/* Смартфоны (≥480px) */
@media (min-width: 480px) {
	.a23102025-hero-block {
		min-height: 600px;
	}

	.a23102025-hero-block__content {
		padding: 70px 30px 50px;
	}

	.a23102025-hero-block__title {
		font-size: 40px;
	}

	.a23102025-hero-block__subtitle {
		font-size: 21px;
	}

	.a23102025-hero-block__additional-text {
		font-size: 15px;
	}
}

/* Планшеты (≥734px) */
@media (min-width: 734px) {
	.a23102025-hero-block {
		min-height: 624px;
	}

	.a23102025-hero-block__content {
		padding: 80px 40px 60px;
	}

	.a23102025-hero-block__title {
		margin-bottom: 10px;
		font-size: 48px;
	}

	.a23102025-hero-block__subtitle {
		margin-bottom: 6px;
		font-size: 24px;
	}

	.a23102025-hero-block__additional-text {
		margin-bottom: 18px;
		font-size: 16px;
	}

	.a23102025-hero-block__buttons {
		gap: 20px;
		margin-bottom: 25px;
	}

	.a23102025-hero-block__button {
		font-size: 19px;
	}

	/* На планшетах блоки с классом --half становятся 50% ширины */
	.a23102025-hero-block--half {
		width: 50%;
	}

	/* ИСПРАВЛЕНИЕ: увеличена минимальная высота wrapper для планшетов */
	.a23102025-hero-block__image-wrapper {
		min-height: 250px;
	}
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
	.a23102025-hero-block {
		min-height: 692px;
	}

	.a23102025-hero-block__content {
		padding: 90px 50px 70px;
	}

	.a23102025-hero-block__title {
		margin-bottom: 12px;
		font-size: 56px;
	}

	.a23102025-hero-block__subtitle {
		margin-bottom: 8px;
		font-size: 28px;
	}

	.a23102025-hero-block__additional-text {
		margin-bottom: 20px;
		font-size: 17px;
	}

	.a23102025-hero-block__buttons {
		gap: 24px;
		margin-bottom: 30px;
	}

	.a23102025-hero-block__button {
		padding: 14px 26px;
		font-size: 21px;
	}

	/* ИСПРАВЛЕНИЕ: убран width: 50% у изображения (конфликт) */
	/* Изображение теперь всегда 100% ширины своего контейнера */
	.a23102025-hero-block__image {
		width: 50%;
	}

	/* На десктопе блоки с классом --half остаются 50% ширины */
	.a23102025-hero-block--half {
		width: 50%;
	}

	/* ИСПРАВЛЕНИЕ: увеличена минимальная высота wrapper для desktop */
	.a23102025-hero-block__image-wrapper {
		min-height: 300px;
	}
}

/* Large Desktop (≥1200px) */
@media (min-width: 1200px) {
	.a23102025-hero-block__content {
		padding: 60px 60px 0px;
	}

	/* ИСПРАВЛЕНИЕ: увеличена минимальная высота wrapper для больших экранов */
	.a23102025-hero-block__image-wrapper {
		min-height: 350px;
	}
}

/* ============================================================================
   ACCESSIBILITY (WCAG 2.1 AA/AAA)
   ============================================================================ */

/* Убираем анимации для пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.a23102025-hero-block__button {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}

	.a23102025-hero-block__button:hover {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	.a23102025-hero-block__button:active {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}

/* Убираем hover-эффекты для touch-устройств */
@media (hover: none) {
	.a23102025-hero-block__button:hover {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}

/* ============================================================================
   INNER TEXT EFFECT (ГРАДИЕНТНЫЙ ТЕКСТ)
   ============================================================================ */

/**
 * Заголовок с белым текстом, внутренним градиентом (серый → белый сверху вниз)
 * и эффектом "внутренней тени" снизу.
 * 
 * Используется background-clip: text + mask-image для имитации внутренней тени.
 * Требования:
 * - Родительский контейнер должен иметь фон (рекомендуется тёмный для контраста)
 * - Текст остаётся доступным для скринридеров и поисковиков (SEO-friendly)
 * 
 * Совместимость: поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge)
 * WCAG: контраст белого текста на тёмном фоне ≥ 4.5:1 — проходит AA/AAA
 * WordPress Codex: безопасный CSS, без !important, чистые селекторы
 */
.h-gradient-inner-shadow {
	/* Обязательно: текст должен быть прозрачным,
	   чтобы сквозь него был виден градиентный фон */
	color: transparent;

	/* Градиент: сверху серый (#888888), вниз — белый (#ffffff) */
	background: linear-gradient(to bottom, #888 0%, #ffffff 100%);

	/* Обрезаем фон по форме текста */
	-webkit-background-clip: text;
	background-clip: text;

	/* Дополнительно: добавляем лёгкую внутреннюю тень снизу через mask */
	/* Это создаёт визуальный эффект "затенения" в нижней части букв */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.1) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.1) 100%);

	/* Убираем наследуемое подчёркивание или другие стили */
	text-decoration: none;

	/* Для лучшей читаемости на тёмных фонах */
	font-weight: 700;
	line-height: 1.2;
}

/* Адаптивность: шрифт масштабируется, эффект сохраняется */
@media (max-width: 768px) {
	.h-gradient-inner-shadow {
		font-size: clamp(1.8rem, 5vw, 3.5rem);
	}
}