/* Image Gallery CMS object: front-end display plus its admin nested-row/image editor. */

/* Background, heading, row title, row subtitle and caption colors are author-set swatches (the
   "Appearance" fields in Views/AdminImageGallery/ImageGallery.cshtml), passed down as inline
   custom properties on the section/editor root. Falls back to the site's own default colors when
   a gallery has not set one, matching Section Header's --section-header-* pattern. */
/* Row title and row subtitle fall back to --image-gallery-heading, so a gallery saved before they
   had swatches of their own renders unchanged. */
.cms-image-gallery {
    background: var(--image-gallery-background, var(--site-color-background));
    color: var(--site-color-text);
}
.cms-image-gallery__heading { color: var(--image-gallery-heading, var(--site-color-heading)); }
.cms-image-gallery__row-title { color: var(--image-gallery-row-title, var(--image-gallery-heading, var(--site-color-heading))); }
.cms-image-gallery__row-subtitle { color: var(--image-gallery-row-subtitle, var(--image-gallery-heading, var(--site-color-heading))); }
.cms-image-gallery__caption { color: var(--image-gallery-caption, var(--site-color-text)); }

.cms-image-gallery-preview,
.cms-existing-image-galleries,
.cms-existing-image-gallery { width: min(100%, var(--site-content-width)); }

.cms-existing-image-gallery {
    overflow: hidden;
    border: 1px solid var(--site-color-border);
    border-radius: var(--site-radius-medium);
    background: var(--site-color-background);
    box-shadow: var(--site-shadow-small);
    transition: border-color var(--site-transition-standard), box-shadow var(--site-transition-standard), transform var(--site-transition-standard);
}

.cms-existing-image-gallery:hover {
    border-color: color-mix(in srgb, var(--site-color-primary) 42%, var(--site-color-border));
    box-shadow: var(--site-shadow-medium);
    transform: translateY(-1px);
}

.cms-existing-image-gallery__form {
    background: var(--site-color-surface);
}

/* Row image sizing. A row's data-image-count - kept in sync by the front-end render and by
   image-gallery-editor.js's renumber() - caps how wide each image in that row can grow, so a row
   of 2 large images and a row of 6 small ones fill the same width.
   .cms-image-gallery__editor-image below shares these exact breakpoints, so the admin preview is
   proportioned the same way the public page will be rather than a scaled-down approximation.
   Rows cap at 6 images; more than that (only possible via direct data edits) falls back to the
   100% base rule. */
.cms-image-gallery__items:where(.d-flex),
.cms-image-gallery__editor-images {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 1rem;
}

/* flex-shrink: 1 plus min-width: 0 lets a row compress to fit the width it is given instead of
   overflowing into a horizontal scrollbar. Flex items default to min-width: auto, which floors
   shrinking at the content's natural size - that floor is what causes the overflow.
   It matters because the [data-image-count] percentages below assume a full viewport, but the
   front end wraps this row in Bootstrap's .container, whose max-width jumps in fixed steps. A
   6-image row needs roughly 800px to fit; the sm step provides ~516px and md ~696px, so a 5-6
   image row overflowed on real devices in the 576-991px range. The mobile wrap-fallback below
   still handles very narrow widths, where shrinking to slivers would be legible but cramped. */
.cms-image-gallery__item,
.cms-image-gallery__editor-image {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.cms-image-gallery__items { margin-inline: auto; }

.cms-image-gallery__item img {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    height: auto;
    transition: transform .2s ease;
}

.cms-image-gallery__item img:hover { transform: scale(1.02); }

:where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="1"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 100%; }
:where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="2"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 45%; }
:where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="3"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 30%; }
:where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="4"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 22%; }
:where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="5"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 18%; }
:where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="6"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 15%; }

@media (max-width: 575.98px) {
    .cms-image-gallery__items:where(.d-flex),
    .cms-image-gallery__editor-images {
        flex-wrap: wrap !important;
    }

    :where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="1"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) { max-width: 75%; }

    .cms-image-gallery__items:where(.d-flex) > .cms-image-gallery__item,
    .cms-image-gallery__editor-images > .cms-image-gallery__editor-image {
        max-width: 45%;
    }
}

