/* CRITICAL: COMPLETE OVERRIDE - Force proper hiding regardless of JavaScript */

/* First, reset any problematic isotope positioning */
.portfolio-container .portfolio-item,
.portfolio-container .isotope-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transition: none !important;
}

/* CRITICAL: Force items to be completely hidden when they have hidden classes */
.portfolio-item.isotope-hidden,
.portfolio-item.force-hidden,
.portfolio-item.d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -999 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Hide parent columns when they contain hidden items */
.col-lg-3.d-none,
.col-md-6.d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -999 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* FALLBACK: Manual filtering based on container data-filter attribute */
.portfolio-container[data-filter=".first"] .portfolio-item:not(.first),
.portfolio-container[data-filter=".first"] .col-lg-3:has(.portfolio-item:not(.first)),
.portfolio-container[data-filter=".first"] .col-md-6:has(.portfolio-item:not(.first)) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -999 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.portfolio-container[data-filter=".second"] .portfolio-item:not(.second),
.portfolio-container[data-filter=".second"] .col-lg-3:has(.portfolio-item:not(.second)),
.portfolio-container[data-filter=".second"] .col-md-6:has(.portfolio-item:not(.second)) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -999 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.portfolio-container[data-filter=".third"] .portfolio-item:not(.third),
.portfolio-container[data-filter=".third"] .col-lg-3:has(.portfolio-item:not(.third)),
.portfolio-container[data-filter=".third"] .col-md-6:has(.portfolio-item:not(.third)) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -999 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Ensure visible items are properly displayed */
.portfolio-item:not(.isotope-hidden):not(.force-hidden):not(.d-none) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Ensure proper grid behavior for visible items */
.portfolio-container .col-lg-3:not(.d-none) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    margin-bottom: 2rem !important;
    display: block !important;
}

.portfolio-container .col-md-6:not(.d-none) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 2rem !important;
    display: block !important;
}

/* Portfolio container behavior */
.portfolio-container {
    overflow: visible !important;
    position: relative !important;
    min-height: 400px !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Fix any image containers */
.portfolio-item .position-relative {
    min-height: 200px !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="dark"] .portfolio-item .position-relative {
    background: #374151 !important;
}

/* Add placeholder content for empty image containers */
.portfolio-item .position-relative::before {
    content: "📊" !important;
    font-size: 3rem !important;
    opacity: 0.3 !important;
    color: #6c757d !important;
}

.portfolio-item.first .position-relative::before {
    content: "💻" !important;
}

.portfolio-item.second .position-relative::before {
    content: "🤖" !important;
}

.portfolio-item.third .position-relative::before {
    content: "🧠" !important;
}

/* Ensure text sections don't overlap */
.portfolio-item .border {
    position: relative !important;
    z-index: 1 !important;
}

/* Responsive fixes */
@media (max-width: 991.98px) {
    .portfolio-container .col-lg-3:not(.d-none) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767.98px) {
    .portfolio-container .col-lg-3:not(.d-none),
    .portfolio-container .col-md-6:not(.d-none) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Ensure footer doesn't cover content */
.container-xxl.py-5 {
    padding-bottom: 5rem !important;
    margin-bottom: 3rem !important;
}