/* ─── All mobile (≤ 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Collapse inline grids (set via style attributes in HTML) */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: 1fr !important;
    }

    /* Section header font */
    .section-header h2 {
        font-size: clamp(1.6rem, 7vw, 2.5rem);
    }

    /* Route cards: show full description */
    .route-card__description {
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    /* Route card image heights: less tall on mobile */
    .route-card__image {
        height: 180px;
    }

    .route-card--large .route-card__image {
        height: 200px;
    }

    .route-card--large .route-card__body {
        padding: var(--space-lg);
    }

    /* route-card meta items: wrap on small screens */
    .route-card__meta {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    /* Inline fixed-height images (e.g. nosotros gallery): reduce height */
    [style*="height: 300px"] {
        height: 180px !important;
    }

    /* Reposition decorative absolute badges that overflow on mobile */
    [style*="bottom: -20px"] {
        bottom: var(--space-md) !important;
        right: var(--space-md) !important;
    }

    /* Add bottom room in image containers that hold an absolute badge */
    [style*="position: relative"]:has([style*="bottom: -20px"]) {
        padding-bottom: calc(var(--space-lg) + var(--space-md));
    }

    /* Scroll-triggered horizontal animations: no horizontal offset on mobile
       to prevent overflow and cut-off content */
    [data-animate="fade-left"],
    [data-animate="fade-right"] {
        transform: none !important;
    }

    /* Toast: full-width on mobile instead of floating bottom-right */
    .toast {
        left: var(--space-md) !important;
        right: var(--space-md) !important;
        bottom: var(--space-lg) !important;
        max-width: none !important;
    }

    /* Booking progress bar: tighten on mobile */
    .booking-progress {
        gap: 4px !important;
    }

    .booking-progress__line {
        width: 28px !important;
    }

    .booking-progress__step span {
        display: none; /* keep numbers, hide text labels */
    }

    .booking-progress__number {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
    }
}

/* ─── Tablet (481 – 768px): multi-col → 2-col ───────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .section {
        padding: var(--space-2xl) 0;
    }
}

/* ─── Small phones (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --navbar-height: 70px;
    }

    .container {
        padding: 0 var(--space-md);
    }

    /* Reduce section vertical padding */
    .section {
        padding: var(--space-lg) 0;
    }

    .hero__content {
        padding: var(--space-lg) var(--space-md);
    }

    .hero__title {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .hero__subtitle {
        font-size: 0.95rem;
    }

    .hero__buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero__buttons .btn {
        width: 100%;
    }

    .hero__scroll-indicator {
        display: none;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .btn-lg {
        padding: 0.9rem 2rem;
        font-size: 1rem;
    }

    /* Calendar: tighter padding and smaller day font */
    .calendar {
        padding: var(--space-md);
    }

    .calendar__day {
        font-size: 0.8rem;
    }

    /* Route card image even shorter on tiny phones */
    .route-card__image {
        height: 160px;
    }

    .route-card--large .route-card__image {
        height: 160px;
    }
}

/* ─── Large tablets / small desktops (769 – 1024px) ─────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Already handled in grid and component-specific media queries */
}

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
    .navbar,
    .footer,
    .marquee,
    .hero__scroll-indicator {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }

    .section {
        padding: 1rem 0;
    }
}