/* The block above only fires on the real browser viewport, but the editor's Tablet/Mobile preview
   buttons shrink .cms-preview-shell__viewport instead - which is why it carries
   container-type: inline-size. Re-implementing the same breakpoint as a @container query scoped
   to that viewport makes the Mobile toggle actually re-trigger the wrap-to-2-per-row layout,
   rather than leaving the row on one line relying on the flex-shrink compression above. Same
   approach Card Block and Section Header already use. Selectors are two classes deep so they win
   over the base rules regardless of the real viewport width. */
@container (max-width: 575.98px) {
    .cms-preview-shell__viewport .cms-image-gallery__items:where(.d-flex),
    .cms-preview-shell__viewport .cms-image-gallery__editor-images {
        flex-wrap: wrap !important;
    }

    .cms-preview-shell__viewport :where(.cms-image-gallery__items.d-flex, .cms-image-gallery__editor-images)[data-image-count="1"] > :is(.cms-image-gallery__item, .cms-image-gallery__editor-image) {
        max-width: 75%;
    }

    .cms-preview-shell__viewport .cms-image-gallery__items:where(.d-flex) > .cms-image-gallery__item,
    .cms-preview-shell__viewport .cms-image-gallery__editor-images > .cms-image-gallery__editor-image {
        max-width: 45%;
    }
}

/* ----- Admin editor ----- */

/* Match the original editor window width and padding without a live preview. */
.cms-image-gallery-editor-content {
    width: min(100%, 68rem);
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.cms-image-gallery--editor {
    border-radius: var(--site-radius-medium);
}

.cms-image-gallery__editor-toolbar {
    padding-bottom: var(--site-space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--image-gallery-caption, var(--site-color-text)) 14%, transparent);
}

.cms-image-gallery--editor .cms-image-gallery__editor-row {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--image-gallery-caption, var(--site-color-text)) 18%, transparent);
    border-radius: var(--site-radius-medium);
    background: color-mix(in srgb, var(--image-gallery-background, var(--site-color-background)) 94%, var(--site-color-surface));
    box-shadow: var(--site-shadow-small);
}

.cms-image-gallery--editor .card-header {
    min-height: 2.75rem;
    padding: .5rem .65rem;
    color: var(--image-gallery-caption, var(--site-color-text));
    border-bottom-color: color-mix(in srgb, var(--image-gallery-caption, var(--site-color-text)) 16%, transparent);
    background: color-mix(in srgb, var(--image-gallery-caption, var(--site-color-text)) 5%, var(--image-gallery-background, var(--site-color-background)));
}

.cms-image-gallery--editor .card-body {
    padding: .75rem;
    background: transparent;
}

.cms-image-gallery__drag-handle {
    cursor: grab;
    color: var(--site-color-text-muted, #6c757d);
    padding: 0 .25rem;
}
.cms-image-gallery__drag-handle:active { cursor: grabbing; }
.cms-image-gallery__drag-handle--image { position: absolute; top: .25rem; left: .25rem; z-index: 2; background: rgba(255, 255, 255, .85); border-radius: .25rem; }

.cms-image-gallery__row-remove {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    color: var(--site-color-danger);
    border: 1px solid color-mix(in srgb, var(--site-color-danger) 36%, var(--site-color-border));
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-color-danger) 7%, var(--site-color-background));
    transition: color var(--site-transition-fast), border-color var(--site-transition-fast), background-color var(--site-transition-fast), transform var(--site-transition-fast);
}

.cms-image-gallery__row-remove:hover,
.cms-image-gallery__row-remove:focus-visible {
    color: #fff;
    border-color: var(--site-color-danger);
    background: var(--site-color-danger);
    outline: 0;
    transform: translateY(-1px);
}

.cms-image-gallery__row-remove:focus-visible {
    box-shadow: var(--site-focus-ring);
}

