/* Страницы брендов: /garia/, страницы моделей Garia, /3electro/.
   Вынесено из инлайна garia/index.php, чтобы новые страницы не тащили свою копию */

.garia-brand section {
	margin: 0 0 80px;
}

.garia-brand .prod-first-screen .pic img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.garia-brand .btns {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	/* Без отступа кнопки прилипали к абзацу: у .top нет нижнего поля,
	   а .bottom прижат к низу колонки только на широком экране */
	margin-top: 40px;
}

/* Две кнопки в ряд: базовый .btn идёт width:100%, а две по 264px при
   контейнере 542px не вставали в строку — не хватало пикселя на зазор.
   Считаем ширину от контейнера с учётом gap. */
/* Контейнер тянем на всю колонку: иначе кнопки по ширине текста
   (265 + 313 + зазор) не встают в строку и перескакивают вниз */
.garia-brand .btns {
	gap: 12px;
	width: 100%;
}

/* Ширину 50% задаёт общий стиль сервисных страниц
   (.service .prod-first-screen .inf .bottom .btns .btn) — он специфичнее
   простого .garia-brand .btns .btn, поэтому повторяем его цепочку.
   Кнопкам нужна ширина по тексту, как на карточках моделей. */
.garia-brand.service .prod-first-screen .inf .bottom .btns .btn {
	width: auto;
	min-width: 0;
	max-width: none;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Тот же вид, что у «Собрать свою комплектацию» на карточках моделей:
   зелёная с тёмной рамкой, а не полупрозрачная белая, которую даёт
   общий стиль .service .prod-first-screen … .btn.opacity */
.garia-brand .prod-first-screen .inf .bottom .btn.opacity {
	padding: 0 30px;
	background: #BAE00B;
	border: 1px solid #1C263C;
	color: #1C263C;
	text-align: center;
}

.garia-brand .prod-first-screen .inf .bottom .btn.opacity:hover {
	background: #a8ca0a;
}

/* Текст и картинка в две колонки, у экоблока порядок обратный */
.garia-brand-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.garia-brand-text p {
	font-size: 18px;
	line-height: 160%;
	margin: 0 0 18px;
}

.garia-brand-pic img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
}

/* Заголовки секций — слева и крупно, как на карточке товара:
   у .service они по умолчанию мелкие и по центру */
.product-page.service.garia-brand h2 {
	text-align: left;
	font-size: 44px;
	line-height: 110%;
	letter-spacing: -1px;
	margin: 0 0 40px;
}

.garia-brand-mission-in {
	background: #1C263C;
	color: #fff;
	border-radius: 30px;
	padding: 60px;
}

.product-page.service.garia-brand .garia-brand-mission-in h2 {
	color: #fff;
}

.garia-brand-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.garia-brand-duo-item {
	background: rgba(255, 255, 255, .06);
	border-radius: 20px;
	padding: 35px 40px;
}

.garia-brand-duo-item.accent {
	background: #BAE00B;
	color: #1C263C;
}

.garia-brand-duo-title {
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 15px;
}

.garia-brand-duo-item p {
	margin: 0;
	font-size: 17px;
	line-height: 155%;
}

.garia-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

.garia-brand-tile {
	background: #F2F2F2;
	border-radius: 20px;
	padding: 35px 35px 40px;
	text-decoration: none;
	color: #1C263C;
	display: block;
}

.garia-brand-tile h3 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 120%;
}

.garia-brand-tile p {
	margin: 0;
	font-size: 16px;
	line-height: 150%;
	opacity: .8;
}

.garia-brand-tile.model {
	padding: 0 0 30px;
	overflow: hidden;
	transition: background .3s ease;
}

.garia-brand-tile.model:hover {
	background: #BAE00B;
	box-shadow: 0 14px 30px rgba(28, 38, 60, .14);
}

/* Снимок приближается под курсором — карточка отзывается на наведение.
   Масштабируем обёртку с overflow:hidden, поэтому кадр не выходит за
   скруглённые углы */
.garia-brand-tile-pic {
	display: block;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	margin: 0 0 20px;
	transition: transform .45s ease;
}

.garia-brand-tile.model:hover .garia-brand-tile-pic {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.garia-brand-tile-pic {
		transition: none;
	}

	.garia-brand-tile.model:hover .garia-brand-tile-pic {
		transform: none;
	}
}

.garia-brand-tile.model h3,
.garia-brand-tile.model p {
	padding: 0 30px;
}

/* Блок повторял цвет подвала (#1C263C) и сливался с ним. На остальных
   страницах такой призыв — зелёный, как «Мы на связи» */
.garia-brand-cta {
	background: #BAE00B;
	color: #1C263C;
	border-radius: 30px;
	padding: 60px;
	position: relative;
	z-index: 1;
}

/* Подвал шаблона заходит на контент отрицательным отступом —
   последней секции нужен запас, иначе кнопка оказывается под ним */
