/* Адаптив: 1920px (база), 1366px, 768px, ≤560px (мост: визу как Figma 374 для отдельных блоков), 375px.
 * Мост ≤560: @media (max-width: 560px) ниже — герой, характеристики маршрута и др.; видео — отдельно @media (max-width: 620px).
 * Герой Index: Figma 279-8046 — дублирует .hero* из @media (max-width: 375px), держать в синхроне.
 * Страница маршрута: .ekoroute-spec* в @media ≤560; .ekoroute-videos* при ≤620 — как блок 375 (Figma 278-7536). */

/* ---------- 1366px ---------- */
@media (max-width: 6000px) {
  :root {
    --layout-gutter-x: 120px;
  }

  .header {
    top: 16px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--layout-content-max), calc(100vw - 2 * var(--layout-gutter-x)));
    max-width: var(--layout-content-max);
  }

  .hero {
    min-height: 860px;
    padding: 240px var(--layout-align-padding-x) 100px;
  }

  .hero__title-line:first-child {
    font-size: 56px;
  }

  .hero__title-line:last-child {
    font-size: 50px;
  }

  .about__inner {
    gap: 80px;
  }

  .about__logo {
    width: 416px;
  }

  /* Сетка маршрутов — в base.css (661+ / ≤660), не здесь: иначе перебивает узкие вьюпорты */

  /*Ekoroutes Top Header with image*/
  .ekotop__bg img {
    width: 100%;
    max-height: 472px;
    min-height: 268px;
  }

  .ekotop {
    min-height: 268px;
    padding: 200px var(--layout-align-padding-x);
  }

  .ekotop__title-line:first-child {
    font-size: 56px;
  }

  .ekotop__title-line:last-child {
    font-size: 50px;
  }

  .ekoroute-head__bg img {
    width: 100%;
    max-height: 472px;
    min-height: 268px;
  }

  .ekoroute-head {
    min-height: 268px;
    height: auto;
    max-height: none;
    padding: 200px var(--layout-align-padding-x);
  }

  .ekoroute-head__title-line:first-child {
    font-size: 56px;
    line-height: 64px;
  }

  .ekoroute-head__title-line:last-child {
    font-size: 50px;
    line-height: 60px;
  }

}

/* Маска-волна: пропорция по ширине только на широких вьюпортах; при max-width ≤1366 — cover из блока 1366px */
@media (min-width: 1367px) and (max-width: 3000px) {
  .hero__bg img {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: unset;
    max-width: none;
    object-fit: unset;
    object-position: unset;
  }
}

/*
 * Шире 1920px: base .hero { height: 56.25vw; max-height: 1080px } обрезает блок до 1080px,
 * а .hero__bg img с height:auto даёт высоту ~ 9/16 от ширины — больше 1080 → маска режется снизу.
 */
@media (min-width: 1921px) {
  .hero {
    max-height: none;
  }
}

@media (max-width: 1670px) {
  :root {
    --layout-gutter-x: 48px;
  }

  .header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--layout-content-max), calc(100vw - 2 * var(--layout-gutter-x)));
    max-width: var(--layout-content-max);
  }

  .header__inner {
    padding: 0 24px;
    height: 88px;
    min-height: 88px;
    gap: 24px;
  }

  /* Меню 1366px по Figma 65-1919: размер шрифта и отступы — сверять с макетом (node 65-1919). Сейчас 16px для совпадения с макетом. */
  .header__nav {
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1;
    justify-content: center;
  }

  .header__link {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    flex-shrink: 0;
  }

  .header__btn {
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    flex-shrink: 0;
  }
  
  /*Ekoroutes Top Header with image*/
  .ekotop__bg img {
    width: 100%;
    max-height: 472px;
    min-height: 268px;
  }

  .ekotop {
    min-height: 268px;
    padding: 200px var(--layout-align-padding-x);
  }

  .ekotop__title-line:first-child {
    font-size: 56px;
  }

  .ekotop__title-line:last-child {
    font-size: 50px;
  }

  .ekoroute-head__bg img {
    width: 100%;
    max-height: 472px;
    min-height: 268px;
  }

  .ekoroute-head {
    min-height: 268px;
    height: auto;
    max-height: none;
    padding: 200px var(--layout-align-padding-x);
  }

  .ekoroute-head__title-line:first-child {
    font-size: 56px;
    line-height: 64px;
  }

  .ekoroute-head__title-line:last-child {
    font-size: 50px;
    line-height: 60px;
  }

}

/*
 * ≤1420: футер — слой травы 441px; меню + копирайт прижаты к низу слоя (flex-end), без «пустого» поля под текстом.
 */
@media (max-width: 1420px) {
  .footer {
    padding-bottom: 12px;
  }

  /*
   * Блок «Приложение»: текст и макеты — вместе ниже (padding-top, не margin — иначе схлопывание с отступами карты).
   * footer__main сильнее уходит вверх (−210px), чтобы не появилась лишняя белая полоса над травой.
   */
  .footer__app {
    gap: 54px;
    padding: 100px 0 48px;
  }

  .footer__app-visual {
    width: 468px;
    padding-top: 48px;
  }

  .footer__app-text {
    padding-top: 0;
    margin-top: -24px;
    gap: 28px;
  }

  .footer__app-title {
    font-size: 48px;
    line-height: 1.17;
  }

  .footer__main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: -210px;
    min-height: 441px;
    padding: 0 0 6px;
    box-sizing: border-box;
  }

  .footer__content {
    gap: 60px;
    margin-bottom: 24px;
  }

  .footer__bg {
    height: 441px;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* ≤1320: футер — те же правила, что для макета 768px (см. @media (min-width: 376px) and (max-width: 768px)) */
@media (max-width: 1320px) {
  .footer__app {
    flex-direction: column;
    gap: 20px;
    padding: 0 0 40px;
    align-items: center;
  }

  .footer__app-text {
    order: 1;
    padding-top: 0;
    margin-top: -16px;
  }

  .footer__app-visual {
    order: 2;
    width: 468px;
    margin-top: 40px;
    padding-top: 24px;
  }

  .footer__app .section-label__text {
    font-size: 14px;
  }

  .footer__app-title {
    font-size: 32px;
    line-height: 1.25;
  }

  .footer__app-desc {
    font-size: 16px;
    line-height: 1.5;
  }

  .footer__stores {
    justify-content: center;
  }

  .footer__main {
    display: block;
    min-height: auto;
    margin-top: -100px;
    padding: 100px 0 36px;
  }

  .footer__bg {
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    height: 760px;
    min-height: 0;
    aspect-ratio: auto;
    top: auto;
    bottom: 0;
    background-size: auto 100%;
    background-position: 80% bottom;
  }

  .footer__content {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 40px;
  }

  .footer__logo {
    width: 128px;
  }

  .footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 16px;
    flex: 1;
    min-width: 0;
  }

  .footer__col {
    width: calc(50% - 8px);
  }

  .footer__col--links {
    width: 100%;
  }
}

