/* ==========================================================================
   RR TOURS & TRAVELS — RESPONSIVE RULES
   Breakpoints: desktop (default) > 1024px tablet-landscape > 768px tablet
   > 480px mobile
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1200px) {
    :root {
        --container-max: 960px;
    }
}

/* ---------- Tablet landscape ---------- */
@media (max-width: 1024px) {
    .col-3 {
        flex: 1 1 calc(50% - var(--gap));
    }

    .col-4 {
        flex: 1 1 calc(50% - var(--gap));
    }

    .hero-carousel__arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    .topbar .container {
        justify-content: center;
        gap: 14px;
        text-align: center;
    }

    .nav-toggle {
        display: inline-block;
    }

    .site-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-white);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .site-nav--open {
        transform: translateX(0);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 0;
        width: 100%;
    }

    .site-nav__link {
        display: block;
        padding: 14px 0;
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__dropdown-menu {
        position: static;
        box-shadow: none;
        display: none;
        padding-left: 14px;
    }

    .site-nav__dropdown--open .site-nav__dropdown-menu {
        display: block;
    }

    .col-2,
    .col-3,
    .col-4 {
        flex: 1 1 calc(50% - var(--gap));
    }

    .col-6,
    .col-8 {
        flex: 1 1 100%;
    }

    .section {
        padding: 34px 0;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    .feature-card img {
        height: 190px;
    }

    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table th,
    .data-table td,
    .data-table tr {
        display: block;
    }

    .data-table thead {
        display: none;
    }

    .data-table tr {
        margin-bottom: 14px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .data-table td {
        border: none;
        border-bottom: 1px solid var(--color-border);
    }

    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--color-primary);
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {

    .col-2,
    .col-3,
    .col-4,
    .col-6 {
        flex: 1 1 100%;
    }

    .btn-group {
        flex-direction: column;
    }

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

    .form-box {
        padding: 20px;
    }

    .hero-carousel__arrow {
        display: none;
    }

    .site-header__logo img {
        max-height: 40px;
    }
}