/**
 * Judge Haulage - Responsive Layout Styles
 * Screen media queries to optimize layouts from large screens down to 320px.
 */

/* ======================================================================
   MEDIUM DESKTOP & TABLETS (MAX-WIDTH: 1024px)
   ====================================================================== */
@media (max-width: 1024px) {
    /* Stacking grids */
    .home-about-grid,
    .why-choose-grid,
    .areas-checker-grid,
    .safety-grid,
    .service-editorial-block {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Hero — retain a compact split layout on landscape tablets */
    .hero-grid {
        grid-template-columns: 0.9fr 1.1fr;
        min-height: auto;
        gap: 24px;
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .hero-content {
        text-align: left;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .hero-title { font-size: clamp(2.15rem, 4vw, 2.65rem); }
    .hero-subtitle { max-width: 520px; }
    .hero-actions, .hero-proof-strip { justify-content: flex-start; }

    /* Image panel stays compact beside the message */
    .hero-visual-wrapper {
        position: relative;
        height: 350px;
        min-height: 0;
        align-self: auto;
    }
    .hero-image-panel {
        border-radius: var(--border-radius-lg);
        position: absolute;
        inset: 0;
    }
    .hero-panel-overlay {
        background: linear-gradient(to bottom, rgba(8,21,43,0.2) 0%, transparent 50%, rgba(8,21,43,0.15) 100%);
    }

    /* Visual wrappers */
    .home-about-image-wrapper,
    .why-choose-visual,
    .safety-visual { height: 320px; }

    /* Footer stacking */
    .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 40px 48px; }

    /* Navigation */
    .desktop-navigation, .header-quote-btn { display: none; }
    .mobile-nav-toggle { display: block; }

    /* Form grids */
    .quote-form-grid, .contact-page-grid, .areas-covered-grid, .service-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .contact-page .contact-page-grid { grid-template-columns: 1fr; gap: 36px; }
    .contact-page .contact-form-column { width: 100%; }
    .quote-page .quote-form-grid { grid-template-columns: 1fr; gap: 28px; }
    .quote-page .form-sidebar-info {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .privacy-legal-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
    .service-sidebar { order: 2; }
    .service-main-content { order: 1; }
    .process-steps-list { grid-template-columns: 1fr 1fr; }
    .service-detail-page .service-detail-grid { grid-template-columns: 1fr; }
    .service-detail-page .service-sidebar { position: static; }
    .service-detail-page .service-intro-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .service-detail-page .industry-tag-cloud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-detail-page .industry-tag:nth-child(2) { border-right: 0; }
    .service-detail-page .industry-tag:nth-child(-n + 2) { border-bottom: 1px solid #DDE4EA; }

    /* Services page */
    .services-page .service-editorial-block,
    .services-page .service-editorial-block.editorial-reverse { grid-template-columns: 1fr; gap: 24px; }
    .services-page .service-editorial-block.editorial-reverse .service-editorial-image-wrapper,
    .services-page .service-editorial-block.editorial-reverse .service-editorial-content { order: initial; }
    .services-page .service-editorial-image-wrapper { height: 330px; }

    /* Homepage editorial system */
    .home-about-grid { gap: 32px; }
    .home-about-image-wrapper { height: 340px; }
    .why-choose-grid,
    .safety-grid { gap: 30px; }
    .why-choose-visual,
    .safety-visual { height: auto; min-height: 230px; }
    .areas-checker-grid { gap: 30px; }
    .home-services-section .service-card-body { padding: 20px; }
    .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-features-stack,
    .safety-points { gap: 0; }

    /* About page editorial system */
    .about-story-grid { grid-template-columns: 1fr; gap: 34px; }
    .about-route-visual { min-height: 350px; }
    .about-operations-grid { grid-template-columns: 1fr; gap: 42px; }
    .about-depot-contact { padding-right: 0; padding-bottom: 38px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
    .about-testimonials .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ======================================================================
   PORTRAIT TABLETS & SMARTPHONES (MAX-WIDTH: 768px)
   ====================================================================== */
@media (max-width: 768px) {
    /* Footer — brand and contact span the compact link columns */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
    .brand-col,
    .contact-col { grid-column: 1 / -1; }
    .brand-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
        gap: 28px;
        align-items: end;
    }
    .footer-desc { margin-bottom: 0; }
    .footer-hours { margin-bottom: 0; }

    /* Hero — stack only when the split layout no longer has enough room */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .hero-content {
        text-align: center;
        padding-bottom: 24px;
    }
    .hero-subtitle { max-width: 600px; margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-proof-strip { justify-content: center; }
    .hero-visual-wrapper { height: 280px; }

    /* Stat bar becomes a compact 2-column grid */
    .hero-stat-inner {
        flex-wrap: wrap;
        gap: 10px 0;
    }
    .hero-stat-item { flex: 0 0 50%; }
    .hero-stat-sep { display: none; }

    /* Typography fluid scaling */
    .hero-title {
        font-size: 2.15rem;
    }
    .section-title {
        font-size: 1.75rem;
    }
    .page-hero-title {
        font-size: 1.9rem;
    }
    
    /* Stacking grids */
    .trust-grid,
    .fleet-grid,
    .steps-grid,
    .industries-grid,
    .testimonials-grid,
    .form-row-two {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    /* Step card — hide connector line, use left border on tablet */
    .steps-grid::before { display: none; }
    .step-card {
        border-left: 4px solid var(--color-accent);
        border-radius: var(--border-radius-md);
    }
    
    /* Form field adjustments */
    .form-container-box {
        padding: var(--space-lg);
    }
    .contact-page .contact-cards-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-page .contact-detail-card { min-height: 132px; }
    
    /* Quote CTA stacking */
    .quote-cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-lg);
    }
    .quote-cta-actions {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Process steps details page */
    .process-steps-list {
        grid-template-columns: 1fr;
    }
    .service-detail-page .service-main-image-wrapper { height: 300px; }
    .service-detail-page .service-intro-grid { grid-template-columns: 1fr; gap: 30px; }
    .service-detail-page .process-steps-list li { border-right: 0; border-bottom: 1px solid #DDE4EA; }
    .service-detail-page .process-steps-list li:last-child { border-bottom: 0; }
    .service-detail-page .service-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .service-detail-page .sidebar-box { margin: 0; }
    
    /* Fleet showcase adaptations */
    .fleet-showcase-card {
        grid-template-columns: 1fr;
    }
    .fleet-showcase-card:nth-child(even) { grid-template-columns: 1fr; }
    .fleet-showcase-card:nth-child(even) .fleet-image-wrapper,
    .fleet-showcase-card:nth-child(even) .fleet-showcase-body { order: initial; }
    .fleet-image-wrapper {
        height: 300px;
    }
    .fleet-card-actions {
        flex-direction: column;
    }
    .fleet-mandatory-notice { grid-template-columns: 1fr; gap: 8px; }
    .fleet-mandatory-notice h3 { white-space: normal; }
    
    /* Maps layout stack */
    .areas-visual-map {
        height: 390px;
    }

    .areas-route-enquiry { grid-template-columns: 1fr; }

    /* Homepage trust and services */
    .trust-grid { gap: 0; }
    .trust-item {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.09);
        padding: 22px 4px;
    }
    .trust-item:first-child { border-top: 0; }
    .home-services-section .services-editorial-list { grid-template-columns: 1fr; }
    .home-services-section .service-card { display: grid; grid-template-columns: minmax(190px, 0.75fr) 1.25fr; }
    .home-services-section .service-card-image { height: 100%; min-height: 280px; }
    .home-services-section .service-card-footer { justify-content: flex-start; gap: 24px; }

    /* Homepage feature bands */
    .why-features-stack,
    .safety-points { grid-template-columns: 1fr; gap: 18px; }
    .why-feature-item,
    .why-feature-item:first-child {
        padding: 0 0 0 18px;
        border-left: 2px solid rgba(255,98,0,0.65);
    }
    .why-choose-visual { min-height: 210px; }
    .why-visual-decor { width: 100%; flex-direction: row; justify-content: center; }
    .stat-badge + .stat-badge { border-top: 0; border-left: 1px solid rgba(255,255,255,0.12); }

    /* Homepage process and industry index */
    .steps-grid { gap: 0; }
    .step-card,
    .step-card:first-child,
    .step-card:last-child {
        min-height: 132px;
        padding: 0 0 24px 84px;
        border: 0;
        border-radius: 0;
    }
    .step-card:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 33px;
        top: 66px;
        bottom: 0;
        width: 1px;
        background: rgba(255,98,0,0.35);
    }
    .step-num { position: absolute; left: 0; top: 0; }
    .step-title { margin-top: 0; padding-top: 8px; }
    .industry-card,
    .industry-card:nth-child(3n),
    .industry-card:nth-last-child(-n + 3) { border-right: 0; border-bottom: 1px solid #DDE4EB; }
    .industry-card:last-child { border-bottom: 0; }

    /* Homepage forms and closing sequence */
    .checker-form { grid-template-columns: 1fr; }
    .safety-point,
    .safety-point:first-child { padding: 0 0 0 18px; border-left: 2px solid var(--color-accent); }
    .quote-cta-actions { display: grid; grid-template-columns: 1fr; max-width: 400px; }
    .quote-cta-actions .btn:first-child { grid-column: auto; }

    /* About page */
    .about-page-hero { padding: 0; }
    .about-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .about-page-hero .breadcrumbs { padding-top: 17px; }
    .about-page-hero .page-hero-title { font-size: 1.9rem; letter-spacing: .01em; }
    .about-details-section,
    .about-why-choose,
    .about-testimonials { padding-top: 54px; padding-bottom: 54px; }
    .about-details-section { padding-bottom: 0; }
    .about-details-text h2 { font-size: 1.85rem; }
    .about-route-visual { min-height: 300px; }
    .about-key-commitments { margin-top: 44px; }
    .about-pillars-grid { grid-template-columns: 1fr; }
    .commitment-item,
    .commitment-item:first-child,
    .commitment-item:last-child { padding: 24px 0; border-left: 0; border-top: 1px solid #DCE3EA; }
    .commitment-item:first-child { border-top: 0; }
    .about-operations-section { margin-top: 54px; padding: 54px 0; }
    .about-logistics-list .sidebar-checklist { grid-template-columns: 1fr; }
    .why-choose-grid-three { grid-template-columns: 1fr; }
    .why-card,
    .why-card:first-child,
    .why-card:not(:first-child) { padding: 24px 0; border-left: 0; border-top: 1px solid #DCE3EA; }
    .why-card:first-child { border-top: 0; }
    .about-testimonials .testimonials-grid { grid-template-columns: 1fr; }
    .about-testimonials .testimonial-card { min-height: 0; }

    /* Services page */
    .services-page-hero { padding: 0; }
    .services-page-hero .breadcrumbs { padding-top: 17px; }
    .services-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .services-page .service-editorial-image-wrapper { height: 285px; }
    .services-page .service-editorial-block { padding: 34px 0; }

    /* Fleet page */
    .fleet-page-hero .breadcrumbs { padding-top: 17px; }
    .fleet-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .fleet-showcase-card { gap: 24px; padding: 34px 0; }
    .fleet-image-wrapper { height: 285px; }

    /* Areas page */
    .areas-page-hero .breadcrumbs { padding-top: 17px; }
    .areas-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .areas-covered-section { padding: 54px 0; }
    .areas-covered-grid { gap: 34px; }
    .areas-visual-map { height: 340px; min-height: 0; }
    .areas-route-enquiry .checker-form { grid-template-columns: 1fr; }

    /* Contact page */
    .contact-page-hero .breadcrumbs { padding-top: 17px; }
    .contact-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .contact-page .contact-page-section { padding: 54px 0; }

    /* Quote page */
    .quote-page-hero .breadcrumbs { padding-top: 17px; }
    .quote-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .quote-page .quote-form-section { padding: 54px 0; }
    .quote-page .quote-form-card { padding: 28px; }

    /* Privacy page */
    .privacy-page-hero .breadcrumbs { padding-top: 17px; }
    .privacy-page-hero-content { padding-top: 28px; padding-bottom: 42px; }
    .privacy-page .legal-content-section { padding: 54px 0; }
    .cookie-page .legal-content-section { padding: 54px 0; }
    .terms-page .legal-content-section { padding: 54px 0; }
    .privacy-legal-layout { grid-template-columns: 1fr; gap: 24px; }
    .privacy-contents {
        position: static;
        padding: 20px 22px;
        border: 1px solid #DDE4EA;
        border-radius: 10px;
        background: var(--color-white);
    }
    .privacy-contents nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .privacy-contents a::before { display: none; }
    .privacy-contents a:hover,
    .privacy-contents a:focus-visible { transform: none; }
}

/* ======================================================================
   SMALL SMARTPHONES (MAX-WIDTH: 480px)
   ====================================================================== */
@media (max-width: 480px) {
    /* Hero scaling */
    .hero-grid { padding-top: 24px; padding-bottom: 24px; }
    .hero-content { padding-bottom: 20px; }
    .hero-title { font-size: 1.85rem; line-height: 1.06; letter-spacing: .01em; margin-bottom: 14px; }
    .hero-subtitle { font-size: 0.92rem; line-height: 1.5; margin-bottom: 16px; }
    .hero-actions { flex-direction: row; gap: 8px; margin-bottom: 16px; }
    .hero-actions .btn { width: auto; flex: 1; justify-content: center; padding: 0.75rem 0.65rem; font-size: 0.8rem; }
    .hero-proof-strip { justify-content: center; padding-top: 12px; gap: 10px; }
    .proof-divider { display: none; }
    .proof-item { font-size: 0.74rem; }
    .hero-visual-wrapper { height: 220px; }
    .hero-chip { padding: 7px 10px; }
    .hero-chip--top-right { top: 12px; right: 12px; }
    .chip-label { font-size: 0.68rem; }
    .chip-sub { font-size: 0.62rem; }

    /* Stat bar — single column on smallest screens */
    .hero-stat-inner { justify-content: center; }
    .hero-stat-item { flex: 0 0 50%; }
    .hero-stat-sep { display: none; }
    .hero-stat-inner { padding: 10px 0; gap: 8px 0; }
    .hero-stat-num { font-size: 1rem; }
    .hero-stat-label { font-size: 0.58rem; }

    /* Announcement bar */
    .top-bar-left { display: none; }
    .top-bar-right { width: 100%; justify-content: space-between; }

    /* Logo scaling */
    .site-logo-image { width: 126px; max-height: 50px; }

    /* Footer elements */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-col,
    .contact-col { grid-column: 1 / -1; }
    .brand-col { display: block; }
    .footer-desc { margin-bottom: 1.3rem; }
    .footer-grid { padding-top: 48px; padding-bottom: 40px; gap: 32px 18px; }
    .footer-bottom { padding: 18px 0 76px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-copy { justify-content: center; }
    .footer-legal-links { justify-content: center; flex-wrap: wrap; }

    /* Floating buttons */
    .floating-whatsapp-btn { bottom: 16px; right: 16px; }
    .whatsapp-icon-wrapper { width: 48px; height: 48px; }
    .scroll-to-top { bottom: 76px; right: 16px; width: 36px; height: 36px; }

    /* Homepage compact mobile rhythm */
    .home-services-section,
    .home-about-section,
    .why-choose-section,
    .home-fleet-section,
    .how-it-works-section,
    .industries-section,
    .areas-covered-checker-section,
    .safety-section,
    .testimonials-section,
    .home-faqs-section { padding: 48px 0; }

    .trust-item { grid-template-columns: 40px 1fr; column-gap: 13px; }
    .trust-icon { width: 40px; height: 40px; }
    .home-services-section .service-card { display: flex; }
    .home-services-section .service-card-image { height: 190px; min-height: 0; }
    .service-fallback-art { padding: 18px 22px 14px; }
    .home-about-image-wrapper { height: 280px; }
    .map-corridor { font-size: 0.58rem; padding: 3px 6px; }
    .about-map-marker { min-width: 168px; padding: 12px 16px; }
    .why-visual-decor { flex-direction: column; }
    .stat-badge + .stat-badge { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
    .fleet-grid { gap: 12px; }
    .fleet-teaser-card { padding: 20px; }
    .checker-form-wrapper { padding: 22px 18px; }
    .availability-status { align-items: flex-start; }
    .testimonial-card { padding: 22px; }
    .home-faqs-section .section-header { text-align: left; }
    .home-faqs-section .section-badge { display: inline-flex; }
    .home-faqs-section .faq-accordion-trigger { padding: 16px 0; }

    /* About page compact mobile details */
    .about-page-hero { padding: 0; }
    .about-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .about-page-hero .breadcrumbs { padding-top: 15px; }
    .about-page-hero .page-hero-title { font-size: 1.9rem; }
    .about-page-hero .page-hero-desc { font-size: 1.05rem; }
    .about-route-visual { min-height: 260px; }
    .about-route-visual::before { width: 250px; height: 110px; }
    .about-route-line-two { left: 8%; }
    .about-depot-marker { left: 8%; top: 40%; min-width: 190px; padding: 14px 14px 13px 46px; }
    .about-depot-pin { left: 15px; top: 15px; width: 20px; height: 20px; }
    .commitment-item { grid-template-columns: 48px 1fr; gap: 14px; }
    .about-feature-icon { width: 48px; height: 48px; }
    .about-feature-icon svg { width: 25px; height: 25px; }
    .sidebar-contact-list li { grid-template-columns: 1fr; gap: 4px; }
    .about-section-heading { margin-bottom: 24px; }

    /* Services page */
    .services-page-hero { padding: 0; }
    .services-page-hero .breadcrumbs { padding-top: 15px; }
    .services-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .services-page .service-editorial-image-wrapper { height: 230px; }
    .services-page .service-editorial-actions { width: 100%; gap: 16px; }
    .services-page .service-editorial-actions .btn { flex: 1; justify-content: center; }
    .services-page .service-editorial-actions .btn-text { white-space: nowrap; }
    .service-detail-page .service-main-image-wrapper { height: 245px; }
    .service-detail-page .image-text-overlay { left: 20px; right: 20px; bottom: 18px; }
    .service-detail-page .industry-tag { min-height: 66px; padding: 14px; font-size: 0.82rem; }
    .service-detail-page .service-sidebar { grid-template-columns: 1fr; }
    .service-detail-page .sidebar-menu-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }

    /* Fleet page */
    .fleet-page-hero .breadcrumbs { padding-top: 15px; }
    .fleet-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .fleet-image-wrapper { height: 230px; }
    .fleet-card-actions .btn { width: 100%; justify-content: center; }
    .fleet-mandatory-notice { padding: 20px; }

    /* Areas page */
    .areas-page-hero .breadcrumbs { padding-top: 15px; }
    .areas-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .areas-visual-map { height: 300px; }
    .map-legend { left: 12px; right: 12px; bottom: 12px; }
    .coverage-region { display: none; }
    .areas-route-enquiry { padding: 22px 18px; }
    .areas-route-enquiry .form-row-two { grid-template-columns: 1fr; }

    /* Contact page */
    .contact-page-hero .breadcrumbs { padding-top: 15px; }
    .contact-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .contact-page .contact-page-section { padding: 42px 0; }
    .contact-page .contact-cards-stack { grid-template-columns: 1fr; }
    .contact-page .contact-detail-card { min-height: 0; }
    .contact-page .map-embed-placeholder { padding: 24px 20px; }
    .contact-page .form-container-box { padding: 24px 18px; }

    /* Quote page */
    .quote-page-hero .breadcrumbs { padding-top: 15px; }
    .quote-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .quote-page .quote-form-section { padding: 42px 0; }
    .quote-page .quote-form-card { padding: 24px 18px; }
    .quote-page .form-sidebar-info { grid-template-columns: 1fr; }
    .quote-page .sidebar-box { padding: 22px 20px; }

    /* Privacy page */
    .privacy-page-hero .breadcrumbs { padding-top: 15px; }
    .privacy-page-hero-content { padding-top: 24px; padding-bottom: 36px; }
    .privacy-page .legal-content-section { padding: 42px 0; }
    .cookie-page .legal-content-section { padding: 42px 0; }
    .terms-page .legal-content-section { padding: 42px 0; }
    .privacy-contents { padding: 18px; }
    .privacy-contents nav { grid-template-columns: 1fr; }
    .privacy-document { padding: 26px 20px; }
    .privacy-contact-address { padding: 20px 18px; }
    .cookie-document .legal-table th,
    .cookie-document .legal-table td { padding: 12px 13px; }
}