/* HSK — подключить ПОСЛЕ основного CSS ВМЕСТО старого файла media.css.
   Правила вне @media исправляют ограничения базовой верстки. */

/* Сжатие колонок и перенос длинного контента без обрезания. */
:where(.section-hero__items, .section-hero__right, .section-hero__about,
.section-hero__specs, .hero__specs, .section-about__grid, .directions__grid,
.equip__top, .equip__bottom, .section-cta__grid, .steps__grid,
.footer__top, .footer__contact, .valves-about__inner) > * {
    min-width: 0;
}
:where(.section-hero__text, .section-hero__card--text,
.section-hero__about--card, .section-about__text, .section-about__card--text,
.directions__card--text, .steps__card--text, .section-cta__left,
.section-cta__content, .valves-about__content, .hero__specs--card,
.section-hero__specs--card, .equipment__label, .request-modal__head) {
    min-width: 0;
}
.hero__specs { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-hero__item {
    height: auto;
    min-height: 38px;
    padding: 9px 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.section-hero__item span,
.section-about__tag span { flex-shrink: 0; }
.section-hero__btns,
.section-cta__btns { flex-wrap: wrap; }
.section-hero__btn,
.section-hero__btn--link,
.section-cta__btn {
    height: auto;
    min-height: 44px;
    max-width: 100%;
    padding: 11px 22px;
    line-height: 1.4;
    white-space: normal;
}
.section-hero__about--card:only-child,
.section-hero__about--img:only-child { grid-column: 1 / -1; }
.contacts-form input { height: auto; min-height: 48px; }
.contacts-form textarea,
.request-modal__field textarea { resize: vertical; }
.mobile_menu {
    height: 100vh;
    height: 100dvh;
    overscroll-behavior-y: contain;
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
}
.mobile_menu.active { visibility: visible; }
.mobile_menu--head,
.mobile_menu--footer { flex-shrink: 0; }
.mobile_menu--links { flex-shrink: 0; }
.request-modal__content {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overscroll-behavior-y: contain;
}
:where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid #e87722;
    outline-offset: 4px;
}

/* Полная навигация уже тесна при ширине 1200–1279px. */
@media (max-width: 1279.98px) {
    .burger { display: flex; flex-shrink: 0; }
    .navbar > .navbar__list,
    .navbar > .navbar__actions { display: none; }
}

/* Ноутбуки и планшеты: более компактные карточки. */
@media (max-width: 1199.98px) {
    .section-hero { padding-top: 96px; }
    .section-hero__items { flex-direction: column; padding-top: 28px; }
    .section-hero__left,
    .section-hero__right { max-width: none; height: auto; }
    .section-hero__right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
    .section-hero__img { height: auto; min-height: 300px; position: relative; }
    .section-hero__img img { position: absolute; inset: 0; }
    .section-hero__top,
    .section-hero__top.rvd { padding: 36px; }
    .section-hero__card,
    .section-hero__card.rvd { padding: 28px; gap: 22px; }
    .section-hero__about--card { padding: 32px; }
    .section-hero__text h1,
    .section-hero__about--card h1,
    .section-cta__left h2 { font-size: 44px; }
    .section-about__text h2,
    .valves-about__title { font-size: 40px; }
    .section-about__card { padding: 30px 24px; }
    .section-hero__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .section-hero__specs--card p { font-size: 26px; }
    .hero__specs--card { padding: 24px; }
    .equip__top { grid-template-columns: 1.4fr 1fr; }
    .equip__bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .equip__top .equipment__card,
    .equip__bottom .equipment__card { min-height: 0; height: 360px; }
    .equipment__label { left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 18px; }
    .equipment__label h3 { font-size: 22px; }
    .equipment__label br { display: none; }
    .section-cta__left { padding: 32px; }
    .section-cta__content { padding: 120px 28px 28px; }
    .footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .footer__contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contact__card--row.you { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .valves-about__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .valves-about__content { padding: 30px; gap: 24px; }
}

/* Планшеты: двухколоночные карточки, крупные секции в одну колонку. */
@media (max-width: 991.98px) {
    .section-about,
    .equipment { padding: 64px 0; }
    .section-about.section-about--first { padding: 64px 0 0; }
    .valves-about { padding-top: 64px; }
    .section-cta,
    .section-step.hydro { padding-bottom: 64px; }
    .section-about__top { gap: 24px; margin-bottom: 32px; }
    .section-about__text { flex-direction: column; gap: 20px; }
    .section-hero__text h1,
    .section-hero__about--card h1,
    .section-cta__left h2,
    .section-about__text h2,
    .valves-about__title { font-size: 38px; line-height: 1.14; letter-spacing: -.04em; }
    .section-hero__text p,
    .section-about__text p,
    .section-hero__about--desc p,
    .valves-about__text { font-size: 17px; line-height: 1.5; }
    .section-about__grid,
    .directions__grid,
    .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-hero__about,
    .section-cta__grid,
    .valves-about__inner { grid-template-columns: minmax(0, 1fr); }
    .section-hero__about--img,
    .valves-about__image { height: auto; aspect-ratio: 16 / 9; }
    .section-hero__about--img img,
    .valves-about__image img { height: 100%; }
    .equip__top,
    .equip__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .equip__bottom > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .equip__top .equipment__card,
    .equip__bottom .equipment__card { height: 340px; }
    .steps__grid::before { display: none; }
    .steps__card { padding: 28px 24px; }
    .steps__number { padding: 24px 0 16px; }
    .steps__card--text { gap: 16px; }
    .steps__card--text h3,
    .directions__card--text h3,
    .section-hero__card--text h2 { font-size: 26px; }
    .contact__card--row.you { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contacts-map { padding: 32px 0 64px; }
    .contacts-map__wrapper { height: 400px; }
}

/* Телефоны и небольшие планшеты. */
@media (max-width: 767.98px) {
    .container { padding-inline: 16px; }
    .header { padding: 14px 0; }
    .navbar__logo { max-width: 115px; height: auto; }
    .section-hero { padding-top: 78px; }
    section[id] { scroll-margin-top: 92px; }
    .section-hero__items,
    .section-hero__about { padding-top: 20px; gap: 16px; }
    .section-hero__left,
    .section-hero__right { gap: 16px; }
    .section-hero__right { grid-template-columns: minmax(0, 1fr); }
    .section-hero__top,
    .section-hero__top.rvd,
    .section-hero__card,
    .section-hero__card.rvd,
    .section-hero__about--card,
    .section-cta__left,
    .valves-about__content { padding: 28px 24px; gap: 24px; }
    .section-hero__text { gap: 20px; }
    .section-hero__text h1,
    .section-hero__about--card h1,
    .section-cta__left h2,
    .section-about__text h2,
    .valves-about__title { font-size: clamp(28px, 4.6vw, 36px); }
    .section-hero__text p,
    .section-about__text p,
    .section-hero__about--desc p,
    .valves-about__text { font-size: 16px; line-height: 1.5; }
    .section-hero__text br,
    .section-about__text br,
    .section-about__card--text h3 br,
    .steps__card--text h3 br,
    .directions__card--text h3 br,
    .valves-about__title br { display: none; }
    .section-about,
    .equipment { padding: 48px 0; }
    .section-about.section-about--first { padding: 48px 0 0; }
    .valves-about { padding-top: 48px; }
    .section-cta,
    .section-step.hydro { padding-bottom: 48px; }
    .section-about__top { gap: 20px; margin-bottom: 28px; }
    .section-about__tag { max-width: 100%; font-size: 11px; letter-spacing: .18em; line-height: 1.5; }
    .section-hero__img,
    .section-hero__about--img,
    .valves-about__image { position: static; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .section-hero__img img { position: static; height: 100%; }
    .section-hero__specs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .section-hero__specs--card { padding: 20px; gap: 6px; }
    .section-hero__specs--card p { font-size: 26px; }
    .hero__specs { gap: 12px; }
    .hero__specs--card { padding: 22px; gap: 12px; }
    .hero__specs--card p { font-size: 24px; line-height: 1.25; }
    .hero__specs--card span { font-size: 16px; line-height: 1.5; }
    .section-hero__btns,
    .section-cta__btns { width: 100%; gap: 10px; align-items: stretch; }
    .section-hero__btn,
    .section-hero__btn--link,
    .section-cta__btn { min-height: 48px; padding: 12px 18px; flex: 1 1 200px; }
    .section-about__card { padding: 26px 22px; gap: 20px; }
    .section-about__card--text { gap: 16px; }
    .section-about__card--text h3,
    .section-hero__card--text h2,
    .section-hero__card--text.text-2 h2,
    .directions__card--text h3,
    .steps__card--text h3,
    .section-cta__content h3 { font-size: 24px; line-height: 1.25; }
    .directions__card--img { height: auto; aspect-ratio: 4 / 3; }
    .directions__card--content { padding: 52px 22px 24px; gap: 24px; }
    .directions__card--text { gap: 16px; }
    .directions__card--btn { min-height: 44px; }
    .equip__top,
    .equip__bottom { grid-template-columns: minmax(0, 1fr); }
    .equip__top .equipment__card,
    .equip__bottom .equipment__card {
        height: auto; min-height: 0;
        display: flex; flex-direction: column;
    }
    .equipment__card img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
    .equipment__label {
        position: static; margin: 0; max-width: none; width: 100%;
        border: 0; border-top: 1px solid #dadada; border-radius: 0;
        padding: 20px;
    }
    .equipment__label h3 { font-size: 22px; line-height: 1.3; }
    .equipment__label p { font-size: 14px; line-height: 1.5; }
    .section-cta__right--img { height: auto; aspect-ratio: 16 / 10; }
    .section-cta__content { margin-top: -24px; padding: 48px 24px 24px; gap: 24px; }
    .section-hero__top, .section-hero__card, .section-hero__img,
    .section-hero__about--card, .section-hero__about--img,
    .section-about__card, .directions__card--img, .directions__card--content,
    .equipment__card, .section-cta__left, .section-cta__right,
    .section-cta__right--img, .section-cta__content, .steps__card,
    .valves-about__image, .valves-about__content { border-radius: 24px; }
    .footer__top { padding: 32px 0; gap: 28px; }
    .footer__cta { gap: 22px; }
    .footer__cta h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.04em; }
    .footer__contact { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .footer__contact--card { padding: 24px; gap: 18px; border-radius: 24px; }
    .footer__copy { padding: 24px 0 88px; }
    .footer__copy .container { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer__copy--site,
    .footer__copy--link { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
    .contact__card { padding: 24px 0; }
    .contact__card--head,
    .contact__card--head.form { padding: 0 22px 22px; }
    .contact__card--head h2 { font-size: 28px; line-height: 1.2; }
    .contact__card--row { padding: 24px 22px; gap: 14px; }
    .contact__card--row.you { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .contact__card--row-item { gap: 14px; }
    .contact__catd--img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; }
    .contact__catd--img img { max-width: 24px; max-height: 24px; }
    .contact__card--content > a,
    .contact__card--content > a[href^="tel:"] { font-size: 18px; line-height: 1.5; }
    .contact__card--content > span,
    .contact__card--content p { font-size: 16px; line-height: 1.5; }
    .contacts-form { padding: 24px 22px 0; gap: 16px; }
    .contacts-form input,
    .contacts-form textarea { padding: 13px 16px; font-size: 16px; }
    .contacts-form input::placeholder { font-size: 16px; }
    .contacts-form__btn { width: 100%; min-height: 48px; padding: 14px 20px; }
    .contacts-map { padding: 28px 0 48px; }
    .contacts-map__wrapper { height: 340px; }
    .hsk-brands { --hsk-gap: 28px; width: calc(100% - 32px); padding: 20px 0; border-radius: 22px; }
    .hsk-brands__item { flex-basis: 112px; width: 112px; height: 40px; }
    .hero__socials {
        gap: 8px; right: max(12px, env(safe-area-inset-right));
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .hero__social { width: 48px; height: 48px; }
    .to-top { margin-bottom: -56px; }
    .to-top.active { margin-bottom: 0; }
    .mobile_menu { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
    .mobile_menu--logo { width: 115px; }
    .mobile_menu--links { gap: 12px; padding: 28px 0; }
    .mobile_menu--link { font-size: 26px; min-height: 44px; padding: 6px 0; }
    .mobile_menu--footer { padding-top: 12px; gap: 16px; }
    .lang-option { min-width: 44px; min-height: 44px; }
}

/* Узкие телефоны: один столбец без сжатия текста. */
@media (max-width: 575.98px) {
    .section-about__grid,
    .directions__grid,
    .steps__grid,
    .hero__specs { grid-template-columns: minmax(0, 1fr); }
    .section-hero__top,
    .section-hero__top.rvd,
    .section-hero__card,
    .section-hero__card.rvd,
    .section-hero__about--card,
    .section-cta__left,
    .valves-about__content { padding: 24px 20px; }
    .section-hero__btns,
    .section-cta__btns { flex-direction: column; }
    .section-hero__btn,
    .section-hero__btn--link,
    .section-cta__btn { flex: none; width: 100%; }
    .hero__specs--card { padding: 22px 20px; }
    .hero__specs--card br { display: none; }
    .contact__card--content > a[href^="tel:"] { white-space: normal; }
    .contacts-map__wrapper { height: 300px; }
    .request-modal { padding: 12px; align-items: center; }
    .request-modal__content {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 28px 20px calc(22px + env(safe-area-inset-bottom));
        border-radius: 24px;
    }
    .request-modal__close { top: 12px; right: 12px; width: 44px; height: 44px; }
    .request-modal__head { padding-right: 38px; margin-bottom: 22px; }
    .request-modal__head h2 { font-size: 28px; }
    .request-modal__head p { font-size: 15px; }
    .request-modal__tag { padding: 7px 10px; font-size: 10px; letter-spacing: .12em; }
    .request-modal__field input { height: 50px; }
    .request-modal__field textarea { height: 110px; }
    .request-modal__btn { width: 100%; min-width: 0; }
    .request-toast {
        right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
        width: calc(100% - 24px); max-width: 360px; border-radius: 18px;
    }
}

@media (max-width: 359.98px) {
    .container { padding-inline: 12px; }
    .section-hero__top,
    .section-hero__top.rvd,
    .section-hero__card,
    .section-hero__card.rvd,
    .section-hero__about--card,
    .section-cta__left,
    .valves-about__content { padding: 22px 16px; }
    .section-hero__text h1,
    .section-hero__about--card h1,
    .section-about__text h2,
    .section-cta__left h2,
    .valves-about__title { font-size: 26px; }
    .contact__card--row,
    .contact__card--row-item { gap: 10px; }
    .contact__card--row { padding-inline: 16px; }
    .contact__card--content > a,
    .contact__card--content > a[href^="tel:"] { font-size: 16px; }
    .hsk-brands { width: calc(100% - 24px); }
}

/* Невысокие экраны, в том числе телефон в альбомной ориентации. */
@media (max-width: 1279.98px) and (max-height: 600px) {
    .mobile_menu--links { justify-content: flex-start; gap: 8px; padding: 20px 0; }
    .mobile_menu--link { font-size: 22px; min-height: 44px; }
    .request-modal { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mobile_menu, .burger span, .hero__social, .to-top,
    .request-modal, .request-modal__content, .request-toast,
    .equipment__card img, .directions__card--img img { transition: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hsk-brands__window { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    /* Перекрывает transform, который может задаваться JS бегущей строки. */
    .hsk-brands__track { transform: none !important; animation: none !important; will-change: auto; }
}



/* Шапка только для казахской версии */
@media (min-width: 1280px) {
    .lang-kz .navbar {
        gap: 12px;
    }

    .lang-kz .navbar__logo {
        flex: 0 0 131px;
        height: auto;
    }

    .lang-kz .navbar > .navbar__list {
        flex: 0 0 auto;
        gap: 6px;
    }

    .lang-kz .navbar__list > li {
        flex-shrink: 0;
    }

    .lang-kz .navbar__list--link,
    .lang-kz .navbar__list--link.active {
        padding: 0 10px;
        height: 44px;
        font-size: 16px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .lang-kz .navbar > .navbar__actions {
        flex: 0 0 auto;
        gap: 10px;
    }

    .lang-kz .navbar__actions .lang-switch {
        height: 44px;
    }

    .lang-kz .navbar__actions .lang-switch__btn,
    .lang-kz .navbar__actions .lang-switch__btn.active {
        padding: 4px 8px;
        font-size: 16px;
        letter-spacing: .1em;
    }

    .lang-kz .navbar__actions .navbar__btn {
        flex-shrink: 0;
        height: 44px;
        padding: 0 16px;
        font-size: 16px;
        line-height: 1.2;
        white-space: nowrap;
    }
}