/* ========================================= */
/* --- GRAPHIC SHOWCASE SPECIFIC STYLES --- */
/* ========================================= */

/* * CRITICAL FIX: Ensure the intro section doesn't push the graphic grid off-screen.
 * If .hero-intro has a min-height, we must override it here.
 */
.hero-intro, .about-hero-section {
    min-height: auto; /* Remove excessive height from the main intro container */
}

.about-hero-section {
    padding-top: 80px;
    margin-bottom: 80px;
}


/* --- GRAPHIC GRID STYLES --- */
.graphic-grid {
    display: grid;
    /* 3 columns wide for desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
    width: 100%;
    margin: 0 auto;
}

/* Square graphic cards */
.g-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Using global variables for neon/glass theme */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.g-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.g-item:hover {
    transform: scale(1.04);
    box-shadow: 0 0 25px rgba(85, 255, 255, 0.4);
}

/* ============================
   MODAL FIXES
   ============================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 999;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    
    /* FIX 1: Set explicit dimensions to constrain the image */
    width: 90%; 
    height: 90vh; /* Use vh to constrain by screen height */
    
    /* Ensure the content is contained */
    overflow: hidden; 
    
    /* FIX 2: Use flex to correctly center and contain the image */
    display: flex; 
    justify-content: center;
    align-items: center;
}

.modal-content img {
    /* FIX 3: Let the image scale to fit the 90% x 90vh container */
    width: auto; /* Let the aspect ratio dictate the width */
    height: auto; /* Let the aspect ratio dictate the height */
    
    /* CRITICAL FIX 4: Limits width/height to the container, prioritizing height for vertical images */
    max-width: 100%; 
    max-height: 100%; 
    
    /* Ensure no cropping occurs */
    object-fit: contain; 
    
    border-radius: 10px;
}

.modal-close {
    position: absolute;
    
    /* FIX 5: Reposition button to top-right corner, inside the viewport */
    top: 10px; 
    right: 10px;
    
    /* FIX 6: Restyle the button for better visibility/accessibility */
    background: rgba(0, 0, 0, 0.5); 
    color: white; 
    border: none;
    cursor: pointer;
    border-radius: 50%; /* Make it circular */
    
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 1.8rem;
    line-height: 1; /* Center the 'x' vertically */
    z-index: 1000; /* Ensure it's above the image */
}

/* --- GRAPHIC SHOWCASE SIDEBAR BUTTON OVERRIDE --- */
/* New rule to ensure the button has correct size and gradient only on this page */
.sidebar-home-btn-override {
    /* Appearance: Directly apply the neon gradient and colors */
    background: var(--super-neon-gradient);
    color: #000000; 
    border: none;
    box-shadow: 0 0 20px rgba(85, 255, 255, 0.4);

    /* Sizing: Force correct padding/height in the confined sidebar space */
    padding: 15px 30px; 
    height: auto;
    
    /* Ensure it acts like a block button */
    display: inline-block; 
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-top: 20px;
    max-width: 80%;
    
    /* Fix for the initial hidden state inherited from glass-btn-wrapper */
    opacity: 1; 
    transform: translateY(0);
}

.sidebar-home-btn-override:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(85, 255, 255, 0.8);
    transform: translateY(-3px);
}

/* --- MEDIA QUERIES --- */

@media (max-width: 900px) {
    .graphic-grid {
        /* 2 columns for medium screens */
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 600px) {
    .graphic-grid {
        /* 1 column for small screens */
        grid-template-columns: 1fr; 
    }
}