/* Start:/local/templates/acoustic/components/bitrix/catalog.element/portfolio_new/style.css?179067338413103*/
/* Детальная страница проекта — новый дизайн.
   Вёрстка в манере сайта: обычный поток, флексы и гриды, без абсолютного позиционирования
   (абсолют только там, где элемент лежит поверх картинки: стрелки галереи и счётчик «ещё фото»).
   Шрифты, контейнер и классы .h1/.h2/.h3 берутся из style-first.css шаблона. */

.projectPage {padding-bottom:0;margin-bottom:-9px;}
.projectPage p {margin:0 0 10px 0;font-size:15px;line-height:135%;color:#4D4D4D;}
.projectPage b {font-weight:700;line-height:inherit;}
.projectPage p:last-child {margin-bottom:0;}

/* заголовок секции: в макете 30px, между .h2 (36) и .h3 (26) */
.projectSectionTitle {font-family:'Overpass';font-style:normal;font-weight:800;font-size:30px;line-height:110%;letter-spacing:-0.02em;color:#1F1F1F;margin:0 0 20px 0;}

/* Крошки и H1 выводит шаблон сайта (header.php), поэтому своих здесь нет.
   В макете H1 чёрный, а шаблон красит его в #1F1F1F — выравниваем. */
/* наш css подключается раньше шаблонного, поэтому нужен вес селектора выше */
body h1 {color:#000;}

/* строка «адрес + площадь» */
.projectMeta {display:flex;flex-wrap:wrap;gap:12px 43px;margin:20px 0 0 0;}
.projectMetaItem {display:flex;align-items:center;gap:22px;font-family:'Overpass';font-weight:800;font-size:20px;line-height:120%;letter-spacing:-0.02em;color:#1F1F1F;}
.projectMetaIcon {flex:0 0 30px;width:30px;height:30px;}
.projectMetaIcon svg {display:block;width:30px;height:30px;}

/* верх: текст слева, галерея справа */
.projectIntro {display:flex;align-items:flex-start;gap:31px;margin:58px 0 0 0;}
.projectIntroText {flex:0 0 361px;width:361px;padding:20px 0 0 0;}
/* первый абзац в макете крупнее и жирнее остальных */
.projectPage .projectIntroLead {font-size:18px;font-weight:700;line-height:130%;}
.projectTags {display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0 0;}
.projectTags a, .projectTags span {display:block;padding:5px 10px;background:#F3F3F3;border-radius:5px;opacity:0.8;font-size:15px;line-height:135%;color:#4D4D4D;}
.projectTags a:hover {background:#FFF050;opacity:1;}

.projectGallery {flex:1 1 auto;min-width:0;}
/* галерея — слайдер сайта (.portfolioTopImage*), подгоняем размеры под макет */
/* рамка и тень — на контейнере слайдера: у .slick-list overflow:hidden, он бы их обрезал */
.projectGallery .portfolioTopImageBig {margin:0;height:510px;border:1px solid #E1E1E1;border-radius:5px;box-shadow:4px 4px 0 #D9D9D9;}
.projectGallery .portfolioTopImageBig .slick-list {height:100%;border-radius:5px;}
.projectGallery .portfolioTopImageBigItem a {height:508px;border:0;border-radius:0;box-shadow:none;}
.projectGallery .portfolioTopImageSmall.slick-slider {margin:19px 0 0 0;}
.projectGallery .portfolioTopImageSmall .slick-list {padding:0 0 6px 0;}
.projectGallery .portfolioTopImageSmallItem {width:93px;height:85px;margin:0 16px 0 0;padding:0;}
.projectGallery .portfolioTopImageSmall.slick-slider .slick-arrow {top:255px;}
.projectGallery .portfolioTopImageSmall.slick-slider .slick-arrow.slick-prev {left:40px;}
.projectGallery .portfolioTopImageSmall.slick-slider .slick-arrow.slick-next {right:40px;}

/* готовые блоки сайта: зазоры по макету */
.projectPage .consultBlock {margin-bottom:133px;}
.projectPage .portfolioPreview.inner {margin:0 0 120px 0;}
.projectPage .portfolioPreview.inner .h3 {font-size:30px;line-height:110%;}
/* стрелки карусели без наведения прозрачные (на главной остаются как были) */
.projectPage .portfolioPreviewSlider .slick-arrow {background-color:transparent;}
.projectPage .portfolioPreviewSlider .slick-arrow:hover {background-color:#FFF050;}
.projectCard {background:#fff;border:1px solid #E1E1E1;border-radius:5px;box-shadow:4px 4px 0 #E1E1E1;padding:49px 35px 33px;margin:71px 0 0 0;}
/* колонки одинаковой ширины, ряды по содержимому с зазором — в макете колонки были неравные,
   из-за чего длинные значения переносились по-разному и налезали на соседний ряд */
.projectAboutGrid {display:grid;grid-template-columns:repeat(3,1fr);column-gap:30px;row-gap:40px;align-items:start;margin:33px 0 0 0;}
/* иконка центрируется по высоте относительно текста, как в макете */
.projectParam {display:flex;align-items:center;gap:20px;}
/* иконки выводятся в натуральную величину макета (до 75×60), колонку держим по самой широкой */
.projectParamIcon {flex:0 0 56px;width:56px;display:flex;align-items:center;justify-content:center;}
.projectParamIcon img, .projectParamIcon svg {display:block;width:auto;max-width:none;max-height:60px;}
.projectParamBody {min-width:0;}
.projectParamName {font-family:'Overpass';font-weight:800;font-size:20px;line-height:120%;letter-spacing:-0.02em;color:#1F1F1F;}
.projectParamValue {margin:4px 0 0 0;font-size:15px;line-height:135%;color:#4D4D4D;}
/* кнопка — под всеми параметрами, по центру карточки */
.projectCardFooter {display:flex;justify-content:center;margin:40px 0 0 0;}

/* короткое название объекта — только для мобильной версии (десктоп показывает обычный H1) */
.projectTitleMobile {display:none;}

/* кнопки */
.projectBtn {display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;background:#fff;border:1px solid #E1E1E1;border-radius:5px;box-shadow:4px 4px 0 #D9D9D9;font-size:16px;line-height:150%;color:#4D4D4D;cursor:pointer;transition:0.1s ease-out;}
/* в макете рисунок иконки 20×20 внутри бокса 24×24 — поля держат ширину кнопки */
.projectBtn svg, .projectBtn img {display:block;width:20px;height:20px;margin:0 2px;}
.projectBtn:hover {box-shadow:4px 4px 0 #FFF15A;color:#4D4D4D;}
.projectBtnYellow {background:#FFF050;}

/* два текстовых блока + вертикальная картинка */
.projectBlocks {display:flex;align-items:flex-start;gap:40px;margin:70px 0 0 0;}
.projectBlocksText {flex:1 1 auto;min-width:0;}
.projectBlocksItem + .projectBlocksItem {margin-top:43px;}
.projectBlocksImage {flex:0 0 454px;}
.projectBlocksImage img {display:block;width:100%;border-radius:5px;object-fit:cover;aspect-ratio:454/606;}

/* «В составе решения применены:» — в макете это стиль h5 */
.projectListTitle {margin:20px 0 0 0;font-family:'Overpass';font-weight:800;font-size:20px;line-height:120%;letter-spacing:-0.02em;color:#1F1F1F;}

/* список применённых материалов */
.projectList {margin:6px 0 0 0;padding:0;list-style:none;}
.projectList li {position:relative;padding:0 0 0 30px;margin:0 0 11px 0;font-size:15px;line-height:140%;color:#4D4D4D;}
.projectList li:last-child {margin-bottom:0;}
.projectList a {font-weight:700;line-height:135%;color:#4D4D4D;text-decoration:underline;}
.projectList a:hover {color:#1F1F1F;}
.projectList li svg, .projectList li img {position:absolute;left:0;top:3px;width:17px;height:16px;}

/* архитектурная акустика: текст + карточка материала */
.projectAcoustic {display:flex;align-items:flex-start;gap:34px;margin:60px 0 0 0;}
.projectAcousticText {flex:1 1 auto;min-width:0;padding:21px 0 0 0;}
.projectMaterials {flex:0 0 457px;display:grid;gap:20px;}
/* ссылкой служит вся карточка, на наведении жёлтая тень — как у карточек товаров сайта */
.projectMaterial {display:block;background:#fff;border:1px solid #E1E1E1;border-radius:5px;box-shadow:4px 4px 0 #D9D9D9;overflow:hidden;color:inherit;text-decoration:none;transition:0.1s ease-out;}
a.projectMaterial:hover {box-shadow:4px 4px 0 #FFF15A;color:inherit;}
.projectMaterial img {display:block;width:100%;height:247px;object-fit:cover;}
.projectMaterialBody {padding:30px 30px 23px;}
.projectMaterialName {font-family:'Overpass';font-weight:800;font-size:20px;line-height:120%;letter-spacing:-0.02em;color:#1F1F1F;}
.projectMaterialDesc {margin:4px 0 0 0;font-size:15px;line-height:140%;color:#4D4D4D;}

/* нижний текстовый блок */
.projectText {margin:120px 0 0 0;}
.projectText .h2, .projectText .h3 {margin:0 0 13px 0;}
.projectText .h3 {margin:30px 0 11px 0;}
.projectText ul {margin:0 0 16px 0;padding:0 0 0 20px;}
.projectText li {font-size:15px;line-height:135%;color:#4D4D4D;}


/* Больше двух материалов — они уходят под текст галереей по три в ряд (отдельный вид из макета) */
.projectAcousticGallery {display:block;}
.projectAcousticGallery .projectAcousticText {padding:0;max-width:868px;}
.projectAcousticGallery .projectMaterials {display:grid;grid-template-columns:repeat(3,1fr);gap:29px;width:auto;margin:35px 0 0 0;}
.projectAcousticGallery .projectMaterial img {height:199px;}
/* галерейный вид: название и подпись идут одним блоком, как в макете */
.projectAcousticGallery .projectMaterialBody {padding:24px 30px 23px;}
.projectAcousticGallery .projectMaterialDesc {margin-top:0;}

@media (max-width: 1180px) {
	.projectIntro {flex-direction:column;gap:30px;}
	.projectIntroText {flex:1 1 auto;width:100%;}
	.projectGallery {order:-1;width:100%;}
	/* на узких экранах колонки и ряды уже не фиксированные */
	.projectAboutGrid {grid-template-columns:repeat(2,1fr);}
	.projectIntroText, .projectAcousticText {padding-top:0;}
	.projectBlocks, .projectAcoustic {flex-direction:column;gap:30px;}
	.projectBlocksImage, .projectMaterials {flex:1 1 auto;width:100%;}
	.projectAcousticGallery .projectMaterials {grid-template-columns:repeat(2,1fr);}
	.projectBlocksImage img {aspect-ratio:16/9;}
	.projectCard, .projectBlocks, .projectAcoustic, .projectText {margin-top:50px;}
}

@media (max-width: 768px) {
	.projectPage {padding-bottom:40px;}
	/* мобильные размеры галереи по макету 360 */
	.projectGallery .portfolioTopImageBig, .projectGallery .portfolioTopImageBigItem a {height:223px;}
	.projectGallery .portfolioTopImageSmall.slick-slider {margin:12px 0 0 0;}
	.projectGallery .portfolioTopImageSmallItem {width:64px;height:58px;margin:0 15px 0 0;}
	.projectMeta {gap:10px;margin-top:18px;}
	.projectMetaItem {gap:14px;font-size:18px;}
	.projectIntro {margin-top:20px;gap:20px;}
	/* в макете 360 карточка «О проекте» без рамки и подложки — просто список параметров */
	.projectCard {padding:0;background:none;border:0;border-radius:0;box-shadow:none;}
	.projectAboutGrid {grid-template-columns:1fr;row-gap:26px;margin:20px 0 0 0;}
	.projectParam, .projectParam:nth-child(3n+2), .projectParam:nth-child(3n) {gap:20px;align-items:flex-start;}
	.projectParamIcon {flex:0 0 40px;width:40px;justify-content:flex-end;}
	/* широкие иконки (Rw) на десктопе выходят за колонку — на мобильной вписываем их в 40px */
	.projectParamIcon img, .projectParamIcon svg {max-width:40px;max-height:40px;width:auto;height:auto;}
	.projectParam .projectParamBody {max-width:none;}
	.projectParamValue {margin-top:0;}
	/* в одну колонку ударный шум возвращается на своё место — сразу под «Звукоизоляцией» */
	.projectParamImpact {order:1;}
	.projectParamAfterImpact {order:2;}
	.projectAcousticGallery .projectMaterials {grid-template-columns:1fr;}
	.projectCardFooter {margin-top:35px;}
	.projectParamName {font-size:18px;}
	.projectCardFooter .projectBtn {width:100%;background:#FFF050;}
	.projectBlocksItem + .projectBlocksItem {margin-top:43px;}
	.projectText .h3 {margin-top:30px;}
	.projectCard, .projectBlocks, .projectAcoustic, .projectText {margin-top:40px;}
	/* длинный H1 сайта прячем, вместо него — короткое название объекта (css грузится только с этим шаблоном) */
	.content > .container > h1 {display:none;}
	.projectTitleMobile {display:block;font-family:'Overpass';font-weight:800;font-size:42px;line-height:100%;letter-spacing:-0.02em;color:#1F1F1F;margin:38px 0 0 0;}
}


/* End */
/* /local/templates/acoustic/components/bitrix/catalog.element/portfolio_new/style.css?179067338413103 */