/* mobile-style.css - Comprehensive mobile styles for Allengual website */

/* Base responsive rules for tablets and mobile devices */
@media screen and (max-width: 860px) {
    /* General section adjustments */
    .section-container {
        gap: 64px; /* Reduce gap between sections on mobile */
    }

    /* Hero section */
    .hero-section {
        height: 80px;
    }

    .crm-atp-logo {
        font-size: 66px;
    }
    html[lang="ru"] .crm-atp-logo {
        font-size: 66px;
    }

    .crm-atp {
        font-size: 32px;
    }
    /* Russian specific */
    html[lang="ru"] .crm-atp {
        font-size: 30px; /* Adjust as needed */
    }

    /* Keep the top position consistent for the main title */
    .div[data-i18n="main_title"] {
        margin-top: 0; /* Reset any margins */
        padding-top: 0; /* Reset any padding */
    }

    .div {
        font-size: 38px; /* Smaller font for main heading */
    }

    .crm-atp {
        width: 100%;
        /*font-size: 18px;*/
    }
    .course-subtitle {
        width: 100%;
        /*font-size: 18px;*/
    }

    .buttons {
        flex-direction: column;
        width: 100%;
    }

    .button-do-test,
    .button-do-reservation {
        width: calc(100% - 120px);
    }

    .frame-solution-texts-title {
        font-size: 24px;
        text-align: center;
    }

    .frame-solution-row {
        grid-template-columns: repeat(1, 1fr);
    }

    .frame-solution-row2 {
        display: grid;   /* ← MUST be here */
        grid-template-columns: 1fr 24px 1fr 24px;
        grid-auto-rows: auto;
        transition: all 0.3s ease;
    }
    /* show cards */
    .frame-solution-row2 > div.frame-solution-column2:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }; /* 1-st block */
    .frame-solution-row2 > :nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    } /* 1-st row */
    .frame-solution-row2 > .arrow-1 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    } /* 1-st row repeated */
    .frame-solution-row2 > div.frame-solution-column2:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    } /* 2-st block */
    .frame-solution-row2 > div:nth-child(4) {
        grid-column: 4;
        grid-row: 1;
    } /* 2-st arrow */
    .frame-solution-row2 > div:nth-child(5) {
        grid-column: 1;
        grid-row: 2 !important;
        margin-bottom: 0 !important;
    } /* 3-rd block */
    .frame-solution-row2 > div:nth-child(6) {
        grid-column: 2;
        grid-row: 2 !important;
        margin-bottom: 0 !important;
    } /* 3-rd arrow */
    .frame-solution-row2 > div:nth-child(7) {
        grid-column: 3;
        grid-row: 2;
        margin-bottom: 0 !important;
    } /* 4-th block */
    .frame-solution-row2 > div:nth-child(8) {
        grid-column: 4;
        grid-row: 2;
    } /* 4-th arrow */
    .frame-solution-row2 > div:nth-child(9) {
        grid-column: 1 / 4;
        grid-row: 3;
        margin-top: 16px;
    } /* 4-th block */


    /* ATP Main Description */
    .frame-solution-texts {
        width: 100%;
        position: static;
    }

    .frame-whom-card {
        grid-template-columns: repeat(1, 1fr);
        gap: 36px;
    }
    /* Assuming image is first child and text is second child */
    .frame-whom-card > :nth-child(1) {
        order: 2; /* Move image to second position */
    }
    .frame-whom-card > :nth-child(2) {
        order: 1; /* Move text to first position */
    }

    .frame-whom-card-item-text {
        font-size: 16px;
    }

    /* Who Benefits Section */
    .frame-whom {
        width: 100%;
        padding: 0 20px;
    }

    .frame-whom-cards {
        flex-direction: column;
        gap: 20px;
    }

    .image-item {
        flex: 0 0 200px; /* Fixed width, prevents wrapping */
        border-radius: 35px;
    }

    /* Benefits section */
    .frame-whom-card {
        padding: 30px;

        min-height: 400px; /* Минимальная высота вместо фиксированной */
        height: auto; /* Высота будет определяться содержимым */
    }

    .frame-whom-card-items {
        width: 100%;
        position: static;
    }

    /* CRM Section */
    .frame-crm {
        flex-direction: column;
        padding: 0 10px;
        gap: 30px;
    }

    .frame-crm-description {
        width: 100%;
    }

    .frame-crm-image {
        display: none;
    }

    .frame-crm-image-mobile {
        display: flex;
        padding-left: 0;
    }

    .highlight-text {
        width: 100%;
        text-align: center;
    }

    .frame-no-english-cards {
        grid-template-columns: repeat(1, 1fr);
        gap: 36px;
    }

    .frame-section-3-box {
        border-radius: 0;
    }

    .frame-section-3-title {
        font-size: 36px;
    }

    .frame-section-course-image {
        display: none;
    }
    .frame-section-course-description {
        width: 100%;
    }
    .course-subtitle {
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
        font-size: 32px;
    }

    /* CRM Control blocks */
    .frame-easy-booking-mockup-main {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        transform: none;
        margin-top: 20px;
    }

    /* Fix for mobile forms */
    .input-text-field,
    .input-text-field-dark,
    .input-text-area-dark {
        width: 100%;
    }

    .privacy-text,
    .checkbox-text-dark {
        font-size: 14px;
    }

    /* Adjust toast notifications for mobile */
    .toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
        width: auto;
    }

    /* Ensure modals are mobile-friendly */
    .modal-container {
        width: 95%;
        max-height: 80vh;
    }

    .modal-header {
        padding: 20px 20px 0;
    }

    .modal-content {
        padding: 0 20px 20px;
    }

    .policy-modal-title {
        font-size: 24px;
    }

    .policy-modal-section-title {
        font-size: 20px;
    }
}