/* assets/css/mobile.css */

@media (max-width: 1024px) {

    /* --- GLOBAL FIXES --- */
    html,
    body {
        overflow-x: hidden;
        /* Разрешаем вертикальный скролл по умолчанию для всех страниц */
        overflow-y: auto;
        width: 100%;
        position: relative;
    }

    /* --- 1. ШАПКА (КРУПНАЯ) --- */
    .site-header {
        height: 75px;
        padding: 0 15px;
        background: #000;
        border-bottom: 1px solid #222;

        display: flex;
        align-items: center;
        justify-content: space-between;

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        box-sizing: border-box;
    }

    .logo-wrap {
        gap: 10px;
    }

    .logo-img {
        width: 55px;
        height: 55px;
        border-width: 2px;
    }

    .club-title {
        font-size: 1rem;
        line-height: 1.1;
    }

    .nav-menu,
    .header-phone {
        display: none !important;
    }

    .header-right {
        flex-direction: row;
        gap: 15px;
        align-items: center;
    }

    /* Скрываем всё десктопное в шапке */
    .social-icons,
    .header-address-desktop {
        display: none !important;
    }

    /* --- BURGER BUTTON --- */
    .burger-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 35px;
        height: 24px;
        background: transparent;
        padding: 0;
        z-index: 200;
    }

    .burger-btn span {
        width: 100%;
        height: 3px;
        background: var(--accent-red);
        border-radius: 2px;
        transition: 0.3s;
    }

    .burger-btn:active span {
        background: #fff;
    }

    /* --- MOBILE DRAWER (ШТОРКА СЛЕВА) --- */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(3px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu-drawer {
        position: absolute;
        top: 0;
        left: 0;
        /* СЛЕВА */
        width: 80%;
        max-width: 320px;
        height: 100%;
        background: rgba(15, 15, 15, 0.95);
        border-right: 1px solid var(--accent-red);
        transform: translateX(-100%);
        transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding: 40px 30px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8);
    }

    .mobile-menu-overlay.active .mobile-menu-drawer {
        transform: translateX(0);
    }

    .menu-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        color: #fff;
        font-size: 2.5rem;
        line-height: 1;
        margin: 0;
        padding: 0;
    }

    .menu-logo {
        margin-bottom: 50px;
        text-align: left;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 50px;
    }

    .mobile-link {
        font-family: var(--font-header);
        font-size: 1.4rem;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        cursor: pointer;
    }

    .mobile-link:active {
        color: var(--accent-red);
    }

    .mobile-contacts {
        margin-top: auto;
        text-align: left;
    }

    .mobile-phone {
        font-size: 1.2rem;
        color: var(--accent-red);
        font-weight: bold;
        display: block;
        margin-bottom: 20px;
    }

    .mobile-socials {
        display: flex;
        gap: 20px;
    }

    .mobile-socials .social-link {
        font-size: 2rem;
        color: #888;
    }

    .mobile-socials .social-link:active {
        color: #fff;
    }


    /* --- 2. ГЛАВНЫЙ КОНТЕЙНЕР --- */
    .hero-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100dvh;
        height: 100vh;
        width: 100%;
        padding: 110px 15px 0 15px;
        /* Опускаем весь контент ниже (было 85px) */
        overflow: hidden;
        box-sizing: border-box;
    }


    /* --- 3. ТРЕНЕР --- */
    .hero-visual {
        order: 1;
        width: 100%;
        flex: 0 1 auto;
        max-height: 55%;
        /* Увеличили место для тренера (было 48%) */
        min-height: 0;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: 0;
        z-index: 1;
        opacity: 1 !important;
    }

    .coach-img {
        max-height: 100%;
        width: auto;
        max-width: 90%;
        object-fit: contain;
        object-position: bottom center;
        filter: contrast(1.1);
        -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    }

    .glow-effect {
        width: 180px;
        height: 180px;
        opacity: 0.4;
        filter: blur(50px);
        position: absolute;
        bottom: 10%;
    }


    /* --- 4. ТЕКСТ --- */
    .hero-content {
        order: 2;
        width: 100%;
        text-align: center;
        z-index: 10;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 35px;
        /* Еще на 10px вниз (было 25px) */
    }

    .hero-subtitle {
        font-size: 0.7rem;
        margin-bottom: 5px;
        letter-spacing: 1.5px;
        color: #dd2735;
        opacity: 0.9;
    }

    .hero-content h1 {
        font-size: 2.4rem;
        line-height: 0.95;
        margin-bottom: 10px;
    }

    .vertical-line {
        display: none;
    }

    .hero-description {
        font-size: 0.8rem;
        color: #aaa;
        margin: 0 auto 15px auto;
        padding: 0;
        line-height: 1.3;
        max-width: 90%;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .main-btn {
        width: 100%;
        max-width: 250px;
        padding: 15px 0;
        font-size: 0.9rem;
        margin: 0 auto;
        display: block;
    }


    /* --- ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ --- */
    @media (max-height: 700px) {
        .hero-description {
            display: none !important;
        }

        .hero-visual {
            max-height: 40%;
        }

        .hero-content {
            margin-top: -20px;
        }
    }

    /* --- ФОН --- */
    .bg-kanji {
        font-size: 25vh;
        top: 25%;
        opacity: 0.03;
    }

    .japan-vertical-text {
        display: none;
    }

    /* --- КОНТАКТЫ (MOBILE LAYOUT) --- */
    .contacts-grid {
        grid-template-columns: 1fr !important;
        /* Одна колонка */
        gap: 30px;
        padding-top: 20px;
    }

    .contacts-info-panel {
        order: -1;
        gap: 20px;
    }

    .contacts-info-panel .section-title {
        font-size: 2.2rem;
        text-align: center;
    }

    .contact-card {
        padding: 15px;
        gap: 15px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        background: rgba(221, 39, 53, 0.1);
        color: var(--accent-red);
        border-color: var(--accent-red);
    }

    .card-content h4 {
        font-size: 0.75rem;
    }

    .card-content p,
    .card-content .phone-link {
        font-size: 1rem;
    }

    .wa-btn-mini {
        font-size: 1.8rem;
    }

    .map-wrapper {
        margin-top: 10px;
        padding: 5px;
    }

    .custom-map {
        height: 300px;
        filter: grayscale(0%);
    }

    .map-corner {
        width: 15px;
        height: 15px;
    }

    /* --- 5. АДАПТИВНОСТЬ ВНУТРЕННИХ СТРАНИЦ --- */

    /* ОБЩЕЕ ДЛЯ КОНТЕНТА */
    .content-layer {
        padding: 90px 15px 40px 15px;
        /* Отступ сверху больше высоты шапки */
    }

    .section-title {
        font-size: 2.2rem;
    }

    /* ИСТОРИЯ */
    .history-layout {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .photo-wrapper {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }


    .history-photo {
        width: 100%;
        height: auto !important;
        object-fit: cover;
        object-position: top center;
        max-height: 500px;
        /* Ограничиваем высоту, чтобы не была слишком огромной */
    }

    .history-info {
        width: 100%;
        text-align: center;
        padding: 0;
    }

    .history-text {
        text-align: left;
        font-size: 0.95rem;
    }

    .history-info h2 {
        font-size: 2.2rem;
        margin-top: 10px;
    }

    /* ГАЛЕРЕЯ (НАША ЖИЗНЬ) */
    .kudo-gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }

    .gallery-card {
        height: 240px;
    }

    .gallery-card.wide {
        grid-column: span 1;
    }

    .gallery-card .overlay span {
        font-size: 1.5rem;
    }

    /* РАСПИСАНИЕ */
    .schedule-wrapper {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .schedule-box {
        width: 90%;
        /* Сделали блок уже (90%) */
        margin: 0 auto;
        /* Центрировали */
        padding: 12px;
    }

    .schedule-title {
        font-size: 2rem;
    }

    .schedule-box h3 {
        font-size: 1rem;
        /* Уменьшили заголовок */
    }

    .time-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        /* Уменьшили gap */
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 5px;
    }

    .time-row:last-child {
        border-bottom: none;
    }

    .time-row .time {
        font-size: 0.8rem;
        /* Уменьшили время */
        color: #fff;
        align-self: auto;
        white-space: nowrap;
        text-align: right;
    }

    /* Уменьшаем шрифт названия группы */
    .time-row div span:first-child {
        font-size: 0.9rem !important;
    }



    /* Кнопка НАЗАД (общая) */
    .back-btn {
        width: 100%;
        max-width: 200px;
        padding: 12px 0;
    }
}