/* /public/css/inline_multi_images.css */
/* ========================================================================== */
/*  MULTI-IMAGE inline LAYOUTS                                               */
/* ========================================================================== */
.inline-images-wrapper {
    width: 100%;
}

/* ─── GLOBAL SHARED STYLES (apply to all variants) ───────────────────────── */
.inline-images {
    display: grid;
    width: 100%;
    height: auto;
}


.inline-multi-photo {
    position: relative;
    container-type: size;
    border: 1px solid var(--section-medium-background-color);
}


.inline-multi-photo img.article-photo {
    cursor: default;
}

.inline-multi-photo img.article-photo.zoomable {
    cursor: zoom-in;
}

.inline-multi-photo a>img.article-photo {
    cursor: pointer;
}


.inline-multi-photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    block-size: 100cqh;
    object-fit: cover;
    border-radius: 0;
}


/* ========================================================================== */
/*  ONE & FOUR IMAGE VARIANTS — APPLY GLOBAL ASPECT TO ALL TILES              */
/* ========================================================================== */

.inline-images-one .inline-multi-photo,
.inline-images-four .inline-multi-photo {
    aspect-ratio: var(--inline-aspect, 16 / 9);
}


/* ========================================================================== */
/*  START TWO-IMAGE VARIANT (inline-images-two)                              */
/* ========================================================================== */

.inline-images-two {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
    column-gap: clamp(12px, 5.7778px + 0.8889vw, 16px);
}


.inline-images-two .inline-multi-photo {
    aspect-ratio: var(--inline-aspect, 4 / 3);
}



/* ========================================================================== */
/*  START THREE-IMAGE VARIANT  (inline-images-three)                          */
/* ========================================================================== */

.inline-images-three {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    row-gap: var(--ft-16-12);
    column-gap: var(--ft-16-12);
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.inline-images-three .inline-multi-photo:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: var(--inline-aspect, 16 / 9);

}

.inline-images-three .inline-multi-photo:not(:first-child) {
    aspect-ratio: auto;
}


/* ========================================================================== */
/*  START FOUR-IMAGE VARIANT (inline-images-four)                            */
/* ========================================================================== */
.inline-images-four {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--ft-16-12);
    column-gap: var(--ft-16-12);
}


/* ========================================================================== */
/*  START FIVE-IMAGE VARIANT (inline-images-five)                             */
/* ========================================================================== */

.inline-images-five {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 14px;
    column-gap: 12px;
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    align-items: stretch;
}

.inline-images-five .inline-multi-photo:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: var(--inline-aspect, 16 / 9);
}

.inline-images-five .inline-multi-photo:nth-child(n + 2) {
    aspect-ratio: auto;
}



/* ========================================================================== */
/*  START GRID                           */
/* ========================================================================== */

.inline-images-grid {
    display: grid;
    grid-template-columns: repeat(var(--inline-grid-columns, 3), 1fr);
    gap: 12px;
}

.inline-images-grid .inline-multi-photo {
    aspect-ratio: var(--inline-aspect, 4 / 3);
}

/* =================================================================== */
/*  MOBILE STACKED LAYOUT (grid + 3+ image variants)                   */
/* =================================================================== */

