/* =====================================================================================================================
   АДАПТИВ — уникальные блоки страниц «Реставрация» (/restavraciya/...), Б-286 … Б-311.
   Компьютерные стили — css/pages/rest-*.css (не трогать). Здесь только планшет (≤1199) и телефон (≤767).
   Шапки секций (svc-memorial-design__head, reviews-head), плашка «Не уверены?» (svc-memorial-design__cta) — общие, не здесь.
   ===================================================================================================================== */

/* Б-286 Покрасить или уже менять ограду? — класс po-choice
   Планшет: 2 карточки рядом — как на компьютере. Телефон: лента m-swipe + точки (классы в разметке). */
@media (max-width: 767px) {
  .po-choice .po-choice__grid { margin-bottom: 8px; }
  .po-choice .po-choice__body { padding: 18px 18px 20px; }
}

/* Б-287 Качество покраски определяется тем, что происходит до краски — класс po-layers */
@media (max-width: 1199px) {
  .po-layers .po-layers__card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
  .po-layers .po-layers__layer { grid-template-columns: 30px minmax(0, 140px) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .po-layers .po-layers__card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .po-layers .po-layers__layer {
    grid-template-columns: 30px minmax(0, 1fr);
    row-gap: 2px;
    padding: 12px 14px;
  }
  .po-layers .po-layers__num { grid-row: span 2; }
  .po-layers .po-layers__name { font-size: 16px; }
  .po-layers .po-layers__text { grid-column: 2; font-size: 15px; line-height: 1.35; }
  .po-layers .po-layers__error-text { font-size: 15px; }
}

/* Б-288 Рассчитайте стоимость покраски — класс po-calc */
@media (max-width: 1199px) {
  .po-calc .po-calc__card { grid-template-columns: minmax(0, 1fr); }
  .po-calc .po-calc__result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 6px;
    align-items: center;
    padding: 24px 28px;
  }
  .po-calc .po-calc__price { font-size: 34px; }
  .po-calc .po-calc__result .po-calc__cta { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
@media (max-width: 767px) {
  /* Плита распадается на две панели: белая форма и зелёный результат под ней. */
  .po-calc .po-calc__card { gap: 12px; padding: 0; border: 0; background: none; box-shadow: none; }
  .po-calc .po-calc__form {
    padding: 20px 16px;
    border-radius: 20px;
    border: 1px solid var(--line-2);
    background: #fff;
  }
  .po-calc .po-calc__sizes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .po-calc .po-calc__field { grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 12px; }
  .po-calc .po-calc__field .po-calc__label { white-space: nowrap; font-size: 15px; }
  .po-calc .po-calc__types { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .po-calc .po-calc__type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
  }
  .po-calc .po-calc__type-note { font-size: 14px; text-align: right; }
  .po-calc .po-calc__extras { display: grid; gap: 0; }
  .po-calc .po-calc__extra {
    min-height: 44px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
    font-size: 15px;
  }
  .po-calc .po-calc__extra:last-child { border-bottom: 0; }
  .po-calc .po-calc__extra.is-on { background: none; }
  .po-calc .po-calc__result { display: flex; align-items: flex-start; padding: 20px 16px; border-radius: 20px; }
  .po-calc .po-calc__price { font-size: 30px; }
  .po-calc .po-calc__result .po-calc__cta { align-self: stretch; margin-top: 6px; }
}

/* Б-289 Что влияет на стоимость — класс po-factors (карточки .po-cards / .po-card) */
@media (max-width: 1199px) {
  .po-factors .po-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-factors .po-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    column-gap: 16px;
    row-gap: 6px;
  }
  .po-factors .po-card__ico { grid-row: span 2; width: 48px; height: 48px; }
  .po-factors .po-card__title { font-size: 19px; }
}
@media (max-width: 767px) {
  .po-factors .po-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .po-factors .po-card { padding: 16px; column-gap: 14px; }
  .po-factors .po-card__ico { width: 44px; height: 44px; }
  .po-factors .po-card__title { font-size: 17px; }
  .po-factors .po-card__text,
  .po-factors .po-note { font-size: 15px; }
}

/* Б-290 Покраска зависит от погоды — класс po-season
   Планшет — как на компьютере (12 месяцев в ряд). Телефон: 2 ряда по 6, легенда столбиком. */
@media (max-width: 767px) {
  .po-season .po-season__card { padding: 18px 16px; }
  .po-season .po-season__scale { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
  .po-season .po-season__name { font-size: 14px; }
  .po-season .po-season__legend { flex-direction: column; gap: 8px; }
  .po-season .po-note { font-size: 15px; }
}

/* Б-291 Сколько занимает работа (+ Гарантия) — класс po-terms
   Планшет — как на компьютере. Телефон: карточки друг под другом, плитки-числа — строки таблицы. */
@media (max-width: 767px) {
  .po-terms .po-terms__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .po-terms .po-terms__card { padding: 20px 16px; }
  .po-terms .po-terms__title { font-size: 26px; }
  .po-terms .po-terms__nums { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .po-terms .po-terms__num {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
  }
  .po-terms .po-terms__num:first-child { border-top: 1px solid var(--line-2); }
  .po-terms .po-terms__lab { font-size: 15px; }
  .po-terms .po-terms__summary { font-size: 15px; }
}

/* Кнопка «Показать все (N)» — .rp-more (Б-293, Б-294, Б-296) и .zt-more (Б-309): в разметке only-tm / only-m;
   после нажатия Alpine прячет её x-show, список получает .is-more. */
@media (max-width: 1199px) {
  .rp-cases .rp-more,
  .rp-problems .rp-more,
  .rp-parts .rp-more,
  .zt-gallery .zt-more {
    align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; margin-top: 16px; padding: 12px 16px;
    border: 1.5px dashed var(--line, #d9dcd4); border-radius: 14px; background: transparent;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--green-700); cursor: pointer;
  }
  .rp-cases .rp-more.only-tm,
  .zt-gallery .zt-more.only-tm { display: flex; }
  .rp-more svg,
  .zt-more svg { width: 18px; height: 18px; }
}
@media (max-width: 767px) {
  .rp-problems .rp-more,
  .rp-parts .rp-more { display: flex; }
}

/* Б-292 Можно отремонтировать или уже нужно менять? — класс rp-verdict
   Планшет — 2 карточки рядом, как на компьютере. Телефон: карточки столбиком, кнопка на всю ширину. */
@media (max-width: 767px) {
  .rp-verdict .rp-options { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rp-verdict .rp-option__body { padding: 18px 16px 20px; }
  .rp-verdict .rp-center-cta { margin-top: 20px; }
}

/* Б-293 Как памятники выглядят до и после ремонта — класс rp-cases
   Планшет: сетка 2 колонки, видны 4 кейса + «Показать все (8)». Телефон: лента m-swipe (класс в разметке), все кейсы. */
@media (max-width: 1199px) {
  .rp-cases .rp-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .rp-cases .rp-cases__grid:not(.is-more) > :nth-child(n+5) { display: none; }
  .rp-cases .rp-case__title { font-size: 18px; }
  .rp-cases .rp-case__done { font-size: 15px; }
  .rp-cases .rp-more { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .rp-cases .rp-cases__grid:not(.is-more) > :nth-child(n+5) { display: flex; }
}

/* Б-294 7 основных проблем и что с ними делать — класс rp-problems
   Планшет: 2 колонки, иконка слева. Телефон: список, видны 5 + «Показать все (7)». */
@media (max-width: 1199px) {
  .rp-problems .rp-problems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rp-problems .rp-problem {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    column-gap: 16px;
    row-gap: 4px;
    padding: 18px 40px 18px 18px;
  }
  .rp-problems .rp-problem__ico { grid-row: span 2; width: 48px; height: 48px; }
  .rp-problems .rp-problem__name { font-size: 16px; }
}
@media (max-width: 767px) {
  .rp-problems .rp-problems__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rp-problems .rp-problems__grid:not(.is-more) > :nth-child(n+6) { display: none; }
  .rp-problems .rp-problem { padding: 16px 36px 16px 16px; column-gap: 14px; }
  .rp-problems .rp-problem__ico { width: 44px; height: 44px; }
  .rp-problems .rp-problem__sol { font-size: 15px; }
}

/* Б-295 Просто поставить стелу ровно недостаточно — класс rp-tilt
   Тело карточки «растворяется» (display: contents), его части раскладываются сеткой плиты:
   планшет — шапка сверху, ниже фото 4:3 (360px) | «Проверяем» 2×3, затем варианты и кнопка; телефон — всё столбиком. */
@media (max-width: 1199px) {
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) {
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas:
      "eb eb" "ti ti" "sub sub" "pic lab" "pic chk" "lab2 lab2" "var var" "cta cta";
    grid-template-rows: auto auto auto auto 1fr auto auto auto;
    column-gap: 28px;
    row-gap: 0;
  }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .rp-tilt__body { display: contents; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .eyebrow { grid-area: eb; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .rp-tilt__title { grid-area: ti; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .rp-tilt__sub { grid-area: sub; margin-bottom: 22px; }
  .rp-tilt .rp-tilt__pic { grid-area: pic; aspect-ratio: 4 / 3; align-self: center; }
  .rp-tilt .rp-tilt__sub + .rp-tilt__label { grid-area: lab; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .rp-tilt__checks { grid-area: chk; align-self: stretch; grid-auto-rows: 1fr; margin: 0; }
  .rp-tilt .rp-tilt__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-tilt .rp-tilt__checks + .rp-tilt__label { grid-area: lab2; margin-top: 24px; }
  .rp-tilt .rp-tilt__variants { grid-area: var; }
  .rp-tilt .rp-tilt__card .svc-memorial-compose__cta-btn { grid-area: cta; justify-self: start; }
}
@media (max-width: 767px) {
  .rp-tilt .rp-tilt__card { padding: 20px; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eb" "ti" "sub" "pic" "lab" "chk" "lab2" "var" "cta";
    grid-template-rows: none;
  }
  .rp-tilt .rp-tilt__title { font-size: 28px; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .rp-tilt__sub { margin-bottom: 16px; font-size: 15px; }
  .rp-tilt .rp-tilt__pic { margin-bottom: 20px; }
  .rp-tilt .rp-tilt__card:not(.rp-tilt__card--no-pic) .rp-tilt__checks { grid-auto-rows: auto; }
  .rp-tilt .rp-tilt__checks li { align-items: flex-start; padding: 10px; font-size: 14px; }
  .rp-tilt .rp-tilt__variants { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rp-tilt .rp-tilt__or { text-align: center; }
  .rp-tilt .rp-tilt__card .svc-memorial-compose__cta-btn { justify-self: stretch; }
}

/* Б-296 Что можно отремонтировать — класс rp-parts
   Планшет: шапка слева | фото 4:3 (440px) справа, ниже 9 карточек 3×3. Раскладка .rp-parts__layout растворяется
   в сетке секции. Телефон: столбиком; элементы — список в одной белой плите, видны 6 + «Показать все (9)». */
@media (max-width: 1199px) {
  .rp-parts:has(.rp-parts__visual) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    column-gap: 28px;
    align-items: center;
  }
  .rp-parts:has(.rp-parts__visual) > .svc-memorial-design__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .rp-parts:has(.rp-parts__visual) .rp-parts__layout { display: contents; }
  .rp-parts .rp-parts__visual { grid-column: 2; grid-row: 1; }
  .rp-parts:has(.rp-parts__visual) .rp-parts__grid { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; }
  .rp-parts:has(.rp-parts__visual) > .rp-more { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .rp-parts:has(.rp-parts__visual) { grid-template-columns: minmax(0, 1fr); }
  .rp-parts .rp-parts__visual { grid-column: 1; grid-row: 2; margin-top: 20px; }
  .rp-parts:has(.rp-parts__visual) .rp-parts__grid { grid-row: 3; margin-top: 16px; }
  .rp-parts .rp-parts__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 4px 16px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: #fff;
  }
  .rp-parts .rp-parts__grid:not(.is-more) > :nth-child(n+7) { display: none; }
  .rp-parts .rp-part {
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
  }
  .rp-parts .rp-part:last-child,
  .rp-parts .rp-parts__grid:not(.is-more) > :nth-child(6) { border-bottom: 0; }
  .rp-parts .rp-part__ico {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; background: #EEF4EC;
  }
  .rp-parts .rp-part__name { font-size: 16px; }
  .rp-parts .rp-part__text { font-size: 15px; }
}

/* Б-297 Ремонт отдельного памятника или всего комплекса — класс rp-scope
   Планшет — как на компьютере. Телефон: карточки столбиком, кнопка на всю ширину, ссылка по центру. */
@media (max-width: 767px) {
  .rp-scope .rp-options { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rp-scope .rp-option__body { padding: 18px 16px 20px; }
  .rp-scope .rp-center-cta { flex-direction: column; gap: 14px; margin-top: 20px; }
  .rp-scope .rp-center-cta .svc-memorial-compose__cta-btn { justify-content: space-between; text-align: left; }
}

/* Б-298 Поверхность памятника тоже можно восстановить — класс rp-links (карточки — общий svc-oform-related)
   Планшет: 2 колонки × 3 ряда. Телефон: список в 1 колонку. */
@media (max-width: 1199px) {
  .rp-links .rp-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rp-links .rp-links__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rp-links .svc-oform-related__card { min-height: 70px; padding: 14px 16px; }
  .rp-links .svc-oform-related__ico { width: 44px; height: 44px; }
  .rp-links .svc-oform-related__text { font-size: 15px; }
}

/* Б-299 Ремонтировать старое покрытие или заменить полностью? — класс zp-choice
   Планшет — 2 карточки и «или» между ними, как на компьютере. Телефон: столбиком, «или» по центру, кнопка на всю ширину. */
@media (max-width: 767px) {
  .zp-choice .zp-choice__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .zp-choice .zp-choice__or { justify-self: center; }
  .zp-choice .zp-choice__body { padding: 18px 16px 20px; }
  .zp-choice .zp-choice__title { font-size: 20px; }
  .zp-choice .zp-more { margin-top: 20px; }
  .zp-choice .zp-more .svc-memorial-compose__cta-btn { display: flex; }
}

/* Б-300 Сравните покрытия — класс zp-compare
   Планшет — таблица. Телефон: строки — карточки в ленте (tbody.m-swipe в разметке), подписи из data-label. */
@media (max-width: 1199px) {
  .zp-compare .zp-compare__table th,
  .zp-compare .zp-compare__table td { padding: 12px 12px; }
  .zp-compare .zp-compare__table thead th { white-space: nowrap; font-size: 12px; }
}
@media (max-width: 767px) {
  .zp-compare .zp-compare__table,
  .zp-compare .zp-compare__table tr { display: block; }
  .zp-compare .zp-compare__table { border: 0; border-radius: 0; background: none; overflow: visible; }
  .zp-compare .zp-compare__table thead { display: none; }
  .zp-compare .zp-compare__table tbody > tr {
    padding: 0 16px 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card, #fff);
  }
  .zp-compare .zp-compare__table tbody th {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px; padding: 16px 0;
    font-size: 17px; white-space: normal;
  }
  .zp-compare .zp-compare__ico {
    place-items: center; flex: none;
    width: 40px; height: 40px; margin: 0; border-radius: 10px; background: var(--green-50);
  }
  .zp-compare .zp-compare__table td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    border: 0;
  }
  .zp-compare .zp-compare__table td::before {
    content: attr(data-label);
    padding-top: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--green-700);
  }
  .zp-compare .zp-compare__note { margin-top: 12px; }
}

/* Б-301 Даже хорошая плитка просядет, если плохо подготовлено основание — класс zp-base
   Планшет — 2 колонки, как на компьютере. Телефон: столбиком (слои → фото → шаги). */
@media (max-width: 1199px) {
  .zp-base .zp-base__card { gap: 24px; }
}
@media (max-width: 767px) {
  .zp-base .zp-base__card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
  .zp-base .zp-base__layer span { font-size: 14px; }
  .zp-base .zp-base__steps li { align-items: flex-start; }
  .zp-base .zp-thesis { align-items: flex-start; padding: 16px; font-size: 16px; }
}

/* Б-302 Посчитайте площадь и примерную стоимость — класс zp-calc
   Планшет: форма | панель 350px. Телефон: форма — белая плита, результат — отдельная панель под ней. */
@media (max-width: 1199px) {
  .zp-calc .zp-calc__card { grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; }
  .zp-calc .zp-calc__chip { min-height: 44px; }
  .zp-calc .zp-calc__cta { white-space: normal; text-align: left; }
}
@media (max-width: 767px) {
  .zp-calc .zp-calc__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .zp-calc .zp-calc__form {
    padding: 20px 16px;
    border-radius: 20px;
    border: 1px solid var(--line-2);
    background: #fff;
  }
  .zp-calc .zp-calc__dims { flex-wrap: nowrap; gap: 8px; }
  .zp-calc .zp-calc__field { flex: 1 1 0; min-width: 0; }
  .zp-calc .zp-calc__field input { width: 100%; min-height: 52px; }
  .zp-calc .zp-calc__area { flex: none; margin-left: 4px; }
  .zp-calc .zp-calc__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-calc .zp-calc__group:nth-of-type(4) .zp-calc__chips { grid-template-columns: minmax(0, 1fr); }
  .zp-calc .zp-calc__chip { justify-content: flex-start; min-height: 48px; padding: 8px 14px; }
  .zp-calc .zp-calc__result { padding: 20px 16px; border-radius: 20px; }
  .zp-calc .zp-calc__total b { font-size: 24px; }
  .zp-calc .zp-calc__notes li { font-size: 14px; }
  .zp-calc .zp-calc__disclaimer { font-size: 13px; }
}

/* Б-303 Что влияет на цену — класс zp-factors
   Планшет: 2 колонки, иконка 48px слева, номер в углу. Телефон: список; «Может добавиться» — столбиком. */
@media (max-width: 1199px) {
  .zp-factors .zp-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .zp-factors .zp-factor {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    column-gap: 16px;
    padding-right: 44px;
  }
  .zp-factors .zp-factor__ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .zp-factors .zp-factor__title { font-size: 19px; }
  .zp-factors .zp-factors__extra { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 767px) {
  .zp-factors .zp-factors__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .zp-factors .zp-factor { padding: 16px 40px 16px 16px; column-gap: 14px; }
  .zp-factors .zp-factor__text { font-size: 15px; }
  .zp-factors .zp-factors__extra { padding: 16px; }
  .zp-factors .zp-factors__extra ul { flex-direction: column; gap: 8px; }
  .zp-factors .zp-factors__extra li { align-items: flex-start; }
}

/* Б-304 Не всегда нужно разбирать весь участок — класс zp-keep
   Планшет: сетка 2×2, фото 3:2. Телефон: лента m-swipe (в разметке), фото 4:3, карточки одной высоты. */
@media (max-width: 1199px) {
  .zp-keep .zp-keep__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-keep .zp-keep__pic { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  .zp-keep .zp-keep__grid { margin-bottom: 16px; }
  .zp-keep .zp-keep__pic { aspect-ratio: 4 / 3; }
  .zp-keep .zp-keep__text { font-size: 15px; }
}

/* Б-305 Исправить старый или сделать новый? — класс zr-cols (плашка-призыв — общий svc-memorial-design__cta)
   Планшет: 2 карточки, фото 3:2, итоги прижаты к низу. Телефон: карточки столбиком. */
@media (max-width: 1199px) {
  .zr-cols .zr-col__pic { aspect-ratio: 3 / 2; }
  .zr-cols .zr-col__body { padding: 20px 22px 22px; }
  .zr-cols .zr-col__list { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .zr-cols .zr-cols__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .zr-cols .zr-col__body { padding: 18px 16px 20px; }
  .zr-cols .zr-col__title { font-size: 19px; }
  .zr-cols .zr-col__lead { font-size: 15px; }
  .zr-cols .zr-cols__cta { margin-top: 16px; }
}

/* Б-306 Почему портрет получился непохожим — класс zr-reasons (сетка — общий svc-memorial-pricing__factors-grid)
   Планшет: плита, причины 2×3, иконка 44px. Телефон: список с разделителями; вывод — текст 17px, ссылка строкой ниже. */
@media (max-width: 1199px) {
  .zr-reasons .svc-memorial-pricing__factors-grid.svc-oform-factors--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .zr-reasons .svc-mem-factor { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .zr-reasons .svc-mem-factor__ico { width: 44px; height: 44px; }
  .zr-reasons .svc-mem-factor__name { font-size: 16px; }
  .zr-reasons .svc-mem-factor__desc { font-size: 15px; }
  .zr-reasons .zr-quote__text { font-size: 17px; }
  .zr-reasons .zr-quote__ico { background: #fff; }
}
@media (max-width: 767px) {
  .zr-reasons .svc-memorial-pricing__factors-grid.svc-oform-factors--6 { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 16px; }
  .zr-reasons .svc-mem-factor { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
  .zr-reasons .zr-quote { gap: 12px; padding: 16px; }
  .zr-reasons .zr-quote .svc-oform-tech__link { display: inline; font-size: 15px; }
  .zr-reasons .zr-quote .svc-oform-tech__link svg { vertical-align: -2px; }
}

/* Б-307 Старый портрет не закрашивают новым — класс zr-remove
   Планшет: этапы 2×2 без стрелок. Телефон: лента m-swipe (в разметке) + точки. */
@media (max-width: 1199px) {
  .zr-remove .zr-remove__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .zr-remove .zr-remove__item + .zr-remove__item::before { content: none; }
}
@media (max-width: 767px) {
  .zr-remove .zr-remove__name { font-size: 17px; }
  .zr-remove .zr-remove__text { font-size: 15px; }
  .zr-remove .svc-oform-chain__note { margin-top: 12px; }
}

/* Б-308 Не обязательно иметь одну идеальную фотографию — класс zr-nophoto
   Планшет: фото 380px слева тянется на высоту текста (≈3:4), ссылка под кнопкой. Телефон: столбиком, фото 4:3. */
@media (max-width: 1199px) {
  .zr-nophoto .zr-nophoto__card:not(.zr-nophoto__card--no-pic) { grid-template-columns: 380px minmax(0, 1fr); align-items: stretch; }
  .zr-nophoto .zr-nophoto__card { gap: 28px; padding: 32px; }
  .zr-nophoto .zr-nophoto__pic { aspect-ratio: auto; min-height: 100%; }
  .zr-nophoto .zr-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .zr-nophoto .zr-nophoto__card:not(.zr-nophoto__card--no-pic) { grid-template-columns: minmax(0, 1fr); }
  .zr-nophoto .zr-nophoto__card { gap: 20px; padding: 20px; }
  .zr-nophoto .zr-nophoto__pic { aspect-ratio: 4 / 3; min-height: 0; }
  .zr-nophoto .zr-nophoto__title { font-size: 28px; }
  .zr-nophoto .zr-nophoto__list { flex-direction: column; align-items: flex-start; }
  .zr-nophoto .zr-nophoto__list li { font-size: 15px; }
  .zr-nophoto .zr-nophoto__lead,
  .zr-nophoto .zr-nophoto__text { font-size: 15px; }
  .zr-nophoto .zr-actions { align-items: stretch; }
}

/* Б-309 Как выглядит участок после работ — класс zt-gallery (фильтры — общий svc-oform-filters)
   Планшет: 2 колонки, 1-й кадр на всю ширину (2:1), 2–5 по 4:3; 6–8 — по «Показать все (8)» (.zt-more — вверху файла;
   при фильтре видно всё — .is-more). Телефон: лента m-swipe (в разметке) + точки, фото 4:3, кнопка на всю ширину. */
@media (max-width: 1199px) {
  .zt-gallery .zt-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .zt-gallery .zt-shot:first-child { grid-column: 1 / -1; grid-row: auto; }
  .zt-gallery .zt-shot:first-child .zt-shot__pic { flex: none; aspect-ratio: 2 / 1; }
  .zt-gallery .zt-shot:nth-child(5) { grid-column: auto; }
  .zt-gallery .zt-shot:nth-child(5) .zt-shot__pic { aspect-ratio: 4 / 3; }
  .zt-gallery .zt-gallery__grid:not(.is-more) > :nth-child(n+6) { display: none; }
}
@media (max-width: 767px) {
  .zt-gallery .zt-gallery__grid:not(.is-more) > :nth-child(n+6) { display: flex; }
  .zt-gallery .zt-shot:first-child .zt-shot__pic { aspect-ratio: 4 / 3; }
  .zt-gallery .zt-shot__caption { font-size: 15px; }
  .zt-gallery .zt-center-cta { margin-top: 18px; }
  .zt-gallery .zt-center-cta .svc-memorial-compose__cta-btn { display: flex; }
}

/* Б-310 Один участок — разные варианты — класс zt-variants
   Планшет: вкладки в ряд (44px), карточка — фото | текст 360px. Телефон: вкладки — лента до краёв, карточка столбиком. */
@media (max-width: 1199px) {
  .zt-variants .zt-variants__tabs { flex-wrap: nowrap; }
  .zt-variants .zt-variants__tab { min-height: 44px; white-space: nowrap; }
  .zt-variants .zt-variants__card { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
}
@media (max-width: 767px) {
  .zt-variants .zt-variants__tabs {
    overflow-x: auto; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; scroll-padding-inline: 16px;
  }
  .zt-variants .zt-variants__tabs::-webkit-scrollbar { display: none; }
  .zt-variants .zt-variants__tab { flex: 0 0 auto; }
  /* Фото — во всю ширину карточки сверху, текст — под ним с полями 20px. */
  .zt-variants .zt-variants__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
  .zt-variants .zt-variants__stage { border-radius: 0; }
  .zt-variants .zt-variants__info { padding: 20px; }
  .zt-variants .zt-variants__title { font-size: 22px; }
  .zt-variants .zt-variants__text { font-size: 15px; }
  .zt-variants .zt-variants__cta { display: flex; }
}

/* Б-311 Приехали — и участок в порядке за несколько минут — класс zt-care
   Планшет: фото 400px на высоту списка | 4 пункта списком с линиями. Телефон: фото 4:3, ниже список. */
@media (max-width: 1199px) {
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) { grid-template-columns: 400px minmax(0, 1fr); gap: 28px; }
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) .zt-care__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) .zt-care__card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-content: start;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    background: none;
  }
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) .zt-care__card:last-child { border-bottom: 0; }
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) .zt-care__ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .zt-care .zt-care__title { font-size: 19px; }
  .zt-care .zt-care__text { font-size: 15px; }
}
@media (max-width: 767px) {
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .zt-care .zt-care__pic { min-height: 0; aspect-ratio: 4 / 3; }
  .zt-care .zt-care__layout:not(.zt-care__layout--no-pic) .zt-care__card { column-gap: 14px; padding: 14px 0; }
  .zt-care .zt-care__title { font-size: 18px; }
}

/* Отзывы на страницах «Реставрации» (section.reviews в разметке страниц): на телефоне «Все отзывы» в шапке скрыта
   (hide-m), её копия .rv-all-m (only-m) — под лентой на всю ширину. */
@media (max-width: 767px) {
  /* Копия вне .reviews-head — оформление кнопки шапки (.reviews-head .all) повторено здесь. */
  .reviews .rv-all-m {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 52px; margin-top: 16px; padding: 12px 16px;
    border-radius: 12px; background: #fff; border: 1.5px solid var(--green-600);
    color: var(--green-700); font-weight: 700; font-size: 15px; text-decoration: none;
  }
  .reviews .rv-all-m [data-lucide],
  .reviews .rv-all-m svg { width: 18px; height: 18px; }
}