/* ≤1240 (перед блоком ≤1366 ниже): overflow-x; герой 680px — перебивается ≤1366 до 768px */
@media (max-width: 1240px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }

  .hero {
    min-height: 680px !important;
    height: 680px !important;
    max-height: 680px !important;
    padding: 140px var(--layout-align-padding-x) 60px;
  }

  /* Высота блока с маской волны — 680px по Figma 65-1186 */
  .hero__bg,
  .hero__bg picture {
    height: 680px;
  }

  /* По Figma 65-1186: маска 768×680 для героя, cover, низ прижат к низу блока */
  .hero__bg img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .hero__title-line:first-child {
    font-size: 32px;
    line-height: 1.25;
  }

  .hero__title-line:last-child {
    font-size: 28px;
    line-height: 1.25;
  }

  .hero__content {
    gap: 24px;
    max-width: 100%;
  }

}

@media (max-width: 1366px) {
  :root {
    --layout-gutter-x: 48px;
  }

  .header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--layout-content-max), calc(100vw - 2 * var(--layout-gutter-x)));
    max-width: var(--layout-content-max);
  }

  .header__inner {
    padding: 0 24px;
    height: 88px;
    min-height: 88px;
    gap: 24px;
  }

  /* Меню 1366px по Figma 65-1919: размер шрифта и отступы — сверять с макетом (node 65-1919). Сейчас 16px для совпадения с макетом. */
  .header__nav {
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1;
    justify-content: center;
  }

  .header__link {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    flex-shrink: 0;
  }

  .header__btn {
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    flex-shrink: 0;
  }

  .hero {
    min-height: 768px !important;
    height: 768px !important;
    max-height: 768px !important;
    padding: 200px var(--layout-align-padding-x) 80px;
  }

  /*
   * Фон героя: маска на весь блок, cover (на широких экранах — «волна по ширине» только при min-width: 1367px).
   */
  .hero__bg,
  .hero__bg picture {
    height: 100%;
    min-height: 100%;
    width: 100%;
  }

  .hero__bg img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .hero__title-line:first-child {
    font-size: 48px;
  }

  .hero__title-line:last-child {
    font-size: 42px;
  }

  .hero__content {
    max-width: 600px;
  }

  .about__inner {
    display: flex;
    flex-direction: row;
    grid-template-columns: unset;
    align-items: flex-end;
    gap: 132px;
    padding: 0 0 80px 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .about__logo {
    width: 335px;
    grid-column: unset;
    justify-self: unset;
    align-self: unset;
    margin-left: 0;
  }

  .about__text {
    grid-column: unset;
    gap: 32px;
  }

  .about .section-label {
    margin-bottom: 8px;
  }

  .about__heading {
    margin: 0 0 32px;
  }

  .about__heading-main {
    font-size: 43.75px;
    line-height: 1.05;
  }

  .about__heading-main strong {
    font-size: 59.375px;
  }

  .about__heading-sub {
    font-size: 20px;
    line-height: 1.6;
    margin-top: 20px;
  }

  .section-title {
    font-size: 40px;
  }

  .map-section__head .section-title {
    font-size: 40px;
  }

  /* Только для макета 1366: высота карты 600px */
  .map-section__frame {
    height: 600px;
    overflow: hidden;
  }

  .map-section__frame img {
    height: 600px;
    object-fit: cover;
  }

  /* Маршруты: сетка и высота плиток — в base.css (661+ три колонки, ≤660 одна) */

  .routes,
  .news,
  .map-section {
    padding-bottom: 80px;
  }

  /* Новости — Figma 63:238: как 1920, 3 колонки в ряд */
  .news__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Сетка с шапкой: тот же горизонтальный отступ, что у .header */
  .routes__head,
  .routes__grid,
  .routes-catalog__inner,
  .news__head,
  .news__grid,
  .map-section__head,
  .map-section__frame {
    padding-left: var(--layout-align-padding-x);
    padding-right: var(--layout-align-padding-x);
  }

  /* По Figma 65-374 для 1366: логотип — 119px от левого края, текст — 47px от правого края, между ними 132px */
  .about {
    padding-left: 119px;
    padding-right: 47px;
  }

  /* Страница новостей — Figma 170-3725 / 176-2716 / 170-4065 */
  .news-page {
    padding-top: 160px;
    padding-bottom: 80px;
  }

  .news-page__heading {
    font-size: 56px;
    line-height: 68px;
  }

  .news-page__inner {
    margin-top: 48px;
  }

  .news-page-card__media {
    width: 240px;
    height: 240px;
  }

  /* Полезные материалы — Figma 173-2951 @1366 */
  .materials-page {
    padding-top: 160px;
    padding-bottom: 80px;
  }

  .materials-page__heading {
    font-size: 56px;
    line-height: 68px;
  }

  .materials-page__inner {
    margin-top: 48px;
  }

  .materials-section__title {
    font-size: 28px;
    line-height: 34px;
  }
}

/*
 * ≤1240 после ≤1366: компактная шапка и --layout-gutter-x: 24px (перебивают десктопное меню 88px у ≤1366).
 */
