/* === SERVICE: "Что входит" + "Почему это работает в 2025" ================== */
:root{
  /* фолбэки, если в проекте нет этих переменных */
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.28 0.03 160);
  --muted: oklch(0.55 0.02 160);
  --surface: oklch(0.99 0.01 160 / .75);
  --border: oklch(0.80 0.03 160 / .20);
  --ring: oklch(0.77 0.15 160 / .55);
  --rad: 1.2rem;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
}

/* секция */
.service-body{
  padding-block: clamp(2rem, 4vw, 4rem);
  background:
    radial-gradient(120% 100% at 10% 0%, color-mix(in oklab, var(--brand) 10%, transparent) 0%, transparent 75%) ,
    radial-gradient(120% 100% at 100% 20%, color-mix(in oklab, var(--brand-2) 8%, transparent) 0%, transparent 70%);
  border-radius: calc(var(--rad) * 1.2);
  padding-left: 2rem;
}

/* ---------- Список "Что входит" ---------- */
.service-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.service-list > li{
  position: relative;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--rad);
  padding: 1.6rem 2rem 1.6rem 3.6rem; /* место под маркер */
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  min-height: 8.8rem;      /* визуальное выравнивание высоты */
  display: flex;
  align-items: start;
}

.service-list > li::before{
  /* маркер-листик через mask, без доп. HTML */
  content: "";
  position: absolute;
  inset-inline-start: 1.4rem;
  top: 1.6rem;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--brand);
  border-radius: .4rem;
  box-shadow:
    0 0 0 .25rem color-mix(in oklab, var(--brand) 18%, transparent),
    0 0 .6rem .05rem color-mix(in oklab, var(--brand) 35%, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.5 4.5c-6.5 0-10.5 4-12 9.5 5.5-1.5 9.5-5.5 9.5-12zM7 14l3 3 7-7' fill='currentColor'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.5 4.5c-6.5 0-10.5 4-12 9.5 5.5-1.5 9.5-5.5 9.5-12zM7 14l3 3 7-7' fill='currentColor'/></svg>") center/contain no-repeat;
}

.service-list > li:hover{
  transform: translateY(-.15rem);
  background: color-mix(in oklab, var(--surface) 85%, white);
  border-color: color-mix(in oklab, var(--border) 40%, var(--brand) 60%);
  box-shadow: 0 .5rem 1.6rem oklch(0.20 0.02 160 / .16);
}

.service-list > li:focus-within{
  outline: .2rem solid var(--ring);
  outline-offset: .2rem;
}

/* уменьшение движения для a11y */
@media (prefers-reduced-motion: reduce){
  .service-list > li{ transition: none; }
}

/* брейкпоинты */
@media (max-width: 82.5rem){         /* ≈1320px — твой референс */
  .service-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  .service-list > li{
    flex: 1 1 22rem;
  }
}
@media (max-width: 48rem){
  .service-list > li{ min-height: auto; }
}

