/* =======================================================
   SINGLE PROJECT LAYOUT (assets/css/project.css)
   ======================================================= */


.box-project-master {
    /* Layout Variables */
    --project-padding: 40px; 
    --split-gap: 60px;
    --split-image-width: 50%;
    --split-image-height: 80vh;
    --gallery-row1-height: 500px;
    --gallery-gap: 20px;
    
    width: 100%;
    overflow-x: hidden;
    background: #fff;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
}

/* --- 1. HERO SECTION --- */
.box-project-master .project-hero {
    position: relative;
    width: 100%;
    height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 67px; 
}

.box-project-master .hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    z-index: 1;
}

.box-project-master .hero-bg::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.25); z-index: 2;
}

.box-project-master .hero-content {
    position: relative; z-index: 3; text-align: center;
}

.box-project-master .hero-title {
    font-size: clamp(40px, 5vw, 60px); color: #fff; text-transform: uppercase; margin: 0; font-weight: 500;
}

/* --- 2. META BARS --- */
.box-project-master .project-meta-bar {
    max-width: 100%;
    margin: 0 auto 80px auto;
    padding: 0 var(--project-padding);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 100px;
}

.box-project-master .top-bar { border-top: none; }

.box-project-master .bottom-bar { margin-top: 67px; }

.box-project-master .meta-item label {
    display: block; 
    font-size: 50px; 
    font-weight: 600; 
    text-transform: uppercase; 
    color: #000; 
    margin-bottom: 8px;
    line-height: 1;
}

/* Override font size for bottom bar labels per user request */
.box-project-master .bottom-bar .meta-item label {
    font-size: 22px !important;
}

.box-project-master .meta-item .meta-value {
    display: block; 
    font-size: 16px; 
    color: #666; 
    font-weight: 400; 
    text-transform: uppercase;
}

/* --- 3. SPLIT VIEW --- */
.box-project-master .project-split {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    gap: var(--split-gap) !important; 
    align-items: flex-start !important;
    padding-left: var(--project-padding) !important;
    padding-right: var(--project-padding) !important;
    margin-bottom: 100px;
}

.box-split-image-left .box-project-master .project-split {
    flex-direction: row-reverse !important;
}

.box-project-master .col-media {
    width: calc(var(--split-image-width) - (var(--split-gap) / 2)) !important;
    flex-shrink: 0 !important;
}


.box-project-master .col-text {
    width: calc((100% - var(--split-image-width)) - (var(--split-gap) / 2)) !important; 
    flex-shrink: 0 !important;
}

.box-project-master .text-body {
    margin-top: 40px !important; 
    font-size: 22px; 
    line-height: 1.4; 
    color: #333; 
    margin: 0;
}

.box-project-master .split-image {
    width: 100% !important; 
    height: var(--split-image-height) !important; 
    object-fit: cover !important; 
    display: block;
}

/* --- 4. MASONRY GALLERY --- */
.box-project-master .project-gallery-masonry {
    margin-bottom: 80px;
}

.box-project-master .project-gallery-row-1 {
    padding-left: var(--project-padding) !important;
    padding-right: var(--project-padding) !important;
    margin-bottom: var(--gallery-gap);
}

.box-project-master .gallery-grid {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: wrap !important; /* Forces Masonry Wrapping */
    gap: var(--gallery-gap) !important; 
    width: 100% !important;
}

.box-project-master .gallery-grid .box-gallery-cell {
    /* flex-grow: 1 makes images stretch to fill the row (Justified Layout) */
    flex: 1 0 auto !important; 
    height: var(--gallery-row1-height) !important; 
    cursor: zoom-in;
    margin-bottom: 0;
}

.box-project-master .gallery-grid .box-gallery-cell img {
    height: 100% !important; 
    width: 100% !important; /* Changed to 100% to fill the flex-grown cell */
    object-fit: cover !important; 
    display: block;
}

/* Row 2: Full Width */
.box-project-master .project-gallery-row-2 {
    width: 100%;
    padding-left: var(--project-padding) !important;
    padding-right: var(--project-padding) !important;
    box-sizing: border-box;
}

.box-project-master .project-gallery-row-2 img {
    width: 100%; 
    height: auto; 
    max-height: 90vh; 
    object-fit: cover; 
    display: block; 
    cursor: zoom-in;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .box-project-master .project-meta-bar { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px 20px; 
    }
    
    .box-project-master .project-split, 
    .box-split-image-left .box-project-master .project-split { 
        flex-direction: column !important; 
        gap: 40px !important; 
    }
    
    .box-project-master .col-media, 
    .box-project-master .col-text { 
        width: 100% !important; 
    }
    
    .box-project-master .split-image { 
        height: auto !important; 
        max-height: 60vh !important; 
    }
    
    /* Scale down the massive font on tablet/mobile */
    .box-project-master .meta-item label {
        font-size: 32px; 
    }
    .box-project-master .bottom-bar .meta-item label {
        font-size: 18px !important;
    }

    /* Stack Gallery on Mobile */
    .box-project-master .gallery-grid .box-gallery-cell {
        width: 100% !important;
        height: auto !important;
        flex-grow: 0 !important;
    }
}

@media (max-width: 768px) {
	    
    .box-project-master .project-meta-bar { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
	.box-project-master .project-gallery-row-1,
	.box-project-master .project-gallery-row-2 { padding: 15px 15px 0 20px!important;}
	.box-project-master .project-meta-bar,
	.box-project-master .project-split {padding: 0 14px 0 20px !important;}
	.box-project-master .text-body {margin-top:0;}

}