/* Draggable Cards Styles */
.about__cards {
    position: relative;
    width: 100%;
    height: 500px;
    margin-top: 3rem;
    overflow: visible; /* Allow cards to extend beyond container */
    grid-column: 1 / -1; /* Span full width across grid columns */
}

/* Cards overlaying the entire About section */
.about__cards--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    height: 100%;
    width: 100%; /* Keep container within About section boundaries */
    pointer-events: none; /* Allow clicks through to underlying content */
    overflow: visible; /* Allow cards to move freely */
    z-index: 500; /* Above all content but below navigation */
}

.draggable-cards-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Remove 3D perspective to avoid rendering conflicts */
    /* Removed contain property to allow cards to overflow freely */
}

/* Enable pointer events only on the cards themselves */
.about__cards--overlay .draggable-cards-container {
    pointer-events: none;
}

.about__cards--overlay .draggable-card {
    pointer-events: auto; /* Cards can be clicked and dragged */
}

.draggable-card {
    position: absolute;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, left, top, z-index;
    isolation: isolate;
    overflow: hidden;

    /* Adjusted shadow for larger cards */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

/* Dark mode card styles */
[data-theme="dark"] .draggable-card {
    background: transparent; /* Keep transparent in dark mode too */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.draggable-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.draggable-card.dragging {
    cursor: grabbing;
    z-index: 9999 !important;
    position: absolute !important;
    isolation: isolate;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
    transform-style: flat !important; /* Force flat rendering during drag */
}

[data-theme="dark"] .draggable-card.dragging {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
}

.draggable-card__inner {
    width: 100%;
    height: 100%;
    border-radius: 0; /* No rounding */
    overflow: hidden;
    position: relative;
    background: transparent; /* Remove background */
}

[data-theme="dark"] .draggable-card__inner {
    background: transparent; /* Keep transparent */
}

.draggable-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Maintain aspect ratio, show full image */
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none; /* Prevent image-specific interactions */
    border-radius: 0; /* No corner rounding */
}

/* Card stacking animation on load */
@keyframes cardEntry {
    from {
        opacity: 0;
        transform: translateY(-50px) rotate(0deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--rotation, 0deg)) scale(1);
    }
}

.draggable-card {
    animation: cardEntry 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards;
}

.draggable-card:nth-child(1) { animation-delay: 0.1s; }
.draggable-card:nth-child(2) { animation-delay: 0.2s; }
.draggable-card:nth-child(3) { animation-delay: 0.3s; }
.draggable-card:nth-child(4) { animation-delay: 0.4s; }
.draggable-card:nth-child(5) { animation-delay: 0.5s; }
.draggable-card:nth-child(6) { animation-delay: 0.6s; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .about__cards {
        height: 400px;
        margin-top: 2rem;
    }

    .about__cards--overlay {
        /* On mobile, keep within About section */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .draggable-card {
        padding: 0; /* No padding on mobile either */
    }

    .draggable-card:hover {
        /* Remove hover effects on mobile for better touch experience */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .about__cards {
        height: 450px;
    }

    .about__cards--overlay {
        /* Keep within About section on tablets */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }
}

/* Prevent selection highlight on drag */
.draggable-cards-container {
    -webkit-tap-highlight-color: transparent;
}

.draggable-card::selection,
.draggable-card *::selection {
    background: transparent;
}

/* Add subtle texture/gradient overlays */
.draggable-card__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

[data-theme="dark"] .draggable-card__inner::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}

/* Smooth transitions for theme changes */
.draggable-card,
.draggable-card__inner {
    transition: background-color var(--transition-base), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}