/* цвет акцента только для этой страницы */
.chertezhi-page { --accent: #409095; }

/* верхний блок: слева заголовок, справа табы */
.chertezhi-page .page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:24px;
}
.chertezhi-page .type__title{ margin:0; }

/* табы-пилюли */
.chertezhi-page .type-tabs{ display:flex; gap:8px; flex-wrap:wrap;justify-content: flex-end; }
.chertezhi-page .type-tabs__item{
  display:inline-block; padding:10px 18px; border:1px solid #e5e7eb; border-radius:999px;
  text-decoration:none; line-height:1; white-space:nowrap;
  transition:border-color .2s, background-color .2s, color .2s;
}
.chertezhi-page .type-tabs__item:hover{ border-color:var(--accent); }
.chertezhi-page .type-tabs__item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.chertezhi-page .type-tabs__item.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* основной блок: слева меню, справа контент */
.chertezhi-page .page-body{
  display:grid; grid-template-columns:30% 1fr; gap:24px; align-items:start; margin-top:24px;
}

/* левое меню */
.chertezhi-page .side-menu{ display:flex; flex-direction:column; gap:12px; }
.chertezhi-page .side-menu__item{
  display:block; padding:16px 18px; border-radius:5px; background:#f7f8fa; border:1px solid #e5e7eb;
  text-decoration:none; font-weight:600;
  transition:border-color .2s, background-color .2s, color .2s;
}
.chertezhi-page .side-menu__item:hover{ border-color:var(--accent); }
.chertezhi-page .side-menu__item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.chertezhi-page .side-menu__item.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* текстовый блок справа */
.chertezhi-page .content-block{ scroll-margin-top:80px;
font-family: 'Commissioner';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 25px;
/* по факту нормальный межстрочник */

color: #000000;

}
.chertezhi-page .content-block + .content-block{ margin-top:32px; }

/* блок с dwg: слева картинки, справа список файлов */
.chertezhi-page .dwg-section{
  display:grid; grid-template-columns:35% 1fr; gap:20px; margin-top:32px;
}
.chertezhi-page .dwg-gallery{
  display:flex; flex-direction:column; gap:12px;
}
.chertezhi-page .dwg-gallery__img{
  width:100%; height:auto; border-radius:12px; display:block;
  border:1px solid #e5e7eb; background:#fff;
}

/* список файлов */
.chertezhi-page .dwg-list{ display:flex; flex-direction:column; gap:12px; }
.chertezhi-page .dwg-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border:1px solid #e5e7eb; border-radius:12px; background:#f7f8fa;
}
.chertezhi-page .dwg-name{ font-weight:600; }
.chertezhi-page .dwg-download{
  display:contents;
}
.chertezhi-page .dwg-download:hover,
.chertezhi-page .dwg-download:focus-visible{
  background:var(--accent); color:#409095;
}

/* что показываем на мобиле, что нет */
.chertezhi-page .show-on-mob{ display:none; }

@media (max-width: 991px){
  .chertezhi-page .page-body{ grid-template-columns:1fr; }
  .chertezhi-page .side-menu{ flex-direction:row; overflow-x:auto; gap:8px; display: none;}
  .chertezhi-page .side-menu__item{ white-space:nowrap; }

  .chertezhi-page .hide-on-mob{ display:none !important; }
  .chertezhi-page .show-on-mob{ display:block !important; }

  .chertezhi-page .dwg-section{ grid-template-columns:1fr; }
}

/* чтобы ничего не вылезало криво на мобилках */
.chertezhi-page, .chertezhi-page * { box-sizing: border-box; }

.chertezhi-page .dwg-section,
.chertezhi-page .dwg-list,
.chertezhi-page .dwg-item,
.chertezhi-page .dwg-gallery { min-width: 0; }

.chertezhi-page .dwg-name{
  min-width: 0;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: normal;            /* разрешаем перенос строк */
  word-break: break-word;         /* если длинный артикул - тоже перенесется */
  overflow-wrap: anywhere;        /* совсем на всякий пожарный */
}

.chertezhi-page .dwg-download{ flex: 0 0 auto;color: #3F51B5; font-weight: 500; }

/* на планшетах название тянется, кнопка стоит справа, верстка не разваливается */
@media (max-width: 991px){
  .chertezhi-page .dwg-item{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
  }
  .chertezhi-page .dwg-section{ grid-template-columns: 1fr; } /* это уже есть выше, но пусть будет */
}

/* на совсем узких экранах делаем чуть компактнее */
@media (max-width: 575px){
  .chertezhi-page .dwg-item{ padding: 12px; }
  .chertezhi-page .dwg-download{ padding: 8px 12px; }
}

/* на всякий случай все картинки делаем резиновыми 
.chertezhi-page img{ max-width: 100%; height: auto; display: block; }

/* на телефонах сначала название файла, потом кнопка снизу */
@media (max-width: 767px){
  .chertezhi-page .dwg-item{
    display:flex;            /* тут перебиваем grid, который был выше */
    flex-direction:column;   /* складываем все в колонку */
    align-items:flex-start;
    gap:10px;
  }
  .chertezhi-page .dwg-name{
    width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .chertezhi-page .dwg-download{
    /* кнопка просто идет под названием */
    flex:0 0 auto;
  }
}

/* если понадобится, можно на мобиле растянуть кнопку во всю ширину */
/*
@media (max-width: 767px){
  .chertezhi-page .dwg-download{
    width:100%;
    text-align:center;
  }
}
*/

.chertezhi-page .cta-row{
  margin-top:16px;
  display:flex;
  justify-content:flex-end; /* кнопку прижимаем вправо */
}

.chertezhi-page .inservice-hero__btn{
  background: var(--accent);      /* берем акцентный цвет страницы */
  border: 1px solid var(--accent);
  color:#fff;
  padding:11px 25px 12px 25px;
  border-radius:5px;            /* скругление под общий стиль */
  line-height:1;
  cursor:pointer;
  min-width: 170px;
  text-decoration:none;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .05s;
}

.chertezhi-page .inservice-hero__btn:hover,
.chertezhi-page .inservice-hero__btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(64,144,149,.15);
  outline: none;
}

.chertezhi-page .inservice-hero__btn:active{
  transform: translateY(1px);
}

/* блок с сертификатами под меню и текстом */
.chertezhi-page .certs-section{ margin-top:32px; }

.chertezhi-page .certs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}

