/* =======================================================
   JOURNAL MASTER LAYOUT (assets/css/journal.css)
   ======================================================= */


.box-journal-master {
    /* Fallback variables */
    --journal-padding: 40px; 
    --hero-overlay: rgba(0,0,0,0.25);
    
    --split-gap: 60px;
    --split-image-width: 50%;
    --split-image-height: 80vh;
    --split-image-fit: cover;
    
    --gallery-items: 2;
    --gallery-gap: 20px;
    --gallery-aspect: 4/5;
    --gallery-natural-height: 500px;
    
    width: 100%;
    overflow-x: hidden;
    background: #fff;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
}

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

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

.box-journal-master .hero-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--hero-overlay) !important;
    z-index: 2;
}

.box-journal-master .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 1200px;
}

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

/* --- COMMON SECTION STYLES --- */
.box-journal-master .journal-section {
    padding-left: var(--journal-padding) !important;
    padding-right: var(--journal-padding) !important;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

/* --- 2. SPLIT VIEW SECTION (FIXED WIDTH MATH) --- */
.box-journal-master .journal-split {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    gap: var(--split-gap) !important; 
    align-items: flex-start !important;
}

/* Reverses the layout if the Elementor control is set to "Left" */
.box-split-image-left .box-journal-master .journal-split {
    flex-direction: row-reverse !important;
}

.box-journal-master .col-media {
    /* MATH: (User Width %) minus (Half the gap) = Perfect Fit without Overflow */
    width: calc(var(--split-image-width) - (var(--split-gap) / 2)) !important; 
    flex-shrink: 0 !important;
    box-sizing: border-box;
}

.box-journal-master .col-text {
    /* MATH: The remaining width minus the other half of the gap */
    width: calc((100% - var(--split-image-width)) - (var(--split-gap) / 2)) !important; 
    flex-shrink: 0 !important;
    box-sizing: border-box;
}

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

.box-journal-master .text-body p { margin-bottom: 25px; }

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

/* --- 3. GALLERY SECTION --- */
.box-journal-master .gallery-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.box-journal-master .gallery-top h3 {
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 500;
    color: #000;
}

.box-journal-master .gallery-nav-controls {
    display: flex;
    gap: 15px;
}

.box-journal-master .nav-arrow {
    width: 24px; height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
}
.box-journal-master .nav-arrow::before {
    content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 10px;
    border-top: 1px solid #000; border-right: 1px solid #000;
}
.box-journal-master .nav-arrow.prev::before { transform: translateY(-50%) rotate(-135deg); }
.box-journal-master .nav-arrow.next::before { transform: translateY(-50%) rotate(45deg); }

/* Horizontal Swipe Flex Container */
.box-journal-master .gallery-grid {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    gap: var(--gallery-gap) !important; 
    width: 100% !important;
    overflow-x: auto !important;    
    scroll-snap-type: x mandatory;  
    scrollbar-width: none;          
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch; 
}

.box-journal-master .gallery-grid::-webkit-scrollbar {
    display: none; 
}

/* =======================================================
   MODE 1: STRICT GRID (Aspect Ratio & Items/View)
   ======================================================= */
.box-gallery-mode-grid .box-gallery-cell {
    flex: 0 0 calc((100% - (var(--gallery-gap) * (var(--gallery-items) - 1))) / var(--gallery-items)) !important; 
    scroll-snap-align: start;
    position: relative;
    cursor: zoom-in !important;
}

.box-gallery-mode-grid .box-gallery-cell img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--gallery-aspect) !important; 
    object-fit: cover !important;
    display: block;
}

/* =======================================================
   MODE 2: NATURAL WIDTH (Fixed Height)
   ======================================================= */
.box-gallery-mode-natural .box-gallery-cell {
    flex: 0 0 auto !important; 
    height: var(--gallery-natural-height) !important; 
    scroll-snap-align: start;
    position: relative;
    cursor: pointer;
}

.box-gallery-mode-natural .box-gallery-cell img {
    height: 100% !important;
    width: auto !important; 
    object-fit: cover !important;
    display: block;
}

/* --- RESPONSIVE STACKING FOR MOBILE --- */
@media (max-width: 1024px) {
    .box-journal-master .journal-split,
    .box-split-image-left .box-journal-master .journal-split {
        flex-direction: column !important; 
        gap: 40px !important;
    }
    
    .box-journal-master .col-media,
    .box-journal-master .col-text { 
        width: 100% !important; 
    }
    
    .box-journal-master .split-image {
        height: auto !important;
        max-height: 60vh !important;
    }

    .box-gallery-mode-grid .box-gallery-cell,
    .box-gallery-mode-natural .box-gallery-cell {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 100% !important; 
    }
    
    .box-gallery-mode-grid .box-gallery-cell img,
    .box-gallery-mode-natural .box-gallery-cell img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important; 
    }
}