/* AGGRESSIVE OVERLAP FIX - Forces proper item hiding */

.portfolio-container .portfolio-item {
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

/* CRITICAL: Force isotope items to behave properly */
.portfolio-container .isotope-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

/* CRITICAL: Force hidden items to be completely invisible */
.portfolio-item.isotope-hidden {
    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;
}

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

/* Fix any z-index stacking issues */
.portfolio-overlay {
    z-index: 2 !important;
}

/* Ensure proper spacing between items */
.portfolio-item {
    margin-bottom: 2rem !important;
}

/* Force proper layout when filtering - CRITICAL FIX */
.portfolio-container {
    overflow: visible !important;
    position: relative !important;
    min-height: 600px !important;
    width: 100% !important;
}

/* After filtering, ensure container adjusts height */
.portfolio-container.isotope {
    height: auto !important;
    min-height: 400px !important;
}

/* FIX: Add minimum height to empty image containers to prevent text overlap */
.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;
}

/* Force proper grid behavior */
.portfolio-container .col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    margin-bottom: 2rem !important;
}

.portfolio-container .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

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

@media (max-width: 767.98px) {
    .portfolio-container .col-lg-3,
    .portfolio-container .col-md-6 {
        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;
}

/* FALLBACK: If isotope classes aren't working, use manual hiding based on container filter */
.portfolio-container[data-filter=".first"] .portfolio-item:not(.first) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.portfolio-container[data-filter=".second"] .portfolio-item:not(.second) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.portfolio-container[data-filter=".third"] .portfolio-item:not(.third) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Also hide parent columns for filtered items */
.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;
}

.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;
}

.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;
}