/* ==========================================================================
   Image-led post layout (custom-gallery.hbs)

   Standalone, build-free CSS. Media cards are progressively moved from the
   Ghost editor content into .gallery-rail by gallery-post.js.
   ========================================================================== */

/* The custom stage is absent from Edge's default article flow. Mobile/touch
   devices keep it hidden and receive no Gallery layout overrides. */
.gallery-stage {
    display: none;
}

/* Prevent editor media from appearing in its original body position before
   the desktop enhancement moves it into the rail. The template adds this
   class only when JavaScript is available and also includes a timed fallback. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    html.gallery-is-preparing .gallery-post-header .gh-article-image,
    html.gallery-is-preparing .gallery-post-content .kg-image-card,
    html.gallery-is-preparing .gallery-post-content .kg-gallery-card,
    html.gallery-is-preparing .gallery-post-content .kg-video-card {
        display: none !important;
    }

    html.gallery-is-preparing body:has(.gallery-post) .site-content,
    body:has(.gallery-post.is-enhanced) .site-content {
        padding: 0 0 96px;
    }

    html.gallery-is-preparing .gallery-post,
    .gallery-post.is-enhanced {
        --gallery-logo-letter: 1.6rem;
        --gallery-edge: calc(var(--gap, 36px) + var(--gallery-logo-letter));
        --gallery-gap: calc(var(--gallery-edge) / 2);
        --gallery-height: clamp(360px, 52dvh, 680px);
        /* Before JavaScript measures the shared media height, place the rail
           near its intended optical centre. The script then refines this value
           while keeping at least 48px below the desktop header and limiting
           the rail top to 24% of the viewport on tall/portrait screens. */
        --gallery-top-space: clamp(
            48px,
            calc(20dvh - 100px),
            calc(24dvh - 100px)
        );
        padding-top: var(--gallery-top-space);
    }

    html.gallery-is-preparing .gallery-stage,
    .gallery-stage.is-ready {
        display: block;
    }

    .gallery-stage {
        position: relative;
        width: 100%;
        min-height: calc(var(--gallery-height) + 12px);
    }

    .gallery-stage.is-empty {
        display: none;
        min-height: 0;
    }

.gallery-rail {
    display: flex;
    align-items: stretch;
    gap: var(--gallery-gap);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 var(--gallery-edge) 12px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.gallery-rail::-webkit-scrollbar {
    display: none;
}

.gallery-rail:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -1px;
}

.gallery-media {
    position: relative;
    flex: 0 0 auto;
    height: var(--gallery-height);
    margin: 0 !important;
    opacity: 1;
    will-change: opacity;
}

.gallery-media.is-loading::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 20px;
    height: 20px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(21, 23, 26, 0.14);
    border-top-color: rgba(21, 23, 26, 0.72);
    border-radius: 50%;
    pointer-events: none;
    content: "";
    animation: gallery-loading-spin 0.72s linear infinite;
}

@keyframes gallery-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.gallery-media--image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: calc(100vw - (var(--gallery-edge) * 2));
}

.gallery-media--image > img,
.gallery-media--image > picture,
.gallery-media--image > a {
    min-height: 0;
    flex: 1 1 auto;
}

.gallery-media--image > picture,
.gallery-media--image > a {
    display: block;
}

