/* ==========================================================================
   CoLoad - Mobile & Tablet Responsive Styles
   Breakpoints: 992px (tablet), 768px (mobile), 480px (small phone)
   ========================================================================== */

/* --- Global: constrain images --- */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   TABLET — max-width: 991.98px
   ========================================================================== */
@media (max-width: 991.98px) {

    /* Prevent horizontal overflow (inside media query to preserve position:sticky on desktop) */
    html, body {
        overflow-x: hidden;
    }

    /* --- Navbar --- */
    .coload-page .navbar {
        padding: 10px 4%;
    }

    .coload-page .navbar-brand img {
        height: 40px;
    }

    .coload-page .navbar-collapse {
        background: white;
        padding: 10px 0;
        margin-top: 8px;
    }

    .coload-page .navbar .nav-link {
        padding: 12px 16px !important;
        font-size: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }

    .coload-page .navbar .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .nav-buttons {
        flex-direction: column;
        padding: 10px 16px;
        gap: 8px;
    }

    .nav-buttons .btn-join,
    .nav-buttons .btn-login {
        width: 100%;
        text-align: center;
    }

    /* --- Hero sections — reduce from 100vh --- */
    .home-hero,
    .road-hero,
    .rail-hero,
    .coastal-hero {
        height: 70vh;
    }

    /* --- Section padding reduction --- */
    .segment {
        padding: 60px 5%;
    }

    .benefits {
        padding: 60px 5%;
    }

    .intro-blurb {
        padding: 50px 5%;
    }

    .intro-blurb p {
        font-size: 1.2rem;
    }

    /* --- Content grid gap --- */
    .content-grid {
        gap: 40px;
    }

    /* --- Home: Service link cards full width when stacked --- */
    .service-link-card {
        width: 100%;
    }

    /* --- Home: Pillar cards --- */
    .pillar-card {
        padding: 30px 20px;
    }

    /* --- Road: Fleet specs heading --- */
    .fleet-specs h2 {
        font-size: 2rem !important;
        margin-bottom: 30px !important;
    }

    /* --- Rail: Map iframe responsive --- */
    .map-visualization {
        min-height: 350px;
    }

    .map-placeholder {
        width: 100%;
        height: 100%;
    }

    .map-visualization iframe {
        width: 100%;
        height: 400px;
        max-width: 100%;
        border: 0;
    }

    /* --- Capabilities: Cap hero --- */
    .cap-hero {
        height: auto;
        padding: 60px 5% !important;
    }

    .cap-hero h1 {
        font-size: 2.2rem !important;
    }

    .cap-section {
        padding: 60px 5%;
    }

    /* --- About Us: Strategy cards overlap --- */
    .strategy {
        margin-top: -30px;
        padding: 40px 5%;
        gap: 20px;
    }

    .strategy-card {
        padding: 30px;
    }

    /* --- About Us: Story image full width --- */
    .story-image img {
        width: 100% !important;
    }

    .story-section {
        padding: 60px 5%;
    }

    /* --- About Us: Values section --- */
    .values {
        padding: 60px 5%;
    }

    .values h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    /* --- About Us: Journey section --- */
    .journey {
        padding: 60px 5%;
    }

    .journey h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    /* --- Contact: Section container --- */
    .section-container {
        padding: 50px 5%;
    }

    /* --- Value-added section (Capabilities) --- */
    .value-added {
        padding: 60px 5%;
    }

    .value-added h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    /* --- Footer --- */
    .coload-page footer {
        padding: 50px 5% 30px;
    }
}


