/* Axis Electric Mobile Responsive Overrides */

@media (max-width: 992px) {
    :root {
        --header-height: 80px;
    }

    .container, .header-container, .footer-container, .strip-container {
        padding: 0 20px;
    }

    .section-padding {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.85rem;
    }

    .page-opener .opener-title,
    .hero-title {
        font-size: 1.95rem !important;
        line-height: 1.15 !important;
    }

    .page-opener .opener-subtitle,
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .btn {
        font-size: 0.95rem;
        padding: 12px 18px;
    }

    /* Header & Navigation */
    .site-header.pinned-nav {
        padding: 8px 0;
        min-height: var(--header-height);
    }

    .header-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        padding: 0;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-social-icons {
        gap: 10px;
    }

    .social-icon-link {
        width: 28px;
        height: 28px;
        padding: 5px;
    }

    .main-nav {
        width: 100%;
    }

    .nav-logo {
        height: 52px;
        width: auto;
        display: block;
        filter: drop-shadow(0px 2px 8px rgba(0,0,0,0.16));
        border-radius: 14px;
    }

    .main-nav ul {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-nav a {
        font-size: 0.8rem;
    }

    /* Grids */
    .grid-2col, .browser-grid, .asymmetric-layout-grid, .panel-grid-split, .grid-careers {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Hero Sections */
    .hero-title {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 1.15rem !important;
    }

    .hero-ctas {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    /* Homepage Slider */
    .slider-viewport {
        height: auto !important;
        min-height: 500px;
    }

    .slide-footer-card {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        text-align: left;
        position: absolute !important;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: auto;
        transform: translateY(0) !important;
    }
    
    .slide-card-left h3 {
        font-size: 1.2rem;
    }
    
    .slide-card-left h4 {
        font-size: 0.85rem;
    }
    
    .slide-description {
        display: none; /* Hide long description on mobile slider */
    }

    .slide-card-center, .slide-card-right {
        margin-top: 15px;
    }

    .slider-thumbnails-container {
        display: none; /* Hide thumbnails on small mobile */
    }

    /* Jobsites Page */
    .filter-sidebar {
        position: static !important;
        margin-bottom: 30px;
    }

    .jobsites-grid, #portfolio-grid {
        grid-template-columns: 1fr !important;
    }

    /* Careers/Positions Page */
    .careers-hero .hero-title {
        font-size: 2.5rem !important;
    }

    .asymmetric-layout-grid {
        display: flex !important;
        flex-direction: column;
    }

    .context-sidebar-column {
        position: static !important;
        order: -1; /* Move sidebar info above listings on mobile if needed, or keep at bottom */
    }

    /* Modal / Wizard */
    .modal-window, .wizard-fullscreen-overlay {
        width: 95% !important;
        max-height: 90vh !important;
    }

    .panel-grid-split {
        display: flex !important;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-nav a {
        font-size: 0.75rem;
        padding: 4px 0;
    }

    .page-opener .opener-title,
    .hero-title {
        font-size: 1.85rem !important;
    }

    .page-opener .opener-subtitle,
    .hero-subtitle {
        font-size: 0.95rem !important;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .section-padding {
        padding: 40px 0;
    }
}