.chertezhi-page .cert-card{
  display:flex; flex-direction:column; gap:10px;
  padding:50px; border:1px solid #e5e7eb; border-radius:12px; background:#f7f8fa;
  min-width:0;
}
.chertezhi-page .cert-card img{
  width:100%; height:auto; display:block; border-radius:8px; border:1px solid #e5e7eb;
}
.chertezhi-page .cert-card figcaption{
  font-size:14px; line-height:1.45; color:#111;
  overflow-wrap:anywhere; word-break:break-word;text-align: center;
}

/* адаптив для сертификатов */
@media (max-width: 991px){
  .chertezhi-page .certs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575px){
  .chertezhi-page .certs-grid{ grid-template-columns: 1fr; }
}


/* блок recent projects - делаем фон во всю ширину, без белых полос по бокам */
.rp-sec.rp-fw{
  position: relative;            /* нужен для псевдоэлемента */
  z-index: 0;                    /* фон уводим под контент */
}

.rp-sec.rp-fw::before{
  content: "";
  position: absolute;
  z-index: -1;                   /* фон сзади */
  top: 0; bottom: 0;

  /* растягиваем фон на всю ширину окна */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: #409195;           /* фоновый цвет */
}

/* внутренние отступы секции */
.rp-sec.rp-fw .container{
  padding-top: 56px;
  padding-bottom: 56px;
}

/* если белые поля дают карточки - убираем у них фон и бордер */
.rp-card { background: transparent; border: none; }
.rp-card__imgwrap{ border-color: rgba(255,255,255,.25); background: #fff; }

/* в шапке блока текст и кнопка белые/контрастные */
.rp-title{ color:#fff; }
.rp-viewall{
  background:#fff; color:#000; border:1px solid #fff;
}

.rp-viewall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 22px;
  border-radius:999px;
  background:#fff;
  color:#000;
  border:1px solid #ffffff;
  text-decoration:none;
  font-weight:600;
  transition:transform .08s ease, box-shadow .25s ease, color .25s ease, background-color .25s ease;
}
.rp-viewall:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.rp-viewall:active{ transform:translateY(1px); }

/* список проектов */
.rp-list{ display:flex; flex-direction:column; gap:32px; }

/* верх карточки: номер + название */
.rp-card{ }
.rp-card__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.rp-num{
  font-size:40px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
  line-height:1;
}
.rp-name{
  font-size:22px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  line-height:1.2;
}
.rp-name:hover{ text-decoration:underline; }

/* сетка из 4 фоток */
.rp-card__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.rp-card__imgwrap{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.25);
  aspect-ratio: 16/10;           /* одинаковая высота у всех */
}
.rp-card__imgwrap img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* подписи поверх фото */
.prev-photos-item__bg{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  opacity:0; transition:opacity .25s ease;
}
.prev-photos-item__description{
  position:absolute; left:16px; right:16px; bottom:16px;
  display:flex; flex-direction:column; pointer-events:none;
}
.prev-photos-item__title{
  color:#fff; font-size:18px; font-weight:700;
  transform:translateY(14px); opacity:0; transition:all .25s ease;
}
.prev-photos-item__text{
  color:#fff; font-size:14px; margin-top:10px;
  transform:translateY(14px); opacity:0; transition:all .3s ease;
}

/* ховер на фотках */
.rp-card__imgwrap:hover .prev-photos-item__bg{ opacity:1; }
.rp-card__imgwrap:hover .prev-photos-item__title{ opacity:1; transform:none; }
.rp-card__imgwrap:hover .prev-photos-item__text{ opacity:1; transform:none; }

/* на тач-экранах ховера нет, поэтому показываем текст сразу */
@media (hover:none){
  .prev-photos-item__bg{ opacity:1; }
  .prev-photos-item__title, .prev-photos-item__text{ opacity:1; transform:none; }
}

/* адаптив */
@media (max-width: 1280px){
  .rp-title{ font-size:34px; }
}
@media (max-width: 991px){
  .rp-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .rp-viewall{ height:48px; }
  .rp-card__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .rp-card__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rp-title{ font-size:28px; }
  .rp-num{ font-size:32px; }
  .rp-name{ font-size:18px; }
}
@media (max-width: 480px){
  .rp-card__grid{ grid-template-columns:1fr; }
  .rp-viewall{ width:100%; }
}

/* защита от горизонтального скролла */
.rp-sec, .rp-sec *{ box-sizing:border-box; }

.certs-title{
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 18px;
  color: #131e2a;
}
@media (max-width: 767px){
  .certs-title{ font-size: 18px; margin-bottom: 14px; }
}