/* ==============================================
   ISOLATED STYLES FOR GALLERY CAROUSEL
   These styles only affect #gallery-container
   and its children, ensuring no conflicts.
   ============================================== */

#gallery-container {
    position: relative; /* Establishes a positioning context for the buttons */
    width: 100%; /* Increased from 80% for more horizontal space */
    max-width: 1200px; /* Increased from 900px */
    margin: auto;
    overflow: visible; /* Changed from 'hidden' to show adjacent slides */
}

.gallery-track {
    display: flex; /* Lays out slides in a row */
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease-in-out; /* Smooth slide transition */
}

.gallery-slide {
    /* This is now just a layout container, the visual styles are on .beat-card-v2 */
    margin: 0 30px; /* Matched margin from .my-work-carousel .carousel-slide */
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    transform: scale(0.9);
    opacity: 0.6;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.gallery-slide.current-slide {
    transform: scale(1);
    opacity: 1;
}

/* --- Exact styles copied from .beat-card-v2 in styles.css --- */

#gallery-container .beat-card-v2 {
    width: 375px;
    height: 625px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 4px var(--accent-color);
}

#gallery-container .beat-card-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: drop-shadow(0 0 10px #1a2130);
    border-radius: 4px;
    image-rendering: pixelated; /* Keep pixelated style for gallery */
}

/* --- Animated Border copied from styles.css --- */
#gallery-container .beat-card-v2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 1px solid var(--accent-color);
    animation: pixel-pulse 1s steps(2) infinite;
    pointer-events: none;
    z-index: 1; /* Above the image but below any interactive elements */
    border-radius: inherit;
}

/* --- Button Styling and Positioning (Unified) --- */
.gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--gray-color);
    color: var(--light-color);
    border: 4px solid var(--light-color);
    box-shadow: 0 0 0 2px var(--light-color), 0 0 8px 2px var(--light-color);
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-btn::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--accent-color);
    animation: pixel-pulse 1s steps(2) infinite;
}

.gallery-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
}

.gallery-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%) scale(1);
}

.gallery-btn.gallery-prev {
    left: 10px;
}

.gallery-btn.gallery-next {
    right: 10px;
}

/* --- Keyframes for the animated border --- */
@keyframes pixel-pulse {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* --- Info Overlay on Hover --- */
.gallery-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
    align-items: center; /* Center horizontally */
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(to top, rgba(17, 20, 28, 0) 0%, rgba(17, 20, 28, 0) 50%);
    transition: background 0.4s ease-in-out;
    pointer-events: none; /* Make sure overlay doesn't block clicks on the slide */
}

/* Hide overlay content by default */
.gallery-info-overlay > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    font-family: var(--font-pixel);
    color: var(--light-color);
}

.gallery-info-overlay .gallery-title {
    font-size: 1.5rem;
    text-shadow: 0 0 8px var(--accent-color);
    margin-bottom: 10px;
}

.gallery-info-overlay .gallery-author {
    font-size: 1rem;
    text-shadow: 0 0 6px var(--light-color);
}

/* Show overlay and its content on hover */
#gallery-container .beat-card-v2:hover .gallery-info-overlay {
    background: linear-gradient(to top, rgba(17, 20, 28, 0.95) 20%, rgba(17, 20, 28, 0) 70%);
}

#gallery-container .beat-card-v2:hover .gallery-info-overlay > * {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delays for a smoother effect */
#gallery-container .beat-card-v2:hover .gallery-author { 
    transition-delay: 0.1s; 
}