/*
 * MES Image Marquee
 * Everything is scoped under .mes-marquee. Selectors are deliberately
 * (0,2,0)+ so generic theme rules for img/button/dialog cannot leak in.
 * Motion is a single transform animation; JS only sets the two custom
 * properties the keyframes read (--mes-marquee-copies, --mes-marquee-duration).
 */

.mes-marquee {
    --mes-marquee-accent: #18699e;
    --mes-marquee-text: #252525;
    --mes-marquee-surface: #f5f7f8;
    --mes-marquee-border: #dce2e6;
    --mes-marquee-radius: 10px;
    --mes-marquee-ease: 0.3s ease-in-out;

    /* Set inline by the shortcode; these are fallbacks only. */
    --mes-marquee-height: 320px;
    --mes-marquee-height-mobile: 192px;
    --mes-marquee-gap: 24px;

    /* Set by JS after measuring. */
    --mes-marquee-copies: 1;
    --mes-marquee-duration: 60s;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--mes-marquee-text);
}

.mes-marquee *,
.mes-marquee *::before,
.mes-marquee *::after {
    box-sizing: border-box;
}

/* ---------- Strip ---------- */

.mes-marquee .mes-marquee__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Until JS has measured and cloned (or if JS never runs) the strip is a
   plain scrollable row rather than a stuck, partially visible one. */
.mes-marquee:not(.is-ready) .mes-marquee__viewport {
    overflow-x: auto;
    overflow-y: hidden;
}

.mes-marquee--fade.is-ready .mes-marquee__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.mes-marquee .mes-marquee__track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    transform: translate3d(0, 0, 0);
}

.mes-marquee.is-ready .mes-marquee__track {
    animation: mes-marquee-scroll var(--mes-marquee-duration) linear infinite;
    will-change: transform;
}

.mes-marquee--reverse.is-ready .mes-marquee__track {
    animation-direction: reverse;
}

@keyframes mes-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        /* One group width, whatever the number of copies. */
        transform: translate3d(calc(-100% / var(--mes-marquee-copies)), 0, 0);
    }
}

/* Pause states. Hover is limited to real pointers so a tap on touch
   devices does not leave the strip stuck in a sticky-hover pause. */
.mes-marquee.is-paused .mes-marquee__track,
.mes-marquee.is-offscreen .mes-marquee__track,
.mes-marquee.is-focus-paused .mes-marquee__track,
.mes-marquee.is-lightbox-open .mes-marquee__track {
    animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
    .mes-marquee .mes-marquee__viewport:hover .mes-marquee__track {
        animation-play-state: paused;
    }
}

.mes-marquee .mes-marquee__group {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.mes-marquee .mes-marquee__item {
    flex: 0 0 auto;
    margin: 0 var(--mes-marquee-gap) 0 0;
    padding: 0;
}

.mes-marquee .mes-marquee__image {
    display: block;
    width: auto;
    height: var(--mes-marquee-height-mobile);
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mes-marquee-radius);
    box-shadow: none;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

@media (min-width: 768px) {
    .mes-marquee .mes-marquee__image {
        height: var(--mes-marquee-height);
    }
}

/* Image buttons: reset anything a theme applies to <button>. */
.mes-marquee .mes-marquee__button {
    position: static;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mes-marquee-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 0;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.mes-marquee .mes-marquee__button:hover,
.mes-marquee .mes-marquee__button:active {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.mes-marquee .mes-marquee__button .mes-marquee__image {
    transition: opacity var(--mes-marquee-ease);
}

@media (hover: hover) and (pointer: fine) {
    .mes-marquee .mes-marquee__button:hover .mes-marquee__image {
        opacity: 0.88;
    }
}

/* ---------- Pause / play control ---------- */

.mes-marquee .mes-marquee__toggle {
    position: absolute;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid var(--mes-marquee-accent);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--mes-marquee-accent);
    line-height: 0;
    box-shadow: 0 2px 10px rgba(18, 47, 70, 0.18);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--mes-marquee-ease), color var(--mes-marquee-ease);
}

.mes-marquee .mes-marquee__toggle:hover {
    background: var(--mes-marquee-accent);
    color: #ffffff;
}

.mes-marquee .mes-marquee__toggle:active {
    transform: translateY(1px);
}

.mes-marquee .mes-marquee__icon {
    display: block;
    fill: currentColor;
}

.mes-marquee .mes-marquee__icon--play,
.mes-marquee.is-paused .mes-marquee__icon--pause {
    display: none;
}

.mes-marquee.is-paused .mes-marquee__icon--play {
    display: block;
}

/* Hide the control until the strip is actually animating. */
.mes-marquee:not(.is-ready) .mes-marquee__toggle {
    display: none;
}

/* ---------- Reduced motion / static fallback ---------- */

.mes-marquee.is-static .mes-marquee__track {
    animation: none;
    transform: none;
    will-change: auto;
}

.mes-marquee.is-static .mes-marquee__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
}

