/* Editor-inserted gallery layouts + lightbox (scoped under .editor-gallery-card) */

.editor-gallery-lb-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    /* Above sticky header / theme FAB (e.g. 9999998) so the overlay is visible on match preview & long posts */
    z-index: 10000050;
    cursor: pointer;
}

.editor-gallery-lb-overlay.active {
    display: flex;
}

.editor-gallery-lb-overlay .editor-gallery-lb-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    max-height: 90%;
}

.editor-gallery-lb-overlay img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
}

.editor-gallery-lb-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000062;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
}

.editor-gallery-lb-close:hover,
.editor-gallery-lb-close:focus {
    background: rgba(255, 255, 255, 0.4);
    outline: none;
}

.editor-gallery-lb-prev,
.editor-gallery-lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000061;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
}

.editor-gallery-lb-prev {
    left: max(12px, env(safe-area-inset-left, 0px));
}

.editor-gallery-lb-next {
    right: max(12px, env(safe-area-inset-right, 0px));
}

.editor-gallery-lb-prev:hover,
.editor-gallery-lb-prev:focus,
.editor-gallery-lb-next:hover,
.editor-gallery-lb-next:focus {
    background: rgba(255, 255, 255, 0.35);
    outline: none;
}

.editor-gallery-lb-overlay--single .editor-gallery-lb-prev,
.editor-gallery-lb-overlay--single .editor-gallery-lb-next {
    display: none;
}

.editor-gallery-lb-overlay--single .editor-gallery-lb-grid {
    display: none;
}

/* Top-left grid (thumbnail index) — same role as match gallery lightbox */
.editor-gallery-lb-grid {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000062;
    padding: 0;
    opacity: 0.96;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.editor-gallery-lb-grid:hover,
.editor-gallery-lb-grid:focus {
    opacity: 1;
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
}

.editor-gallery-lb-grid:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.editor-gallery-lb-grid svg {
    width: 20px;
    height: 20px;
    display: block;
    opacity: 0.95;
}

.editor-gallery-lb-overlay--thumbs-open .editor-gallery-lb-grid {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.editor-gallery-lb-thumbs-panel {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000058 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: max(56px, calc(env(safe-area-inset-top, 0px) + 48px)) 16px max(24px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden !important;
    pointer-events: none;
    cursor: default;
}

.editor-gallery-lb-overlay--thumbs-open .editor-gallery-lb-thumbs-panel {
    display: flex !important;
    pointer-events: auto !important;
}

.editor-gallery-lb-overlay--thumbs-open .editor-gallery-lb-stage,
.editor-gallery-lb-overlay--thumbs-open .editor-gallery-lb-stage img {
    opacity: 0 !important;
    pointer-events: none !important;
}

.editor-gallery-lb-thumbs-heading {
    margin: 0 0 14px;
    padding: 0 4px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    flex: 0 0 auto;
}

.editor-gallery-lb-thumbs-inner {
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    align-content: start;
    padding: 4px 2px 12px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .editor-gallery-lb-thumbs-inner {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }
}

.editor-gallery-lb-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #222;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.editor-gallery-lb-thumb:hover {
    border-color: rgba(255, 255, 255, 0.55);
    transform: scale(1.02);
}

.editor-gallery-lb-thumb:focus-visible {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.editor-gallery-lb-thumb.is-current {
    border-color: #e8c547;
    box-shadow: 0 0 0 1px rgba(232, 197, 71, 0.5);
}

.editor-gallery-lb-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .editor-gallery-lb-grid {
        top: max(6px, env(safe-area-inset-top, 0px));
        left: max(6px, env(safe-area-inset-left, 0px));
        width: 40px;
        height: 40px;
    }

    .editor-gallery-lb-grid svg {
        width: 18px;
        height: 18px;
    }
}

/* Thumbnails open lightbox */
.editor-gallery-card[data-gc-lb-id] img {
    cursor: pointer;
}

/* 1. Masonry (Pinterest-style) */
.editor-gallery-card--masonry .gc-masonry {
    column-count: 3;
    column-gap: 10px;
}

.editor-gallery-card--masonry .gc-masonry img {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    display: block;
    break-inside: avoid;
}

@media (max-width: 768px) {
    .editor-gallery-card--masonry .gc-masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .editor-gallery-card--masonry .gc-masonry {
        column-count: 1;
    }
}

/* 2. Equal grid */
.editor-gallery-card--grid .gc-grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.editor-gallery-card--grid .gc-grid-gallery img {
    width: 100%;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .editor-gallery-card--grid .gc-grid-gallery {
        grid-template-columns: 1fr;
    }
}

/* 3. Featured + thumbnails */
.editor-gallery-card--featured {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
}

.editor-gallery-card--featured > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.editor-gallery-card--featured .gc-thumbs {
    display: grid;
    gap: 10px;
}

.editor-gallery-card--featured .gc-thumbs img {
    width: 100%;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .editor-gallery-card--featured {
        grid-template-columns: 1fr;
    }
}

/* 4. Horizontal scroll */
.editor-gallery-card--scroll .gc-scroll-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.editor-gallery-card--scroll .gc-scroll-gallery img {
    flex: 0 0 auto;
    height: 200px;
    width: auto;
    border-radius: 10px;
}

/* 5. Collage */
.editor-gallery-card--collage .gc-collage {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 10px;
}

.editor-gallery-card--collage .gc-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.editor-gallery-card--collage .gc-collage img:nth-child(1) {
    grid-row: span 2;
}

@media (max-width: 768px) {
    .editor-gallery-card--collage .gc-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .editor-gallery-card--collage .gc-collage img:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 200px;
    }
}

/* Split layouts (2fr / 1fr classic lightbox gallery) */
.editor-gallery-card--lightbox {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.editor-gallery-card--lightbox > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.editor-gallery-card--lightbox .gc-thumbs {
    display: grid;
    gap: 10px;
}

.editor-gallery-card--lightbox .gc-thumbs img {
    width: 100%;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .editor-gallery-card--lightbox {
        grid-template-columns: 1fr;
    }
}

/* Hero match collage: big + 2×2 — cells clip so mixed aspect ratios (e.g. stats graphic) stay flush */
.editor-gallery-card--hero-collage,
.post-content .post-text .hero-collage.editor-gallery-card,
.section-page .page-text .hero-collage.editor-gallery-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
    isolation: isolate;
    box-sizing: border-box;
}

.editor-gallery-card--hero-collage .gc-hero-main,
.hero-collage.editor-gallery-card .gc-hero-main {
    min-width: 0;
    min-height: clamp(220px, 36vw, 520px);
    overflow: hidden;
    border-radius: 10px;
    align-self: stretch;
}

.editor-gallery-card--hero-collage .gc-hero-main img,
.hero-collage.editor-gallery-card .gc-hero-main img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(220px, 36vw, 520px);
    object-fit: cover;
    object-position: center;
}

