/* =====================================================================================================================
   АДАПТИВ — контентные разделы: «Блог», «Как правильно?», «Бесплатно», «Идеи по фото» (2026-10-20).
   Планшет — @media (max-width: 1199px), телефон — @media (max-width: 767px). Компьютерные стили не трогаем.
   ===================================================================================================================== */

/* Б-068 Рекомендуем статьи — класс blog-section (+ раскладка страницы блога: колонка .blog-sidebar уходит под список;
   оформление самих плиток боковой колонки — Б-039/040/041, у них свои исполнители) */
@media (max-width: 1199px) {
  /* Поля контейнеров блога (шапка Б-038, ленты, список): по бокам 28/16px, сверху и снизу 0; у текста шапки сверху 24px */
  .blog-page .blog-page__container { padding: 0 28px; }
  .blog-page .blog-page__hero.blog-page__container { padding-top: 24px; }
  /* Боковая колонка — под списком, плиты на всю ширину (их вид — Б-039/040/041) */
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
  .blog-layout > .blog-sidebar { position: static; gap: 20px; }
  /* Зелёная плашка с цифрами внизу страницы блога: цифры — строкой под текстом */
  .blog-page .blog-footer-banner { flex-wrap: wrap; padding: 28px 32px; }
  .blog-page .blog-footer-banner__divider { display: none; }
  .blog-page .blog-footer-banner__stats { flex: 1 1 100%; }

  .blog-section .blog-section__head h2 { font-size: 36px; line-height: 1.15; }
  .blog-section .blog-articles { gap: 18px; }
  .blog-section .blog-article-card__tag { right: 10px; max-width: max-content; line-height: 1.3; }
  .blog-section .blog-article-card__title {
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    -webkit-line-clamp: 3;
  }
  .blog-section .blog-article-card__meta { font-size: 13px; }
  /* Вариант 2 «Популярные видео»: сетка 2 колонки */
  .blog-section .blog-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .blog-section .blog-video-card__media { aspect-ratio: 16 / 9; }
  .blog-section .blog-video-card__title { font-size: 15px; }
}
@media (max-width: 767px) {
  .blog-page .blog-page__container { padding: 0 16px; }
  .blog-layout { gap: 20px; }
  .blog-layout > .blog-sidebar { gap: 16px; }
  .blog-page .blog-footer-banner { gap: 20px; padding: 22px 16px; }
  .blog-page .blog-footer-banner__main { gap: 14px; }
  .blog-page .blog-footer-banner__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .blog-page .blog-footer-banner__stat strong { font-size: 26px; }

  /* Шапка «разбирается»: заголовок — над лентой, «Все статьи →» — кнопкой под лентой и точками */
  .blog-section:has(> .blog-section__head > .blog-section__link) { display: flex; flex-direction: column; min-width: 0; }
  .blog-section:has(> .blog-section__head > .blog-section__link) > .blog-section__head { display: contents; }
  .blog-section .blog-section__head h2 { font-size: 28px; margin-bottom: 14px; }
  .blog-section > .blog-section__head > .blog-section__link {
    order: 3;
    justify-content: center;
    min-height: 52px;
    margin-top: 14px;
    border: 1.5px solid var(--green-700);
    border-radius: 14px;
    font-size: 16px;
  }
  .blog-section > .m-swipe { order: 1; }
  .blog-section > .swipe-dots { order: 2; }
  .blog-section .blog-article-card:hover { transform: none; }
}