/* ---------- Блок "Почему это работает в 2025" ---------- */
.service-spec{
  margin-block: clamp(2rem, 5vw, 3rem) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.service-card{
  background: color-mix(in oklab, var(--surface) 92%, white);
  border: 0.0625rem solid var(--border);
  border-radius: var(--rad);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  isolation: isolate;
}

.service-card::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: .25rem;
  border-radius: var(--rad) var(--rad) 0 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.service-card:hover{
  transform: translateY(-.15rem);
  box-shadow: 0 .6rem 1.6rem oklch(0.20 0.02 160 / .16);
  border-color: color-mix(in oklab, var(--border) 40%, var(--brand) 60%);
}

.service-card h3{
  margin: 0 0 .6rem 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.service-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 70rem){
  .service-spec{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 42rem){
  .service-spec{ grid-template-columns: 1fr; }
}

/* ===== Ripple для карточек списка и блока spec ===== */
.service-list > li,
.service-card{
  position: relative;
  overflow: hidden;       /* обрезаем ripple по радиусу карточки */
  isolation: isolate;
  contain: paint;
  --ripple-opacity: .22;
  --ripple-size: 24rem;   /* базовый диаметр волны */
  --rx: 50%;
  --ry: 50%;
}

/* слой-волна (минимальный, не мешает кликам) */
@media (hover:hover){
  .service-list > li::after,
  .service-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(closest-side,
        color-mix(in oklab, var(--brand) 40%, transparent) var(--ripple-opacity),
        transparent 60%) center/ var(--ripple-size) var(--ripple-size) no-repeat;
    opacity:0;
    transform: translateZ(0);           /* сглаживаем анимацию */
    transition: opacity .18s ease;
    /* позиционируем центр волны по переменным */
    background-position: var(--rx) var(--ry);
  }

  /* плавное появление свечения при наведения */
  .service-list > li.is-hovered::after,
  .service-card.is-hovered::after{ opacity: 1; }

  /* короткий “всплеск” при входе курсора */
  .service-list > li.play-ripple::after,
  .service-card.play-ripple::after{
    animation: ripple-pulse .55s ease-out;
  }

  @keyframes ripple-pulse{
    0%   { opacity: .0; background-size: 0 0; }
    25%  { opacity: var(--ripple-opacity); background-size: 12rem 12rem; }
    100% { opacity: 0; background-size: var(--ripple-size) var(--ripple-size); }
  }
}

/* уменьшаем/отключаем движение при system preference */
@media (prefers-reduced-motion: reduce){
  .service-list > li::after,
  .service-card::after{ transition:none; animation:none !important; }
}

/* ===== Переключаемые маркеры (leaf/check/drop) ===== */
.service-list{ --bullet-color: var(--brand); }

/* базовый вид маркера */
.service-list > li::before{
  background: var(--bullet-color);
}

/* Листик */
.service-body.icon-leaf .service-list > li::before{
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M19.5 4.5c-6.5 0-10.5 4-12 9.5 5.5-1.5 9.5-5.5 9.5-12z' fill='currentColor'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M19.5 4.5c-6.5 0-10.5 4-12 9.5 5.5-1.5 9.5-5.5 9.5-12z' fill='currentColor'/></svg>") center/contain no-repeat;
}

/* Галочка */
.service-body.icon-check .service-list > li::before{
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M7 13.5l3 3 7-7' stroke='currentColor' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M7 13.5l3 3 7-7' stroke='currentColor' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Капля */
.service-body.icon-drop .service-list > li::before{
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M12 2c-3 4-6 7.5-6 11a6 6 0 0012 0c0-3.5-3-7-6-11z' fill='currentColor'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M12 2c-3 4-6 7.5-6 11a6 6 0 0012 0c0-3.5-3-7-6-11z' fill='currentColor'/></svg>") center/contain no-repeat;
}




/* ===== ≤82.5rem: flex + wrap ===== */
/* ===== 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;
}

/* ========== SECTION: Типовые решения ===================================== */
:root{
  /* фолбэки переменных */
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.28 0.03 160);
  --muted: oklch(0.55 0.02 160);
  --surface: oklch(0.99 0.01 160 / .75);
  --border: oklch(0.80 0.03 160 / .20);
  --ring: oklch(0.77 0.15 160 / .55);
  --rad: 1.2rem;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
}

/* Заголовок секции можно не трогать, ниже — сетка */
.solutions{
  padding-block: clamp(2rem, 4vw, 4rem);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--brand-2) 8%, transparent) 0%, transparent 70%);
  border-radius: calc(var(--rad) * 1.2);
}

.solutions-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.solution{
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--rad);
  padding: 1.6rem 2rem;
  box-shadow: var(--shadow-1);
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .6rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  contain: paint;
  isolation: isolate;
}

/* верхняя цветная полоса-акцент */
.solution::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: .25rem;
  border-radius: var(--rad) var(--rad) 0 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* иконка в правом нижнем углу (через mask) */
.solution{
  --sol-icon: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c-3.1 4.2-6 7.7-6 11a6 6 0 0 0 12 0c0-3.3-2.9-6.8-6-11z" fill="currentColor"/></svg>');
  --icon-size: 2rem;
}
.solution::after{
  content:"";
  position:absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: var(--icon-size);
  height: var(--icon-size);
  background: color-mix(in oklab, var(--brand) 92%, #fff);
  opacity: .9;
  -webkit-mask: var(--sol-icon) center/contain no-repeat;
          mask: var(--sol-icon) center/contain no-repeat;
}

/* Иконки для каждой карточки (nth-child) */
.solutions-grid .solution:nth-child(1){ /* Пермеабельная брусчатка: сетка плитки */
  --sol-icon: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path d="M3 4h8v6H3zM13 4h8v6h-8zM3 12h8v8H3zM13 12h8v8h-8z" fill="currentColor"/></svg>');
}
.solutions-grid .solution:nth-child(2){ /* Линейный водоотвод: решётка */
  --sol-icon: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path d="M3 4h2v16H3zM7 4h2v16H7zM11 4h2v16h-2zM15 4h2v16h-2zM19 4h2v16h-2z" fill="currentColor"/></svg>');
}
.solutions-grid .solution:nth-child(3){ /* Французский дренаж: перфорированная труба */
  --sol-icon: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4 10h16a2 2 0 1 1 0 4H4a2 2 0 1 1 0-4zm4 2.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm4 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm4 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="currentColor"/></svg>');
}
.solutions-grid .solution:nth-child(4){ /* Гравийные дорожки: зернистость */
  --sol-icon: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <circle cx="6" cy="16" r="2.2" fill="currentColor"/><circle cx="12" cy="13" r="1.8" fill="currentColor"/><circle cx="17.5" cy="17" r="2.4" fill="currentColor"/></svg>');
}

/* Тексты */
.solution h3{
  margin: .2rem 0 .4rem 0;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .01em;
}
.solution p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Hover/Focus */
.solution:hover{
  transform: translateY(-.15rem);
  border-color: color-mix(in oklab, var(--border) 40%, var(--brand) 60%);
  box-shadow: 0 .6rem 1.6rem oklch(0.20 0.02 160 / .16);
}
.solution:focus-within{
  outline: .2rem solid var(--ring);
  outline-offset: .2rem;
}

/* Меньше движения — a11y */
@media (prefers-reduced-motion: reduce){
  .solution{ transition: none; }
}