.cms-image-gallery__row-remove:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

/* Each image slot reuses the shared cms-single-image-control (same modal, same fields) restyled,
   scoped to .cms-image-gallery__editor-image, into a large image-dominant tile: the thumbnail
   fills the tile, the drag handle and remove button sit in a corner overlay, and the label shrinks
   to a one-line caption. At its normal size that control cannot shrink to a gallery row's
   proportional widths - at 15% of the row there is no room for the label beside the thumbnail,
   which forces a horizontal scrollbar. The restyle is what makes reusing the front end's own
   [data-image-count] sizing possible. */
.cms-image-gallery__editor-images { align-items: flex-start; }

.cms-image-gallery__editor-image {
    position: relative;
    /* No fixed min-width floor on purpose - it would fight the min-width: 0 / flex-shrink rule above
       that lets a tight row compress instead of overflowing. The tile hides its descriptive label
       at every size and keeps its controls in corner overlays, so it stays usable compressed. */
    padding: .4rem;
    border: 1px solid var(--site-color-border, #dee2e6);
    border-radius: .5rem;
    background: var(--site-color-background, #fff);
}

.cms-image-gallery__editor-image-frame { position: relative; }

.cms-image-gallery__editor-image .cms-single-image-control {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.cms-image-gallery__editor-image .cms-single-image-control__preview {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--site-radius-medium, .5rem);
}

.cms-image-gallery__editor-image .cms-single-image-control__copy strong {
    display: block;
    font-size: .7rem;
    font-weight: 600;
}

.cms-image-gallery__editor-image .cms-single-image-control__copy small { display: none; }

.cms-image-gallery__editor-image-remove {
    position: absolute;
    top: .25rem;
    right: .25rem;
    z-index: 2;
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--site-color-danger);
    transition: background-color .2s ease, color .2s ease;
}

.cms-image-gallery__editor-image-remove:hover {
    background: var(--site-color-danger);
    color: #fff;
}

[data-image-gallery-action="add-image"][disabled] { opacity: .5; cursor: not-allowed; }

#imageGalleryRowsContainer.is-invalid .cms-image-gallery__editor-row { border-color: var(--site-color-danger); }

.cms-image-gallery__editor-row.ui-sortable-helper,
.cms-image-gallery__editor-image.ui-sortable-helper { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }

/* Preset frames keep the new layouts consistent while showing every part of each photo. */
.cms-image-gallery__mosaic,
.cms-image-gallery__masonry { width: min(100%, 60rem); margin-inline: auto; }
.cms-image-gallery__mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}
.cms-image-gallery__mosaic-lead { min-width: 0; width: min(100%, 28rem); margin-inline: auto; }
.cms-image-gallery__mosaic-support { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem; min-width: 0; }
.cms-image-gallery__mosaic .cms-image-gallery__item { min-width: 0; max-width: none; text-align: left !important; }
.cms-image-gallery__mosaic-support > .cms-image-gallery__item { flex: 0 1 calc((100% - 1rem) / 2); }
.cms-image-gallery__mosaic[data-image-count="1"] { grid-template-columns: minmax(0, 1fr); }
.cms-image-gallery__mosaic[data-image-count="2"] .cms-image-gallery__mosaic-support > .cms-image-gallery__item { flex-basis: 100%; max-width: 28rem; }
.cms-image-gallery__mosaic[data-image-count="3"] { max-width: 44rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cms-image-gallery__mosaic[data-image-count="3"] .cms-image-gallery__mosaic-support > .cms-image-gallery__item { flex-basis: 100%; }
.cms-image-gallery__mosaic[data-image-count="6"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.cms-image-gallery__mosaic[data-image-count="6"] .cms-image-gallery__mosaic-support > .cms-image-gallery__item { flex-basis: calc((100% - 2rem) / 3); }
.cms-image-gallery__mosaic .cms-image-gallery__caption { margin-top: .5rem; }
.cms-image-gallery__masonry { columns: 3; column-gap: 1rem; overflow: visible; padding-bottom: 0; }
.cms-image-gallery__masonry[data-image-count="1"] { columns: 1; max-width: 28rem; }
.cms-image-gallery__masonry[data-image-count="2"] { columns: 2; max-width: 42rem; }
.cms-image-gallery__masonry > .cms-image-gallery__item {
    display: inline-block;
    width: 100%;
    max-width: none;
    margin: 0 0 1rem;
    vertical-align: top;
    break-inside: avoid;
    text-align: left !important;
}
.cms-image-gallery__masonry > .cms-image-gallery__item { --gallery-frame-ratio: 3 / 2; }
.cms-image-gallery__masonry > .cms-image-gallery__item:nth-child(6n + 1),
.cms-image-gallery__masonry > .cms-image-gallery__item:nth-child(6n + 4) { --gallery-frame-ratio: 4 / 5; }
.cms-image-gallery__masonry[data-image-count="6"] > .cms-image-gallery__item:nth-child(5) { --gallery-frame-ratio: 4 / 5; }
.cms-image-gallery__masonry[data-image-count="1"] > .cms-image-gallery__item,
.cms-image-gallery__masonry[data-image-count="2"] > .cms-image-gallery__item,
.cms-image-gallery__masonry[data-image-count="3"] > .cms-image-gallery__item { --gallery-frame-ratio: 4 / 3; }
.cms-image-gallery__masonry .cms-image-gallery__caption { margin-top: .5rem; }
.cms-image-gallery__enlarge {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: .2rem;
    background: transparent;
    color: #fff;
    cursor: zoom-in;
}
.cms-image-gallery__items:where(.d-flex) .cms-image-gallery__enlarge { max-width: 400px; }
.cms-image-gallery__enlarge:focus-visible { outline: 3px solid var(--site-color-primary); outline-offset: 3px; }
.cms-image-gallery__enlarge-icon {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    pointer-events: none;
}
.cms-image-gallery__items .cms-image-gallery__frame {
    --gallery-frame-inset: .5rem;
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: var(--gallery-frame-ratio, 4 / 3);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--site-radius-small, .25rem);
    background: transparent;
}
.cms-image-gallery__items .cms-image-gallery__frame img {
    position: absolute;
    inset: var(--gallery-frame-inset);
    width: calc(100% - var(--gallery-frame-inset) - var(--gallery-frame-inset));
    max-width: 100%;
    height: calc(100% - var(--gallery-frame-inset) - var(--gallery-frame-inset));
    min-height: 0;
    margin: 0;
    object-fit: contain;
    object-position: center;
}
.cms-image-gallery__items .cms-image-gallery__frame img:hover { transform: none; }
/* The tile owns the border/surface so captions stay inside it. */
.cms-image-gallery-style--bordered .cms-image-gallery__item {
    border: 1px solid var(--site-color-border, #dee2e6);
    border-radius: var(--site-radius-small, .25rem);
    background: color-mix(in srgb, var(--site-color-text, #212529) 4%, var(--site-color-background, #fff));
}
.cms-image-gallery-style--soft .cms-image-gallery__item {
    border: 1px solid transparent;
    border-radius: var(--site-radius-small, .25rem);
    background: color-mix(in srgb, var(--site-color-primary, #777) 7%, var(--site-color-background, #fff));
}
.cms-image-gallery-style--soft .cms-image-gallery__frame { --gallery-frame-inset: .875rem; }
.cms-image-gallery-style--bordered .cms-image-gallery__caption { margin: 0; padding: 0 .75rem .75rem; }
.cms-image-gallery-style--soft .cms-image-gallery__caption { margin: 0; padding: 0 .875rem .875rem; }
.cms-image-gallery-style--plain .cms-image-gallery__item { border: 0; border-radius: 0; background: transparent; }
.cms-image-gallery-style--plain .cms-image-gallery__frame { --gallery-frame-inset: 0rem; border-radius: 0; }
.cms-image-gallery-style--plain .cms-image-gallery__caption { margin: 0; padding: .5rem 0 0; }
[data-image-gallery-appearance][hidden],
[data-image-gallery-style-help][hidden] { display: none !important; }
.cms-image-gallery-layout-picker { display: flex; align-items: stretch; gap: .35rem; }
.cms-image-gallery-layout-picker .cms-option-cycle { flex: 1; min-width: 0; }
.cms-image-gallery-layout-step { flex: 0 0 1.75rem; padding: 0; color: var(--site-color-primary); background: var(--site-color-background); border: 1px solid var(--site-color-border); border-radius: var(--site-radius-small); }
.cms-image-gallery-layout-step:hover,
.cms-image-gallery-layout-step:focus-visible { color: var(--site-color-primary-contrast); background: var(--site-color-primary); }
[data-image-gallery-layout-help][hidden] { display: none !important; }

@media (max-width: 767.98px) {
    .cms-image-gallery__mosaic[data-image-count] { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
    .cms-image-gallery__mosaic[data-image-count] .cms-image-gallery__mosaic-support > .cms-image-gallery__item { flex-basis: calc((100% - 1rem) / 2); }
    .cms-image-gallery__masonry:not([data-image-count="1"]) { columns: 2; }
}
@media (max-width: 575.98px) {
    .cms-image-gallery__masonry[data-image-count] { columns: 1; max-width: 28rem; }
}
@container (max-width: 767.98px) {
    .cms-preview-shell__viewport .cms-image-gallery__mosaic[data-image-count] { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
    .cms-preview-shell__viewport .cms-image-gallery__mosaic[data-image-count] .cms-image-gallery__mosaic-support > .cms-image-gallery__item { flex-basis: calc((100% - 1rem) / 2); }
    .cms-preview-shell__viewport .cms-image-gallery__masonry:not([data-image-count="1"]) { columns: 2; }
}
@container (max-width: 575.98px) {
    .cms-preview-shell__viewport .cms-image-gallery__masonry[data-image-count] { columns: 1; max-width: 28rem; }
}

/* One native modal viewer is shared by the galleries on a page. */
body.cms-gallery-viewer-open { overflow: hidden; }
.cms-gallery-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(.75rem, 3vw, 2rem);
    border: 0;
    background: transparent;
    color: #fff;
}
.cms-gallery-viewer::backdrop { background: rgba(10, 15, 20, .94); }
.cms-gallery-viewer[open] { display: grid; place-items: center; }
.cms-gallery-viewer__panel { position: relative; width: min(100%, 84rem); padding-top: 3rem; }
.cms-gallery-viewer__stage { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: center; gap: .75rem; }
.cms-gallery-viewer figure { min-width: 0; margin: 0; text-align: center; }
.cms-gallery-viewer__image { display: block; width: 100%; height: auto; max-height: 72vh; max-height: 72dvh; object-fit: contain; }
.cms-gallery-viewer__caption { max-height: 12vh; margin: .75rem auto 0; overflow: auto; white-space: pre-line; overflow-wrap: anywhere; }
.cms-gallery-viewer__counter { position: absolute; top: .5rem; left: 0; margin: 0; font-size: .9rem; }
.cms-gallery-viewer button { display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); }
.cms-gallery-viewer button:hover,
.cms-gallery-viewer button:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .24); }
.cms-gallery-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cms-gallery-viewer__close { position: absolute; right: 0; top: 0; font-size: 1.75rem; }
.cms-gallery-viewer__error { text-align: center; margin-top: 1rem; }
.cms-gallery-viewer [hidden] { display: none !important; }
.cms-gallery-viewer__previous[hidden],
.cms-gallery-viewer__next[hidden] { display: block !important; visibility: hidden; }
@media (max-width: 575.98px) {
    .cms-gallery-viewer__stage { grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem; gap: .35rem; }
    .cms-gallery-viewer button { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-image-gallery__item img { transition: none; }
    .cms-image-gallery__item img:hover { transform: none; }
}