/* Б-069 Все материалы 22 — класс blog-main (список «Все материалы» со счётчиком и сортировкой) */
@media (max-width: 1199px) {
  .blog-main .blog-sort__item { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .blog-main .blog-card {
    grid-template-columns: 220px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    gap: 0 20px;
  }
  .blog-main .blog-card__media { grid-column: 1; grid-row: 1 / 4; aspect-ratio: 3 / 2; align-self: start; }
  .blog-main .blog-card__body { display: contents; }
  .blog-main .blog-card__title {
    grid-column: 2 / 4;
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
  }
  .blog-main .blog-card__text { grid-column: 2 / 4; margin-bottom: 12px; }
  .blog-main .blog-card__meta { grid-column: 2; align-self: end; padding-bottom: 12px; }
  .blog-main .blog-card__action { grid-column: 3; grid-row: 3; min-height: 44px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 767px) {
  .blog-main #blog-list-section .blog-section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .blog-main .blog-card {
    position: relative;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0 14px;
    padding: 14px;
  }
  .blog-main .blog-card__media { grid-row: 1; aspect-ratio: 1 / 1; position: static; }
  .blog-main .blog-card__media picture { position: static; }
  .blog-main .blog-card__media img.cover { position: static; }
  /* Плашка «Статья / Видео» — подписью над заголовком справа от миниатюры */
  .blog-main .blog-card__badge {
    left: calc(14px + 112px + 14px);
    top: 14px;
    padding: 0;
    background: none;
    color: var(--ink-3);
    font-size: 12px;
  }
  .blog-main .blog-card__badge.is-video { background: none; color: var(--green-700); }
  .blog-main .blog-card__title { grid-column: 2; grid-row: 1; padding-top: 22px; }
  .blog-main .blog-card__text { grid-column: 1 / -1; margin: 12px 0 10px; font-size: 15px; -webkit-line-clamp: 3; }
  .blog-main .blog-card__meta { grid-column: 1 / -1; }
  .blog-main .blog-card__action { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .blog-main .blog-load-more { min-height: 52px; }
}

/* Б-070 Статья блога — текст статьи — класс article */
@media (max-width: 1199px) {
  .article-page { padding: 8px 28px 16px; }
  .article-page .article-page__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .article-page .article { padding: 44px; }
  .article-page .article .blog-figure--right,
  .article-page .article .blog-figure--left { width: 260px; }
  /* Содержание — ещё и в начале статьи, раскрывающейся плашкой (рекомендация макета Б-071) */
  .article-page .article .article__toc-mobile {
    display: block;
    margin-bottom: 24px;
    border: 1px solid rgba(20,24,26,.1);
    border-radius: 14px;
    background: #fbfcfb;
  }
  .article-page .article .article__toc-mobile summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--green-700);
    border-bottom: 2px solid var(--green-700);
    transform: rotate(45deg) translateY(-2px);
  }
  .article-page .article .article__toc-mobile[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .article-page .article .article__toc-mobile summary { justify-content: flex-start; }
  .article-page .article .comment__card--reply { margin-left: 40px; }
}
@media (max-width: 767px) {
  .article-page { padding: 0 0 16px; }
  .article-page .article-page__grid { gap: 16px; }
  /* Без внешней карточки: белый фон на всю ширину, поля 16px */
  .article-page .article {
    padding: 20px 16px 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .article-page .article .article__title { font-size: 30px; line-height: 1.15; }
  .article-page .article .article__meta { gap: 8px 16px; font-size: 13px; }
  .article-page .article .article__cover { margin: 18px 0; border-radius: 14px; }
  .article-page .article .article__lead { font-size: 17px; }
  .article-page .article .article__short { padding: 16px; }
  .article-page .article .article__body { font-size: 16px; line-height: 1.65; }
  .article-page .article .article__body h2 { font-size: 24px; line-height: 1.25; }
  /* Фото чек-листа — на всю ширину, квадрат, подпись под ним */
  .article-page .article .blog-figure--right,
  .article-page .article .blog-figure--left { float: none; width: 100%; min-width: 0; margin: 4px 0 18px; }
  .article-page .article .blog-figure img { aspect-ratio: 1 / 1; object-fit: cover; }
  /* Таблица → карточки-строки; подписи колонок — data-label из шапки (скрипт в Post.cshtml) */
  .article-page .article .blog-post__table { overflow: visible; }
  .article-page .article .blog-post__table thead { display: none; }
  .article-page .article .blog-post__table :is(table, tbody, tr, td) { display: block; width: 100%; }
  .article-page .article .blog-post__table tr {
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(20,24,26,.1);
    border-radius: 14px;
    background: #fff;
  }
  .article-page .article .blog-post__table td { padding: 0; border: 0; }
  .article-page .article .blog-post__table td:first-child { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
  .article-page .article .blog-post__table td + td { margin-top: 8px; }
  .article-page .article .blog-post__table td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--green-700);
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .article-page .article .blog-faq__q { padding: 14px 16px; font-size: 15px; }
  .article-page .article .blog-faq__a { padding: 0 16px 14px; font-size: 15px; }
  .article-page .article .blog-post__ask { padding: 18px 16px; }
  .article-page .article .blog-post__ask a,
  .article-page .article .article__cta-btn,
  .article-page .article .comments__submit { display: flex; justify-content: center; width: 100%; min-height: 52px; }
  .article-page .article .article__cta { padding: 20px 16px; }
  .article-page .article .article__cta-text { max-width: none; }
  .article-page .article .article__cta-actions { width: 100%; }
  .article-page .article .article__useful { padding: 14px 16px; }
  .article-page .article .article__useful-q { flex: 1 0 100%; }
  .article-page .article .article__useful-btn,
  .article-page .article .article__share-btn { min-height: 44px; }
  .article-page .article .article__useful-share { margin-left: 0; }
  .article-page .article .article__author { padding: 16px; gap: 12px; }
  .article-page .article .article__author-photo { width: 56px; height: 56px; }
  .article-page .article .comment__card--reply { margin-left: 24px; }
  .article-page .article .comments__wrap:not(.is-all):has(.comments__more) .comments__list > li:nth-child(n+3) { display: none; }
  .article-page .article .comments__more { display: flex; justify-content: center; width: 100%; min-height: 48px; align-items: center; }
  .article-page .article .article__nav { flex-direction: column; align-items: flex-start; }
}

/* Б-071 Боковая колонка статьи — класс article-side */
@media (max-width: 1199px) {
  .article-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    align-self: auto;
  }
  .article-side > .article-side__flow,
  .article-side > .article-side__sticky { display: contents; }
  .article-side .side-card--service { grid-column: 1; grid-row: 1; }
  .article-side .side-card--toc { grid-column: 2; grid-row: 1; }
  .article-side .article-side__flow > .side-card:not(.side-card--service):not(.side-card--toc) { grid-column: 1; grid-row: 2; }
  .article-side .article-side__sticky > .side-card:not(.side-card--ask) { grid-column: 2; grid-row: 2 / span 2; }
  .article-side .side-card--ask { grid-column: 1; grid-row: 3; }
  .article-side .side-toc { max-height: none; overflow: visible; }
  .article-side .side-toc a { font-size: 15px; padding: 9px 8px; }
  .article-side .side-list a { grid-template-columns: 72px minmax(0, 1fr); font-size: 15px; }
  .article-side .side-list picture { width: 72px; height: 54px; }
  .article-side .side-card__btn { min-height: 52px; }
}
@media (max-width: 767px) {
  .article-side { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 16px; }
  .article-side .side-card--service,
  .article-side .side-card--toc,
  .article-side .article-side__flow > .side-card:not(.side-card--service):not(.side-card--toc),
  .article-side .article-side__sticky > .side-card:not(.side-card--ask),
  .article-side .side-card--ask { grid-column: 1; grid-row: auto; }
  /* Содержание — уже в начале статьи (плашка .article__toc-mobile) */
  .article-side .side-card--toc { display: none; }
}

/* Раскладка страниц «Как правильно?» (без отдельного макета; kak-pravilno.css подключается после этого файла — отсюда «body»): поля 28/16px; в гайде колонка оглавления —
   над текстом (не липнет; kak-pravilno.js на ≤1199px сворачивает оглавление) */
@media (max-width: 1199px) {
  body .kp-page { padding: 8px 28px; }
  body .kp-page .kp-guide { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
  body .kp-page .kp-guide__aside { position: static; max-height: none; overflow: visible; }
  body .kp-page .kp-article { max-width: none; }
  body .kp-page .kp-gtop { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 28px; }
  body .kp-page .kp-gtop--nohero { grid-template-columns: minmax(0, 1fr); }
  body .kp-page .kp-ghead__title { font-size: 40px; }
  body .kp-page .kp-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body .kp-page { padding: 8px 16px; }
  body .kp-page .kp-article { font-size: 16px; }
  body .kp-page .kp-gtop,
  body .kp-page .kp-gtop--nohero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hero" "body" "short"; }
  body .kp-page .kp-ghead__title { font-size: 30px; }
  body .kp-page .kp-gtop > .kp-short ul { grid-template-columns: minmax(0, 1fr); }
  /* Блоки внутри текста гайда: «Хорошо / плохо», сценарии, переходы маршрута — в одну колонку */
  body .kp-page .kp-gb,
  body .kp-page .kp-scen__list,
  body .kp-page .kp-gpath__nav { grid-template-columns: minmax(0, 1fr); }
  body .kp-page .kp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .kp-page .kp-gpath { padding: 16px; }
  body .kp-page .kp-gpath__progress { margin-left: 0; }
  body .kp-page .kp-filters { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}

/* Б-072 Гайд — блок помощи — класс kp-help */
@media (max-width: 1199px) {
  body .kp-help {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 18px 20px;
    padding: 28px;
  }
  body .kp-help .kp-help__text p { font-size: 16px; }
  body .kp-help .kp-help__actions {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body .kp-help .kp-help__actions .kp-btn { min-height: 52px; }
}
@media (max-width: 767px) {
  body .kp-help {
    align-items: center;
    gap: 16px 14px;
    padding: 20px;
    border-radius: 18px;
  }
  body .kp-help .kp-help__text { display: contents; }
  body .kp-help .kp-help__title { grid-column: 2; margin: 0; font-size: 22px; }
  body .kp-help .kp-help__text p { grid-column: 1 / -1; font-size: 15px; }
  body .kp-help .kp-help__actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Раскладка страниц «Бесплатно» (раздел, материал, полный гид, услуга): поля 28/16px, колонка материала — на всю ширину */
@media (max-width: 1199px) {
  .free-page .free-page__container { padding: 0 28px; }
  .free-material-page { padding: 8px 28px 40px; }
  .free-service-page { padding: 8px 28px 56px; }
  .free-material-page .free-material-page__container { max-width: 760px; } /* текст гида (Б-044) — колонкой до 760px */
  .free-service-page .free-service-page__container { max-width: none; }
}
@media (max-width: 767px) {
  .free-page .free-page__container { padding: 0 16px; }
  .free-material-page { padding: 8px 16px 32px; }
  .free-service-page { padding: 8px 16px 44px; }
}

/* Б-073 Заберите лучшие материалы… — бесплатно — класс free-hero-screen */
@media (max-width: 1199px) {
  .free-hero-screen { margin-bottom: 48px; }
  .free-hero-screen .free-hero-screen__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "copy photo" "copy card" "stats stats";
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    padding: 20px 28px 0;
  }
  .free-hero-screen .free-hero-screen__photo {
    grid-area: photo;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    aspect-ratio: 5 / 4;
    margin-top: 16px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(160deg, #fff 0%, var(--green-50, #eef5ef) 100%);
  }
  .free-hero-screen .free-hero-screen__photo img { object-fit: cover; object-position: 55% 50%; }
  .free-hero-screen .hero-lead-card--besplatno {
    grid-area: card;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    margin: -64px 16px 0;
    align-self: start;
  }
  .free-hero-screen .free-hero-screen__grid { grid-area: copy; max-width: none; padding: 0; }
  .free-hero-screen .free-hero-screen__copy h1 { font-size: 36px; }
  .free-hero-screen .free-hero-screen__lead { font-size: 16px; }
  .free-hero-screen .free-hero-check { font-size: 16px; }
  .free-hero-screen .free-hero-social p { font-size: 15px; }
  .free-hero-screen .free-hero-social__avatars span { width: 40px; height: 40px; }
  .free-hero-screen .free-hero-stats {
    grid-area: stats;
    gap: 16px;
    padding: 24px;
  }
  .free-hero-screen .free-hero-stat { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
  .free-hero-screen .free-hero-stat__val { font-size: 28px; }
}
@media (max-width: 767px) {
  .free-hero-screen { margin-bottom: 40px; }
  .free-hero-screen .free-hero-screen__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "photo" "card" "stats";
    grid-template-rows: none;
    padding: 12px 16px 0;
  }
  .free-hero-screen .free-hero-screen__photo { aspect-ratio: 4 / 3; margin-top: 24px; }
  .free-hero-screen .hero-lead-card--besplatno { margin: -48px 0 0; width: 100%; max-width: none; box-sizing: border-box; }
  .free-hero-screen .free-hero-screen__copy h1 { font-size: 30px; }
  .free-hero-screen .free-hero-download { display: flex; width: 100%; }
  .free-hero-screen .free-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding: 18px 16px; }
  .free-hero-screen .free-hero-stat { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .free-hero-screen .free-hero-stat:last-child { grid-column: 1 / -1; }
  .free-hero-screen .free-hero-stat__ico { width: 32px; height: 32px; }
  .free-hero-screen .free-hero-stat__val { font-size: 26px; }
  .free-hero-screen .free-hero-stat__lab { font-size: 14px; }
}

/* Б-074 Бесплатные материалы — класс free-section (основной вариант + вариант 2 «Инструменты и калькуляторы»
   + вариант 3 «Профессиональная проверка» — .free-expert) */
@media (max-width: 1199px) {
  .free-section { margin-bottom: 56px; }
  .free-section .free-section__head h2,
  .free-section .free-tools-panel__head h2 { font-size: 36px; }
  .free-section .free-section__sub { font-size: 17px; }
  /* Категории — отдельные белые «таблетки» без общей плиты: иконка слева, подпись справа, перенос строк */
  .free-section .free-cats { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
  .free-section .free-cats__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    text-align: left;
  }
  .free-section .free-cats__item.is-active { background: var(--green-50); border-color: var(--green-100, #e1eddb); }
  .free-section .free-cats__ico { width: 36px; height: 36px; }
  .free-section .free-cats__ico [data-lucide] { width: 18px; height: 18px; }
  .free-section .free-cats__label { font-size: 15px; }
  /* Карточки — 3×2, «Полезное решение» прижато к низу */
  .free-section .free-materials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .free-section .free-material__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
  .free-section .free-material__title { font-size: 17px; }
  .free-section .free-material__text { font-size: 14px; }
  .free-section .free-material__pro { margin-top: auto; }
  .free-section .free-material__pro-label { font-size: 11px; }
  .free-section .free-material__pro-row { flex-direction: column; gap: 6px; }
  .free-section .free-material__pro-title { font-size: 14px; -webkit-line-clamp: unset; display: block; }
  .free-section .free-material__pro-price { font-size: 14px; }
  .free-section .free-section__center .free-section__ghost-btn { min-height: 52px; padding: 0 24px; border-color: var(--green-700); background: transparent; font-size: 15px; }
  /* Вариант 2: шапка с фото фоном, текст на светлой подложке; калькуляторы 2×2 */
  .free-section .free-tools-panel__head { max-width: 62%; }
  .free-section .free-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Вариант 3: эксперты */
  .free-section.free-expert .free-expert__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .free-section .free-expert__intro h2 { font-size: 36px; }
  .free-section .free-expert__panel { padding: 24px; }
  .free-section .free-expert__topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .free-section .free-expert__show-btn { width: 100%; min-height: 52px; }
  .free-section .free-expert__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free-section .free-expert__more-btn { width: 100%; justify-content: center; min-height: 52px; }
  .free-section .free-expert__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .free-section { margin-bottom: 44px; }
  .free-section .free-section__head h2,
  .free-section .free-tools-panel__head h2,
  .free-section .free-expert__intro h2 { font-size: 28px; }
  .free-section .free-section__sub { font-size: 16px; }
  /* Категории — лента плиток (иконка над подписью) до краёв экрана; не .m-swipe: плитки узкие, а не «1 карточка + край» */
  .free-section .free-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 20px;
    padding: 2px 16px 4px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
  }
  .free-section .free-cats::-webkit-scrollbar { display: none; }
  .free-section .free-cats__item {
    flex: 0 0 auto;
    min-width: 96px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    text-align: center;
    scroll-snap-align: start;
  }
  .free-section .free-cats__ico { width: 42px; height: 42px; }
  .free-section .free-cats__ico [data-lucide] { width: 20px; height: 20px; }
  .free-section .free-cats__label { font-size: 14px; }
  .free-section .free-material:hover { transform: none; }
  .free-section .free-material__title { font-size: 18px; }
  .free-section .free-material__text { font-size: 15px; }
  .free-section .free-material__pro-label { font-size: 13px; }
  .free-section .free-material__pro-row { flex-direction: row; }
  .free-section .free-material__pro-title { font-size: 15px; }
  .free-section .free-section__center .free-section__ghost-btn { width: 100%; justify-content: center; font-size: 16px; }
  .free-section--tools .free-section__center .free-section__ghost-btn { white-space: normal; height: auto; padding: 12px 18px; line-height: 1.3; }
  .free-section--tools .free-section__ghost-btn > span { min-width: 0; text-wrap: balance; }
  .free-section--tools .free-section__ghost-btn > svg { flex-shrink: 0; }
  /* Вариант 2: фото-полоса 16:9 сверху, заголовок под ней; калькуляторы списком */
  .free-section .free-tools-panel { padding: 0 14px 16px; }
  .free-section .free-tools-panel__hero { display: block; min-height: 0; margin: 0 -14px 16px; }
  .free-section .free-tools-panel__bg { position: relative; aspect-ratio: 16 / 9 !important; } /* !important: aspect-ratio 21/7 задан inline-стилем (responsive-img) */
  .free-section .free-tools-panel__hero::after { display: none; }
  .free-section .free-tools-panel__head { max-width: none; padding: 16px 14px 0; }
  .free-section .free-tools { grid-template-columns: minmax(0, 1fr); }
  .free-section .free-tool:hover { transform: none; }
  /* Вариант 3 */
  .free-section .free-expert__panel { padding: 18px 16px; }
  .free-section .free-expert__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .free-section .free-expert-topic { min-height: 112px; padding: 16px 10px 12px; }
  .free-section .free-expert__action { flex-direction: column; align-items: stretch; }
  .free-section .free-expert__list-head { flex-direction: column; align-items: stretch; }
  .free-section .free-expert__sort-dd { flex: 1; }
  .free-section .free-expert__sort-btn { width: 100%; min-height: 44px; }
  .free-section .free-expert__bar { grid-template-columns: minmax(0, 1fr); }
}

/* Б-075 Пакет материалов «Покупатель PRO» — класс free-pro */
@media (max-width: 1199px) {
  .free-pro { margin-bottom: 56px; }
  .free-pro .free-pro__body { min-height: 0; padding: 0; }
  /* Фото — наверх плиты, 2:1 на всю ширину */
  .free-pro .free-pro__media {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 2 / 1;
  }
  .free-pro .free-pro__media picture > img.cover { object-position: center; }
  .free-pro .free-pro__seal { width: 128px; height: 128px; }
  .free-pro .free-pro__copy { width: auto; max-width: none; padding: 28px 36px 8px; }
  .free-pro .free-pro__copy h2 { font-size: 40px; }
  .free-pro .free-pro__lead { font-size: 16px; }
  .free-pro .free-pro__features li { font-size: 15px; }
  .free-pro .free-pro__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 24px 24px; }
  .free-pro .free-pro__bar-text strong { font-size: 15px; }
  .free-pro .free-pro__bar-text span { font-size: 13px; }
}
@media (max-width: 767px) {
  .free-pro { margin-bottom: 44px; }
  .free-pro .free-pro__screen { border-radius: 20px; }
  .free-pro .free-pro__media { aspect-ratio: 4 / 3; }
  .free-pro .free-pro__seal { width: 104px; height: 104px; right: 14px; bottom: 14px; }
  .free-pro .free-pro__seal-stars { font-size: 13px; }
  .free-pro .free-pro__seal strong { font-size: 17px; }
  .free-pro .free-pro__copy { padding: 20px 16px 4px; }
  .free-pro .free-pro__copy h2 { font-size: 28px; }
  .free-pro .free-pro__badge { align-items: flex-start; border-radius: 16px; }
  .free-pro .free-pro__price-row > .free-pro__benefit { order: 2; }
  .free-pro .free-pro__features { grid-template-columns: minmax(0, 1fr); }
  .free-pro .free-pro__features li { font-size: 16px; }
  .free-pro .free-pro__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .free-pro .free-pro__pay-note { font-size: 14px; justify-content: center; }
  .free-pro .free-pro__bar { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 16px 12px 12px; padding: 4px 16px; }
  .free-pro .free-pro__bar-item { padding: 14px 0; }
  .free-pro .free-pro__bar-item + .free-pro__bar-item { border-top: 1px solid var(--line-2, #eceee9); }
}

/* Б-076 Самые дорогие ошибки при заказе памятника — класс free-mistakes */
@media (max-width: 1199px) {
  .free-mistakes { margin-bottom: 56px; }
  .free-mistakes .free-mistakes__head { grid-template-columns: minmax(0, 1fr) 320px; }
  .free-mistakes .free-mistakes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .free-mistakes .free-mistakes__summary { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, .55fr)); gap: 16px; }
  .free-mistakes .free-mistakes__cta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 24px;
    align-items: center;
  }
  .free-mistakes .free-mistakes__cta-copy { grid-row: 1 / 3; margin: 0; }
  .free-mistakes .free-mistakes__cta-copy p { font-size: 15px; }
  .free-mistakes .free-mistakes__btn { grid-column: 2; }
  .free-mistakes .free-mistakes__note { grid-column: 2; }
  .free-mistakes .free-mistakes__vs strong,
  .free-mistakes .free-mistakes__compare strong { font-size: 36px; }
}
@media (max-width: 767px) {
  .free-mistakes { margin-bottom: 44px; }
  .free-mistakes .free-mistakes__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .free-mistakes .free-mistakes__title { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .free-mistakes .free-mistakes__alert { width: 44px; height: 44px; }
  .free-mistakes .free-mistakes__title h2 { font-size: 27px; }
  .free-mistakes .free-mistakes__title p { grid-column: 1 / -1; margin-top: 4px; }
  .free-mistakes .free-mistake-card { padding: 18px 16px 16px; }
  .free-mistakes .free-mistake-card__top h3 { font-size: 20px; }
  .free-mistakes .free-mistakes__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .free-mistakes .free-mistakes__list { grid-column: 1 / -1; padding: 18px 16px; }
  .free-mistakes .free-mistakes__list h3 { font-size: 22px; }
  .free-mistakes .free-mistakes__list li { padding: 10px 0; font-size: 15px; }
  .free-mistakes .free-mistakes__list li + li { border-top: 1px solid var(--line-2, #eceee9); }
  .free-mistakes .free-mistakes__vs,
  .free-mistakes .free-mistakes__compare { padding: 18px 10px; }
  .free-mistakes .free-mistakes__vs strong,
  .free-mistakes .free-mistakes__compare strong { font-size: 28px; }
  .free-mistakes .free-mistakes__vs-badge { width: 40px; height: 40px; left: -26px; font-size: 15px; }
  .free-mistakes .free-mistakes__cta { display: block; padding: 18px 16px; }
  .free-mistakes .free-mistakes__cta-copy { margin-bottom: 16px; }
  .free-mistakes .free-mistakes__btn { text-align: center; }
  .free-mistakes .free-mistakes__note { font-size: 13px; }
}

/* Б-077 Истории, сколько люди сэкономили — класс free-stories */
@media (max-width: 1199px) {
  .free-stories { margin-bottom: 56px; }
  .free-stories .free-stories__head { grid-template-columns: minmax(0, 1fr) 300px; }
  .free-stories h2 { font-size: 36px; line-height: 1.1; }
  /* Карточка: иконка слева, название и подпись столбиком справа */
  .free-stories .free-story-card__top h3 { min-height: 0; font-size: 20px; margin: 0; }
  .free-stories .free-story-card__top p { margin-top: 2px; font-size: 14px; }
  .free-stories .free-story-card__box > span,
  .free-stories .free-story-card__box small { font-size: 13px; }
  .free-stories .free-story-card__box strong { font-size: 17px; }
  .free-stories .free-story-card__benefit strong { font-size: 18px; }
  .free-stories .free-story-card__benefit span { font-size: 13px; }
  .free-stories .free-story-card__quote p { font-size: 14px; }
  .free-stories .free-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Итоги — одна белая плита (шапка + черта + три цифры в ряд) из отдельных элементов сетки без промежутков; призыв — своей плитой ниже */
  .free-stories .free-stories__summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .free-stories .free-stories__summary-main { grid-column: 1 / -1; padding: 20px 24px 16px; border: 0; border-bottom: 1px solid var(--line-2, #eceee9); border-radius: 20px 20px 0 0; background: #fff; box-shadow: none; }
  .free-stories .free-stories__summary-main strong { font-size: 17px; }
  .free-stories .free-stories__summary-main div > span { font-size: 14px; }
  .free-stories .free-stories__stat { padding: 16px 24px 20px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  .free-stories .free-stories__summary-main + .free-stories__stat { border-bottom-left-radius: 20px; }
  .free-stories .free-stories__stat:has(+ .free-stories__cta) { border-bottom-right-radius: 20px; }
  .free-stories .free-stories__stat div > span { font-size: 14px; }
  .free-stories .free-stories__stat strong { font-size: 22px; }
  .free-stories .free-stories__cta p { font-size: 15px; }
  .free-stories .free-stories__cta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
  }
  .free-stories .free-stories__btn { flex: 0 0 320px; min-height: 52px; }
}
@media (max-width: 767px) {
  .free-stories { margin-bottom: 44px; }
  .free-stories .free-stories__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .free-stories h2 { font-size: 28px; }
  .free-stories .free-story-card { padding: 16px; }
  .free-stories .free-stories__summary { grid-template-columns: minmax(0, 1fr); }
  .free-stories .free-stories__summary-main { padding: 18px 16px 14px; }
  .free-stories .free-stories__stat { padding: 10px 16px; }
  .free-stories .free-stories__summary-main + .free-stories__stat { border-bottom-left-radius: 0; }
  .free-stories .free-stories__stat:has(+ .free-stories__cta) { padding-bottom: 18px; border-radius: 0 0 20px 20px; }
  .free-stories .free-stories__cta p { font-size: 16px; }
  .free-stories .free-stories__cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px; }
  .free-stories .free-stories__btn { flex: none; text-align: center; }
}

/* Б-078 Ещё в рубрике «Памятники» — класс free-material-related */
@media (max-width: 1199px) {
  .free-material-related h2 { font-size: 32px; }
  .free-material-related .free-material-related__item { min-height: 80px; padding: 16px 20px; }
  .free-material-related .free-material-related__title { font-size: 16px; }
  .free-material-related .free-material-related__desc { font-size: 15px; }
}
@media (max-width: 767px) {
  .free-material-related h2 { font-size: 26px; line-height: 1.2; }
  .free-material-related .free-material-related__item { padding: 14px 16px; }
  .free-material-related .free-material-related__item:hover { transform: none; }
}

/* Раскладка страниц «Идеи по фото»: поля 28/16px. Галерея раздела (/foto/kategoriya|podborka/…, .fgal) и коллекция
   (/foto/kollekciya/…, .fcoll-page) — без отдельных макетов, в духе Б-079…Б-081: боковая колонка уходит под основное
   содержимое, всё в одну колонку; на телефоне — поиск и сортировка друг под другом, быстрые темы лентой, кладка в 2 колонки */
@media (max-width: 1199px) {
  .foto-page { padding: 4px 28px 0; gap: 36px; grid-template-columns: minmax(0, 1fr); }
  .fgal { grid-template-columns: minmax(0, 1fr); }
  .fgal .fside { order: 2; position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .fgal .fside__tip { grid-column: 1 / -1; }
  .fcoll-page { grid-template-columns: minmax(0, 1fr); }
  .fcoll-page .fcoll-side { position: static; padding: 24px; }
}
@media (max-width: 767px) {
  .foto-page { padding: 4px 16px 0; gap: 32px; }
  .fpage-head { grid-template-columns: minmax(0, 1fr); }
  .fseg { min-width: 0; }
  .fgal { gap: 24px; }
  .fgal .fside { grid-template-columns: minmax(0, 1fr); }
  .fgal .fgal__bar { flex-direction: column; }
  .fgal .fsort { flex: none; }
  .fgal .fpills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .fgal .fpills::-webkit-scrollbar { display: none; }
  .fgal .fpill { flex: none; white-space: nowrap; }
  .fgal .fgrid.fmason { column-count: 2; column-gap: 10px; }
  .fgal .fgrid.fmason > .fc { margin-bottom: 10px; }
  .fcoll-page .fcoll-grid { grid-template-columns: minmax(0, 1fr); }
  .fcoll-page .fcoll-side { padding: 20px 16px; border-radius: 20px; }
  .fcoll-page .fcoll-side__title { font-size: 24px; }
}

/* Б-079 Найдите решение, которое отзовётся вам — класс fh */
@media (max-width: 1199px) {
  .fh { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 28px; row-gap: 16px; align-items: start; }
  .fh .fh__text { display: contents; }
  .fh .fh__text > * { grid-column: 1; }
  .fh .fh__title { font-size: 40px; }
  .fh .fh__lead { font-size: 17px; }
  .fh .eyebrow { margin-bottom: -6px; }
  .fh .fh__actions { flex-direction: column; align-items: flex-start; }
  .fh .fh__q-name { font-size: 17px; }
  .fh .fh__q-count { font-size: 14px; }
  .fh .fh__pic { grid-column: 2; grid-row: 1 / 5; align-self: center; min-height: 0; aspect-ratio: 4 / 3; }
  .fh .fh__text > .fh__quick { grid-column: 1 / -1; margin-top: 12px; }
  /* Подпись — на тёмной подложке слева снизу */
  .fh .fh__pic-cap {
    right: auto;
    max-width: calc(100% - 36px);
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(20,24,26,.62);
    text-shadow: none;
  }
}
@media (max-width: 767px) {
  .fh { grid-template-columns: minmax(0, 1fr); }
  .fh .fh__text > *,
  .fh .fh__pic,
  .fh .fh__text > .fh__quick { grid-column: 1; grid-row: auto; }
  .fh .fh__pic { order: 1; margin-top: 8px; }
  .fh .fh__text > .fh__quick { order: 2; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fh .fh__title { font-size: 30px; }
  .fh .fh__lead { font-size: 16px; }
  .fh .fh__actions { align-items: stretch; }
  .fh .fh__actions .fbtn { min-height: 52px; }
  .fh .fh__q { padding: 14px; }
  .fh .fh__q:nth-child(3) { border-left: 0; }
  .fh .fh__q:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .fh .fh__slide .fh__pic-cap { bottom: 52px; }
}

/* Б-080 Поможем соединить ваши идеи — класс fhelp */
@media (max-width: 1199px) {
  .fhelp { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 767px) {
  .fhelp { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
  .fhelp .fhelp__text { display: contents; }
  .fhelp .eyebrow { margin-bottom: -8px; }
  .fhelp .fhelp__title { font-size: 28px; margin: 0 0 -8px; }
  .fhelp .fhelp__text p { margin: 0; }
  .fhelp .fhelp__list li { font-size: 16px; }
  .fhelp .fhelp__text > .fbtn { order: 2; min-height: 52px; }
  .fhelp .fhelp__list { order: 1; }
}

/* Б-081 Гранитная плита с розами (страница фото) — класс fphoto2. Фото — в своих пропорциях (как на компьютере,
   правило раздела «фото целиком»), не 4:3 из макета */
@media (max-width: 1199px) {
  .fphoto2 .fphoto__zoom { width: 44px; height: 44px; }
  .fphoto2 .fphoto2__body { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .fphoto2 .fask--side .fask__title { font-size: 18px; }
}
@media (max-width: 767px) {
  .fphoto2 { gap: 16px; }
  .fphoto2 .fphoto__title { font-size: 28px; }
  .fphoto2 .fphoto__zoom-area { border-radius: 16px; }
  .fphoto2 .fphoto__cap { flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 0; }
  /* Одна колонка: описание → кнопки → разбор → теги → форма → заметка */
  .fphoto2 .fphoto2__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fphoto2 .fphoto2__main,
  .fphoto2 .fphoto2__aside { display: contents; }
  .fphoto2 .fphoto__text { order: 1; }
  .fphoto2 .fphoto2__aside > .fbtn { order: 2; min-height: 52px; }
  .fphoto2 .frev { order: 3; padding: 18px 16px; }
  .fphoto2 .fpills { order: 4; }
  .fphoto2 .fpill { font-size: 14px; padding: 8px 14px; }
  .fphoto2 .fask { order: 5; }
  .fphoto2 .fphoto__note { order: 6; }
  /* Разбор: секции подряд с разделителями, не карточки */
  .fphoto2 .frev__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fphoto2 .frev__group { padding: 14px 0; border-radius: 0; background: none; box-shadow: none; }
  .fphoto2 .frev__group + .frev__group { border-top: 1px solid rgba(31,107,54,.16); }
  .fphoto2 .frev li { font-size: 15px; }
  .fphoto2 .frev__note { font-size: 13px; }
}

/* /foto — окно фотографии «Идея для вашей коллекции» (fv, pages/foto.css). Планшет и телефон — как остальные окна сайта
   (granit-lightbox): крестик снаружи над окном справа, фото на всю ширину, под ним «назад/вперёд» — две белые плашки,
   ниже — текст в белой карточке; окно прокручивается целиком. На компьютере — прежние две колонки. */
@media (max-width: 1199px) {
  .fv { align-items: flex-start; padding: 16px; overflow-y: auto; }
  .fv-backdrop { position: fixed; }
  .fv-dialog {
    display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: none; margin: 0 auto;
    padding-top: 58px; border-radius: 0; overflow: visible; background: none; box-shadow: none;
  }
  .fv-media { display: block; min-height: 0; background: none; padding-bottom: 58px; }
  .fv-zoomwrap { display: block; width: 100%; border-radius: 16px; overflow: hidden; background: #111; }
  .fv-img { width: 100%; max-height: 62vh; margin: 0 auto; }
  .fv-nav {
    top: auto; bottom: 0; transform: none; width: calc(50% - 5px); height: 48px; border-radius: 12px; box-shadow: none;
  }
  .fv-nav--prev { left: 0; }
  .fv-nav--next { right: 0; }
  .fv-count { bottom: 70px; }
  .fv-side { position: static; margin-top: 10px; padding: 22px 20px 24px; border-radius: 16px; background: #fff; overflow: visible; }
  .fv-zoomhint, .fv-zoom { display: none !important; }   /* лупа — для мыши; на касание закрывала фото чёрным */
  .fv-zoomwrap { cursor: default; }
  .fv-close { top: 0; right: 0; width: 48px; height: 48px; border: 0; }
  .fv-text { max-height: none; overflow: visible; }
  /* страница самой фотографии: описание уже есть на странице — в окне только фото, стрелки и крестик */
  .fv--self .fv-side { margin: 0; padding: 0; background: none; }
  .fv--self .fv-side > :not(.fv-close) { display: none; }
  /* увеличение касанием: фото в 2,5 раза, листается пальцем; повторное касание — обратно */
  /* высота — весь экран без крестика (58), плашек ‹ › (58), полосы (14) и полей окна: фото, которое помещается по высоте,
     не получает полосу справа */
  .fv-zoomwrap.is-zoomed { overflow: auto; max-height: calc(100vh - 170px); cursor: zoom-out; -webkit-overflow-scrolling: touch; }
  .fv-zoomwrap.is-zoomed .fv-img { width: 250%; max-width: none; max-height: none; }
  .fv-zoomwrap.is-zoomed { scrollbar-width: none; }
  .fv-zoomwrap.is-zoomed::-webkit-scrollbar { display: none; }
  /* полоса под увеличенным фото: вся ширина фото, бегунок — видимая часть */
  .fv-zbar { display: block; position: relative; height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(255,255,255,.3); }
  .fv-zbar > span { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: #fff; }
  /* фото выше окна: полоса справа (фото на 12px уже), бегунок — видимая часть по высоте */
  .fv-media.has-vbar .fv-zoomwrap { width: calc(100% - 14px); }   /* 10px зазор (как до полосы снизу) + 4px полоса */
  .fv-media.has-vbar .fv-zbar { margin-right: 14px; }              /* нижняя полоса — по ширине фото */
  .fv-vbar { display: block; position: absolute; top: 0; right: 0; width: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
  .fv-vbar > span { position: absolute; left: 0; right: 0; border-radius: 2px; background: #fff; }
  .fv-taphint {
    position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; pointer-events: none;
  }
  .fv-taphint [data-lucide], .fv-taphint svg { width: 15px; height: 15px; }
  .fv-zoomwrap.is-zoomed ~ .fv-taphint { display: none; }
  /* страница самой фотографии: окно по центру экрана по вертикали, фото сразу увеличено — подсказка не нужна */
  .fv--self { align-items: center; }
  .fv--self .fv-taphint { display: none; }
}
@media (max-width: 767px) {
  .fv-title { font-size: 26px; }
}