/* =========================================
   public/css/gallery.css
   ========================================= */

/* --- Hero Section (Gallery Specific) --- */
.hero-section {
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex; align-items: flex-end; justify-content: center;
    text-align: center;
    padding-bottom: 4rem;
}

.gallery-1-hero { /* Specific background for Gallery page */
    background: url('../images/gallery/gallery-facade-1.jpg') no-repeat bottom center/cover;
}
.gallery-2-hero { /* Specific background for Gallery page */
    background: url('../images/gallery/gallery-facade-2.jpg') no-repeat bottom center/cover;
}
.gallery-3-hero { /* Specific background for Gallery page */
    background: url('../images/gallery/gallery-facade-3.jpg') no-repeat bottom center/cover;
}
.gallery-4-hero { /* Specific background for Gallery page */
    background: url('../images/gallery/gallery-facade-4.jpg') no-repeat bottom center/cover;
}
.gallery-5-hero { /* Specific background for Gallery page */
    background: url('../images/gallery/gallery-facade-5.jpg') no-repeat bottom center/cover;
}
.gallery-6-hero { /* Specific background for Gallery page */
    background: url('../images/gallery/gallery-facade-6.jpg') no-repeat bottom center/cover;
}

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}

.hero-content {
    position: relative; z-index: 2; color: white; padding: 0 1rem;
}

.gallery-subtitle {
    font-size: 1.5rem; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 0.5rem; opacity: 0.9;
}

.gallery-title {
    font-size: 3rem; font-weight: 700;
    line-height: 1.2; font-family: var(--font-sans);
}

/* --- Intro Section with Pattern --- */
.intro-section {
    padding: 6rem 0;
    text-align: center;
    background-color: #fcfcfc;
    /* Subtle CSS radial pattern */
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}

.intro-box {
    max-width: 1100px; margin: 0 auto;
    background: rgba(255,255,255,0.8);
    padding: 2rem; border-radius: 8px;
}

/* --- 3x3 Grid Layout --- */
.mosaic-grid { width: 100%; overflow: hidden; }

.mosaic-item {
    height: 450px;
    position: relative;
    overflow: hidden;
}

/* The Red Blocks */
.mosaic-solid-red {
    background-color: var(--brand-red);
    height: 100%; width: 100%;
}

/* The Image Blocks */
.mosaic-img-container {
    width: 100%; height: 100%;
    background-color: #ddd;
}

.mosaic-img-container img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mosaic-img-container:hover img {
    transform: scale(1.1);
}

/* --- Responsive Adjustments (Gallery Elements Only) --- */
@media (max-width: 991px) {
    .mosaic-item { height: 350px; }
}

@media (max-width: 768px) {
    .gallery-title { font-size: 2rem; }
    .mosaic-item { height: 300px; }
}