/* ============================================================
ULTRALIGHT LIFE — ARTICLE STYLES
This file controls ONLY the article section.
Header / Footer remain untouched.
============================================================ */

/* ------------------------------------------------------------
2. BASE PAGE
------------------------------------------------------------ */

/* body is the ONLY scroll container */
body {
    background-color: var(--page-black);
    margin: 0;
    padding: 0;

    /* Scroll + stable gutter */
    overflow-y: scroll;
   /* scrollbar-gutter: stable both-edges; */

    /* Prevent horizontal creep */
    overflow-x: hidden;

    /* Your existing styles */
    color: var(--sand-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ------------------------------------------------------------
3. HERO IMAGE
------------------------------------------------------------ */

.article-hero {
    height: 60vh;
    background-color: var(--hero-slate);
    position: relative;
    overflow: hidden;
    display: block;
    margin-top: -1px;
    padding-top: 1px;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 1px);
    object-fit: cover;
    opacity: 1.00;
    filter: grayscale(30%) contrast(1.1);
}

/* ------------------------------------------------------------
4. TRIP LAB
------------------------------------------------------------ */

.trip-lab {
    background: var(--card-surface);
    max-width: 900px;
    margin: -50px auto 80px;
    position: relative;
    z-index: 10;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}

.lab-item span {
    display: block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sweet-blue);
    margin-bottom: 8px;
    font-weight: 700;
}

.lab-item strong {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--sweet-blue);
}

.telemetry-badge strong {
    text-shadow: 0 0 8px rgba(124, 179, 210, 0.2);
}

.telemetry-link {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bright-light);
    text-decoration: none;
    margin-top: 5px;
    opacity: 1.00;
}

.telemetry-link-howto {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bright-light);
    text-decoration: none;
    margin-top: 5px;
    opacity: 1.00;
    transition: all 0.3s ease-in-out;
}

.telemetry-link-howto:hover {
    color: var(--sweet-blue);
}

/* ------------------------------------------------------------
5. ARTICLE CONTENT
------------------------------------------------------------ */

article.content {
    max-width: 750px;
    margin: 0 auto 100px;
    padding: 0 25px;
}

.article-header {
    display: flex;
    flex-direction: column;   /* Force Title over Date */
    align-items: flex-start;  /* Align both to the left */
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--terracotta); /* Your brand line */
}

h1 {
    font-size: 2.2rem;
    font-weight: 200;         /* The thin, elegant look */
    letter-spacing: -1px;     /* Tight tracking for the header */
    text-transform: lowercase;
    color: var(--sand-text);  /* Restoring the brand color */
    margin-bottom: 10px;      /* Space between Title and Date */
    line-height: 1.1;
}

/* 3. The Date - Restoring the "Eyebrow" styling */

.sub-date {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;      /* The wide, technical look */
    color: var(--sweet-blue); /*  */
    opacity: 1;               /* Full visibility */
}

p {
    margin-bottom: 35px;
    font-size: 0.95rem;
    color: var(--muted-grey);
    font-weight: 300;
}

.ad-spot {
    padding-bottom: 35px;
}

.ad-spot-gallery {
    display: block;      /* Custom elements need a display mode to respect box-model rules */
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;    /* This is the magic line that crops the ad corners */
    margin: 20px;
}

.fade-up {
    /* We set these to the "visible" state by default */
    opacity: 1;
    transform: translateY(0);

    /* We use your existing transition for a smooth entrance on load */
    transition: opacity .8s ease-out, transform .8s ease-out;

    /* This triggers the fade when the page loads, matching your body */
    animation: fadeIn 0.8s ease-out;
}

/* ------------------------------------------------------------
6. INLINE IMAGES (LIGHTBOX-ENABLED)
------------------------------------------------------------ */

.image-frame {
    width: 100%;
    margin: 60px 0;
    background: var(--card-surface);
    padding: 10px;
}

.image-frame a {
    display: block;
    cursor: zoom-in;
}

.image-frame img {
    width: 100%;
    display: block;
    opacity: 1.00;
    transition: opacity 0.2s ease;
}

.image-frame img:hover {
    opacity: 0.85;
}

.caption {
    font-size: 0.7rem;
    opacity: 1.00;
    text-align: right;
    margin-top: 10px;
    letter-spacing: 2px;
    color: var(--snow-cyan);
}

/* ------------------------------------------------------------
7. VIDEO BLOCK
------------------------------------------------------------ */

.video-frame {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
}

.video-frame video {
    width: 100%;
    height: auto;
    display: block;
}

.section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 60px 0 20px;
    letter-spacing: 0.05em;
}

/* Full-width breakout */

.related-section {
    position: relative;
/*    width: 100vw; */
    width: 100%;
max-width: 100%;
    margin-left: calc(50% - 50vw);
    padding: 60px 0;
    overflow: hidden;
    color: #fff;
}

/* Background image */

.related-bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/bg/soft-mountain-blur.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(2px) brightness(0.6);
    z-index: 1;
}

/* Optional video background */

.related-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) blur(2px);
    z-index: 1;
}

/* Overlay to calm everything down */

.related-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2;
}

/* Content container */

