/* ============================================================
   SOUNDICAR — MOBILE & TABLET ADAPTIVE CSS
   Breakpoints: 1000 / 900 / 768 / 480 / 360
   ============================================================ */

/* ============================================================
   HAMBURGER BUTTON — всегда виден на тёмном фоне
   ============================================================ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    z-index: 1100;
    transition: border-color 0.2s, background 0.2s;
}

.hamburger:hover {
    background: rgba(196, 18, 46, 0.15);
    border-color: #c4122e;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Иконка → крестик при открытии */
.hamburger.active {
    border-color: #c4122e;
    background: rgba(196, 18, 46, 0.12);
}
.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   DROPDOWN МЕНЮ «УСЛУГИ» — десктоп
   ============================================================ */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.dropdown-arrow {
    font-size: 0.65rem;
    transition: transform 0.25s ease;
    display: inline-block;
    opacity: 0.7;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: rgba(8, 8, 8, 0.97);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid #c4122e;
    border-radius: 0 0 6px 6px;
    padding: 6px 0;
    z-index: 2000;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);

    /* Плавное появление */
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 0.88rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin: 0;
    transition: color 0.15s, background 0.15s, padding-left 0.15s;
    white-space: nowrap;
}

.nav-dropdown-menu a:last-child {
    border-bottom: none;
}

.nav-dropdown-menu a:hover {
    color: #fff;
    background: rgba(196, 18, 46, 0.1);
    padding-left: 26px;
}

/* Треугольник-стрелочка сверху дропдауна */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: #c4122e;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ (nav overlay)
   ============================================================ */
@media (max-width: 768px) {

    .hamburger { display: flex; }

    header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(8, 8, 8, 0.98);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(196, 18, 46, 0.3);
        padding: 8px 0;
        flex-direction: column;
        z-index: 999;
    }

    header.nav-open nav { display: flex; }

    header nav a {
        display: block;
        padding: 16px 5%;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin: 0;
        letter-spacing: 1px;
    }

    header nav a:last-child { border-bottom: none; }

    header nav a:hover,
    header nav a:active {
        color: #c4122e;
        background: rgba(196, 18, 46, 0.06);
    }

    /* Dropdown в мобильном меню */
    .nav-dropdown {
        display: block;
        width: 100%;
    }

    .nav-dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 5%;
        font-size: 1rem;
        color: #ccc;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .nav-dropdown-toggle:hover { color: #c4122e; }

    /* Подменю на мобиле — встроенное, не абсолютное */
    .nav-dropdown-menu {
        position: static;
        transform: none !important;
        left: auto;
        top: auto;
        min-width: 0;
        width: 100%;
        background: rgba(196, 18, 46, 0.05);
        border-top: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-menu { display: block; }

    .nav-dropdown-menu::before { display: none; }

    .nav-dropdown-menu a {
        padding: 13px 5% 13px 10%;
        font-size: 0.9rem;
        color: #aaa;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        white-space: normal;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .nav-dropdown-menu a:hover { padding-left: 10%; color: #c4122e; }

    .header-container {
        justify-content: space-between;
        position: relative;
    }

    header { position: fixed; }
}

/* ============================================================
   ПЛАНШЕТЫ (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {

    .services-section,
    .trust-section,
    .cases-section,
    .reviews-section,
    .cta-section {
        padding: 70px 5%;
    }

    /* Trust section — стек */
    .trust-section { flex-direction: column; }
    .trust-video-wrapper { width: 100%; min-height: 320px; }

    /* Hero trust stats — скрыть */
    .hero-trust-stats { display: none; }

    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ============================================================
   СМАРТФОНЫ (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    .header-phones { display: none; }

    /* ── HERO ────────────────────────────── */
    .hero { height: 88vh; min-height: 480px; }
    h1 { font-size: 2.5rem !important; line-height: 1.15; }
    .subtitle { font-size: 0.95rem; max-width: 100%; }
    .main-cta-btn { padding: 14px 26px; font-size: 0.9rem; }
    .hero-bottom-bar {
        flex-direction: column-reverse;
        align-items: flex-start;
        bottom: 20px;
        gap: 12px;
        padding: 0 5%;
    }
    .big-phone { font-size: 1.85rem; }
    .socials-block { margin-bottom: 5px; }

    /* ── УСЛУГИ — компактные карточки 2 в ряд ── */
    .services-section { padding: 55px 4%; }
    .section-title { font-size: 1.9rem; margin-bottom: 30px; }
    .services-seo-text { display: none; } /* убираем SEO-текст на моб */

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

    /* Компактная карточка: прямоугольник с фото + overlay */
    .service-card {
        height: 130px;
        border-radius: 6px;
        padding: 10px 12px;
    }
    .service-num {
        font-size: 18px;
        top: 8px;
        right: 8px;
        opacity: 0.7;
    }
    .service-title {
        font-size: 0.9rem;
        line-height: 1.2;
        font-weight: 700;
    }
    /* Скрыть описание — видно только заголовок */
    .service-desc { display: none; }
    .service-content {
        transform: translateY(0);
        padding: 8px 10px;
        justify-content: flex-end;
    }
    /* Кнопка «Рассчитать» — полная ширина */
    .services-grid > a:last-child {
        grid-column: 1 / -1;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        letter-spacing: 1.5px;
    }

    /* ── ДОВЕРИЕ ─────────────────────────── */
    .trust-section { padding: 55px 4%; }
    .trust-title { font-size: 1.8rem; }
    .trust-p { font-size: 0.9rem; }
    .trust-video-wrapper { min-height: 260px; }

    /* ── КЕЙСЫ ───────────────────────────── */
    .cases-section { padding: 55px 4%; }
    .cases-slider {
        gap: 14px;
        padding: 0 4%;
        margin-left: -4%;
        width: 100vw;
    }
    .case-card { width: 260px; min-width: 250px; }
    .case-title { font-size: 1.15rem; }

    /* ── ОТЗЫВЫ — горизонтальный слайдер ─── */
    .reviews-section { padding: 55px 0; }
    .reviews-header { padding: 0 4%; margin-bottom: 30px; }

    .reviews-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;       /* Firefox */
        gap: 14px;
        padding: 0 4% 16px;
    }
    .reviews-grid::-webkit-scrollbar { display: none; }

    .review-card {
        flex: 0 0 82vw;
        max-width: 340px;
        scroll-snap-align: start;
        padding: 22px 18px;
    }
    .review-text { font-size: 0.9rem; margin-bottom: 14px; }

    /* Подсказка «листать» */
    .reviews-section::after {
        content: '← свайп →';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #555;
        letter-spacing: 2px;
        margin-top: 12px;
        text-transform: uppercase;
    }

    /* ── CTA — компактнее ────────────────── */
    .cta-section { padding: 40px 4%; }
    .cta-container {
        flex-direction: column;
        padding: 24px 18px;
        gap: 20px;
        border-radius: 6px;
    }
    .cta-title { font-size: 1.65rem; text-align: center; }
    .cta-desc { font-size: 0.88rem; text-align: center; }
    .cta-personal-touch {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .cta-master-photo {
        width: 54px;
        height: 54px;
        min-width: 54px;
        margin-right: 0;
        margin-bottom: 0;
        padding: 0;
    }
    .cta-guarantee p { font-size: 0.78rem; }
    .cta-form-wrapper { width: 100%; gap: 14px; }
    .submit-btn { width: 100%; padding: 15px; }

    /* ── ПОДВАЛ — компактный ─────────────── */
    footer { padding: 28px 4% 20px; }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding-bottom: 20px;
    }
    .footer-column h4 { font-size: 0.85rem; margin-bottom: 10px; }
    .footer-column a { font-size: 0.82rem; margin-bottom: 6px; }
    .footer-phone { font-size: 1rem; }
    .footer-copyright {
        font-size: 0.72rem;
        margin-top: 12px;
        line-height: 1.5;
    }

    /* Case page */
    .project-hero-image { height: 250px; }
    .project-header h1 { font-size: 1.9rem; }
    .details-grid { grid-template-columns: 1fr; }
    .detail-item { min-width: 100%; }
    .equipment-grid { grid-template-columns: 1fr; }
    .equipment-image-wrapper { order: -1; }

    /* Config */
    .config-container { flex-direction: column; }
    .visual-column { position: relative; top: 0; width: 100%; order: -1; }
    .car-schematic { margin: 0 auto 25px auto; height: 300px; width: 170px; }
}