.editor-gallery-card--hero-collage .gc-hero-right,
.editor-gallery-card--hero-collage .hero-right,
.hero-collage.editor-gallery-card .gc-hero-right,
.hero-collage.editor-gallery-card .hero-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    min-height: clamp(220px, 36vw, 520px);
    align-self: stretch;
}

.editor-gallery-card--hero-collage .gc-hero-cell,
.hero-collage.editor-gallery-card .gc-hero-cell {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.editor-gallery-card--hero-collage .gc-hero-cell img,
.hero-collage.editor-gallery-card .gc-hero-cell img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: cover;
    object-position: center;
}

/* Legacy markup (no .gc-hero-main / .gc-hero-cell) */
.editor-gallery-card--hero-collage > img:first-child,
.hero-collage.editor-gallery-card > img:first-child {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(220px, 36vw, 520px);
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.editor-gallery-card--hero-collage .gc-hero-right > img,
.hero-collage.editor-gallery-card .gc-hero-right > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

/* Tablet / small desktop: stack before sidebar crowds the row */
@media (max-width: 991.98px) {
    .editor-gallery-card--hero-collage,
    .hero-collage.editor-gallery-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .editor-gallery-card--hero-collage .gc-hero-main,
    .hero-collage.editor-gallery-card .gc-hero-main {
        min-height: min(52vw, 420px);
        max-height: 55vh;
    }

    .editor-gallery-card--hero-collage .gc-hero-main img,
    .hero-collage.editor-gallery-card .gc-hero-main img {
        min-height: min(52vw, 420px);
        max-height: 55vh;
    }

    .editor-gallery-card--hero-collage .gc-hero-right,
    .editor-gallery-card--hero-collage .hero-right,
    .hero-collage.editor-gallery-card .gc-hero-right,
    .hero-collage.editor-gallery-card .hero-right {
        min-height: 0;
        aspect-ratio: 2 / 1;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .editor-gallery-card--hero-collage .gc-hero-main,
    .hero-collage.editor-gallery-card .gc-hero-main {
        min-height: 200px;
        max-height: 48vh;
    }

    .editor-gallery-card--hero-collage .gc-hero-main img,
    .hero-collage.editor-gallery-card .gc-hero-main img {
        min-height: 200px;
        max-height: 48vh;
    }

    .editor-gallery-card--hero-collage .gc-hero-right,
    .editor-gallery-card--hero-collage .hero-right,
    .hero-collage.editor-gallery-card .gc-hero-right,
    .hero-collage.editor-gallery-card .hero-right {
        aspect-ratio: 1 / 1;
    }
}

/* Match story: top banner + 3 columns */
.editor-gallery-card--match-story {
    display: grid;
    gap: 10px;
}

.editor-gallery-card--match-story > img {
    width: 100%;
    border-radius: 10px;
}

.editor-gallery-card--match-story .gc-match-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.editor-gallery-card--match-story .gc-match-bottom img {
    width: 100%;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .editor-gallery-card--match-story .gc-match-bottom {
        grid-template-columns: 1fr;
    }
}

/* Dynamic: big left + two stacked right */
.editor-gallery-card--dynamic {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    align-items: stretch;
    min-height: 240px;
}

.editor-gallery-card--dynamic > img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.editor-gallery-card--dynamic .gc-dynamic-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    min-height: 0;
}

.editor-gallery-card--dynamic .gc-dynamic-right img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .editor-gallery-card--dynamic {
        grid-template-columns: 1fr;
    }
}

