/* Apply globally to keep high-res photos sharp when sized down */
.media-full img,
.media-left img,
.media-right img,
.side-by-side-item img,
.gallery-grid img {
    image-rendering: -webkit-optimize-contrast; /* Webkit / Safari optimization */
    image-rendering: crisp-edges;               /* Standard standard approach */
}

/* renderFull */

/* Update the global full-width figure caption style */
.media-caption {
    margin-top: 0.85rem;  /* Pushes text down cleanly away from the image */
    font-size: 0.9rem;
    color: #555;          /* Slightly deeper dark gray for improved readability contrast */
    line-height: 1.6;     /* Increases spacing between multi-line captions */
    letter-spacing: -0.011em; /* Subtle typography refinement for cleaner digital rendering */
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.media-full img {
    display: block;       /* 1. Allows margin: auto to work */
    max-width: 768px;     /* 2. Caps the image at its natural size */
    width: 100%;          /* 3. Ensures it scales down responsively on smaller screens */
    height: auto;
    margin: 0 auto;       /* 4. Centers the image horizontally */
    
    border-radius: 8px;
}


/* Side by Side*/

.side-by-side-gallery {
margin: 15px 0;
overflow: hidden;
}

.side-by-side-row {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Center items if they don’t fill the row */
gap: 20px; /* Use gap instead of margin for cleaner spacing */
}

.side-by-side-item {
    flex: 1 1 0%; /* Allow columns to grow and distribute space equally */
    max-width: calc(50% - 10px); /* Clean split calculation matching a 20px gap */
    margin: 0; /* CRITICAL: Strips browser default <figure> margins that cause stacking */
    text-align: center;
    box-sizing: border-box;
}

.side-by-side-item img {
max-width: 100%;
width: auto;
height: auto;
display: block;
margin: 0 auto;
}

.side-by-side-caption {
    margin-top: 0.75rem;  /* Separation buffer from the grid thumb containers */
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    text-align: center;   /* Keeps the block uniform if image pairs are centered */
}

/* Stack on mobile */
@media screen and (max-width: 768px) {
.side-by-side-item {
    flex: 0 1 100%;
    max-width: 100%;
}
}

/* right floating media */
.media-right {
    float: right;
    width: min(40%, 480px);
    max-width: 100%;
    margin: 0 0 1rem 1.5rem;
    display: table; /* Force container to shrink-wrap strictly around the image */
}

/* left floating media */
.media-left {
    float: left;
    width: min(40%, 480px);
    max-width: 100%;
    margin: 0 1.5rem 1rem 0;
    display: table; /* Force container to shrink-wrap strictly around the image */
}

/* Remove the old :has(img) selector that allowed caption text to blow out the box width */
.media-right:has(img),
.media-left:has(img) {
    width: auto; 
}

.media-right img,
.media-left img {
    max-width: 100%;      
    height: auto;
    display: block;       
    border-radius: 8px;   
}

/* Floating blocks (Right & Left) figure captions */
.media-right figcaption,
.media-left figcaption {
    display: table-caption;
    caption-side: bottom;
    margin-top: 0.75rem;  
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

/* =========================================================================
   RESPONSIVE MOBILE VIEWPORT OVERRIDES (Max-Width: 768px)
   ========================================================================= */
@media screen and (max-width: 768px) {

    /* Full-width layout normalization */
    .media-full img {
        max-width: 100%;      /* Strips out the 420px constraint so it matches left/right flow */
        width: 100%;
        margin: 1.5rem auto;  /* Maintains standard vertical rhythm */
    }

    .media-caption {
        max-width: 100%;      /* Allows caption to scale cleanly with the new image width */
        padding: 0 15px;      /* Gives the caption text a small safety gutter on small screens */
        box-sizing: border-box;
    }

    /* right floating media */
    .media-right {
        float: none;
        width: 100%;
        max-width: 100%;      /* Changed from 420px to 100% for cross-element layout consistency */
        margin: 1.5rem auto;
    }

    /* left floating media */
    .media-left {
        float: none;
        width: 100%;
        max-width: 100%;      /* Changed from 420px to 100% for cross-element layout consistency */
        margin: 1.5rem auto;
    }
}

/* Gallery */

.media-gallery {
    margin: 2.5rem 0;
}

.gallery-grid {
    columns: 3 260px;
    column-gap: 1.5rem;
}

.gallery-grid figure {
    break-inside: avoid;
    margin: 0 0 1.25rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gallery-grid img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.gallery-grid img:hover {
    transform: translateY(-4px);
}

.gallery-grid figcaption {
    margin-top: 0.65rem;  /* Adds a proportional buffer inside tighter gallery tiles */
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* responsive scaling */
@media (max-width: 1100px) {
    .gallery-grid {
        column-count: 2;
    }
}

@media (max-width: 700px) {
    .gallery-grid {
        column-count: 1;
    }
}

/* Photo slider */

/* Core Slider Wrap Constraints */
.route-slider {
    position: relative;
    max-width: 768px;
    margin: 2rem auto;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

/* Hide all slides by default; let opacity handle transitions */
.slide-item {
    position: relative;
    display: none;
    width: 100%;
    height: auto;
}

.slide-item.active {
    display: block;
}

.slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slide Caption Overlay overlay */
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 12px 20px;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
}

/* Navigation Arrow Controls */
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 14px 18px;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
    transition: background 0.2s;
    z-index: 10;
}

.slider-prev:hover, .slider-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.slider-prev { left: 10px; }
.slider-next { right: 10px; }