/* ----------------------------------------------------------------
	Custom Global CSS - THE PHOTOGRAPH ADVENTURE
-----------------------------------------------------------------*/

:root {
    --cnvs-themecolor: #df6f12;
    --cnvs-themecolor-rgb: 223, 111, 18;
    --cnvs-slider-arrows-size: 35px;
}

/* Header & Navigation Fixes */
.header-wrap-clone { height: calc(var(--cnvs-header-height) + -39px); }
.is-expanded-menu .menu-link { --cnvs-primary-menu-padding-y: calc(calc(var(--cnvs-sticky-header-height) - 62px) * 0.4); }
.is-expanded-menu .full-header .primary-menu .menu-container { border-right: 0px; }
.is-expanded-menu .full-header #logo { padding-right: 6px; border-right: 0px solid; }

/* Mobile Menu Toggle */
@media (min-width: 992px) { 
    .cnvs-hamburger { display: none; --cnvs-hamburger-size: 1rem; }
}

/* Logo Styling */
#logo a { font-size: 18px; }
#logo.custom-logo { font-size: 0.8125rem; text-transform: uppercase; }
#logo.custom-logo .photograph-logo { color: #212529; padding-right: 5px; font-size: 0.8125rem; }
#logo.custom-logo .adventure-logo { color: #df6f12; font-size: 0.8125rem; }

/* Global Section Backgrounds */
.section_orange { background-color: #df6f12; }
.section_grey { background-color: #7a7979; }
.section_blue { background-color: #2785c9; }
.white_text { color: white; }
p { font-size: 1rem; }

/* Bullet Indentation */
.content-wrap .container ul { padding-left: 3.5em; }
.content-wrap .container ul ul { padding-left: 2.5em; }

@media (max-width: 767px) {
    .mobile-hidden { display: none; }
}

/* ----------------------------------------------------------------
    POST CONTENT SPECIFIC STYLES
    (Individual Story Layouts Only)
-----------------------------------------------------------------*/

.post-content h2, .post-content h3 {  color: #222; margin-top: 1.5rem; } /**font-family: 'Playfair Display', serif; *//
.post-content p {  font-weight: 300; line-height: 1.8; color: #444; margin-bottom: 25px; }
/* .post-content .drop-cap::first-letter { font-size: 3.5rem; float: left; margin-top: -8px; margin-right: 12px;  color: #df6f12; } /**font-family: 'Playfair Display', serif; *//

/* Editorial Columns */
.post-content .text-narrow { max-width: 800px; margin: 0 auto; }
.post-content .editorial-row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 60px; gap: 30px; }
.post-content .editorial-col-text { flex: 1 1 400px; padding: 20px; }
.post-content .editorial-col-img { flex: 1 1 400px; }
.post-content .editorial-col-img img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: opacity 0.3s; }
.post-content .editorial-col-img a:hover img { opacity: 0.9; }

/* Pull Quotes */
.post-content .pull-quote-box { background: #f9f9f9; border-left: 5px solid #df6f12; padding: 40px; margin: 50px auto; text-align: center; max-width: 800px; }
.post-content .pull-quote-text {  font-size: 1.6rem; font-style: italic; color: #333; line-height: 1.4; margin-bottom: 15px; } /**font-family: 'Playfair Display', serif; *//
.post-content .pull-quote-author { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #888; }  /**font-family: 'Inter', sans-serif;*//

/* ----------------------------------------------------------------
    REFINED JUSTIFIED GALLERY (Flexbox Logic)
-----------------------------------------------------------------*/

.post-content .gallery-container {
    width: 100%;
    padding: 0 10px; 
    box-sizing: border-box;
}

.post-content .portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Tighter gap as requested */
    margin: 40px 0 80px 0;
}

/* THE FIX: Prevents last row from stretching */
.post-content .portfolio-grid::after {
    content: '';
    flex-grow: 999999999;
}

.post-content .portfolio-item {
    height: 300px; /* Fixed height for uniform rows */
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    cursor: zoom-in;
    /* Default grow behavior */
    flex-grow: 1;
    transition: none !important; /* Stop theme popping */
}

/* Logic for minimal cropping: Landscapes take 1.5x width space */
.post-content .portfolio-item.landscape {
    flex-grow: 1.5;
    flex-basis: 400px;
}

/* Portraits take 1x width space */
.post-content .portfolio-item.portrait {
    flex-grow: 1;
    flex-basis: 200px;
}

.post-content .portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures no gaps inside the item */
    display: block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hover Effect: Darken Fade (No Zoom/Pop) */
.post-content .portfolio-item .bg-overlay {
    display: none; /* Hide default theme overlay */
}

.post-content .portfolio-item:hover img {
    opacity: 0.9;
    /* Optional: If you want a slight scale like your example script */
    transform: scale(1.03); 
}

/* ----------------------------------------------------------------
    LIGHTBOX STYLES (Built by Script)
-----------------------------------------------------------------*/
.lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.95); display: none;
    justify-content: center; align-items: center; z-index: 99999;
}
.lightbox.active { display: flex !important; opacity: 1; }
.lightbox img {
    max-width: 95%; max-height: 95%; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border-radius: 4px; object-fit: contain; user-select: none;
}
.lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; z-index: 100002; }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 60px; cursor: pointer; padding: 20px; z-index: 100002; user-select: none; opacity: 0.7; transition: opacity 0.2s; }
.nav-arrow:hover { opacity: 1; }
.prev { left: 10px; }
.next { right: 10px; }

/* ----------------------------------------------------------------
    MOBILE: 2-COLUMN (NO HEAVY CROPPING)
-----------------------------------------------------------------*/
@media (max-width: 767px) {
    .post-content .portfolio-grid::after { display: none; }

    .post-content .portfolio-item {
        /* Force 2 columns */
        flex: 1 1 calc(50% - 10px) !important;
        /* Let height be auto-ish based on a specific ratio 
           to prevent extreme vertical chopping */
        height: auto !important;
        aspect-ratio: 1 / 1.1; /* Slightly taller than square to help portraits */
    }

    .post-content .portfolio-item.landscape {
        aspect-ratio: 1.2 / 1; /* Wider for landscapes to reduce side cropping */
    }

    .post-content .portfolio-item img {
        height: 100%;
        width: 100%;
        object-fit: cover; /* Still cover, but the box shape matches the photo better */
    }
}

@media (max-width: 480px) {
    .post-content .portfolio-item {
        /* On very small phones, increase height to show more of the vertical shots */
        aspect-ratio: 1 / 1.3;
    }
}