/* ==========================================================================
   MOBILE — max-width: 768px
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Force single-column benefits grid (overrides inline 1024px 2-col rule) --- */
    .benefits-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Hero sections --- */
    .hero {
        padding: 50px 5%;
    }

    .home-hero,
    .road-hero,
    .rail-hero,
    .coastal-hero {
        height: 60vh;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }

    .hero p {
        font-size: clamp(0.95rem, 3vw, 1.2rem) !important;
        margin-bottom: 25px;
    }

    /* --- Section padding (tightened to reduce stacked section gaps) --- */
    .segment {
        padding: 28px 5% !important;
    }

    .benefits {
        padding: 28px 5% !important;
    }

    .benefits h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .intro-blurb {
        padding: 22px 5% !important;
    }

    .intro-blurb p {
        font-size: 1.05rem;
    }

    /* --- Content grid --- */
    .content-grid {
        gap: 18px;
    }

    /* --- Segment text --- */
    .segment-text h2 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .segment-text p {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    /* --- Home: Hero subtitle line break --- */
    .home-hero p br {
        display: none;
    }

    /* --- Home: Pillars section heading --- */
    .coload-page .pillars-grid {
        gap: 20px;
        margin-top: 30px;
    }

    /* --- Road: Services section --- */
    .services {
        padding: 28px 5% !important;
    }

    .service-card {
        padding: 22px 18px;
    }

    /* --- Road: Fleet section --- */
    .fleet-specs {
        padding: 30px 5% !important;
    }

    .fleet-specs h2 {
        font-size: 1.7rem !important;
        margin-bottom: 18px !important;
    }

    .fleet-grid {
        gap: 22px;
    }

    /* --- Rail: Benefits section on gray bg --- */
    .rail-benefits .benefit-card {
        padding: 24px 18px;
    }

    /* --- Rail: Network section --- */
    .network {
        padding: 30px 5% !important;
    }

    .network h2 {
        font-size: 1.8rem;
    }

    .map-visualization {
        min-height: 280px;
        padding: 20px;
    }

    .map-visualization iframe {
        height: 300px;
    }

    /* --- Coastal: Segment text heading override --- */
    .coastal-hero + .intro-blurb p {
        font-size: 1.05rem;
    }

    /* --- Capabilities: Sections --- */
    .cap-hero h1 {
        font-size: 1.8rem !important;
    }

    .cap-hero p {
        font-size: 1rem;
    }

    .cap-section {
        padding: 24px 5% !important;
    }

    .text-content h2 {
        font-size: 1.8rem;
        margin-bottom: 14px !important;
    }

    .text-content p {
        font-size: 1rem;
        margin-bottom: 16px !important;
    }

    .cap-list li {
        font-size: 0.95rem;
        gap: 10px;
        margin-bottom: 10px;
    }

    .image-content img {
        margin-top: 6px;
    }

    /* --- Capabilities: Value-added section --- */
    .value-added {
        padding: 28px 5% !important;
    }

    .value-added h2 {
        margin-bottom: 20px !important;
    }

    .va-grid {
        gap: 20px !important;
    }

    .va-card {
        padding: 22px;
    }

    /* --- About Us: Strategy --- */
    .strategy {
        margin-top: -20px;
        padding: 16px 5% !important;
    }

    .strategy-card {
        padding: 22px 18px;
    }

    .strategy-card p {
        font-size: 1rem;
    }

    /* --- About Us: Hero --- */
    .about-hero {
        height: auto;
        padding: 40px 5% !important;
    }

    .about-hero h1 {
        font-size: 2.2rem !important;
    }

    .about-hero p {
        font-size: 1rem;
    }

    /* --- About Us: Story --- */
    .story-section {
        padding: 28px 5% !important;
    }

    .story-text h2 {
        font-size: 2rem;
        margin-bottom: 14px !important;
    }

    .story-text p {
        font-size: 1rem;
        margin-bottom: 14px;
    }

    /* --- About Us: Values --- */
    .values {
        padding: 30px 5% !important;
    }

    .values h2 {
        margin-bottom: 24px !important;
    }

    .value-card .letter {
        font-size: 3rem;
    }

    .value-card h3 {
        font-size: 1.3rem;
    }

    .value-card {
        padding: 24px 18px;
    }

    /* --- About Us: Journey --- */
    .journey {
        padding: 30px 5% !important;
    }

    .journey h2 {
        margin-bottom: 24px !important;
    }

    /* --- About Us: Timeline (fix even items shifted right by left:50%) --- */
    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100% !important;
        left: 0 !important;
        text-align: left !important;
        padding-left: 50px;
        padding-right: 10px;
    }

    .timeline-dot {
        left: 12px !important;
        right: auto !important;
    }

    .timeline-img {
        margin-left: 0 !important;
        margin-right: auto !important;
        max-width: 160px !important;
    }

    .timeline-year {
        font-size: 1.3rem;
    }

    .timeline-event {
        font-size: 1rem;
    }

    /* --- Contact: Hero --- */
    .contact-hero {
        padding: 40px 5% !important;
    }

    .contact-hero h1 {
        font-size: 2rem;
    }

    .contact-hero p {
        font-size: 1rem;
    }

    /* --- Contact: Bar --- */
    .contact-bar {
        padding: 20px 15px;
        margin-top: -20px;
        border-radius: 10px;
    }

    /* --- Contact: Department links --- */
    .dept-links {
        padding: 24px 5% !important;
        margin-bottom: 10px;
    }

    /* --- Contact: Team cards --- */
    .section-container {
        padding: 28px 5% !important;
    }

    .dept-title {
        font-size: 1.6rem;
        margin-bottom: 16px !important;
    }

    .team-grid {
        gap: 12px;
        margin-bottom: 28px !important;
    }

    .contact-card {
        padding: 18px;
    }

    /* --- Footer: 2-column grid on mobile --- */
    .coload-page footer {
        padding: 40px 5% 25px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px 20px;
    }

    .footer-col h4 {
        margin-bottom: 12px;
        font-size: 1rem;
    }

    .footer-col li {
        margin-bottom: 10px;
    }

    .footer-col a {
        padding: 2px 0;
        display: inline-block;
    }

    .footer-bottom {
        margin-top: 30px;
        padding-top: 20px;
    }
}