/* Magazine: 1fr + 2fr */
.editor-gallery-card--magazine {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    align-items: stretch;
    min-height: 260px;
}

.editor-gallery-card--magazine .gc-mag-left {
    display: grid;
    gap: 10px;
    min-height: 0;
}

.editor-gallery-card--magazine .gc-mag-left img {
    width: 100%;
    height: 100%;
    min-height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.editor-gallery-card--magazine .gc-mag-feature {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .editor-gallery-card--magazine {
        grid-template-columns: 1fr;
    }
}

/* Highlight: 1fr–2fr–1fr stage + side arrows; extra images cycle via JS (data-gc-images) */
.editor-gallery-card--highlight .gc-highlight-carousel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.editor-gallery-card--highlight .gc-highlight-slide-viewport {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-viewport {
    cursor: grab;
}

.editor-gallery-card--highlight .gc-highlight-slide-track {
    display: flex;
    width: 200%;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.editor-gallery-card--highlight .gc-highlight-slide-track--static {
    width: 100%;
}

.editor-gallery-card--highlight .gc-highlight-slide-panel {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
}

.editor-gallery-card--highlight .gc-highlight-slide-track--static .gc-highlight-slide-panel {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.editor-gallery-card--highlight .gc-highlight-stage {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
    align-items: stretch;
    min-height: 260px;
    min-width: 0;
}

.editor-gallery-card--highlight .gc-highlight-left,
.editor-gallery-card--highlight .gc-highlight-center,
.editor-gallery-card--highlight .gc-highlight-right {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.editor-gallery-card--highlight .gc-highlight-left img,
.editor-gallery-card--highlight .gc-highlight-right img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    align-self: center;
    cursor: pointer;
    -webkit-user-drag: none;
    user-select: none;
}

.editor-gallery-card--highlight .gc-highlight-center img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    -webkit-user-drag: none;
    user-select: none;
}

.editor-gallery-card--highlight .gc-carousel-btn {
    position: static;
    z-index: 1;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    transition: background 0.2s ease, transform 0.15s ease;
}

.editor-gallery-card--highlight .gc-highlight-carousel--static .gc-carousel-btn {
    display: none;
}

/* Horizontal swipe handled in JS; pan-y keeps vertical page scroll. Apply to children — imgs default to auto and steal gestures on iOS. */
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) {
    cursor: grab;
}

.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static):active {
    cursor: grabbing;
}

.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static),
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-viewport,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-panel,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-stage,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-left,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-center,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-right,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-stage img,
.editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-carousel-btn {
    touch-action: pan-y pinch-zoom;
    cursor: pointer;
}

.editor-gallery-card--highlight .gc-carousel-btn:hover,
.editor-gallery-card--highlight .gc-carousel-btn:focus {
    background: rgba(0, 0, 0, 0.75);
    outline: none;
}

.editor-gallery-card--highlight .gc-carousel-btn:active {
    transform: scale(0.96);
}

