/* ===== SERVICE-HERO: диапазон 82.5rem → 64rem: flex + wrap ===== */
@media (max-width: 82.5rem) and (min-width: 64.001rem){
  .service-hero{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: clamp(1.6rem, 3vw, 3.2rem) !important;

    /* гасим рудименты грида, чтобы ничего не мешало flex */
    grid-template-columns: unset !important;
    grid-auto-columns: unset !important;
    grid-auto-flow: unset !important;
  }

  .service-hero__media,
  .service-hero__content{
    flex: 1 1 36rem !important;   /* две карточки в ряд, перенос при нехватке места */
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: var(--rad, 1.2rem) !important;
    overflow: hidden !important;
  }

  /* видео в обычном потоке — уменьшается вместе с контентом */
  .service-hero__media{ position: relative !important; }
  .service-hero__media > video{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    max-width: none !important;
  }

  /* правая карточка — непрозрачная и центрированная */
  .service-hero__content{
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(1.2rem, 3vw, 2rem) !important;
  }
}

/* уже мобилки (≤64rem) — в одну колонку, можно оставить твои правила */

/* уже мобилки — в одну колонку */
@media (max-width: 64rem){
  .service-hero__media,
  .service-hero__content{
    flex: 1 1 100% !important;
  }
  .service-hero__media > video{
    aspect-ratio: 4 / 3 !important; /* можно оставить 16/9 — на твой вкус */
  }
}

.h3,
.service-list {
  padding-left: 2rem;
  padding-right: 1rem;
}




/* Сетка карточек */
.service-grid{
  display:grid;
  gap:1.6rem;
  grid-template-columns: 1fr;                 /* мобилка */
  align-items: stretch;
}

@media (min-width: 48rem){                    /* ~768px */
  .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem){                    /* ~1024px */
  .service-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 80rem){                    /* ~1280px */
  .service-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Карточка */
.service-card{
  background: var(--surface, #fff);
  border: 0.0625rem solid var(--c-border, rgba(0,0,0,.08));
  border-radius: var(--rad, 1.2rem);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-1, 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .08));
  display:flex;
  flex-direction:column;
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-1, 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .14));
}
.service-card > * + *{ margin-top: 1rem; }

/* DL-список внутри карты */
.dl-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  row-gap: .4rem;
  font-size: 1rem;
}
.dl-list dt{
  font-weight:600;
}
.dl-list dd{
  margin:0;
  color: var(--muted, oklch(0.45 0.02 160));
}

/* «Подрезка» длинного списка + градиент-подсказка */
.dl-list.is-clamped{
  --clamp-h: 16rem;        /* высота, видимая без скролла */
  max-height: var(--clamp-h);
  overflow:hidden;
  position:relative;
}
.dl-list.is-clamped::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3.5rem;
  background: linear-gradient(to bottom, transparent, var(--surface,#fff));
  pointer-events:none;
}
/* при раскрытии — убираем ограничение */
.dl-list.is-open{
  max-height:none;
}
.dl-list.is-open::after{ display:none; }

/* Кнопка раскрытия */
.card-toggle{
  margin-top:auto;                           /* прижим к низу карты */
  align-self:flex-start;
  padding:.6rem 1rem;
  border-radius:.75rem;
  border:0.0625rem solid var(--c-border, rgba(0,0,0,.12));
  background: transparent;
  font-weight:600;
  cursor:pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.card-toggle:hover{ background: oklch(0.97 0.01 160); }
.card-toggle:focus-visible{
  outline: .2rem solid var(--ring, oklch(0.77 0.15 160 / .55));
  outline-offset:.15rem;
}

/* Мелкие правки типографики */
.service-card .h4{ margin:0; line-height:1.25; }