.garia-brand section:last-of-type {
	margin-bottom: 120px;
}

footer.inner {
	margin-top: 40px;
}

.garia-brand-cta-in {
	max-width: 700px;
}

.product-page.service .garia-brand-cta h2 {
	color: #1C263C;
}

.garia-brand-cta p {
	font-size: 18px;
	line-height: 155%;
	margin: 0 0 35px;
}

.garia-brand-cta .btn {
	width: auto;
	background: #1C263C;
	color: #fff;
	transition: background .2s, box-shadow .2s;
}

.garia-brand-cta .btn:hover {
	background: #0f1729;
	box-shadow: 0 8px 22px rgba(28, 38, 60, .28);
}

/* Стрелка должна читаться и в покое, и под курсором: на тёмной кнопке
   она светлая, при наведении подсвечивается фирменным зелёным */
.garia-brand-cta .btn .arr {
	background: #fff;
}

.garia-brand-cta .btn:hover .arr {
	background: #BAE00B;
}

.garia-brand-factory-lead {
	max-width: 700px;
	font-size: 18px;
	line-height: 155%;
	margin: -10px 0 30px;
}

/* Пропорции задаются здесь, а не высотой файла: до загрузки метаданных
   браузер иначе схлопнул бы блок и вёрстка прыгнула */
.garia-brand-video {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: #1C263C;
}

/* До первого клика на месте плеера стоит кадр из ролика — как слайд
   с видео в галерее товара: круг с «плеем» по центру */
.garia-brand-video-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: #1C263C;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Круг тот же, что на видеослайде в галерее товара, но кадр тут шире —
   размер считаем от ширины окна, иначе на десктопе «плей» теряется */
.garia-brand-video-cover:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(62px, 7.5vw, 110px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(28, 38, 60, .55) url(/upload/owl.video.play.png) center/34% no-repeat;
	transition: background-color .2s, transform .2s;
}

.garia-brand-video-cover:hover:after {
	background-color: rgba(28, 38, 60, .8);
	transform: translate(-50%, -50%) scale(1.06);
}

.garia-brand-video video,
.garia-brand-video-hit {
	display: none;
}

.garia-brand-video.is-on .garia-brand-video-cover {
	display: none;
}

.garia-brand-video.is-on video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Снизу оставлены 48px — там нативная панель управления, её клики наши */
.garia-brand-video.is-on .garia-brand-video-hit {
	display: block;
	position: absolute;
	inset: 0 0 48px;
	cursor: pointer;
}

@media (max-width: 1000px) {
	.garia-brand section {
		margin: 0 0 50px;
	}

	.garia-brand-factory-lead {
		font-size: 16px;
		margin: 0 0 20px;
	}

	.garia-brand-video {
		border-radius: 15px;
	}

	/* Мобильная панель управления ниже десктопной */
	.garia-brand-video.is-on .garia-brand-video-hit {
		inset: 0 0 38px;
	}

	.product-page.service.garia-brand h2 {
		font-size: 30px;
		letter-spacing: -.5px;
		margin: 0 0 25px;
	}

	.garia-brand-cols,
	.garia-brand-duo {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.garia-brand-mission-in,
	.garia-brand-cta {
		padding: 40px 25px;
		border-radius: 20px;
	}

	.garia-brand-duo-item {
		padding: 25px;
	}

	.garia-brand.service .prod-first-screen .inf .bottom .btns .btn {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		min-width: 0;
		white-space: normal;
	}

	.garia-brand-text p {
		font-size: 16px;
	}

	/* Контейнер снимка в шаблоне идёт фиксированной высоты (320px, ниже 700px — 80vw),
	   а кадр 2:1 вписывается по ширине — сверху и снизу оставалась пустота
	   до 112px. Высоту считаем по самому снимку */
	.garia-brand .prod-first-screen .pic {
		height: auto;
		min-height: 0;
		margin: 24px auto;
	}
}

@media (max-width: 700px) {
	/* На узком экране подвал рисует фотографию псевдоэлементом и поднимает
	   её на 242px — она ложилась поверх плашки CTA и срезала кнопку.
	   Наезд снимаем, зазор до фотографии задаём отступом секции.
	   Минус 60px — это padding-top футера: без компенсации над фотографией
	   осталась бы полоса тёмной заливки */
	footer.inner:before {
		margin-top: -60px;
	}

	footer.inner {
		margin-top: 0;
	}

	.garia-brand section:last-of-type {
		margin-bottom: 40px;
	}

	/* Кнопка тут по ширине содержимого, а мобильный .btn идёт с padding 20px —
	   стрелке (40px + отступ 10px справа) места не оставалось, и она наезжала на текст */
	.garia-brand-cta .btn {
		padding: 0 60px 0 20px;
	}

	/* Между снимком и кнопками складывались три отступа подряд */
	.garia-brand .prod-first-screen .inf .bottom {
		padding-top: 0;
	}

	.garia-brand .btns {
		margin-top: 24px;
	}
}