/* Keep desktop layout (arrows + 1–2–1) on small screens; only scale gaps and sizes */
@media (max-width: 768px) {
    .editor-gallery-card--highlight .gc-highlight-carousel {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 8px;
    }

    .editor-gallery-card--highlight .gc-highlight-stage {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 8px;
        min-height: 220px;
    }

    .editor-gallery-card--highlight .gc-highlight-left img,
    .editor-gallery-card--highlight .gc-highlight-right img {
        height: 180px;
    }

    .editor-gallery-card--highlight .gc-highlight-center img {
        min-height: 220px;
    }

    .editor-gallery-card--highlight .gc-carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .editor-gallery-card--highlight .gc-highlight-carousel {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 6px;
    }

    .editor-gallery-card--highlight .gc-highlight-stage {
        gap: 6px;
        min-height: 200px;
    }

    .editor-gallery-card--highlight .gc-highlight-left img,
    .editor-gallery-card--highlight .gc-highlight-right img {
        height: 140px;
    }

    .editor-gallery-card--highlight .gc-highlight-center img {
        min-height: 200px;
    }

    .editor-gallery-card--highlight .gc-carousel-btn {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}

/* Legacy: full-bleed slide track (older inserted cards) */
.editor-gallery-card--highlight .gc-highlight-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
    background: #111;
}

.editor-gallery-card--highlight .gc-highlight-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.editor-gallery-card--highlight .gc-highlight-slide img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: min(72vh, 560px);
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .editor-gallery-card--highlight .gc-highlight-track,
    .editor-gallery-card--highlight .gc-highlight-slide-track {
        transition-duration: 0.01ms !important;
    }
}

/* Legacy: static 3-up highlight (no carousel wrapper) */
.editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
    align-items: stretch;
    min-height: 260px;
}

.editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
.editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3) {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    align-self: center;
}

.editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2) {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 8px;
        min-height: 220px;
    }

    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3) {
        height: 180px;
    }

    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2) {
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) {
        gap: 6px;
        min-height: 200px;
    }

    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3) {
        height: 140px;
    }

    .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2) {
        min-height: 200px;
    }
}

/*
 * Theme overrides: kitbag themes force .post-text img { max-width / display },
 * which breaks grid/flex gallery layouts. Higher specificity + !important where needed.
 */
.post-content .post-text .editor-gallery-card,
.section-page .page-text .editor-gallery-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.post-content .post-text .editor-gallery-card img,
.section-page .page-text .editor-gallery-card img {
    display: block;
    box-sizing: border-box;
}

/* Horizontal scroll: natural width + fixed height */
.post-content .post-text .editor-gallery-card--scroll .gc-scroll-gallery img,
.section-page .page-text .editor-gallery-card--scroll .gc-scroll-gallery img {
    width: auto !important;
    max-width: none !important;
    height: 200px !important;
    flex-shrink: 0 !important;
}

/* Grids that rely on height: 100% + object-fit */
.post-content .post-text .editor-gallery-card--hero-collage .gc-hero-main img,
.post-content .post-text .editor-gallery-card--hero-collage .gc-hero-cell img,
.post-content .post-text .editor-gallery-card--hero-collage > img:first-child,
.post-content .post-text .editor-gallery-card--hero-collage .gc-hero-right > img,
.post-content .post-text .hero-collage.editor-gallery-card .gc-hero-main img,
.post-content .post-text .hero-collage.editor-gallery-card .gc-hero-cell img,
.post-content .post-text .hero-collage.editor-gallery-card > img:first-child,
.post-content .post-text .hero-collage.editor-gallery-card .gc-hero-right > img,
.post-content .post-text .editor-gallery-card--dynamic > img,
.post-content .post-text .editor-gallery-card--dynamic .gc-dynamic-right img,
.post-content .post-text .editor-gallery-card--magazine .gc-mag-left img,
.post-content .post-text .editor-gallery-card--magazine .gc-mag-feature,
.post-content .post-text .editor-gallery-card--collage .gc-collage img,
.post-content .post-text .editor-gallery-card--lightbox > img,
.post-content .post-text .editor-gallery-card--featured > img,
.section-page .page-text .editor-gallery-card--hero-collage .gc-hero-main img,
.section-page .page-text .editor-gallery-card--hero-collage .gc-hero-cell img,
.section-page .page-text .editor-gallery-card--hero-collage > img:first-child,
.section-page .page-text .editor-gallery-card--hero-collage .gc-hero-right > img,
.section-page .page-text .hero-collage.editor-gallery-card .gc-hero-main img,
.section-page .page-text .hero-collage.editor-gallery-card .gc-hero-cell img,
.section-page .page-text .hero-collage.editor-gallery-card > img:first-child,
.section-page .page-text .hero-collage.editor-gallery-card .gc-hero-right > img,
.section-page .page-text .editor-gallery-card--dynamic > img,
.section-page .page-text .editor-gallery-card--dynamic .gc-dynamic-right img,
.section-page .page-text .editor-gallery-card--magazine .gc-mag-left img,
.section-page .page-text .editor-gallery-card--magazine .gc-mag-feature,
.section-page .page-text .editor-gallery-card--collage .gc-collage img,
.section-page .page-text .editor-gallery-card--lightbox > img,
.section-page .page-text .editor-gallery-card--featured > img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* Hero collage: grid tiles only (not the main hero) need min 0 so rows stay equal */
.post-content .post-text .editor-gallery-card--hero-collage .gc-hero-cell img,
.post-content .post-text .editor-gallery-card--hero-collage .gc-hero-right > img,
.post-content .post-text .hero-collage.editor-gallery-card .gc-hero-cell img,
.post-content .post-text .hero-collage.editor-gallery-card .gc-hero-right > img,
.section-page .page-text .editor-gallery-card--hero-collage .gc-hero-cell img,
.section-page .page-text .editor-gallery-card--hero-collage .gc-hero-right > img,
.section-page .page-text .hero-collage.editor-gallery-card .gc-hero-cell img,
.section-page .page-text .hero-collage.editor-gallery-card .gc-hero-right > img {
    min-height: 0 !important;
    min-width: 0 !important;
}

