/* =======================================================
   PROJECT ARCHIVE STYLES
   ======================================================= */

.box-project-archive-wrapper {
    width: 100%;
    margin: 0 auto;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
}

/* --- BREADCRUMBS --- */
.project-breadcrumbs {
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #000;
    letter-spacing: 0.5px;
}

/* --- FILTER BAR (DESKTOP) --- */
.project-filter-bar {
    display: flex;
    flex-wrap: wrap;
    background: #f2f2f2;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.filter-select-wrapper {
    flex: 1; 
    min-width: 120px;
    position: relative;
    border-right: 1px solid #ddd;
}
.filter-select-wrapper:last-child { border-right: none; }

.filter-select-wrapper select {
    width: 100%;
    height: 40px;
    appearance: none; -webkit-appearance: none;
    background: transparent; border: none;
    font-size: 16px; 
    text-transform: uppercase; 
    color: #333;
    cursor: pointer; 
    outline: none; 
    font-weight: 500;
}

/* Chevron */
.filter-select-wrapper::after {
    content: ''; position: absolute; right: 20px; top: 45%;
    width: 8px; height: 8px;
    border-right: 1px solid #333; border-bottom: 1px solid #333;
    transform: rotate(45deg) translateY(-50%);
    pointer-events: none;
}

/* --- MOBILE FILTER TOGGLE UI --- */
.mobile-filter-toggle {
    display: none; /* Hidden strictly on desktop */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.mobile-filter-toggle .toggle-arrow {
    width: 8px;
    height: 8px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.mobile-filter-toggle.is-active .toggle-arrow {
    transform: rotate(-135deg); /* Arrow points up when open */
}

/* --- GRID LAYOUT (50/50) --- */
.project-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 50/50 Layout */
    gap: 20px;
    margin-bottom: 60px;
}

.project-archive-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4/3; /* Consistent landscape boxes */
}

.project-archive-card a { display: block; width: 100%; height: 100%; }

.card-image { width: 100%; height: 100%; position: relative; }

.card-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-archive-card:hover .card-image img { transform: scale(1.05); }

/* --- OVERLAY & TITLE --- */
.card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; 
    padding: 30px;
    box-sizing: border-box;
    pointer-events: none;
}

.project-card-title {
    color: #fff;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
}

/* --- INFINITE SCROLL SENTINEL --- */
.scroll-sentinel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    margin-bottom: 40px;
}

.scroll-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}

.scroll-spinner.is-active {
    opacity: 1;
    animation: box-spin 0.8s linear infinite;
}

@keyframes box-spin {
    to { transform: rotate(360deg); }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    /* Refine the main container on mobile to drop structural styling */
    .project-filter-bar { 
        flex-direction: column; 
        background: transparent; 
        border: none; 
    }
    
    /* Toggle behaves exactly like screenshot #2 */
    .mobile-filter-toggle {
        display: flex;
        background: #f2f2f2;
        border: 1px solid #ddd;
        height: 50px;
        padding: 0 20px;
    }

    /* Sub-items drop down attached smoothly below the toggle */
    .filter-select-wrapper { 
        display: none; /* Auto-hidden via JS trigger */
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        background: #f2f2f2; 
    }
    
    .filter-select-wrapper select {
        height: 50px;
        padding-left: 20px;
    }
    
    /* Adjust pseudo-element chevron centering for new height */
    .filter-select-wrapper::after {
        top: 50%;
    }

    .project-archive-grid { grid-template-columns: 1fr; } /* Stack on mobile */
    .project-card-title { font-size: 24px; }
    .card-overlay { padding: 20px; }
}