/* ============================================================
   UK TRAVEL BRIDGE - Responsive Styles
   Breakpoints: 1024 / 900 / 768 / 560
   ============================================================ */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1024px) {
    .deals-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .info-cards { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .search-form:not(.compact) .form-grid { grid-template-columns: repeat(3, 1fr); }
    .search-form.compact .form-grid { grid-template-columns: repeat(3, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .hero { padding: 72px 0 120px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    .section { padding: 64px 0; }

    /* Off-canvas mobile navigation */
    .nav-toggle { display: flex; }
    /* The header's backdrop blur would become the containing block for
       the fixed off-canvas panel (trapping it inside the header box),
       so drop the blur on mobile and keep the nav viewport-fixed. */
    .site-header { backdrop-filter: none; }
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(340px, 88vw);
        background: #fff;
        box-shadow: -20px 0 60px rgba(5, 26, 45, 0.25);
        padding: 96px 26px 30px;
        transform: translateX(105%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 70;
    }
    body.nav-open .site-nav { transform: none; }

    /* Dimmed, clickable backdrop behind the menu (real element, not a
       pseudo-element, so it truly covers the viewport and closes the menu). */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(5, 26, 45, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
    }
    body.nav-open { overflow: hidden; } /* lock background scroll while the menu is open */
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
    /* Keep the floating buttons from hovering above the open menu. */
    body.nav-open .whatsapp-float,
    body.nav-open .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-link { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
    .nav-link.active::after { display: none; }
    .nav-link.active { background: var(--bg-tint); }

    .nav-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

    /* Search widget forms */
    .search-form:not(.compact) .form-grid { grid-template-columns: repeat(2, 1fr); }
    .search-form.compact .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-card .form-grid { grid-template-columns: 1fr 1fr; }

    .about-preview { grid-template-columns: 1fr; gap: 44px; }
    .split-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-layout { grid-template-columns: 1fr; }
    .stats { margin-top: -60px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .topbar-inner { justify-content: center; }
    .topbar-hours, .topbar-left a span { display: none; }
    .topbar-left { gap: 14px; }
    .btn-phone-text { display: none; }
    .btn-phone { padding: 11px; border-radius: 50%; }

    .hero { padding: 56px 0 108px; }
    .hero h1 { letter-spacing: -0.01em; }

    .widget-tabs { max-width: none; }
    .widget-tab { padding: 10px 8px; font-size: 13.5px; gap: 6px; }
    .search-widget { padding: 18px; }
    .search-form.compact .form-grid { grid-template-columns: 1fr 1fr; }
    .search-form:not(.compact) .form-grid { grid-template-columns: 1fr; }
    .field-wide { grid-column: span 1; }
    .form-card .form-grid { grid-template-columns: 1fr; }

    .deals-grid, .features-grid, .services-grid { grid-template-columns: 1fr; }
    .info-cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; padding: 48px 22px 34px; }
    .steps { grid-template-columns: 1fr; }
    .help-box { flex-direction: column; align-items: flex-start; }
    .page-hero { padding: 56px 0 64px; }
    .cta-banner { padding: 56px 0; }
    .form-submit { flex-direction: column; align-items: stretch; }
    .btn-submit { width: 100%; }
    .form-note { justify-content: center; }
    .form-card { padding: 24px 20px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 560px) {
    .container { padding: 0 16px; }
    /* Keep the header within the viewport: the hamburger menu
       already offers Call Us / WhatsApp Us actions. */
    .header-inner { gap: 10px; }
    .btn-phone { display: none; }
    /* The mobile menu already offers WhatsApp, so the icon button
       makes way for the Book Now CTA on small screens. */
    .header-wa { display: none; }
    .btn-book { padding: 10px 16px; font-size: 13.5px; }
    .brand-tag { display: none; }
    .search-form.compact .form-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
    .stat h3 { font-size: 1.5rem; }
    .deal-actions .btn { flex-basis: 100%; }
    .cta-actions .btn { flex-basis: 100%; }
    .footer-bottom-inner { justify-content: center; text-align: center; }
    .newsletter-form .newsletter-input { flex-direction: column; }
    .newsletter-form .btn { width: 100%; }
    .whatsapp-float { right: 16px; bottom: 16px; }
    .back-to-top { right: 20px; bottom: 84px; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
    .brand-logo { max-height: 40px; }
    .brand-name { font-size: 17px; }
    .hero { padding: 48px 0 100px; }
    .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.3rem); }
    .widget-tab { padding: 9px 6px; font-size: 12.5px; gap: 5px; }
    .widget-tab svg { width: 14px; height: 14px; }
    .search-widget { padding: 16px 14px; }
    .field label { font-size: 12.5px; }
    .footer-grid { padding: 42px 18px 30px; }
    .deal-price-badge { font-size: 13.5px; padding: 6px 11px; }
}