/* ============================================
   PROFESSIONAL INNER SCROLL SECTIONS
   Clean, modern design for mobile scrollable areas
   ============================================ */

@media screen and (max-width: 1024px) {
    /* ============================================
       PROJECTS GALLERY CONTAINER
       ============================================ */
    .projects-gallery-container {
        background: transparent !important;
        border: none !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        /* Clean scrollable area */
        scrollbar-width: thin;
        scrollbar-color: rgba(78, 205, 196, 0.3) transparent;
    }

    /* Custom scrollbar for projects */
    .projects-gallery-container::-webkit-scrollbar {
        width: 4px;
    }

    .projects-gallery-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .projects-gallery-container::-webkit-scrollbar-thumb {
        background: rgba(78, 205, 196, 0.4);
        border-radius: 2px;
    }

    .projects-gallery-container::-webkit-scrollbar-thumb:hover {
        background: rgba(78, 205, 196, 0.6);
    }

    /* Project cards - clean design */
    .project-masonry-item {
        background: transparent !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .project-masonry-item:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    }

    .project-masonry-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 12px !important;
    }

    /* ============================================
       CLIENTS LOGOS GRID
       ============================================ */
    .clients-logos-grid {
        background: transparent !important;
        border: none !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        gap: 16px !important;
        /* Clean scrollable area */
        scrollbar-width: thin;
        scrollbar-color: rgba(78, 205, 196, 0.3) transparent;
    }

    /* Custom scrollbar for clients */
    .clients-logos-grid::-webkit-scrollbar {
        width: 4px;
    }

    .clients-logos-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .clients-logos-grid::-webkit-scrollbar-thumb {
        background: rgba(78, 205, 196, 0.4);
        border-radius: 2px;
    }

    .clients-logos-grid::-webkit-scrollbar-thumb:hover {
        background: rgba(78, 205, 196, 0.6);
    }

    /* Client logo items - clean professional cards */
    .client-logo-item {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        transition: all 0.2s ease !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .client-logo-item:active {
        transform: scale(0.97) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(78, 205, 196, 0.2) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    }

    .client-logo-image {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        filter: brightness(1.05) !important;
        transition: filter 0.2s ease !important;
    }

    .client-logo-item:active .client-logo-image {
        filter: brightness(1.1) !important;
    }

    /* ============================================
       CAREERS JOBS LIST
       ============================================ */
    .careers-jobs-list {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        gap: 12px !important;
        /* Clean scrollable area */
        scrollbar-width: thin;
        scrollbar-color: rgba(78, 205, 196, 0.3) transparent;
    }

    /* Custom scrollbar for jobs list */
    .careers-jobs-list::-webkit-scrollbar {
        width: 4px;
    }

    .careers-jobs-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .careers-jobs-list::-webkit-scrollbar-thumb {
        background: rgba(78, 205, 196, 0.4);
        border-radius: 2px;
    }

    .careers-jobs-list::-webkit-scrollbar-thumb:hover {
        background: rgba(78, 205, 196, 0.6);
    }

    /* Job tabs - clean professional design */
    .careers-job-tab {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        padding: 16px 18px !important;
        transition: all 0.2s ease !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }

    .careers-job-tab.active {
        background: rgba(78, 205, 196, 0.1) !important;
        border-color: rgba(78, 205, 196, 0.4) !important;
        box-shadow: 0 4px 12px rgba(78, 205, 196, 0.2) !important;
    }

    .careers-job-tab:active {
        transform: scale(0.98) !important;
    }

    /* ============================================
       SCOPE CONTENT (JOB DESCRIPTION)
       ============================================ */
    .scope-content {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        /* Clean scrollable area */
        scrollbar-width: thin;
        scrollbar-color: rgba(78, 205, 196, 0.3) transparent;
    }

    /* Custom scrollbar for scope content */
    .scope-content::-webkit-scrollbar {
        width: 4px;
    }

    .scope-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .scope-content::-webkit-scrollbar-thumb {
        background: rgba(78, 205, 196, 0.4);
        border-radius: 2px;
    }

    .scope-content::-webkit-scrollbar-thumb:hover {
        background: rgba(78, 205, 196, 0.6);
    }

    /* ============================================
       REMOVE ALL BACKGROUND COLORING
       ============================================ */
    .projects-gallery-container,
    .clients-logos-grid,
    .careers-jobs-list,
    .scope-content,
    .careers-departments-only {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
    }

    /* Remove any gradient backgrounds */
    .projects-gallery-container::before,
    .clients-logos-grid::before,
    .careers-jobs-list::before,
    .scope-content::before,
    .projects-gallery-container::after,
    .clients-logos-grid::after,
    .careers-jobs-list::after,
    .scope-content::after {
        display: none !important;
    }

    /* ============================================
       CLEAN CONTAINER STYLING
       ============================================ */
    .projects-gallery-container,
    .clients-logos-grid,
    .careers-jobs-list {
        /* Remove any visual clutter */
        outline: none !important;
        border: none !important;

        /* Smooth scrolling */
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;

        /* Performance */
        will-change: scroll-position;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* ============================================
       PROFESSIONAL SPACING
       ============================================ */
    .projects-gallery-container {
        gap: 20px !important;
    }

    .clients-logos-grid {
        gap: 16px !important;
    }

    .careers-jobs-list {
        gap: 12px !important;
    }

    /* ============================================
       FOCUS STATES (ACCESSIBILITY)
       ============================================ */
    .projects-gallery-container:focus,
    .clients-logos-grid:focus,
    .careers-jobs-list:focus,
    .scope-content:focus {
        outline: 2px solid rgba(78, 205, 196, 0.5) !important;
        outline-offset: 4px !important;
    }
}

/* ============================================
   VERY SMALL MOBILE (≤ 480px)
   ============================================ */
@media screen and (max-width: 480px) {
    .projects-gallery-container,
    .clients-logos-grid,
    .careers-jobs-list {
        padding: 15px 10px !important;
    }

    .client-logo-item {
        padding: 16px !important;
    }

    .careers-job-tab {
        padding: 14px 16px !important;
    }
}