/* ==========================================================================
   about.css — стили страницы "О компании"
   Сетка: 1 колонка = 8.3333% (12 колонок), считается от ширины ближайшей
   строки-контейнера (about-tb, about-itx и т.п.).

   v3: .about-nav теперь НЕ часть колоночного layout'а — она рендерится один
   раз и позиционируется через position:fixed. Поэтому она больше не зависит
   от того, сколько раз в контенте открывается/закрывается .about-col —
   залипание не сбрасывается между секциями.
   ========================================================================== */
   
   
#about-block-0 + #about-block-1{
	padding-top:30px;
}   
.about-block--text_section .video-container{
	margin-top:30px;
}
.wpcf7-form-control-wrap{
	width:100%
}
.about-block-bg-wrap + .about-block{
	padding-top:0!important
}
.about-nav__toggle{ display:none; }
.about-nav__sticky{
	padding: 20px 30px;
	padding-left:20px;
	background:white;
	-webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.about-nav__sticky ul{
	border-left:2px solid #EDF5F4;
}
.content-page.wrapper{
	padding-top:0!important
}
.about-page.content-page h2{
	font-size:50px;
	margin-bottom:50px
}
.about-page.content-page h3{
	line-height: 1.2;
    color: #136A74;
    font-size: 30px;
    font-family: 'Montserrat';
    margin-bottom: 30px;
}
.about-page.content-page h4{
	display: inline-block;
	width:100%;
	margin-top:20px;
	line-height: 1.2;
    color: #136A74;
    font-size: 21px;
    font-family: 'Montserrat';
    margin-bottom: 15px;
}
.about-wysiwyg .wpcf7{
	margin-top:50px;
	-webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
	background:#EDF5F4;
	padding: 50px 8%;
}
.about-wysiwyg .wpcf7 form [type="radio"] + .wpcf7-list-item-label::before, 
.about-wysiwyg .wpcf7 form [type="checkbox"] + .wpcf7-list-item-label::before,
.about-wysiwyg .wpcf7 .ww50 input{
	background:white
}
.about-wysiwyg .wpcf7-list-item{
	margin:0!important;
	padding:0!important
}
.about-wysiwyg .wpcf7 .wpcf7-submit{
	width:auto!important
}
.flexix{
	display: flex;
	flex-wrap:wrap;
	margin:0 -15px;
}
.ww50{
	width:50%;
	padding:0 15px
}

/* ===== Хиро ===== */
.about-hero{
	position:relative;
	min-height:600px;
	margin-top:85px;
	background-size:cover;
	background-position:center;
	background-color:#EDF5F4;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:end;
	-ms-flex-align:end;
	align-items:flex-end;
}
.about-hero:after{
	content:'';
	position:absolute;
	left:0; right:0; bottom:0;
	height:65%;
	background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,.55)), to(rgba(0,0,0,0)));
	background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
	pointer-events:none;
}
.about-hero .wrapper{
	position:relative;
	z-index:2;
	padding-bottom:80px;
}
.about-hero h1{
	color:#fff;
	margin:0;
}
.about-hero--noimg{
	background-color:#EDF5F4;
	min-height:280px;
	align-items:center;
}
.about-hero--noimg:after{ content:none; }
.about-hero--noimg h1{ color:#136A74; }

/* ===== Меню: полностью развязано с колоночным layout'ом ===== */
.about-nav{
	/* мобильный/дефолтный вид — обычный поток, см. медиа-запрос ниже для десктопа */
}
.about-nav__sticky ul{
	margin:0!important; 
	padding:0!important;
}
.about-nav__sticky ul li{
	list-style-type: none!important;
}
.about-nav__sticky a{
	position:relative;
	display:block;
	padding:12px 0 12px 15px;
	line-height:1.3;
	color:#000!important;
	text-decoration:none!important;
	transition:color .2s, border-color .2s;
}
.about-nav__sticky a:before{
	position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EDF5F4;
    top: 19px;
    left: -5px;
	transition:all .2s;
}
.about-nav__sticky a:hover{ color:#31A8AE!important; }
.about-nav__sticky a:hover:before{
	background:#31A8AE
}
.about-nav__sticky a.is-active{
	color:#31A8AE!important;
	border-left-color:#31A8AE;
}
.about-nav__sticky a.is-active:before{
    width: 12px;
    height: 12px;
    left: -7px;
	top:17px;
	background:#31A8AE
}
@media (min-width: 1001px){
	.content-page.about-page.wrapper{
		display:grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		column-gap:60px;
	}
	.about-col{
		grid-column:1;
	}
	.about-nav{
		z-index: 999;;
		padding-top:80px;
		grid-column:2;
		grid-row:1 / -1; /* растягивается на всю высоту контента, включая full-bleed блоки */
		position:sticky;
		top:20px;
		align-self:start;
		overflow-y:auto;
	}
	/* full-bleed блокам нужно явно занять обе колонки, иначе их 100vw-трюк
	   будет считаться от узкой 1fr-колонки, а не от полной ширины wrapper'а */
	.about-block-bg-wrap,
	.about-block--bg_image_section{
		grid-column: 1 / -1;
	}
}

/* ===== Секция: единый отступ 80px сверху/снизу для любого типа блока ===== */
.about-block{
	padding:80px 0 0;
}
.about-block--bg{
	padding-bottom:60px;
	background:#EDF5F4;
}

/* ===== 3. Обычный блок: текст 8 кол. (внутри паддинг 1 кол. + запас), справа 4 кол. картинки ===== */
.about-tb{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.about-tb__text{
	width:80%; /* 8/12 */
	box-sizing:border-box;
	padding:0 calc(8.3333% + 15px); /* 1 колонка + небольшой внутренний запас */
}
.about-tb__images{
	width:20%; /* 4/12 */
	box-sizing:border-box;
	padding:0 15px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	gap:10px;
}
.about-tb__images img{
	width:100%;
	-webkit-border-top-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
}
.about-tb:not(:has(.about-tb__images)) .about-tb__text{
	width:80%;
}

/* ===== 4. Блок с картинками: на всю ширину, каждая 50%, gap 10px ===== */
.about-ib{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	gap:10px;
}
.about-ib__item{ width:calc(50% - 5px); }
.about-ib__item img{
	width:100%;
	display:block;
	-webkit-border-top-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
}

/* ===== 5. Картинка (5 кол.) + бирюзовый текст (7 кол., как .form_content на сайте) ===== */
.about-itx{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.about-itx--right{
	-webkit-box-orient:horizontal;
	-webkit-box-direction:reverse;
	-ms-flex-direction:row-reverse;
	flex-direction:row-reverse;
}
.about-itx__image{ width:41.6667%; } /* 5/12 */
.about-itx__image img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
}
.about-itx__text{
	width:58.3333%; /* 7/12 */
	box-sizing:border-box;
	background:#31A8AE; /* цвет и логика — как .form_content в style.css */
	color:#fff;
	padding:50px 8.3333% 40px;
	margin:auto 0;
}
.about-itx__text h2,
.about-itx__text h3{ color:#fff!important; }
.about-itx__text a{ color:#fff; text-decoration:underline; }

.about-block-bg-wrap,
.about-bg-breakout {
	position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* ===== 6. Фоновая картинка (мин. 550px, full-bleed) + белая карточка внахлёст (-100px) ===== */
/* прямой потомок .wrapper => 100vw-трюк считается верно, т.к. .wrapper центрирован симметрично */
.about-bg-breakout {
    min-height: 550px;
    background-size: cover;
    background-position: center;
    background-color: #EDF5F4;
}
.about-bg-card-wrap{
	position:relative;
	z-index:2;
	max-width:1600px;
	margin:-100px auto 0;
	box-sizing:border-box;
}
@media (min-width: 1001px){
	.about-bg-card-wrap{ padding-right:340px; } /* резерв под меню: 280px колонка + 60px gap */
}
.about-bg-card-wrap .about-tb__text{
	background:#fff;
	padding-top:80px;
}

.about-tiles{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	gap:10px;
}
.about-tile{
	width:calc((100% - 50px) / 6);
	box-sizing:border-box;
	background:#EDF5F4;
	padding:25px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
}
.about-tile__icon{ width:36px; height:36px; margin:0 auto 25px }
.about-tile__text{ line-height:1.3; margin:0; }

/* ===== full-bleed wrap для text_section с включённым bg_color ===== */
.about-block-bg-wrap{
	background:#EDF5F4;
	margin-top:80px;
}
.about-block-bg-wrap .about-inner-wrapper{
	max-width:1600px;
	margin:0 auto;
	padding:0 15px;
	box-sizing:border-box;
}
@media (min-width: 1001px){
	.about-block-bg-wrap .about-inner-wrapper{ padding-right:340px; } /* резерв под меню: 280px колонка + 60px gap */
}
.about-block-bg-wrap .about-block{ background:none; } /* фон уже на wrap'е, чтобы не дублировать */

/* ===== Адаптив ===== */
@media (max-width: 1240px){
	.about-tile{ width:calc((100% - 3*10px) / 4); }
	.about-hero{
		margin-top:70px
	}
	.about-tb:not(:has(.about-tb__images)) .about-tb__text {
    width: 100%;
}
}

@media (max-width: 1000px){
	.about-nav__toggle{
		display:flex;
		align-items:center;
		justify-content:center;
		position:fixed;
		right:20px;
		bottom:20px;
		width:56px;
		height:56px;
		border:none;
		border-radius:50%;
		background:#31A8AE;
		color:#fff;
		box-shadow:0 4px 14px rgba(0,0,0,.25);
		cursor:pointer;
		z-index:70;
	}
	.about-nav__sticky a:before{
		content:none
	}

	.about-nav__sticky{
		display:none;
		position:fixed;
		left:20px;
		right:20px;
		bottom:90px;
		max-height:60vh;
		overflow-y:auto;
		background:#fff;
		border-radius:15px;
		box-shadow:0 10px 34px rgba(0,0,0,.22);
		padding:10px 15px;
		z-index:65;
	}
	.about-nav.is-open .about-nav__sticky{
		display:block;
	}
	.about-nav__sticky ul{
		border-left:none;
	}
	.about-nav__sticky a{
		border-left:none;
		border-radius:0;
		padding:12px 5px;
		margin-left:0;
	}
	.about-nav__sticky li:last-child a{ border-bottom:none; }
	.about-nav__sticky a.is-active{ border-left:none; }

	.about-tb{ display:block; }
	.about-tb__images{ width:100%; margin-top:20px; }
	

	.about-bg-card-wrap{ margin-top:-60px; }
	.about-block{
		padding-top:60px
	}
	.about-tb__text,
	.about-tb:not(:has(.about-tb__images)) .about-tb__text {
    	width: 100%;
	}
	.about-page.content-page h2 {
    	font-size: 40px;
		margin-bottom: 40px;
	}
	.about-block--bg{
		padding-bottom:40px
	}
	.about-block-bg-wrap .about-inner-wrapper{
		padding:0
	}
	.about-itx__text{
		padding:40px 40px 10px;
	}
	.about-bg-card-wrap .about-tb__text{
		padding-top:60px;
		padding-left:30px;
		padding-right:30px
	}
}

@media (max-width: 768px){
	.about-bg-breakout{ min-height:400px }
	.about-hero{ min-height:400px; margin-top:80px; }

	.about-itx, .about-itx--right{ display:block; }
	.about-itx__image{ width:100%; }
	.about-itx__text{ width:100%; padding:50px 30px 20px; margin:0; }

	.about-ib__item{ width:100%; }

	.about-tile{ width:calc((100% - 10px) / 2); }
	.about-page.content-page h2 {
        font-size: 35px;
        margin-bottom: 35px;
    }
	.about-page.content-page h3{
		font-size:25px
	}
	.about-hero {
        margin-top: 60px;
    }
	.about-tb__text{
		padding-left:0;
		padding-right:0
	}
	.about-block--text_section.about-block--bg .about-tb__text{
		padding-right:30px;
		padding-left:30px
	}
	.about-wysiwyg .wpcf7{
		padding:40px 30px;
	}
	.ww50{
		width:100%
	}
	.about-nav__sticky a{
		padding:5px
	}
}

@media (max-width: 479px){
	.about-bg-breakout{
		min-height:320px
	}
	.about-hero{ min-height:320px; margin-top:60px; }
	.about-bg-breakout{ min-height:400px; }
	.about-bg-card-wrap{ margin-top:-40px; padding:0 }
	.about-page.content-page h2 {
        font-size: 29px;
        margin-bottom: 30px;
    }
	.about-page.content-page h3 {
        font-size: 23px;
        margin-bottom: 15px;
    }
	.about-page.content-page h4 {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.about-bg-card-wrap .about-tb__text {
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
		margin-left:-15px;
		margin-right:-15px;
    }
}
@media (max-width: 400px){
	.about-hero{ margin-top:50px}