/* Start:/gradostroitelstvo/style.css?17875765732911*/
/* ============================================
   СТИЛИ ДЛЯ СЕКЦИИ .grad-overview
   ============================================ */

/* 1. Кикер (надзаголовок "Новое направление услуг") */
.grad-kicker {
  margin-bottom: 14px;
  color: #76582f;
  font-family: "UniNeueBold", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* 2. Заголовок h1 */
.grad-overview > .page_header {
  height: auto;
  margin: 0 0 22px;
  line-height: 1.12;
  font-size: 48px;
}

/* 3. Лид-абзац (описание) */
.grad-lead {
  max-width: 1000px;
  margin: 0;
  color: #4e4e4e;
  font-size: 21px;
  line-height: 1.55;
}

/* 4. Медиа-блок (обертка изображения) */
.grad-media {
  --grad-media-position: 50% 50%;
  position: relative;
  margin: 34px 0 38px;
  overflow: hidden;
  border-radius: 5px;
  background: #304150;
}

.grad-media::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,39,48,.38), rgba(27,39,48,.04) 52%, rgba(180,132,75,.13));
  content: "";
  pointer-events: none;
}

.grad-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--grad-media-position);
  filter: saturate(.58) contrast(1.04) sepia(.08);
  transition: transform .45s ease, filter .45s ease;
}

.grad-media:hover img {
  transform: scale(1.015);
  filter: saturate(.72) contrast(1.04) sepia(.05);
}

.grad-media > span {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 4px;
  background: #ffc478;
}

/* 5. Модификатор для высоты изображения в секции overview */
.grad-media--overview {
  height: clamp(290px, 34vw, 470px);
}

/* 6. Блок с фактами (цифры) */
.grad-overview__facts {
  display: flex;
  gap: 18px;
  margin: 38px 0;
}

.grad-overview__facts > span {
  flex: 1;
  padding: 22px 24px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  color: #666;
}

.grad-overview__facts b {
  display: block;
  margin-bottom: 6px;
  color: #a27d4b;
  font-size: 30px;
}

/* ============================================
   АДАПТИВНЫЕ СТИЛИ (для корректного отображения на разных экранах)
   ============================================ */

/* Планшеты и меньше (до 992px) */
@media (max-width: 992px) {
  .grad-overview > .page_header {
    font-size: 34px;
  }

  .grad-overview__facts {
    display: grid;
    grid-template-columns: 1fr;
  }

  .grad-media--overview {
    height: 330px;
  }
}

/* Мобильные устройства (до 620px) */
@media (max-width: 620px) {
  .grad-lead {
    font-size: 17px;
  }

  .grad-media {
    margin: 26px 0 30px;
  }

  .grad-media--overview {
    height: 235px;
  }
}
/* End */


/* Start:/local/templates/.default/components/bitrix/breadcrumb/.default/style.css?1674656352202*/
.nav_breadcrumb .bx-breadcrumb {
  display: flex;
  flex-wrap: wrap;
}
.nav_breadcrumb .bx-breadcrumb > div {
  margin-right: 10px;
}
.nav_breadcrumb .bx-breadcrumb .arr-right {
  margin-right: 10px;
}

/* End */


/* Start:/local/templates/urdis/components/bitrix/catalog.section.list/gradostroitelstvo/style.css?17875941064868*/
/* ============================================
   ОСНОВНЫЕ СТИЛИ ДЛЯ БЛОКА grad-service-grid
   ============================================ */

/* Сетка карточек услуг */
.grad-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