/* ==========================================================================
   SMALL PHONE — max-width: 480px
   ========================================================================== */
@media (max-width: 480px) {

    /* --- Hero further reduction --- */
    .home-hero,
    .road-hero,
    .rail-hero,
    .coastal-hero {
        height: auto;
        min-height: 55vh;
    }

    .hero h1 {
        font-size: 1.7rem !important;
    }

    .hero p {
        font-size: 0.95rem !important;
    }

    /* --- Section padding --- */
    .segment,
    .benefits,
    .cap-section,
    .value-added {
        padding: 22px 4%;
    }

    .intro-blurb {
        padding: 18px 4%;
    }

    .intro-blurb p {
        font-size: 0.95rem;
    }

    /* --- Segment headings --- */
    .segment-text h2 {
        font-size: 1.5rem;
    }

    .benefits h2 {
        font-size: 1.6rem;
        margin-bottom: 25px;
    }

    /* --- Benefit cards --- */
    .benefit-card {
        padding: 30px 15px;
    }

    .benefit-card h3 {
        font-size: 1.2rem;
    }

    /* --- Home: Service link cards --- */
    .service-links-row {
        gap: 10px;
        padding: 0 10px;
    }

    .service-link-card {
        padding: 10px 8px;
    }

    /* --- Home: Pillars --- */
    .pillar-card {
        padding: 25px 15px;
    }

    .pillar-card h3 {
        font-size: 1.2rem;
    }

    /* --- Road: Service cards --- */
    .service-card h3 {
        font-size: 1.05rem;
    }

    .service-card p {
        font-size: 0.85rem;
    }

    /* --- Road: Fleet specs --- */
    .fleet-specs {
        padding: 35px 4%;
    }

    .fleet-specs h2 {
        font-size: 1.5rem !important;
    }

    .fleet-list li {
        font-size: 0.9rem;
    }

    /* --- Rail: Map --- */
    .map-visualization {
        min-height: 220px;
        padding: 10px;
        border-radius: 12px;
    }

    .map-visualization iframe {
        height: 250px;
    }

    /* --- Capabilities --- */
    .cap-hero h1 {
        font-size: 1.5rem !important;
    }

    .text-content h2 {
        font-size: 1.5rem;
    }

    .va-card {
        padding: 20px 15px;
    }

    /* --- About Us --- */
    .about-hero h1 {
        font-size: 1.8rem !important;
    }

    .strategy {
        margin-top: -15px;
    }

    .strategy-card h3 {
        font-size: 0.8rem;
    }

    .strategy-card p {
        font-size: 0.95rem;
    }

    .story-text h2 {
        font-size: 1.7rem;
    }

    .value-card .letter {
        font-size: 2.5rem;
    }

    .value-card h3 {
        font-size: 1.2rem;
    }

    .journey h2 {
        font-size: 1.7rem;
    }

    .timeline-img {
        max-width: 120px !important;
    }

    /* --- Contact --- */
    .contact-hero h1 {
        font-size: 1.7rem;
    }

    .bar-item.phone-large {
        font-size: 1.3rem !important;
    }

    .team-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-card {
        padding: 18px;
    }

    .card-name {
        font-size: 1.1rem;
    }

    .card-link {
        font-size: 0.85rem;
    }

    /* --- Footer: keep 2-col on small phones --- */
    .coload-page footer {
        padding: 30px 4% 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 15px;
    }

    .footer-col h4 {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .footer-col li {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   INLINE STYLE OVERRIDES
   These handle inline font-size styles that need !important at mobile
   ========================================================================== */
@media (max-width: 768px) {
    /* Home page: "Redefining Logistics" heading (inline style font-size: 2.5rem) */
    .coload-page [style*="font-size: 2.5rem"] {
        font-size: 1.8rem !important;
    }

    /* Home page: subtitle (inline style font-size: 1.25rem) */
    .coload-page [style*="font-size: 1.25rem"] {
        font-size: 1.05rem !important;
    }

    /* Inline section padding (100px 5%) */
    .coload-page section[style*="padding: 100px"] {
        padding: 28px 5% !important;
    }
}

@media (max-width: 480px) {
    .coload-page [style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }

    .coload-page section[style*="padding: 100px"] {
        padding: 20px 4% !important;
    }
}