/**
 * PORTFOLIO GRADIENT REMOVAL - Complete Fix
 * Removes ALL black gradients from portfolio cards on hover
 */

/* Remove any ::before or ::after pseudo-elements that might add gradients */
.portfolio-item::before,
.portfolio-item::after,
.portfolio-item .card::before,
.portfolio-item .card::after,
.portfolio-item .card > div::before,
.portfolio-item .card > div::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
}

/* Force remove any gradient backgrounds on hover */
.portfolio-item:hover::before,
.portfolio-item:hover::after,
.portfolio-item .card:hover::before,
.portfolio-item .card:hover::after,
.portfolio-item:hover .card::before,
.portfolio-item:hover .card::after,
.portfolio-item .card:hover > div::before,
.portfolio-item .card:hover > div::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
}

/* Ensure no overlay or mask elements */
.portfolio-item .overlay,
.portfolio-item .mask,
.portfolio-item .image-overlay,
.portfolio-item .card-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Clean hover state - ONLY transform and shadow */
.portfolio-item:hover .card,
.portfolio-item .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    background: white !important;
}

[data-theme="dark"] .portfolio-item:hover .card,
[data-theme="dark"] .portfolio-item .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    background: #1f2937 !important;
}

/* Ensure card children don't have gradients */
.portfolio-item .card > *,
.portfolio-item:hover .card > * {
    position: relative !important;
    z-index: 1 !important;
}

/* NO gradients on any child elements */
.portfolio-item .card div[class*="gradient"],
.portfolio-item .card div[class*="overlay"] {
    background: none !important;
}

/* Force remove linear-gradient from all portfolio elements */
.portfolio-item *,
.portfolio-item:hover * {
    background-image: none !important;
}

/* Restore only the colored backgrounds for icon sections */
.portfolio-item .card > div:first-child {
    /* Keep the colored backgrounds but ensure no gradient overlay */
    position: relative !important;
    z-index: 1 !important;
}

.portfolio-item .card > div:first-child::before,
.portfolio-item .card > div:first-child::after {
    display: none !important;
    content: none !important;
}