/* Карточка услуги */
.grad-service-card {
  min-height: 330px;
  padding: 34px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #171717;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

/* Последняя карточка (на всю ширину) */
.grad-service-card:last-child {
  grid-column: 1 / -1;
  min-height: 270px;
}

/* Ховер карточки */
.grad-service-card:hover {
  background: #304150;
  color: #fff;
  text-decoration: none;
}

/* Номер услуги */
.grad-service-card__number {
  margin-bottom: 28px;
  color: #76582f;
  font-size: 14px;
  letter-spacing: .12em;
}

/* Заголовок h2 внутри карточки */
.grad-service-card h2 {
  max-width: 680px;
  margin: 0 0 18px;
  font-size: 25px;
  line-height: 1.25;
}

/* Параграф (описание) внутри карточки */
.grad-service-card p {
  max-width: 720px;
  margin: 0 0 24px;
  color: #666;
  line-height: 1.5;
}

/* Ховер для параграфа */
.grad-service-card:hover p {
  color: #dfe5e9;
}

/* Мета-информация (стоимость, срок) */
.grad-service-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

/* Спан внутри мета-информации */
.grad-service-card__meta span {
  padding: 8px 12px;
  border-radius: 3px;
  background: #f2f2f2;
  color: #555;
  font-size: 14px;
}

/* Сильная ссылка "Подробнее" */
.grad-service-card strong {
  color: #76582f;
}

/* Ховер для strong */
.grad-service-card:hover strong {
  color: #ffc478;
}

/* Стрелка внутри strong */
.grad-service-card strong span {
  margin-left: 8px;
}

/* 1. Кикер (надзаголовок "Новое направление услуг") */
.grad-kicker {
  margin-bottom: 14px;
  color: #76582f;
  font-family: "UniNeueBold", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-top: 20px;
}

/* 2. Заголовок h1 */
.grad-overview > .page_header {
  height: auto;
  margin: 0 0 22px;
  line-height: 1.12;
  font-size: 48px;
}

/* 3. Лид-абзац (описание) */
.grad-lead {
  max-width: 1000px;
  margin: 0;
  color: #4e4e4e;
  font-size: 21px;
  line-height: 1.55;
}

/* 4. Медиа-блок (обертка изображения) */
.grad-media {
  --grad-media-position: 50% 50%;
  position: relative;
  margin: 34px 0 38px;
  overflow: hidden;
  border-radius: 5px;
  background: #304150;
}

.grad-media::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,39,48,.38), rgba(27,39,48,.04) 52%, rgba(180,132,75,.13));
  content: "";
  pointer-events: none;
}

.grad-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--grad-media-position);
  filter: saturate(.58) contrast(1.04) sepia(.08);
  transition: transform .45s ease, filter .45s ease;
}

.grad-media:hover img {
  transform: scale(1.015);
  filter: saturate(.72) contrast(1.04) sepia(.05);
}

.grad-media > span {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 4px;
  background: #ffc478;
}

/* 5. Модификатор для высоты изображения в секции overview */
.grad-media--overview {
  height: clamp(290px, 34vw, 470px);
}

/* 6. Блок с фактами (цифры) */
.grad-overview__facts {
  display: flex;
  gap: 18px;
  margin: 38px 0;
}

.grad-overview__facts > span {
  flex: 1;
  padding: 22px 24px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  color: #666;
}

.grad-overview__facts b {
  display: block;
  margin-bottom: 6px;
  color: #a27d4b;
  font-size: 30px;
}


/* Планшеты (до 992px) */
@media (max-width: 992px) {
  .grad-service-grid {
    grid-template-columns: 1fr;
  }
  
  .grad-service-card:last-child {
    grid-column: auto;
  }
    .grad-overview > .page_header {
    font-size: 34px;
  }

  .grad-overview__facts {
    display: grid;
    grid-template-columns: 1fr;
  }

  .grad-media--overview {
    height: 330px;
  }
}

/* Мобильные устройства (до 620px) */
@media (max-width: 620px) {
  .grad-service-card {
    min-height: 0;
    padding: 26px 22px;
  }
  .grad-lead {
    font-size: 17px;
  }

  .grad-media {
    margin: 26px 0 30px;
  }

  .grad-media--overview {
    height: 235px;
  }
}





/* End */
/* /gradostroitelstvo/style.css?17875765732911 */
/* /local/templates/.default/components/bitrix/breadcrumb/.default/style.css?1674656352202 */
/* /local/templates/urdis/components/bitrix/catalog.section.list/gradostroitelstvo/style.css?17875941064868 */