/* ============================================================
 *  DICOM TEAM — responsive.css
 *  Один из 6 модульных CSS-файлов дизайн-системы.
 *  См. также: base, layout, hero, components, pages, responsive.
 * ============================================================ */

/* ============================================================
 *  RESPONSIVE
 * ============================================================ */

/* ≥1100 — десктоп (по умолчанию выше) */

/* <1100 — планшет крупный */
@media (max-width: 1099px) {
    .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero__cta { justify-content: center; }
    .hero__image { justify-content: center; }
    .hero__image img { width: 320px; }

    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 .card--wide { grid-column: auto; }
    .cases { grid-template-columns: repeat(2, 1fr); }
    .about { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .about__list { max-width: 100%; }
    .about__visual { justify-content: center; }
    .about__list li { padding-left: 0; }
    .about__list li::before { display: none; }
}

/* <900 — планшет малый / большой телефон */
@media (max-width: 899px) {
    .nav { display: none; }
    .burger { display: flex; }
    .site-header__right { display: none; }

    .section-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }
    .section-head__number { order: -1; justify-self: start !important; }
    .section-head--right .section-head__number,
    .section-head--left  .section-head__number { justify-self: start !important; }

    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .cases  { grid-template-columns: 1fr; }

    .form-card {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 32px;
        /* Страховка от вылета */
        max-width: 100%;
        overflow: hidden;
    }
    .form-card__right input,
    .form-card__right textarea {
        /* На мобильном текст с большим шрифтом, и инпут должен помещаться */
        /*width: 100%; */
        max-width: 100%;
        box-sizing: border-box;
    }

    .site-footer { grid-template-columns: 1fr; gap: 32px; padding: 60px var(--gutter); }
}

/* <640 — мобильный */
@media (max-width: 639px) {
    .site-header { padding: 16px 20px; }
    .hero { padding: 40px var(--gutter) 60px; }
    .card { padding: 24px; }
    .section-head__title { font-size: 32px; }
    .section-head__number { font-size: 72px; }

    /* На мобильных острова растягиваются на всю ширину
       (без боковых отступов и почти без радиуса) */
    .section { margin-left: 0; margin-right: 0; border-radius: 0; }
    .site-footer { margin-left: 0; margin-right: 0; border-radius: var(--r) var(--r) 0 0; }
}

/* Мобильное меню (раскрытое) */
.nav.is-open {
    display: block;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: #fff;
    padding: 24px var(--gutter);
    z-index: 99;
    border-top: 1px solid var(--c-line);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
.nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav.is-open .nav__link {
    padding: 16px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--c-line);
    display: block;
}
/* Пункт меню с подменю: индикатор-шеврон, который вращается при раскрытии */
.nav.is-open .nav__item--submenu > .nav__link {
    position: relative;
}
.nav.is-open .nav__item--submenu > .nav__link::after {
    /* Перебиваем десктопный шеврон от .nav__item--submenu > .nav__link::after */
    transform: translateY(-2px) rotate(45deg);
    margin-left: auto;
    position: absolute;
    right: 4px;
    top: 50%;
    transition: transform 0.2s;
}
.nav.is-open .nav__item--submenu.is-expanded > .nav__link::after {
    transform: translateY(-6px) rotate(-135deg);
}

/* Подменю по умолчанию свёрнуто на мобильных, раскрывается через .is-expanded */
.nav.is-open .nav__submenu {
    /* Перебиваем скрытие подменю от десктопного hover-эффекта */
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Но саму высоту прячем через max-height */
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    grid-template-columns: 1fr;
    min-width: 0;
    background: var(--c-bg-gray);
    border-radius: var(--r-sm);
    margin: 0;
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}
.nav.is-open .nav__item--submenu.is-expanded > .nav__submenu {
    max-height: 1000px;
    padding: 12px 16px 16px;
    margin: 8px 0;
}
.nav.is-open .nav__submenu::before {
    /* На мобильных подменю не должно иметь невидимую зону для hover —
       она перехватывает клики */
    display: none;
}
.nav.is-open .nav__submenu-section { gap: 8px; }
.nav.is-open .nav__submenu-title {
    margin-top: 8px;
    margin-bottom: 4px;
}
.nav.is-open .nav__submenu-link {
    padding: 12px;
    margin: 0;
    border-radius: var(--r-sm);
}
.nav.is-open .nav__submenu-link:hover { background: #fff; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .bg-squares { display: none; }
}