.related-content {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.related-content h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

/* Card layout (reuse your existing styles if you want) */

.related-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.related-cards .card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease;
}

.related-cards .card:hover {
    transform: translateY(-4px);
}

.related-cards .card img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* ------------------------------------------------------------
GALLERY LINK SECTION — FULL-WIDTH LAYOUT BREAK
------------------------------------------------------------ */
/* ------------------------------------------------------------
ARTISTIC SPLASH — SHORT, CINEMATIC, EDITORIAL
------------------------------------------------------------ */

.artistic-splash {
    width: 100%;
    height: 22vh;
    overflow: hidden;
    margin-bottom: 50px;
    position: relative;
}

/* The base image */

.artistic-splash img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(6px) brightness(0.75) saturate(1.3);
    transform: scale(1.15); /* more zoom to compensate for blur */
    opacity: 0.85;
}

/* The artistic color wash overlay */

.artistic-splash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to bottom right,
    rgba(255, 120, 80, 0.35),   /* terracotta wash */
    rgba(255, 200, 120, 0.25)  /* warm sand wash */
    );
    mix-blend-mode: screen; /* makes it bright-ish without neon */
    pointer-events: none;
}

.gallery-link-section {
/*    width: 100vw; */
  width: 100%;
max-width: 100%;
    margin-left: calc(50% - 50vw);
    background: var(--card-surface); /* or --header-obsidian for darker */
    padding: 80px 0;
    margin-top: 80px;
    margin-bottom: 40px;
    text-align: center;
}

.gallery-link-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.gallery-link-section h2 {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: var(--sand-text);
}

.gallery-link-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid var(--terracotta);
    color: var(--bright-light);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.gallery-link-btn:hover {
    background: var(--sweet-blue);
    color: var(--page-black);
}

/* ------------------------------------------------------------
8. END-OF-ARTICLE GALLERY GRID
(ONLY CHANGE: updated background color)
------------------------------------------------------------ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin: 20px 20px;
    padding: 40px 20px;
    background: black; /* ocean blue tile background */
    box-sizing: border-box;
    border-radius: 8px;
}

/* UPDATED BACKGROUND HERE */

.gallery-grid a {
    display: block;
    padding: 6px;
    cursor: zoom-in;
    border-radius: 4px;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1.00;
    transition: opacity 0.2s ease;
    border-radius: 2px;
}

.gallery-grid img:hover {
    opacity: 0.85;
}

/* ------------------------------------------------------------
9. LIGHTBOX OVERLAY
------------------------------------------------------------ */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    object-fit: contain;
}

.lightbox-close {
    position: fixed;
    top: 30px;
    right: 40px;
    font-size: 2rem;
    color: var(--sand-text);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    z-index: 10000;
}

.lightbox-close:hover {
    opacity: 1;
}

/* ------------------------------------------------------------
10. RESPONSIVE TWEAKS
------------------------------------------------------------ */

@media (max-width: 768px) {
    article.content {
        padding: 0 15px;
    }
    /* 1. Force the ad into the document flow */
    .ad-spot {
        display: block !important;
        width: 100% !important;
        max-height: 280px !important; /* Cap the vertical takeover */
        overflow: hidden !important;   /* Chops off the overlap/bleed */
        position: relative !important;
        clear: both !important;
        margin: 20px 0 !important;
        padding: 0 !important; /* Resetting your 35px to keep it tight */
    }

    /* The Ad: Forcing it to stay in the lines */
    .ad-spot ins.adsbygoogle {
        margin-left: 0 !important;   /* Kills the -34.99px shift */
        margin-right: 0 !important;
        width: 100% !important;      /* Kills the 402px blowout */
        left: 0 !important;
        position: relative !important;
        height: auto !important;
    }
    ins.adsbygoogle {
        display: block !important;
        position: relative !important; /* Ensure it stays in the stack */
        clear: both !important;        /* Prevents text from wrapping around/under it */
        max-height: 250px !important;
        overflow: hidden !important;
        z-index: 1 !important;         /* Keeps it from floating 'over' other layers */
        margin-bottom: 20px !important; /* Forces space between ad and text below */
    }

    /* 2. Fix the Article Container */
    .article-content, .trip-lab {
        display: flex;
        flex-direction: column; /* Forces everything into a vertical stack */
    }

    .gallery-grid {
        display: grid !important;
        /* 1. Force 3 columns for density */
        grid-template-columns: repeat(3, 1fr) !important;
        /* 2. Lock to your 15px site standard */
        padding: 0 15px !important;
        /* 3. The 'Hairline' gap for the wall look */
        gap: 1px !important;
        margin: 15px 0 !important;

    }
    .gallery-grid a {
        padding: 3px;
    }

    .gallery-grid img {
        width: 100% !important;
        display: block !important;
        /* 4. The Insurance Policy: Forces 16:9 and future portraits into squares */
        aspect-ratio: 1 / 1 !important;
        /* 5. Keeps Nikon Z8 details from stretching */
        object-fit: cover !important;
    }

    .trip-lab {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        width: 100%; /* Use full width on small screens */
    }

    h1 {
        font-size: 1.8rem;
    }
}