.post-content .post-text .editor-gallery-card--highlight .gc-highlight-left img,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-right img,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-left img,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-right img {
    width: 100% !important;
    max-width: none !important;
    height: 200px !important;
    object-fit: cover !important;
}

.post-content .post-text .editor-gallery-card--highlight .gc-highlight-center img,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-center img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 240px !important;
    object-fit: cover !important;
}

/* Theme img { touch-action: auto } breaks highlight swipe on iOS */
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static),
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-viewport,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-panel,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-stage,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-left,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-center,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-right,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-stage img,
.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-carousel-btn,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static),
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-viewport,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-slide-panel,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-stage,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-left,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-center,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-right,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-highlight-stage img,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) .gc-carousel-btn {
    touch-action: pan-y pinch-zoom !important;
}

.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static),
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static) {
    cursor: grab !important;
}

.post-content .post-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static):active,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-carousel:not(.gc-highlight-carousel--static):active {
    cursor: grabbing !important;
}

.post-content .post-text .editor-gallery-card--highlight .gc-highlight-slide img,
.section-page .page-text .editor-gallery-card--highlight .gc-highlight-slide img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: min(72vh, 560px) !important;
    object-fit: cover !important;
}

.post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
.post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3),
.section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
.section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3) {
    width: 100% !important;
    height: 200px !important;
    max-width: none !important;
    object-fit: cover !important;
}

.post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2),
.section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2) {
    width: 100% !important;
    height: 100% !important;
    min-height: 240px !important;
    max-width: none !important;
    object-fit: cover !important;
}

@media (max-width: 768px) {
    .post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
    .post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3),
    .section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
    .section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3) {
        height: 180px !important;
    }

    .post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2),
    .section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2) {
        min-height: 220px !important;
        height: 100% !important;
    }

    .post-content .post-text .editor-gallery-card--highlight .gc-highlight-left img,
    .post-content .post-text .editor-gallery-card--highlight .gc-highlight-right img,
    .section-page .page-text .editor-gallery-card--highlight .gc-highlight-left img,
    .section-page .page-text .editor-gallery-card--highlight .gc-highlight-right img {
        height: 180px !important;
    }

    .post-content .post-text .editor-gallery-card--highlight .gc-highlight-center img,
    .section-page .page-text .editor-gallery-card--highlight .gc-highlight-center img {
        min-height: 220px !important;
        height: 100% !important;
    }
}

@media (max-width: 480px) {
    .post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
    .post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3),
    .section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(1),
    .section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(3) {
        height: 140px !important;
    }

    .post-content .post-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2),
    .section-page .page-text .editor-gallery-card--highlight:not(:has(.gc-highlight-carousel)) > img:nth-child(2) {
        min-height: 200px !important;
    }

    .post-content .post-text .editor-gallery-card--highlight .gc-highlight-left img,
    .post-content .post-text .editor-gallery-card--highlight .gc-highlight-right img,
    .section-page .page-text .editor-gallery-card--highlight .gc-highlight-left img,
    .section-page .page-text .editor-gallery-card--highlight .gc-highlight-right img {
        height: 140px !important;
    }

    .post-content .post-text .editor-gallery-card--highlight .gc-highlight-center img,
    .section-page .page-text .editor-gallery-card--highlight .gc-highlight-center img {
        min-height: 200px !important;
    }
}

/* Lightbox preview sits inside .post-text; theme img rules must not squash it */
.post-content .post-text .editor-gallery-lb-overlay .editor-gallery-lb-stage img,
.section-page .page-text .editor-gallery-lb-overlay .editor-gallery-lb-stage img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    height: auto !important;
    object-fit: contain !important;
}