/* Portfolio Card Layout Fixes */

/* Reset any problematic positioning */
.portfolio-item {
    position: relative;
    height: auto !important;
    margin-bottom: 0;
    z-index: auto;
}

.portfolio-item .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 450px;
    position: relative;
    z-index: auto;
}

/* Image container - fixed height, no absolute positioning */
.portfolio-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 1;
}

.portfolio-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

/* Overlay - should only cover the image, not the whole card */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.portfolio-overlay-content {
    pointer-events: auto;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* Card body - ensure it's positioned correctly and visible */
.portfolio-item .card-body {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    z-index: 2;
    background: white;
}

/* Ensure text is visible and not covered */
.card-title,
.card-text,
.badge,
small {
    position: relative;
    z-index: 3;
}

/* Ensure proper grid spacing */
.row.g-4 {
    row-gap: 2rem !important;
}

/* Add spacing between columns */
@media (min-width: 768px) {
    .col-md-6 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-bottom: 1.5rem;
    }
}

/* Fix carousel controls if present */
.carousel-control-prev,
.carousel-control-next {
    z-index: 15;
}

/* Ensure hover effects don't break layout */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}