/* Start:/local/templates/rumles/css/pro_pages.css?17906225165171*/
/* Страницы /brigady/ и /optovikam/.
   Сетка, отступы и цвета — Bootstrap-классами в разметке (как на /calc/);
   здесь только то, чего в утилитах нет. */

.pro-page__hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: 0 1rem 2.5rem rgba(15, 61, 34, .18);
}

/* /optovikam/: первый экран баннером на фото склада. Затемнение — цвет
   плашки bg-green-5 внизу страницы, слева плотнее, чтобы читался текст */
.pro-page__hero-banner {
	position: relative;
	background-color: #173a36;
	background-position: center;
	background-size: cover;
}

.pro-page__hero-banner::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(23, 58, 54, .95) 0%, rgba(23, 58, 54, .85) 45%, rgba(23, 58, 54, .5) 100%);
}

.pro-page__hero-banner-body {
	position: relative;
	min-height: 30rem;
}

.pro-page__hero-banner-text {
	max-width: 38rem;
}

/* на узком экране фото целиком под текстом — затемняем равномерно */
@media (max-width: 991.98px) {
	.pro-page__hero-banner::before {
		background: rgba(23, 58, 54, .88);
	}

	.pro-page__hero-banner-body {
		min-height: 0;
	}
}

.pro-page__eyebrow {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pro-page__fact {
	border: 1px solid rgba(255, 255, 255, .18);
	/* тёмная подложка: правые плитки лежат на светлой части фото */
	background: rgba(23, 58, 54, .7);
	backdrop-filter: blur(4px);
}

.pro-page__benefit {
	position: relative;
	padding-left: 1.75rem;
}

.pro-page__benefit::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 1rem;
	height: .55rem;
	border-left: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
	transform: rotate(-45deg);
}

/* на тёмной плашке галочка белая */
.pro-page__benefit--light::before {
	border-color: #fff;
}

.pro-page__num {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
}

.pro-page__cta-phone,
.pro-page__cta-phone:hover {
	color: #fff;
}

.pro-page__note {
	border-left: 4px solid var(--primary);
}

/* плитки разделов каталога */
.pro-page__tile {
	color: inherit;
	transition: box-shadow .2s ease;
}

.pro-page__tile:hover,
.pro-page__tile:focus {
	color: inherit;
	text-decoration: none;
	box-shadow: 0 .5rem 1.5rem rgba(30, 30, 30, .12);
}

.pro-page__tile img {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: contain;
}

/* фото этапов производства */
.pro-page__step-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* вопросы и ответы */
.pro-page__faq-btn {
	position: relative;
	width: 100%;
	padding-right: 2.5rem;
	border: 0;
	background: none;
	color: var(--gray-900);
	text-align: left;
}

.pro-page__faq-btn::after {
	content: "";
	position: absolute;
	right: .5rem;
	top: 50%;
	width: .6rem;
	height: .6rem;
	margin-top: -.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.pro-page__faq-btn[aria-expanded="true"]::after {
	margin-top: -.15rem;
	transform: rotate(-135deg);
}

.pro-page__faq-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* ссылки внутри серого текста иначе не отличить от текста */
.pro-page .text-gray-600 a {
	color: var(--primary);
}

/* бригады. Чипсы — это .btn, а бутстрап склеивается после этого файла,
   поэтому селекторы с запасом специфичности */
.pro-brigades .btn.pro-brigades__chip {
	border: 1px solid var(--gray-2);
	border-radius: 2rem;
	background: #fff;
	color: var(--gray-900);
}

.pro-brigades .btn.pro-brigades__chip:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.pro-brigades .btn.pro-brigades__chip.active,
.pro-brigades .btn.pro-brigades__chip.active:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

.pro-brigades__avatar {
	flex: 0 0 4rem;
	width: 4rem;
	height: 4rem;
	object-fit: cover;
}

.pro-brigades__fact {
	position: relative;
	padding-left: 1.25rem;
	color: var(--gray-600);
}

.pro-brigades__fact::before {
	content: "";
	position: absolute;
	left: .25rem;
	top: .5em;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--primary);
}

.pro-brigades__photo {
	position: relative;
	aspect-ratio: 1 / 1;
}

.pro-brigades__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.pro-brigades__photo:hover img {
	transform: scale(1.05);
}

.pro-brigades__photo-more {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(23, 58, 54, .6);
}

/* End */
/* /local/templates/rumles/css/pro_pages.css?17906225165171 */