/* /public/css/view_articles.css — REPLACE THIS WHOLE “MOBILE STACKED LAYOUT” SECTION */
@media (max-width: 825px) {

    /* Stacked becomes the source of truth on mobile */
    .inline-images-stacked {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .inline-images-main {
        width: 100%;
    }

    .inline-multi-photo {
        width: 100%;
        aspect-ratio: var(--inline-aspect, 16 / 9);
    }

    .inline-images-main .inline-multi-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .inline-images-scroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .inline-images-scroll .inline-multi-photo {
        flex: 0 0 auto;
        min-width: 200px;
    }

    .inline-images-scroll .inline-multi-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Tune scroll widths by preset */
    .inline-images-wrapper[data-variant="three"] .inline-images-scroll .inline-multi-photo {
        flex: 0 0 max(250px, calc((100% - 12px) / 2));
    }

    .inline-images-wrapper[data-variant="four"] .inline-images-scroll .inline-multi-photo {
        flex: 0 0 max(250px, calc((100% - 24px) / 3));
    }

    .inline-images-wrapper[data-variant="five"] .inline-images-scroll .inline-multi-photo,
    .inline-images-wrapper[data-variant="six"] .inline-images-scroll .inline-multi-photo,
    .inline-images-wrapper[data-variant="seven"] .inline-images-scroll .inline-multi-photo,
    .inline-images-wrapper[data-variant="eight"] .inline-images-scroll .inline-multi-photo,
    .inline-images-wrapper[data-variant="nine"] .inline-images-scroll .inline-multi-photo {
        flex: 0 0 250px;
    }
}



@media (max-width: 825px) {

    .inline-images-wrapper[data-stack="true"] .inline-images-desktop,
    .inline-images-wrapper[data-stack="true"] .inline-images-two {
        display: none !important;
    }

    .inline-images-wrapper:not([data-stack="true"])>.inline-images-stacked {
        display: none !important;
    }

    .inline-images-wrapper[data-stack="true"]>.inline-images-stacked {
        display: flex !important;
    }
}

@media (min-width: 826px) {
    .inline-images-desktop {
        display: grid !important;
    }

    .inline-images-wrapper>.inline-images-stacked {
        display: none !important;
    }
}


/* Two‑image handoff to stacked at 700px */
@media (min-width: 701px) and (max-width: 825px) {

    /* Between 701–825 we still use the two‑image grid; hide the stacked duplicate */
    .inline-images-wrapper[data-variant="two"] .inline-images-stacked {
        display: none !important;
    }
}

@media (max-width: 700px) {

    /* Below 700 → show stacked version for the 2‑image partial, full‑width top/bottom */
    .inline-images-wrapper[data-stack="true"] .inline-images-two {
        display: none !important;
    }

    .inline-images-wrapper:not([data-stack="true"]) .inline-images-wrapper[data-variant="two"]>.inline-images-stacked {
        display: flex !important;
    }

    .inline-images-wrapper[data-variant="two"] .inline-images-main .inline-multi-photo,
    .inline-images-wrapper[data-variant="two"] .inline-images-main .inline-multi-photo img {
        width: 100%;
        aspect-ratio: var(--inline-aspect, 16 / 9);
        object-fit: cover;
    }
}



/* =================================================================== */
/* Zoom button for inline images (shares SVG with carousel) */
/* =================================================================== */

.inline-images-zoom-button {
    position: absolute;
    bottom: clamp(8px, 2.75cqh, 20px);
    left: clamp(8px, 2.75cqh, 20px);
    padding: .5rem .7rem;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 1px;
    z-index: 300;
    background: var(--section-darkestdark-background-color);
    opacity: .6;
    border-radius: 4px;
    font-size: clamp(14px, 9cqh, 38px);
    ;
}

.has-inside-bot-text .inline-images-zoom-button {
    bottom: clamp(8px, 2.75cqh, 20px);
    right: clamp(8px, 2.75cqh, 20px);
    left: unset;
}

.inline-images svg.enlarge-photo {
    width: 1em;
    height: 1em;
    color: #fff;
}

.inline-images.inline-images-zoom-button {
    stroke-width: 2px;
}

.inline-multi-photo {
    --zoom-start-color: var(--site-start-color);
    --zoom-end-color: var(--site-end-color);
}

.inline-images-zoom-button:hover {
    background: linear-gradient(135deg, var(--zoom-start-color), var(--zoom-end-color));
    border-color: transparent;
    opacity: 1;
}


/* ========================================================================== */
/*  TAGS                  */
/* ========================================================================== */

.inline-multi-photo .inline-images-tag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: inline-block;
    padding: clamp(4px, 4cqh, 10px) clamp(4px, 5cqh, 8px);
    text-transform: capitalize;
    font-size: clamp(9px, 7cqh, 16px);
    line-height: 1;
    font-family: var(--identity-font);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--white-color-1);
    background: linear-gradient(to right, var(--zoom-start-color), var(--zoom-end-color));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 14px rgba(0, 0, 0, .12);
    pointer-events: none;
    /* never block clicks/zoom */
    user-select: none;
    max-width: calc(100% - 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-br .inline-multi-photo .inline-images-tag {
    bottom: 0;
    top: unset;
    right: 0;
}

/* ========================================================================== */
/*  Bottom Img Text (outisdeoverlay) + Outside Caption                        */
/* ========================================================================== */


/* Inside overlay (absolute, bottom-left) */

/* Outside caption wrapper — ensures image above, text below (left-aligned) */
.inline-photo-figure {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.inline-photo-figure .inline-multi-photo {
    width: 100%;
}


/* /public/css/view_articles.css — APPEND (captions outside + wrapper) */
.inline-multi-photo-wrapper {
    display: flex;
    flex-direction: column;
}

.inline-multi-photo-wrapper .inline-images-caption {
    display: block;
    text-align: left;
}

/* Outside caption block */
.inline-images-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    margin-top: .75rem;
}

.inline-caption-title a,
.inline-caption-title {
    color: var(--white-color-1);
    font-family: var(--identity-font);
    font-weight: var(--font-weight7);
    font-size: var(--font-size-14px);
    letter-spacing: -0.25px;
    text-transform: capitalize;
}



.inline-caption-title a {
    cursor: pointer;
}


.inline-caption-link:hover {
    color: var(--zoom-start-color);
    background: var(--site-gradient-text);
    background: linear-gradient(135deg, var(--zoom-start-color), var(--zoom-start-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* ========================================================================== */
/*  Bottom Img Text (inside)                       */
/* ========================================================================== */


.inline-images-wrapper.has-inside-bot-text .inline-multi-photo {
    position: relative;
}

.inline-images-wrapper.has-inside-bot-text .inline-multi-photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to top,
            rgba(8, 8, 8, .88) 0%,
            rgba(8, 8, 8, .72) 48%,
            rgba(8, 8, 8, 0) 100%);
    z-index: 110;
    pointer-events: none;
}

.inline-images-inside-text {
    position: absolute;
    left: clamp(8px, 2.75cqh, 16px);
    bottom: clamp(8px, 1.75cqh, 16px);
    z-index: 120;
}


.inline-images-inside-text a,
.inline-images-inside-text {
    color: var(--white-color-1);
    font-family: var(--identity-font);
    font-weight: var(--font-weight5);
    font-size: var(--font-size-13px);
    letter-spacing: -0.25px;
    line-height: 1.25;
    text-transform: capitalize;
}

.inline-images-inside-text a {
    cursor: pointer;
}

.inline-bottom-text-link:hover {
    color: var(--zoom-start-color);
    background: var(--site-gradient-text);
    background: linear-gradient(135deg, var(--zoom-start-color), var(--zoom-start-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}



/* ========================================================================== */
/*  COMPARE TOGGLE                      */
/* ========================================================================== */
.inline-multi-photo .compare-toggle {
    position: absolute;
    top: clamp(8px, 2.75cqh, 16px);
    right: clamp(8px, 2.75cqh, 16px);
    box-sizing: border-box;
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    overflow: hidden;
    font-size: clamp(14px, 5.5cqh, 20px);
}



/* ========================================================================== */
/*  GRID IMAGES
/* ========================================================================== */
.inline-images-grid {
    grid-template-columns: repeat(var(--inline-grid-columns, 3), minmax(0, 1fr));
    row-gap: var(--ft-16-12);
    column-gap: var(--ft-16-12);
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.inline-images-grid .inline-multi-photo {
    aspect-ratio: var(--inline-aspect, 16 / 9);
}

/* Responsive collapse for grid mode */
@media (max-width: 825px) {
    .inline-images-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* ========================================================================== */
/*  DEXA & EGBADGE                 */
/* ========================================================================== */

.inline-images-top-container {
    --inline-images-dexa-size: clamp(12px, 7.25cqh, 38px);
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2.75cqh, 16px);
    margin: clamp(6px, 2.75cqh, 16px);
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.inline-images .dexa {
    font-size: var(--inline-images-dexa-size)
}


.inline-images .editors-square-badge {
    font-size: calc(var(--inline-images-dexa-size) * 0.55);
}

/* ── Full‑screen viewer-multip ──────────────────────────────────────────────── */


.fullscreen-image-overlay img.fullscreen-image {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    cursor: zoom-out;
}











/* === APPEND to view_articles.css — Inline Images CTA overlay + mobile sheet === */

/* Desktop overlay buttons (hover) */
.inline-cta-container {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translate(-50%, 8px);
    display: flex;
    flex-direction: column;
    gap: .65rem;
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {

    .inline-multi-photo-wrapper:hover .inline-cta-container,
    .inline-multi-photo:hover .inline-cta-container {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }
}

/* CTA buttons */
.inline-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: .8rem 1.1rem;
    text-transform: capitalize;
    font-size: var(--font-size-15px);
    border-radius: 4px;
    font-weight: 700;
    font-family: var(--identity-font);
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--zoom-start-color), var(--zoom-end-color));
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.inline-cta-btn:hover {
    filter: brightness(1.06);
}

.inline-cta-src {
    order: 0
}

.inline-cta-alink {
    order: 1
}

/* Mobile bottom-sheet (≤1150px) */
@media (max-width:1150px) {

    /* hide in-image overlay; use sheet instead */
    .inline-cta-container {
        display: none !important;
    }

    html.inline-cta-lock,
    body.inline-cta-lock {
        overflow: hidden;
    }

    .inline-cta-mask {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 12, .7);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    .inline-images-wrapper.inline-cta-open .inline-cta-mask {
        opacity: 1;
        pointer-events: auto;
    }

    .inline-cta-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        padding: 4rem 2rem;
        background: var(--section-dark-background-color);
        border-top: 1px solid var(--section-medium-background-color);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
        z-index: 1200;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        will-change: transform;
        transition: transform .25s ease;
    }

    .inline-images-wrapper.inline-cta-open .inline-cta-sheet {
        transform: translateY(0);
    }

    .inline-cta-sheet .inline-cta-btn {
        min-width: 0;
        box-sizing: border-box;
        padding: 1rem 1.25rem;
        font-size: var(--ft-17-15);
        border-radius: 4px;
    }
}

/* Desktop hard-hide for mobile sheet in case of breakpoint flip */
@media (min-width:1151px) {
    .inline-cta-sheet {
        display: none !important;
    }

    .inline-cta-mask {
        display: none !important;
    }
}

/* /public/css/view_articles.css (or your main stylesheet) — ADD this block */
.inline-cta-btn .inline-cta-icon,
.cpt-cta-btn .inline-cta-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    /* optical alignment with text baseline */
}





/* ── Full‑screen viewer ──────────────────────────────────────────────── */

.fullscreen-image-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: 999999
}

.fullscreen-image-overlay.show {
    opacity: 1;
    visibility: visible;
}

.fullscreen-image-wrapper {
    max-width: 1600px;
    aspect-ratio: 1.625 / 1;
    height: auto;
    object-fit: contain;
    display: block;
}

.fullscreen-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* provided close‑button spec */
.fullscreen-close {
    position: absolute;
    top: clamp(17px, -1.6px + 3.1vw, 48px);
    right: clamp(5px, -20.8px + 4.3vw, 48px);
    border: none;
    background: transparent;
    color: var(--white-color-1);
    font-size: var(--ft-40-24);
    cursor: pointer;
    z-index: 1000;
}

.fullscreen-close svg {
    height: 1em;
    width: 1em;
}

.fullscreen-close svg:hover {
    color: var(--accent-color-3);
}









/* ── Logo ──────────────────────────────────────────────── */

/* ── Logo ──────────────────────────────────────────────── */
.inline-images-logo {
    font-size: clamp(14px, 9.5cqh, 38px);
    position: absolute;
    bottom: clamp(8px, 3cqh, 20px);
    right: clamp(8px, 3cqh, 20px);
    width: 1em;
    height: 1em;
    pointer-events: none;
    z-index: 2;
    --card-color: var(--zoom-start-color);
    color: var(--card-color);
    fill: var(--card-color);
}