/* Game Categories Section - Instant Gaming Replica */

.gv-categories-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    /* Or site font */
}

/* Headline */
.gv-headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.gv-headline h2 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    /* Assumed dark theme */
    margin: 0;
}



/* Grid Container */
.gv-listing-items {
    display: grid;
    /* Force 3 columns on larger screens */
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 30px;
}

/* Tablet / Small Desktop: Keep 3 columns, tighter gap */
@media (max-width: 1024px) {
    .gv-listing-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em;
    }

    .gv-name {
        font-size: 20px;
    }

    .gv-item {
        /* Aspect ratio handles height */
        overflow: hidden;
        /* Contain character */
    }

    /* Move character inside */
    .gv-cover {
        top: 0 !important;
    }

    /* Disable Hovers */
    .gv-item:hover .gv-bg-img,
    .gv-item:hover .gv-cover,
    .gv-item:hover .gv-bg-container::after {
        transform: none !important;
        transition: none;
    }
}

/* Card Item */
.gv-item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: visible;
    /* Required for pop-out */
    cursor: pointer;
    /* Removed BG props from here */
    transform-style: preserve-3d;
}

/* Background Container (Clips the zoom) */
.gv-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
    transform: translateZ(0);
    /* Hardware accel for clipping */
}

/* Gradient Overlay Mask */
.gv-bg-container::after {
    content: '';
    position: absolute;
    /* Was inset: 0 */
    inset: -20%;
    z-index: 2;
    /* Transparent -> Black */
    /* Adjusted stops for larger area: 40% -> 50% */
    background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 1) 100%);
    transition: transform 0.6s ease;
    will-change: transform;
    pointer-events: none;
    /* Let clicks pass through if needed */
}

/* Hover: Slide mask out to bottom-right */
.gv-item:hover .gv-bg-container::after {
    transform: translate(100%, 100%);
}

/* Background Image (Zooms) */
.gv-bg-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease, opacity 0.4s ease;
    /* Added opacity transition */
    /* Snappier */
    will-change: transform;
    backface-visibility: hidden;
    /* Prevent flicker */
    transform: translateZ(0);

    /* Lazy Load Init */
    opacity: 0;
}

.gv-bg-img.gv-loaded {
    opacity: 1;
}

/* Hover: Zoom background */
.gv-item:hover .gv-bg-img {
    transform: scale(1.05) translateZ(0);
    /* Reduced from 1.1 */
}

/* Link Wrapper */
.gv-content {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

/* Category Name */
.gv-name {
    position: absolute;
    bottom: 20px;
    left: 25px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 5;
    margin: 0;
    pointer-events: none;
    /* Prevent text selection interfering */
}

/* Character Overlay (The Pop-out) */
.gv-cover {
    position: absolute;
    top: -30px;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;
    /* Smooth return on hover out */
    transition: transform 0.4s ease-out;
    /* Snappier return */
    z-index: 4;
    transform-origin: bottom right;
    /* Grow from bottom right */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Layer promotion */

    /* Lazy Load Init */
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease;
}

.gv-cover.gv-loaded {
    opacity: 1;
}

/* Specific Tweak: Ensure image doesn't overlap text too much if needed */
/* Adjust background-position per card if specific images need aligning */

/* Hover Effect: Scale Character */
.gv-item:hover .gv-cover {
    transform: scale(1.05) translateZ(0);
    /* Reduced from 1.1 */
    /* Only apply bouncy effect on hover in */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Snappier bouncy */
}

/* Mobile: Horizontal Slider (< 600px) */
/* Mobile: Horizontal Slider (Strictly below 500px) */
@media (max-width: 500px) {
    .gv-listing-items {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.5em;
        /* Reduced gap */
        padding-bottom: 20px;
        /* Space for scroll / touch */
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .gv-listing-items::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .gv-item {
        flex: 0 0 70.5%;
        /* Exact match to reference */
        /* Show ~70% of card to hint scroll */
        scroll-snap-align: center;
        /* Height handled by aspect-ratio 16/9 inherited from base */
    }

    .gv-name {
        font-size: 17px;
        /* 17px font size */
    }
}