/* ============================================================
   МАЛЕНЬКИЕ СМАРТФОНЫ (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

    header { padding: 10px 4%; }
    .header-logo { font-size: 1.35rem !important; }
    .whatsapp-btn { padding: 7px 10px; font-size: 0.78rem; }

    h1 { font-size: 1.95rem !important; }
    .subtitle { font-size: 0.88rem; }
    .main-cta-btn { padding: 13px 20px; font-size: 0.85rem; }
    .big-phone { font-size: 1.55rem; }
    .social-icon { width: 36px; height: 36px; }

    /* Услуги — чуть ниже */
    .service-card { height: 115px; }
    .service-title { font-size: 0.82rem; }

    /* Отзывы */
    .review-card { flex: 0 0 88vw; padding: 18px 14px; }
    .review-text { font-size: 0.85rem; }

    /* Кейсы */
    .case-card { width: 240px; min-width: 230px; }
    .case-title { font-size: 1rem; }
    .case-subtitle { font-size: 0.8rem; }

    /* CTA */
    .cta-title { font-size: 1.45rem; }
    .cta-container { padding: 20px 14px; }

    /* Footer — скрыть лишние колонки, оставить контакты и навигацию */
    footer { padding: 20px 4% 14px; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    /* Скрыть 3-ю и 4-ю колонку на маленьких экранах */
    .footer-column:nth-child(3),
    .footer-column:nth-child(4) { display: none; }
    .footer-copyright { font-size: 0.68rem; margin-top: 10px; }

    /* Case */
    .project-hero-image { height: 200px; }
    .project-header h1 { font-size: 1.6rem; }
    .car-schematic { height: 260px; width: 150px; }
}

/* ============================================================
   ОЧЕНЬ МАЛЕНЬКИЕ (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {

    header { padding: 8px 4%; }
    .header-logo { font-size: 1.2rem !important; }

    h1 { font-size: 1.65rem !important; }
    .main-cta-btn { display: block; text-align: center; padding: 12px 16px; }
    .big-phone { font-size: 1.3rem; }

    .service-card { height: 100px; }
    .service-title { font-size: 0.78rem; }

    .review-card { flex: 0 0 92vw; }
    .case-card { width: 215px; min-width: 210px; }

    .cta-title { font-size: 1.25rem; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-column:nth-child(3),
    .footer-column:nth-child(4) { display: none; }

    .project-hero-image { height: 160px; }
}