.gallery-media--image img {
    display: block;
    width: auto;
    max-width: calc(100vw - (var(--gallery-edge) * 2));
    height: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gallery-media img.has-gallery-placeholder {
    background-image: var(--gallery-placeholder-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.gallery-media--gallery img.has-gallery-placeholder {
    background-size: cover;
}

.gallery-media figcaption {
    flex: 0 0 auto;
    max-width: min(100%, 720px);
    padding-top: 9px;
    color: #8a8a8a;
    font-size: 1.2rem;
    line-height: 1.45;
}

/* Captions remain in the DOM as lightbox metadata, but the desktop article
   rail stays image-led. Mobile keeps Edge's original caption presentation. */
.gallery-post.is-enhanced .gallery-media figcaption {
    display: none;
}

/* A Ghost Gallery card intentionally remains one composed rail item. Its
   individual images are still available in the lightbox. */
.gallery-media--gallery {
    width: min(1120px, calc(100vw - (var(--gallery-edge) * 2)));
    overflow: hidden;
}

.gallery-media--gallery .kg-gallery-container {
    height: 100%;
}

.gallery-media--gallery .kg-gallery-row {
    min-height: 0;
}

.gallery-media--gallery img {
    object-fit: cover;
}

.gallery-media--video {
    display: flex;
    align-items: center;
    width: min(1120px, calc(100vw - (var(--gallery-edge) * 2)));
    background: #000;
}

.gallery-media--video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-control {
    position: absolute;
    top: calc(var(--gallery-height) / 2);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--kangina-nav-size, 42px);
    height: var(--kangina-nav-size, 42px);
    padding: 0;
    border: var(--kangina-nav-border, 1px solid rgba(21, 23, 26, 0.12));
    border-radius: 0;
    background: var(--kangina-nav-surface, rgba(255, 255, 255, 0.9));
    color: var(--kangina-nav-color, #15171a);
    box-shadow: var(--kangina-nav-shadow, 0 2px 14px rgba(0, 0, 0, 0.12));
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    transform: translateY(-50%);
    transition: var(--kangina-nav-transition, opacity 0.2s ease);
}

.gallery-control--prev {
    /* Keep the complete button inside the content frame, with breathing room. */
    left: calc(var(--gallery-edge) + 12px);
}

.gallery-control--next {
    right: calc(var(--gallery-edge) + 12px);
}

.gallery-control:disabled {
    visibility: hidden;
}

.gallery-position {
    margin: 8px var(--gallery-edge) 0;
    color: #8a8a8a;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: right;
}

html.gallery-is-preparing .gallery-post-header,
.gallery-post.is-enhanced .gallery-post-header {
    display: block;
    width: min(680px, calc(100% - (var(--gallery-edge) * 2)));
    margin: 24px 0 0 var(--gallery-edge);
}

html.gallery-is-preparing .gallery-post-header .gh-article-title,
.gallery-post.is-enhanced .gallery-post-header .gh-article-title {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.25;
}

html.gallery-is-preparing .gallery-post-header .gh-article-excerpt,
.gallery-post.is-enhanced .gallery-post-header .gh-article-excerpt {
    margin-top: 14px;
}

html.gallery-is-preparing .gallery-post-header .gh-meta-share,
.gallery-post.is-enhanced .gallery-post-header .gh-meta-share,
html.gallery-is-preparing .gallery-post > .gh-meta-share,
.gallery-post.is-enhanced > .gh-meta-share {
    display: none;
}

html.gallery-is-preparing .gallery-post-content.gh-content,
.gallery-post.is-enhanced .gallery-post-content.gh-content {
    display: block;
    width: min(680px, calc(100% - (var(--gallery-edge) * 2)));
    margin: 20px 0 0 var(--gallery-edge);
}

html.gallery-is-preparing .gallery-post-content.gh-content > *,
.gallery-post.is-enhanced .gallery-post-content.gh-content > * {
    grid-column: auto;
}

html.gallery-is-preparing .gallery-post-content:empty,
.gallery-post.is-enhanced .gallery-post-content:empty {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The page remains vertically scrollable while its desktop scrollbar is hidden. */
    html.gallery-is-preparing:has(.gallery-post),
    html:has(.gallery-post.is-enhanced) {
        scrollbar-width: none;
    }

    html.gallery-is-preparing:has(.gallery-post)::-webkit-scrollbar,
    html:has(.gallery-post.is-enhanced)::-webkit-scrollbar {
        display: none;
    }

    html.gallery-is-preparing body:has(.gallery-post),
    body:has(.gallery-post.is-enhanced) {
        -ms-overflow-style: none;
    }

    .gallery-stage.has-multiple .gallery-control {
        display: flex;
    }

    .gallery-stage.has-multiple.is-hovering-prev .gallery-control--prev,
    .gallery-stage.has-multiple.is-hovering-next .gallery-control--next,
    .gallery-stage.has-multiple .gallery-control:focus-visible {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-control {
        transition: none;
    }

    .gallery-media.is-loading::after {
        animation: none;
    }
}