/* =========================
   SERVICE PAGE
========================= */

.servicePage{
  padding-top: 18px;
  padding-bottom: 44px;
}

/* breadcrumbs */
.serviceHero__breadcrumbs{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 6px 0 14px;
  font-size: 14px;
  color: rgba(17,24,39,0.75);
}

.serviceHero__crumb{
  color: inherit;
  text-decoration: none;
}

.serviceHero__crumb:hover{
  text-decoration: underline;
}

.serviceHero__sep{ opacity: .6; }

/* title */
.serviceHero__title{
  margin: 0 0 18px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* GRID -> делаем вертикальную раскладку: картинка сверху, контент снизу */
.serviceHero__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* media */
.serviceHero__media{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,0.08);
  background: #fff;
  box-shadow: 0 10px 30px rgba(17,24,39,0.08);
}

/* 🔥 фиксируем высоту и одинаковый вид для всех картинок */
.serviceHero__media img{
  width: 100%;
  height: 360px;          /* одинаковая высота */
  object-fit: cover;      /* обрезает красиво, не растягивает */
  object-position: center;
  display: block;
}

/* content */
.serviceHero__content{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,0.08);
  background: #fff;
  box-shadow: 0 10px 30px rgba(17,24,39,0.08);
  padding: 22px;
}

/* text */
.serviceHero__text{
  font-size: 16px;
  line-height: 1.75;
  color: rgba(17,24,39,0.92);
}

.serviceHero__text p{
  margin: 0 0 12px;
}

.serviceHero__text p:last-child{
  margin-bottom: 0;
}

/* списки выглядят аккуратнее */
.serviceHero__text ul{
  margin: 12px 0 18px;
  padding-left: 18px;
}

.serviceHero__text li{
  margin: 0 0 8px;
}

/* actions */
.serviceHero__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* кнопки: чтобы выглядели ровно и красиво */
.serviceHero__actions .btn{
  border-radius: 999px;
  padding: 12px 16px;
}

/* ghost */
.btn--ghost{
  background: transparent;
  color: rgba(17,24,39,0.92);
  border: 1px solid rgba(17,24,39,0.18);
}

.btn--ghost:hover{
  border-color: rgba(17,24,39,0.28);
}

/* responsive */
@media (max-width: 900px){
  .servicePage{
    padding-bottom: 36px;
  }

  .serviceHero__media img{
    height: 260px;
  }

  .serviceHero__content{
    padding: 18px;
  }
}

@media (max-width: 560px){
  .serviceHero__media img{
    height: 210px;
  }

  .serviceHero__actions{
    gap: 10px;
  }

  .serviceHero__actions .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}