/* ==========================================================================
   Desktop Grid Engine Specifications
   ========================================================================== */

.site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.header-controls-group {
    margin-top: 0;
    align-items: flex-end;
}

/* Base Structural Grid (Applies when strict mode is active) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                gap 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   Dynamic Layout States: Fluid Offset System
   ========================================================================== */

/* 1. Add extra breathing room for the offsets to drop down */
.gallery-grid.mode-fluid {
    row-gap: 6rem;
}

/* 2. Stagger columns: drop alternate cards vertically down */
.gallery-grid.mode-fluid .gallery-card:nth-child(2n) {
    transform: translateY(4rem);
}

/* 3. Vary card widths: narrow alternate cards to break the rigid line alignment */
.gallery-grid.mode-fluid .gallery-card:nth-child(3n+1) .card-image-wrapper {
    max-width: 90%;
}

.gallery-grid.mode-fluid .gallery-card:nth-child(3n+2) .card-image-wrapper {
    max-width: 85%;
    margin-left: auto; /* Push it subtly rightward */
}

/* Footer & Profile Desktop Split Alignment Layout Engine */
.about-grid {
    grid-template-columns: 1fr 1.5fr !important;
    gap: 4rem;
}

.about-image-wrapper {
    /* Changed aspect ratio from 4/5 to 1/1 (Square) or 4/3 (Landscape) to reduce height */
    aspect-ratio: 1 / 1 !important; 
    
    /* Strict maximum height limit on desktop displays */
    max-height: 380px !important; 
    
    width: 100%;
}

.profile-container {
    margin-bottom: 4rem;
}