@media (max-width: 1240px) {
  :root {
    --layout-gutter-x: 24px;
  }

  .header__nav,
  .header__btn {
    display: none;
  }

  .header__phone,
  .header__burger {
    display: inline-flex;
  }

  .header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--layout-content-max), calc(100vw - 2 * var(--layout-gutter-x)));
    max-width: var(--layout-content-max);
  }

  .header__inner {
    padding: 8px 24px;
    height: 56px;
    min-height: 56px;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
    gap: 12px;
  }

  /* Меню 768px: как на 375 — группа телефон + бургер справа, между кнопками 12px, телефон — иконка */
  .header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .header__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .header__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
  }

  .header__phone:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }

  .header__phone-icon {
    display: block;
  }

  .header__phone-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .header__burger {
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding: 8px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .header__burger-bar {
    width: 24px;
    height: 2px;
    background: var(--color-gray-900);
    border-radius: 1px;
  }

  /* Мобильное выпадающее меню (Figma 65-1815): панель под шапкой, гамбургер → крестик (65-1806) */
  html:has(#header-menu:checked) {
    overflow: hidden;
  }

  .header {
    overflow: visible;
  }

  /*
   * Открытое меню: колонка flex; панель Figma 65-1815 — 288px, выравнивание вправо (под телефон/крестик).
   */
  .header:has(#header-menu:checked) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .header:has(#header-menu:checked) .header__inner {
    align-self: stretch;
    flex-shrink: 0;
    width: 100%;
  }

  .header__mobile-drawer {
    --header-mobile-menu-width: 288px;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    z-index: 2;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-end;
    width: min(var(--header-mobile-menu-width), 100%);
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 0 0;
    background: var(--color-white);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.12);
    max-height: min(72vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #header-menu:checked ~ .header__mobile-drawer {
    display: flex !important;
  }

  .header__mobile-drawer .header__mobile-nav {
    padding: 4px 0 0;
    flex-shrink: 0;
  }

  .header__mobile-drawer .header__mobile-link {
    font-size: 16px;
    line-height: 22px;
    padding: 14px 20px 15px;
  }

  /* «Обратная связь» только в шапке на широких экранах, в узком меню не показываем */
  .header__mobile-drawer .header__mobile-feedback {
    display: none !important;
  }

  #header-menu:checked ~ .header__inner .header__burger .header__burger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  #header-menu:checked ~ .header__inner .header__burger .header__burger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  #header-menu:checked ~ .header__inner .header__burger .header__burger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ---------- 1100px: футер в колонку, чтобы меню не обрезалось (по Figma адаптив 768/375) ---------- */
@media (max-width: 1100px) {
  /*.footer__bg {
    height: 980px;
    background-size: auto 100%;
    background-position: 80% bottom;
  }

  .footer__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 48px;
  }

  .footer__col,
  .footer__col--links {
    width: 100%;
    max-width: none;
  }

  .footer__cols {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  
  */
/*  .footer__app {
    flex-direction: column;
    gap: 20px;
    padding: 0 16px 40px;
    align-items: center;
  }*/

  /* По Figma 768px (63-1046): сначала текст, затем картинка телефонов */
  /*.footer__app-text {
    order: 1;
  }

  .footer__app-visual {
    order: 2;
    width: 468px;
  }

  .footer__app .section-label__text {
    font-size: 14px;
  }

  .footer__app-title {
    font-size: 32px;
    line-height: 1.25;
  }

  .footer__app-desc {
    font-size: 16px;
    line-height: 1.5;
  }

  .footer__main {
    min-height: auto;
    margin-top: -100px;
    padding: 100px 16px 48px;
  }*/

  /* Фон футера: без 100vw (иначе scrollWidth > clientWidth и белая полоса справа, см. ≤375px) */
  .footer__bg {
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    height: 760px;
    min-height: 0;
    aspect-ratio: auto;
    top: auto;
    bottom: 0;
    background-size: auto 100%;
    background-position: 80% bottom;
  }

  /* По Figma 768px: логотип и колонки в один ряд (row), gap 60px; Навигация и О компании — в ряд, Ссылки — полная ширина ниже */
  .footer__content {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 40px;
  }

  .footer__logo {
    width: 128px;
  }

  .footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 16px;
    flex: 1;
    min-width: 0;
  }

  .footer__col {
    width: calc(50% - 8px);
  }

  .footer__col--links {
    width: 100%;
  }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
  :root {
    --layout-gutter-x: 24px;
  }

  html {
    scroll-padding-top: 88px;
  }

  .header__nav,
  .header__btn {
    display: none;
  }

  .header__phone,
  .header__burger {
    display: inline-flex;
  }

  .header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--layout-content-max), calc(100vw - 2 * var(--layout-gutter-x)));
    max-width: var(--layout-content-max);
  }

  .header__inner {
    padding: 8px 24px;
    height: 56px;
    min-height: 56px;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
  }

  /* Меню 768px: как на 375 — группа телефон + бургер справа, между кнопками 12px, телефон — иконка */
  .header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .header__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .header__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
  }

  .header__phone:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }

  .header__phone-icon {
    display: block;
  }

  .header__phone-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .header__burger {
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding: 8px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .header__burger-bar {
    width: 24px;
    height: 2px;
    background: var(--color-gray-900);
    border-radius: 1px;
  }

  .hero {
    min-height: 680px !important;
    height: 680px !important;
    max-height: 680px !important;
    padding: 140px var(--layout-align-padding-x) 60px;
  }

  /* Высота блока с маской волны — 680px по Figma 65-1186 */
  .hero__bg,
  .hero__bg picture {
    height: 680px;
  }

  /* По Figma 65-1186: маска 768×680 для героя, cover, низ прижат к низу блока */
  .hero__bg img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .hero__title-line:first-child {
    font-size: 32px;
    line-height: 1.25;
  }

  .hero__title-line:last-child {
    font-size: 28px;
    line-height: 1.25;
  }

  .hero__content {
    gap: 24px;
    max-width: 100%;
  }

  .about__inner {
    display: flex;
    flex-direction: row;
    grid-template-columns: unset;
    align-items: flex-end;
    padding: 0 0 60px 0;
    gap: 66px;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .about {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 0px;
  }

  .about__logo {
    width: 216px;
    grid-column: unset;
    justify-self: unset;
    align-self: unset;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
  }

  .about__text {
    grid-column: unset;
  }

  .about__heading {
    font-size: 24px;
  }

  .about__heading-main {
    font-size: 40px;
  }

  .about__heading-main strong {
    font-size: 52px;
  }

  .about__heading-sub {
    font-size: 18px;
  }

  .section-label__text {
    font-size: 18px;
  }

  .about__desc {
    font-size: 16px;
  }

  .section-title {
    font-size: 28px;
  }

  .map-section__head .section-title {
    font-size: 28px;
  }

  .routes__head,
  .routes__grid,
  .routes-catalog__inner,
  .news__head,
  .news__grid,
  .map-section__head,
  .map-section__frame {
    padding-left: var(--layout-align-padding-x);
    padding-right: var(--layout-align-padding-x);
  }

  /* Колонка: иначе flex: 1 1 280px у .search-wrap даёт высоту 280px + рост по вертикали (был «провал» между поиском и фильтрами) */
  .routes-catalog__toolbar {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .routes-catalog__toolbar-main {
    flex-direction: column;
    flex: 0 0 auto;
    align-items: stretch;
  }

  .routes-catalog__search-wrap {
    max-width: none;
    flex: 0 0 auto;
    width: 100%;
  }

  .routes-catalog__filters {
    flex: 0 0 auto;
    width: 100%;
  }

  .routes-catalog__sort-wrap {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Сетка каталога и плиток на главной — две колонки только 661–768px (см. блок ниже) */

  /* Герой ekotop: в base height:472px + img max-height:340px — снизу пустая полоса; padding 140px сверху и снизу раздувает блок */
  /* Небольшой зазор между ekotop и белой зоной поиска (после устранения лишней полосы) */

  .routes__title-row,
  .news__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  /*Ekoroutes Top Header with image*/
  .ekotop {
    height: auto;
    max-height: none;
    min-height: 268px;
    margin-bottom: 0;
    padding: 100px var(--layout-align-padding-x) 20px;
  }

  .ekotop__bg img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center bottom;
  }

  .ekotop__title-line:first-child {
    font-size: 46px;
  }

  .ekotop__title-line:last-child {
    font-size: 40px;
  }

  .news-page {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .news-page__heading {
    font-size: 40px;
    line-height: 48px;
  }

  .news-page__inner {
    margin-top: 32px;
  }

  .news-page-card__link {
    flex-direction: column;
    align-items: stretch;
  }

  .news-page-card__media {
    width: 100%;
    height: 220px;
    max-height: 56vw;
  }

  .materials-page {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .materials-page__heading {
    font-size: 40px;
    line-height: 48px;
  }

  .materials-page__inner {
    margin-top: 32px;
  }

  .materials-section__title {
    font-size: 24px;
    line-height: 30px;
  }

  .materials-card__title {
    font-size: 20px;
    line-height: 26px;
  }

  /* Новости: две колонки и плитки 768 — только 661–768px; при ≤660 — макет 375 (см. @media max-width: 660px ниже) */
}

/* Маршруты / каталог — макет 768 (Figma 63-262): только ширина 661–768px; при ≤660 — макет 375 (base.css) */
@media (min-width: 661px) and (max-width: 768px) {
  .routes__title-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .routes-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .routes-catalog {
    padding: 20px 0 60px;
  }

  .routes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .card-route--wide {
    grid-column: auto;
  }

  .routes {
    padding-bottom: 60px;
  }

  .card-route {
    min-height: 350px;
  }

  .card-route__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .card-route__badge {
    font-size: 20px;
    line-height: 28px;
  }

  .card-route__title {
    font-size: 20px;
    line-height: 28px;
    margin: 0;
  }

  .card-route__meta {
    font-size: 14px;
    line-height: 16px;
  }

  /* Новости — Figma 63:347: кнопка справа, две карточки 2×1, шаг 16px (только 661–768) */
  .news__title-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .news .section-label__text {
    font-size: 18px;
  }

  .news__head .section-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .news {
    padding-bottom: 60px;
  }

  .news__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .news__grid .card-news:nth-child(n + 3) {
    display: none;
  }

  .card-news {
    min-height: 350px;
  }

  .card-news__body {
    padding: 12px;
  }

  .card-news__title {
    font-size: 24px;
    line-height: 32px;
  }

  /* Страница новостей: 661–768 — карточка в ряд, компактное превью */
  .news-page-card__link {
    flex-direction: row;
    align-items: flex-start;
  }

  .news-page-card__media {
    width: 200px;
    height: 200px;
    max-height: none;
  }
}

/* ---------- ≤560px: макет 375 для выбранных блоков (max = var(--layout-375-bridge-max) в base.css) ---------- */
@media (max-width: 560px) {
  /* Герой — Figma 279-8046; те же значения, что .hero* в @media (max-width: 375px) ниже */
  .hero {
    min-height: 488px !important;
    height: 488px !important;
    max-height: 488px !important;
    width: 100%;
    box-sizing: border-box;
    padding: 120px var(--layout-align-padding-x) 48px;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .hero__bg picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Как 375px: маска по высоте блока, cover, низ к низу */
  .hero__bg img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    display: block;
  }

  .hero__content {
    gap: 24px;
    max-width: 100%;
  }

  .hero__title-line:first-child {
    font-size: 24px;
  }

  .hero__title-line:last-child {
    font-size: 21px;
  }

  /* Страница списка новостей — мобильный макет (мост 375) */
  .news-page {
    padding-top: 88px;
    padding-bottom: 48px;
  }

  .news-page__heading {
    font-size: 28px;
    line-height: 1.25;
  }

  .news-page__crumb {
    font-size: 14px;
    line-height: 18px;
  }

  .news-page__inner {
    margin-top: 24px;
  }

  .news-page__cards {
    gap: 16px;
  }

  .news-page-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .news-page-card__excerpt,
  .news-page-card__meta {
    font-size: 14px;
    line-height: 18px;
  }

  .news-page-card__link {
    flex-direction: column;
    align-items: stretch;
  }

  .news-page-card__media {
    width: 100%;
    height: 200px;
    max-height: 56vw;
  }

  .materials-page {
    padding-top: 88px;
    padding-bottom: 48px;
  }

  .materials-page__heading {
    font-size: 28px;
    line-height: 1.25;
  }

  .materials-page__crumb {
    font-size: 14px;
    line-height: 18px;
  }

  .materials-page__inner {
    margin-top: 24px;
    gap: 16px;
  }

  .materials-section {
    padding-bottom: 16px;
  }

  .materials-section__title {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 16px;
  }

  .materials-grid {
    --materials-grid-gap: 16px;
    --materials-card-min: 200px;
  }

  .materials-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .materials-card__cta {
    font-size: 14px;
    line-height: 18px;
  }

  /* Страница маршрута: характеристики — как @media (max-width: 375px) (Figma 276-4681 / сетка 1 колонка) */
  .ekoroute-spec__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ekoroute-spec__item--marking {
    grid-column: auto;
  }

  .ekoroute-spec__label {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.06em;
  }

  .ekoroute-spec__value,
  .ekoroute-spec__dur {
    font-size: 24px;
    line-height: 32px;
  }
}

/* О проекте — Figma 65:1447 + контекст Index 63:165 (макет 375), для экранов <650px */
@media (max-width: 649px) {
  .about__inner {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 48px;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    gap: 32px;
  }

  .about {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 0;
  }

  .about__logo {
    width: 163px;
    max-width: 100%;
    grid-column: unset;
    justify-self: unset;
    align-self: flex-start;
    margin-left: 0;
    margin-right: 0;
  }

  .about__text {
    grid-column: unset;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Figma 65:1449: 4px label→heading, 16px heading→body */
  .about .section-label {
    margin-bottom: 4px;
  }

  .about .section-label__icon {
    width: 16px;
    height: 16px;
  }

  .about .section-label__text {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
  }

  .about__heading {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-family: var(--font-pacifico);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .about__heading-main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    font-size: 28px;
    line-height: 40px;
  }

  .about__heading-main strong {
    font-weight: 400;
    font-size: 38px;
    line-height: 40px;
  }

  .about__heading-sub {
    display: block;
    margin-top: 0;
    font-family: var(--font-pacifico);
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    text-transform: none;
    color: var(--color-gray-700);
  }

  .about__desc {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-gray-600);
  }
}

/* По Figma 768: футер/карта 376–768; новости с кнопкой справа и сеткой 2×1 — только 661–768 (см. блок выше) */
@media (min-width: 376px) and (max-width: 768px) {
  .map-section {
    padding-bottom: 60px;
  }

  .map-section__frame {
    padding-left: 24px;
    padding-right: 24px;
    height: 400px;
  }

  .map-section__frame img {
    height: 400px;
    object-fit: cover;
  }

  .footer__app {
    flex-direction: column;
    gap: 20px;
    padding: 0 0 40px;
    align-items: center;
  }

  /* По Figma 768px (63-1046): сначала текст, затем картинка телефонов */
  .footer__app-text {
    order: 1;
    padding-top: 0;
    margin-top: -16px;
  }

  .footer__app-visual {
    order: 2;
    width: 468px;
    padding-top: 24px;
  }

  .footer__app .section-label__text {
    font-size: 14px;
  }

  .footer__app-title {
    font-size: 32px;
    line-height: 1.25;
  }

  .footer__app-desc {
    font-size: 16px;
    line-height: 1.5;
  }

  .footer__stores {
    justify-content: center;
  }

  .footer__main {
    min-height: auto;
    margin-top: -100px;
    padding: 100px 0 36px;
  }

  /* Фон футера: без 100vw (горизонтальный overflow и полоса справа) */
  .footer__bg {
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    height: 760px;
    min-height: 0;
    aspect-ratio: auto;
    top: auto;
    bottom: 0;
    background-size: auto 100%;
    background-position: 80% bottom;
  }

  /* По Figma 768px: логотип и колонки в один ряд (row), gap 60px; Навигация и О компании — в ряд, Ссылки — полная ширина ниже */
  .footer__content {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 40px;
  }

  .footer__logo {
    width: 128px;
  }

  .footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 16px;
    flex: 1;
    min-width: 0;
  }

  .footer__col {
    width: calc(50% - 8px);
  }

  .footer__col--links {
    width: 100%;
  }
}

/* ---------- 375px ---------- */
@media (max-width: 375px) {
  :root {
    --layout-gutter-x: 16px;
  }

  html {
    scroll-padding-top: 80px;
  }

  body {
    width: 100%;
  }

  main {
    width: 100%;
    max-width: 100%;
  }

  .header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--layout-content-max), calc(100vw - 2 * var(--layout-gutter-x)));
    max-width: var(--layout-content-max);
  }

  /* Меню 375px по Figma 65-1899: логотип слева, телефон и бургер сгруппированы справа, между кнопками 12px */
  .header__inner {
    padding: 8px 16px;
    height: 56px;
    min-height: 56px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
    justify-content: space-between;
    align-items: center;
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .header__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  /* Кнопка телефона и бургер — в одной группе, gap 12px */
  .header__phone {
    display: inline-flex;
    margin-left: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
  }

  .header__phone:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }

  .header__phone-icon {
    display: block;
  }

  .header__phone-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .header__burger {
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding: 8px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .header__burger-bar {
    width: 24px;
    height: 2px;
    background: var(--color-gray-900);
    border-radius: 1px;
  }

  /* .hero — синхронно с @media (max-width: 560px) выше (Figma 279-8046 / 65-1437) */
  .hero {
    min-height: 488px !important;
    height: 488px !important;
    max-height: 488px !important;
    width: 100%;
    box-sizing: border-box;
    padding: 120px var(--layout-align-padding-x) 48px;
  }

  /* Контейнер маски на всю площадь героя, без зазоров */
  .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .hero__bg picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* По Figma 65-1437: маска 375×488, cover, низ прижат к низу блока */
  .hero__bg img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    display: block;
  }

  .hero__title-line:first-child {
    font-size: 24px;
  }

  .hero__title-line:last-child {
    font-size: 21px;
  }

  .hero__content {
    gap: 24px;
    max-width: 100%;
  }

  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .routes__head,
  .routes__grid,
  .routes-catalog__inner,
  .news__head,
  .news__grid,
  .map-section__head,
  .map-section__frame {
    padding-left: var(--layout-align-padding-x);
    padding-right: var(--layout-align-padding-x);
  }

  .routes-catalog__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-label__text {
    font-size: 14px;
  }

  .section-title {
    font-size: 22px;
  }

  .map-section__head .section-title {
    font-size: 22px;
  }

  .routes,
  .routes-catalog,
  .news,
  .map-section {
    padding-bottom: 48px;
  }

  .map-section__frame {
    height: 350px;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .map-section__frame img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  /* Маршруты — Figma 63:491: одна колонка, шаг 16px; высоты рядов как в макете */
  .routes__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-route--wide {
    grid-column: auto;
  }

  .card-route {
    min-height: 180px;
    padding: 12px;
    border-radius: 24px;
  }

  .routes__grid .card-route:nth-child(3) {
    min-height: 144px;
  }

  .card-route__badge {
    font-size: 20px;
    line-height: 28px;
    padding: 12px;
  }

  .card-route__body {
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .card-route__title {
    font-size: 20px;
    line-height: 28px;
    margin: 0;
  }

  .card-route__meta {
    font-size: 14px;
    line-height: 16px;
  }

  .footer__app {
    padding: 0 0 32px;
  }

  .footer__app-visual {
    width: 220px;
    order: 2;
  }

  /* По Figma 375px: сначала текст, ниже — картинка телефонов */
  .footer__app-text {
    order: 1;
    padding-top: 0;
    margin-top: -8px;
  }

  .footer__app-title {
    font-size: 18px;
  }

  .footer__stores {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 288px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer__store-btn {
    justify-content: center;
    width: 100%;
  }

  .footer__app-visual {
    padding-top: 0;
  }

  .footer__main {
    margin-top: -60px;
    padding: 32px 16px 32px;
  }

  /* Фон футера (375px): без 100vw, чтобы не было горизонтального overflow и белой полосы справа */
  .footer {
    width: 100%;
    overflow-x: hidden;
  }

  .footer__bg {
    left: 0;
    right: 0;
    width: 100%;
    margin-left: 0;
    height: 980px;
    min-height: 0;
    aspect-ratio: auto;
    top: auto;
    bottom: 0;
    background-size: auto 100%;
    background-position: calc(80% + 200px) calc(100% + 120px);
  }

  /* Контент футера по Figma 67-711 (375px): колонка — логотип сверху, ниже меню (Навигация, О компании, Ссылки), затем копирайт */
  .footer__content {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .footer__content .footer__brand,
  .footer__content .footer__logo {
    order: 1;
  }

  .footer__content .footer__cols {
    order: 2;
  }

  .footer__content .footer__copyright {
    order: 3;
  }

  .footer__logo {
    width: 80px;
    margin-bottom: 12px;
  }

  .footer__brand-title {
    font-size: 11px;
    max-width: 80px;
  }

  /* Навигация и О компании в один ряд, Ссылки — полная ширина ниже (Figma layout_RNBPDR) */
  .footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 16px;
    width: 100%;
    max-width: 342px;
  }

  .footer__col {
    width: calc(50% - 8px);
  }

  .footer__col--links {
    width: 100%;
  }

  .footer__col-title {
    font-size: 14px;
  }

  .footer__links a {
    font-size: 14px;
  }

  /* Копирайт по центру (Figma style_094IVG textAlignHorizontal: CENTER) */
  .footer__copyright {
    align-items: center;
    text-align: center;
  }

  .footer__copyright-line {
    text-align: center;
  }
}

/* Блок «Новости и события»: при ≤660px — макет как Figma 63:165 (Index 375); те же правила, что ранее были только в @media (max-width: 375px) */
@media (max-width: 660px) {
  .news {
    padding-left: var(--layout-align-padding-x);
    padding-right: var(--layout-align-padding-x);
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .news__head {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .news__head .section-label {
    margin-bottom: 0;
  }

  .news .section-label__icon {
    width: 16px;
    height: 16px;
  }

  .news .section-label__text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3333333333;
    letter-spacing: 0.08em;
  }

  .news__head .section-title {
    font-size: 24px;
    line-height: 1.3333333333;
  }

  .news__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .news__title-row .btn {
    display: none;
  }

  .news__footer {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }

  .news__footer .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 12px;
  }

  .news__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .card-news {
    height: 250px;
    min-height: 250px;
    padding: 12px;
    border-radius: 24px;
  }

  .card-news__body {
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .card-news__title {
    font-size: 20px;
    line-height: 28px;
  }
}

/*
 * <700px: только футер — те же правила, что в @media (max-width: 375px) (Figma 67-711).
 * Блок ниже по файлу, чтобы перекрыть ≤1320 / 376–768 и т.д.
 */
@media (max-width: 699px) {
  .footer__app {
    padding: 0 0 32px;
  }

  .footer__app-visual {
    width: 220px;
    order: 2;
    padding-top: 0;
    margin-top: 0;
  }

  .footer__app-text {
    order: 1;
    padding-top: 0;
    margin-top: -8px;
  }

  .footer__app-title {
    font-size: 18px;
  }

  .footer__stores {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 288px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer__store-btn {
    justify-content: center;
    width: 100%;
  }

  .footer__main {
    margin-top: -60px;
    padding: 32px 16px 32px;
  }

  .footer {
    width: 100%;
    overflow-x: hidden;
  }

  /* Выше слой фона footer-bg.png (+60px к макету 375), остальное без изменений */
  .footer__bg {
    left: 0;
    right: 0;
    width: 100%;
    margin-left: 0;
    height: 1090px;
    min-height: 0;
    aspect-ratio: auto;
    top: auto;
    bottom: 0;
    background-size: auto 100%;
    background-position: calc(80% + 200px) calc(100% + 120px);
  }

  .footer__content {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .footer__content .footer__brand,
  .footer__content .footer__logo {
    order: 1;
  }

  .footer__content .footer__cols {
    order: 2;
  }

  .footer__content .footer__copyright {
    order: 3;
  }

  .footer__logo {
    width: 80px;
    margin-bottom: 12px;
  }

  .footer__brand-title {
    font-size: 11px;
    max-width: 80px;
  }

  .footer__cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 16px;
    width: 100%;
    max-width: 342px;
  }

  .footer__col {
    width: calc(50% - 8px);
  }

  .footer__col--links {
    width: 100%;
  }

  .footer__col-title {
    font-size: 14px;
  }

  .footer__links a {
    font-size: 14px;
  }

  .footer__copyright {
    align-items: center;
    text-align: center;
  }

  .footer__copyright-line {
    text-align: center;
  }
}

/* ---------- Страница экомаршрута (Figma: 276-4556 1366px, 276-4620 768px, 276-4681 375px; макет «768» — при ширине ≤1080px) ---------- */
@media (max-width: 1366px) {
  .ekoroute-page {
    padding-top: 48px;
  }

  .ekoroute-cta {
    padding: 0 var(--layout-align-padding-x) 48px;
  }

  .ekoroute-cta__card {
    padding: 40px 48px 48px;
    gap: 28px;
    min-height: 260px;
  }

  .ekoroute-cta__title {
    font-size: 28px;
    line-height: 36px;
  }

  .ekoroute-page__main {
    padding-bottom: 80px;
    gap: 20px;
  }

  .ekoroute-page__col--aside {
    gap: 40px;
  }

  .ekoroute-spec {
    padding-bottom: 48px;
  }

  .ekoroute-spec__grid {
    gap: 20px;
  }

  .ekoroute-spec__label {
    font-size: 18px;
    line-height: 22px;
  }

  .ekoroute-spec__value,
  .ekoroute-spec__dur {
    font-size: 28px;
    line-height: 36px;
  }

  .ekoroute-desc__title {
    font-size: 40px;
    line-height: 56px;
    margin-bottom: 20px;
  }

  .ekoroute-desc__subtitle {
    font-size: 22px;
    line-height: 30px;
  }

  .ekoroute-card__title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 20px;
  }

  .ekoroute-gallery__title,
  .ekoroute-videos__title,
  .ekoroute-rules__title {
    font-size: 40px;
    line-height: 48px;
  }

  .ekoroute-gallery__head {
    padding-left: 16px;
  }

  .ekoroute-videos {
    padding-bottom: 80px;
  }

  .ekoroute-videos__head {
    padding: 0 16px 20px;
  }

  .ekoroute-video-card__title {
    font-size: 20px;
    line-height: 28px;
  }

  .ekoroute-rules__head {
    margin-bottom: 20px;
  }

  .ekoroute-rules__inner {
    padding: 0;
  }

  .ekoroute-map {
    padding-bottom: 80px;
  }
}

@media (max-width: 1080px) {
  .ekoroute-page {
    padding-top: 32px;
  }

  .ekoroute-head {
    height: auto;
    max-height: none;
    min-height: 268px;
    margin-bottom: 0;
    padding: 100px var(--layout-align-padding-x) 20px;
  }

  .ekoroute-head__bg img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center bottom;
  }

  .ekoroute-head__content {
    row-gap: 0;
  }

  .ekoroute-head__crumbs-list {
    gap: 8px;
  }

  .ekoroute-head__title {
    gap: 0;
  }

  .ekoroute-head__crumb {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1.12px;
  }

  .ekoroute-head__crumbs-sep {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-head__title-line:first-child {
    font-size: 46px;
    line-height: 54px;
  }

  .ekoroute-head__title-line:last-child {
    font-size: 40px;
    line-height: 48px;
  }

  .ekoroute-cta {
    padding: 0 var(--layout-align-padding-x) 40px;
  }

  .ekoroute-cta__card {
    padding: 32px 24px 40px;
    gap: 24px;
    min-height: 240px;
  }

  .ekoroute-cta__content {
    gap: 24px;
    max-width: none;
  }

  .ekoroute-cta__title {
    font-size: 24px;
    line-height: 30px;
  }

  .ekoroute-cta__text {
    font-size: 15px;
    line-height: 19px;
  }

  .ekoroute-page__main {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 var(--layout-align-padding-x) 60px;
  }

  .ekoroute-page__col--aside {
    gap: 32px;
  }

  .ekoroute-spec {
    padding-bottom: 32px;
  }

  .ekoroute-spec__grid {
    gap: 16px 24px;
  }

  .ekoroute-desc__title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .ekoroute-gallery__head {
    padding-left: 16px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ekoroute-gallery__title {
    font-size: 24px;
    line-height: 32px;
  }

  .ekoroute-gallery__grid {
    gap: 16px;
  }

  .ekoroute-gallery__cell--wide {
    aspect-ratio: 16 / 9;
  }

  .ekoroute-videos {
    padding: 0 var(--layout-align-padding-x) 60px;
  }

  .ekoroute-videos__head {
    align-items: center;
    padding: 0 16px 16px;
    max-width: none;
  }

  .ekoroute-videos__title {
    font-size: 24px;
    line-height: 32px;
  }

  .ekoroute-videos__row {
    flex-direction: row;
    gap: 16px;
  }

  .ekoroute-video-card {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: stretch;
  }

  .ekoroute-video-card__thumb {
    flex: 0 0 42%;
    min-width: 0;
    max-width: none;
    aspect-ratio: 16 / 9;
    align-self: flex-start;
  }

  .ekoroute-video-card__body {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
  }

  .ekoroute-rules {
    padding-bottom: 48px;
  }

  .ekoroute-rules__title {
    font-size: 24px;
    line-height: 32px;
  }

  .ekoroute-rules__head {
    padding: 0;
    justify-content: flex-start;
  }

  .ekoroute-rules__inner {
    padding: 0;
    gap: 20px;
  }

  .ekoroute-rules__columns {
    flex-direction: column;
    gap: 32px;
  }

  .ekoroute-rules__lead,
  .ekoroute-rules__note {
    max-width: none;
  }

  .ekoroute-emergency {
    padding: 16px 20px;
  }

  .ekoroute-emergency__grid-spacer {
    display: none;
  }

  .ekoroute-emergency__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ekoroute-emergency__block--left,
  .ekoroute-emergency__block--right {
    grid-template-columns: 1fr;
    row-gap: 12px;
    column-gap: 0;
  }

  .ekoroute-emergency__phone {
    white-space: normal;
  }

  .ekoroute-map {
    padding: 0 var(--layout-align-padding-x) 60px;
  }

  .ekoroute-map__inner {
    max-width: none;
  }
}

/*
 * Видеоматериалы ≤620px = макет 375 (Figma 278-7536).
 * ВАЖНО: этот блок стоит ПОСЛЕ @media (max-width: 1080px) выше — иначе правила 1080 перебивают и получается «промежуточный» вид.
 */
@media (max-width: 620px) {
  .ekoroute-videos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 var(--layout-align-padding-x) 48px;
  }

  .ekoroute-videos__head {
    display: contents;
  }

  .ekoroute-videos__title {
    order: 1;
    margin: 0;
    padding: 0 16px;
    font-size: 20px;
    line-height: 28px;
  }

  .ekoroute-videos__viewport {
    order: 2;
    width: 100%;
  }

  .ekoroute-videos__nav {
    order: 3;
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    gap: 6px;
  }

  .ekoroute-icon-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  .ekoroute-video-card {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .ekoroute-video-card__thumb {
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 342 / 220;
    align-self: stretch;
  }

  .ekoroute-video-card__body {
    padding: 12px 4px 4px;
  }

  .ekoroute-video-card__meta {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-video-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .ekoroute-video-card__desc {
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 375px) {
  .ekoroute-page {
    padding-top: 24px;
  }

  .ekoroute-head {
    min-height: 220px;
    padding: 88px var(--layout-align-padding-x) 16px;
  }

  .ekoroute-head__content {
    row-gap: 0;
  }

  .ekoroute-head__crumbs-list {
    gap: 8px;
  }

  .ekoroute-head__title {
    gap: 0;
  }

  .ekoroute-head__crumb {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.96px;
  }

  .ekoroute-head__crumbs-sep {
    font-size: 12px;
    line-height: 16px;
  }

  .ekoroute-head__title-line:first-child {
    font-size: 22px;
    line-height: 28px;
  }

  .ekoroute-head__title-line:last-child {
    font-size: 18px;
    line-height: 24px;
  }

  .ekoroute-cta {
    padding: 0 var(--layout-align-padding-x) 32px;
  }

  .ekoroute-cta__card {
    padding: 24px 16px 32px;
    gap: 20px;
    border-radius: 16px;
    min-height: 200px;
  }

  .ekoroute-cta__content {
    gap: 20px;
  }

  .ekoroute-cta__title {
    font-size: 18px;
    line-height: 24px;
  }

  .ekoroute-cta__text {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-page__main {
    gap: 32px;
    padding-bottom: 48px;
  }

  /* .ekoroute-spec* — синхронно с @media (max-width: 560px) (одна колонка до узкого 375) */
  .ekoroute-spec__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ekoroute-spec__item--marking {
    grid-column: auto;
  }

  .ekoroute-spec__label {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.06em;
  }

  .ekoroute-spec__value,
  .ekoroute-spec__dur {
    font-size: 24px;
    line-height: 32px;
  }

  .ekoroute-desc__title {
    font-size: 20px;
    line-height: 28px;
  }

  .ekoroute-desc__subtitle {
    font-size: 18px;
    line-height: 26px;
  }

  .ekoroute-card--border {
    padding: 16px;
    border-radius: 16px;
  }

  .ekoroute-card__title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 16px;
  }

  .ekoroute-downloads__name,
  .ekoroute-downloads__hint {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-text-btn {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-osm-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 10px 20px 10px 10px;
  }

  /* Галерея: заголовок → сетка → «Посмотреть все» по центру (Figma 276-4681) */
  .ekoroute-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ekoroute-gallery__head {
    display: contents;
  }

  .ekoroute-gallery__title {
    order: 1;
    margin: 0;
    padding: 0 16px;
    font-size: 20px;
    line-height: 28px;
  }

  .ekoroute-gallery__grid {
    order: 2;
    gap: 12px;
  }

  .ekoroute-gallery__all {
    order: 3;
    align-self: center;
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-gallery__cell--wide {
    aspect-ratio: 342 / 165;
  }

  /* Видео: заголовок → карусель → стрелки по центру — синхронно с @media (max-width: 620px) (Figma 278-7536) */
  .ekoroute-videos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 var(--layout-align-padding-x) 48px;
  }

  .ekoroute-videos__head {
    display: contents;
  }

  .ekoroute-videos__title {
    order: 1;
    margin: 0;
    padding: 0 16px;
    font-size: 20px;
    line-height: 28px;
  }

  .ekoroute-videos__viewport {
    order: 2;
    width: 100%;
  }

  .ekoroute-videos__nav {
    order: 3;
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    gap: 6px;
  }

  .ekoroute-icon-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  .ekoroute-video-card {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .ekoroute-video-card__thumb {
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 342 / 220;
    align-self: stretch;
  }

  .ekoroute-video-card__body {
    padding: 12px 4px 4px;
  }

  .ekoroute-video-card__meta {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-video-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .ekoroute-video-card__desc {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-rules {
    padding-bottom: 40px;
  }

  .ekoroute-rules__title {
    font-size: 22px;
    line-height: 28px;
  }

  .ekoroute-rules__head {
    padding: 0;
  }

  .ekoroute-rules__inner {
    padding: 0;
    gap: 16px;
  }

  .ekoroute-rules__lead,
  .ekoroute-rules__col-title,
  .ekoroute-rules__list li,
  .ekoroute-rules__note {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-rules__columns {
    gap: 24px;
  }

  .ekoroute-emergency {
    padding: 12px 16px;
    border-radius: 16px;
  }

  .ekoroute-emergency__title {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-emergency__grid {
    gap: 20px;
  }

  .ekoroute-emergency__label,
  .ekoroute-emergency__phone {
    font-size: 14px;
    line-height: 18px;
  }

  .ekoroute-map {
    padding: 0 var(--layout-align-padding-x) 48px;
  }

  .ekoroute-map__inner {
    border-radius: 16px;
  }
}

/*
 * Шире 1080px: герой маршрута — фикс. высота 472px, фото на всю площадь (без max-height у img и без height:auto
 * у секции — иначе под изображением видна серая полоса). Зазоры между крошками и строками заголовка — 0.
 */
@media (min-width: 1081px) {
  .ekoroute-head {
    height: 472px;
    max-height: 472px;
    min-height: 472px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .ekoroute-head__bg img {
    max-height: none;
    min-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .ekoroute-head__content {
    row-gap: 0;
  }

  .ekoroute-head__title {
    gap: 0;
  }
}

/*
 * ≤660px — плитки маршрутов сразу переходят к макету 375 (Figma 63-483),
 * без промежуточного 768 (две колонки). Блок в самом конце файла, чтобы
 * каскад гарантированно перебил @media (max-width: 768px) и @media (min-width: 376px) and (max-width: 768px).
 */
@media (max-width: 660px) {
  .routes__grid,
  .routes-catalog__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .card-route--wide {
    grid-column: auto !important;
  }

  .card-route {
    min-height: 180px !important;
    padding: 12px;
    border-radius: 24px;
  }

  .routes__grid .card-route:nth-child(3) {
    min-height: 144px !important;
  }

  .card-route__badge {
    font-size: 20px;
    line-height: 28px;
    padding: 12px;
  }

  .card-route__body {
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .card-route__title {
    font-size: 20px;
    line-height: 28px;
    margin: 0;
  }

  .card-route__meta {
    font-size: 14px;
    line-height: 16px;
  }

  .routes {
    padding: 0 0 48px;
  }

  .routes-catalog {
    padding: 20px 0 48px;
  }

  /* Заголовок секции и кнопка «Смотреть все маршруты» — колонкой (кнопка под заголовком), как в макете 375 */
  .routes__title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px;
  }
}