/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

/* ==========================================================================
   TABLET & MOBILE BREAKPOINT (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    :root {
        --header-height: 70px;
        --header-height-scrolled: 65px;
    }

    .container {
        padding: 0 20px;
    }
    
    .section {
        padding: 80px 0;
    }

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

    /* Navbar Mobile Adaptation */
    .logo-img {
        height: 28px !important;
    }

    /* Hide desktop controls on tablet/mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Footer Tablet Adaptation */
    .footer-container {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 32px;
    }
    
    .brand-col {
        grid-column: span 3;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .form-grid {
        gap: 20px;
    }

    /* Hero, Stats, and Benefits Responsive Grids (Tablet) */
    .hero-section .container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

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

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

/* ==========================================================================
   SMARTPHONE BREAKPOINT (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    /* Footer Responsive Grid */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .brand-col {
        grid-column: span 1;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Form Grid Collapse */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Hero, Stats, and Benefits Responsive Grids (Mobile) */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Jobs Cards Responsive Adaptation */
    .job-card-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding: 24px !important;
    }

    .job-card-actions {
        width: 100% !important;
    }

    .job-card-actions .btn {
        width: 100% !important;
        display: flex !important;
    }
}

/* ==========================================================================
   TINY MOBILE SCREEN BREAKPOINT (max-width: 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .section-title {
        font-size: 1.75rem;
    }
    
    .glass-card {
        padding: 24px;
    }
    
    .btn {
        width: 100%;
    }
    
    .back-to-top-btn {
        bottom: 20px;
        right: 20px;
    }

    .logo-img {
        height: 28px;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .nav-cta-btn {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   EXTREMELY NARROW SCREENS (max-width: 360px)
   ========================================================================== */
@media screen and (max-width: 360px) {
    .logo-text {
        display: none !important; /* Hide text, only show the beautiful logo brand icon on very narrow viewports */
    }

    .nav-utilities {
        gap: 8px;
    }

    .nav-cta-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}