.mes-marquee.is-static .mes-marquee__group[aria-hidden="true"],
.mes-marquee.is-static .mes-marquee__toggle {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .mes-marquee .mes-marquee__track {
        animation: none !important;
        transform: none;
        will-change: auto;
    }

    .mes-marquee .mes-marquee__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: thin;
    }

    .mes-marquee .mes-marquee__group[aria-hidden="true"],
    .mes-marquee .mes-marquee__toggle {
        display: none;
    }

    .mes-marquee .mes-marquee__button .mes-marquee__image,
    .mes-marquee .mes-marquee__toggle,
    .mes-marquee .mes-marquee__lightbox-image {
        transition: none;
    }
}

/* ---------- Lightbox ---------- */

.mes-marquee .mes-marquee__lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    overflow: hidden;
    box-shadow: none;
}

.mes-marquee .mes-marquee__lightbox:not([open]) {
    display: none;
}

.mes-marquee .mes-marquee__lightbox::backdrop {
    background: rgba(9, 19, 27, 0.9);
}

.mes-marquee .mes-marquee__lightbox-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 16px 52px;
    touch-action: pan-y;
}

.mes-marquee .mes-marquee__lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.mes-marquee .mes-marquee__lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1600px);
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mes-marquee-radius);
    background: #0f171d;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    opacity: 1;
    transition: opacity var(--mes-marquee-ease);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.mes-marquee .mes-marquee__lightbox-image.is-loading {
    opacity: 0.35;
}

.mes-marquee .mes-marquee__lightbox-caption {
    max-width: min(92vw, 70ch);
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9375rem;
    line-height: 1.45;
    text-align: center;
}

.mes-marquee .mes-marquee__lightbox-counter {
    position: absolute;
    right: 0;
    bottom: 14px;
    left: 0;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    pointer-events: none;
}

.mes-marquee .mes-marquee__lightbox-close,
.mes-marquee .mes-marquee__lightbox-nav {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(20, 32, 42, 0.6);
    color: #ffffff;
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mes-marquee-ease), border-color var(--mes-marquee-ease);
}

.mes-marquee .mes-marquee__lightbox-close:hover,
.mes-marquee .mes-marquee__lightbox-nav:hover {
    border-color: var(--mes-marquee-accent);
    background: var(--mes-marquee-accent);
}

.mes-marquee .mes-marquee__lightbox-close {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
}

.mes-marquee .mes-marquee__lightbox-nav {
    top: 50%;
    bottom: auto;
    margin-top: -24px;
}

.mes-marquee .mes-marquee__lightbox-nav--prev {
    right: auto;
    left: 12px;
}

.mes-marquee .mes-marquee__lightbox-nav--next {
    right: 12px;
    left: auto;
}

.mes-marquee .mes-marquee__lightbox-close svg,
.mes-marquee .mes-marquee__lightbox-nav svg {
    display: block;
}

/* The site's 1px #0956BC focus ring is invisible on the dark backdrop. */
.mes-marquee .mes-marquee__lightbox :focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .mes-marquee .mes-marquee__lightbox-body {
        padding: 72px 88px 56px;
    }

    .mes-marquee .mes-marquee__lightbox-nav--prev {
        left: 20px;
    }

    .mes-marquee .mes-marquee__lightbox-nav--next {
        right: 20px;
    }

    .mes-marquee .mes-marquee__lightbox-close {
        top: 20px;
        right: 20px;
    }
}

/* Applied to <html> while the lightbox is open. scrollbar-gutter keeps the
   page from shifting sideways when the scrollbar disappears. */
html.mes-marquee-lock {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* ---------- Editor-only notice (never rendered for visitors) ---------- */

.mes-marquee-notice {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px dashed #dce2e6;
    border-radius: 10px;
    background: #f5f7f8;
    color: #252525;
    font-size: 0.9375rem;
}