/*
 * ═══════════════════════════════════════════════════════
 * Responsive — Supplementary media queries
 * ═══════════════════════════════════════════════════════
 *
 * Component-level responsiveness lives inside each
 * component's own file. This file handles any remaining
 * cross-cutting overrides.
 *
 * Breakpoints:
 *   1280px — Large desktop
 *   1024px — Tablet landscape / small desktop
 *    768px — Tablet portrait
 *    600px — Large phone
 *    480px — Small phone
 */

/* ─── Tablet landscape ───────────────────────────── */
@media (max-width: 1024px) {
    /* Reduce section padding */
    .section {
        padding-top: var(--sp-16);
        padding-bottom: var(--sp-16);
    }

    .section-header {
        margin-bottom: var(--sp-10);
    }

    /* Stack side-by-side layouts */
    .two-col {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }
}

/* ─── Tablet portrait ────────────────────────────── */
@media (max-width: 768px) {
    .section {
        padding-top: var(--sp-12);
        padding-bottom: var(--sp-12);
    }

    .section-header {
        margin-bottom: var(--sp-8);
    }

    .section-title {
        font-size: var(--fs-3xl);
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
}

/* ─── Large phone ────────────────────────────────── */
@media (max-width: 600px) {
    .section {
        padding-top: var(--sp-10);
        padding-bottom: var(--sp-10);
    }

    /* Single column everything */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Full-width buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Stack horizontal button groups */
    .btn-group {
        flex-direction: column;
    }

    /* Adjust card paddings */
    .tour-card__body,
    .blog-card__body,
    .review-card {
        padding: var(--sp-4);
    }
}

/* ─── Small phone ────────────────────────────────── */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    .container {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    /* Reduce spacing further */
    .section {
        padding-top: var(--sp-8);
        padding-bottom: var(--sp-8);
    }

    /* Destination cards side by side on smallest screens */
    .dest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }

    .dest-card {
        aspect-ratio: 2 / 3;
    }
}

/* ─── Mobile-only visibility ─────────────────────── */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
}

/* ─── Landscape orientation on mobile ────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 70vh;
    }
}

/* ─── Print ──────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .whatsapp-float,
    .nav__toggle {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .section {
        padding: 20pt 0;
    }
}