body {
    justify-content: space-between;
    font-family: "Alegreya Sans", sans-serif;
  
}
.site-header{
    z-index: 1;
}
.gallery-page {
    background-image: var(--wf-gallery-pattern);
    background-repeat: repeat; /* Repeat the logo both horizontally and vertically */
    background-size: 1200px 1200px;
    background-position: top center; /* Ensure the pattern starts centered */
    background-attachment: fixed;
    background-color: #F5EBE9;
}

.header-section {
    margin: 20px;
    padding: 20px;
}

.main-title {
    font-family: var(--primary-font);
    font-size: clamp(2rem, 6vw, 6rem); /* Larger font size */
    padding-left: 20px;
    margin-left: 20px;
    text-align: left; /* Ensure left alignment */
    color: #2a4345; /* Primary green */
}

/* Description Container */
.description-container {
    margin-left: clamp(10px, 10vw, 180px); /* Dynamically adjust margins */
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding-left: clamp(1rem, 2vw, 20px); /* Scale padding */
    border-left: clamp(5px, 1vw, 10px) solid #2a4345; /* Primary green border */
    padding-right: clamp(1rem, 2vw, 20px);
    margin-right: clamp(10px, 10vw, 100px);
    text-align: left; /* Left-justified text */
}

/* Description Text */
.description {
    font-family: 'Merriweather Sans', sans-serif;
    font-size: clamp(0.9rem, 2vw, 2rem); /* Adjust font size */
    line-height: 1.8; /* Slightly tighter line height */
    text-indent: 1.5rem; /* Indentation for the first line */
    color: #333; /* Subtle dark color for readability */
}

.gallery-section {
    margin: clamp(5px, 2vw, 10px);
    padding: clamp(10px, 2vw, 20px);


}

.gallery-row {
    display: flex;
    flex-direction: row;
    margin: 20px -60px 40px 20px;
    align-items: center;
    position: relative; /* Required for text box positioning */

}

.gallery-row.reversed {
    justify-content: flex-end;
    margin-right:-20px;
}

.gallery-text-left{
    flex: 1;
    background-color: #2A4345;
    color: #f5ebe9;
    padding: 10px 60px 10px 100px;
    margin-right: -60px;
    z-index: 1;
    cursor: pointer; /* Add pointer cursor for better UX */
    position: relative; /* Ensure absolute children position correctly */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
    overflow: hidden; /* Prevent overflow when expanded */
    }
    
    .gallery-text-left h2 {
        color: #E6FE6E;
        font-size: clamp(1rem, 3vw, 4rem);
        font-family: var(--secondary-font);
        letter-spacing: clamp(2px, 0.5vw, 8px);
        z-index: 11;
        transform: translateX(0); /* Default position */
    opacity: 1; /* Default visibility */
    animation: none; /* Prevent animation re-triggering outside context */
    }

    .gallery-text {
        flex: 1;
    background-color: #2A4345;
    color: #f5ebe9;
    padding: 10px 280px 10px 60px;
    margin-left:-50px;
    z-index: 1;
    cursor: pointer; /* Add pointer cursor for better UX */
    position: relative; /* Ensure absolute children position correctly */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
    overflow: hidden; /* Prevent overflow when expanded */
    
    }
    
.gallery-text h2 {
    color: #E6FE6E;
    font-size: clamp(1rem, 3vw, 4rem);
    font-family: var(--secondary-font);
    letter-spacing: clamp(2px, 0.5vw, 8px);
    z-index: 11;

}

/* Expanded state for hover and click */
.gallery-text-left.expanded,
.gallery-text.expanded {
    transform: scale(1.03);
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), /* Smooth easing */
    opacity .7s ease-in-out; /* Fade-in timing */
}

/* Hover text visibility */
.gallery-text-left.expanded .hover-text,
.gallery-text.expanded .hover-text {
    display: block;
    opacity: 1;
    transition: opacity 0.7s ease;
}


.gallery-images {
    flex: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;

}

.gallery-images-reversed {
    flex: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.gallery-images img {
    width: calc(50% - 10px); /* Two images per row */
    padding: 10px;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
}

.gallery-images-reversed img {
    width: calc(50% - 10px); /* Two images per row */
    padding: 10px;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
}
/* ── Hover text & Explore link ── */
.hover-text {
    display: none;
    font-family: 'Lora', serif;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    line-height: 1.7;
    color: #F5EBE9;
    margin-top: 0.75rem;
}

.explore-link {
    display: block;
    margin-top: 1rem;
    color: #E6FE6E;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(230, 254, 110, 0.5);
    transition: text-decoration-color 180ms ease;
}

.explore-link::after {
    content: ' →';
    text-decoration: none;
    display: inline-block;
    transition: transform 180ms ease;
}

.explore-link:hover {
    text-decoration-color: #E6FE6E;
}

.explore-link:hover::after {
    transform: translateX(4px);
}

/* Animation setup */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%); /* Start off-screen */
        opacity: 0; /* Invisible */
    }
    to {
        transform: translateX(0); /* Slide into position */
        opacity: 1; /* Fully visible */
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%); /* Start off-screen */
        opacity: 0; /* Invisible */
    }
    to {
        transform: translateX(0); /* Slide into position */
        opacity: 1; /* Fully visible */
    }
}

/* Use animation-fill-mode only temporarily */
.gallery-row:first-of-type .gallery-text,
.gallery-row:nth-of-type(3) .gallery-text,
.gallery-row:first-of-type .gallery-text-left,
.gallery-row:nth-of-type(3) .gallery-text-left,
.gallery-row:nth-of-type(2) .gallery-text,
.gallery-row:nth-of-type(2) .gallery-text-left {
    animation: slideInLeft 1.5s ease-out forwards;
    animation-fill-mode: both; /* Maintain position temporarily */
}

 

/* Ensure mobile compatibility */
@media (max-width: 768px) {
    .gallery-text-left, .gallery-text {
        padding: 20px;
    }




    /* Center and adjust description */
    .description-container {
        margin: 0 auto; /* Center description */
        padding: 20px;
        border-left: none; /* Remove border for cleaner look */
        text-align: center;
        width: 90%; /* Constrain width */
    }

    .description {
        font-size: clamp(0.8rem, 4vw, 1.25rem); /* Adjust text size */
        line-height: 1.8; /* Slightly tighter line height */
    }

}