/* ============================================================
   MOCAP Portfolio Slider — v1.4.1
   Widget-only: no section/background decoration is imposed.
   ============================================================ */

.mps-root,
.mps-root * {
    box-sizing: border-box;
}

.mps-root {
    --mps-text: #f8fafc;
    --mps-text-2: #c2cbd8;
    --mps-border: rgba(255,255,255,.14);
    --mps-gap: 14px;
    --mps-card-height: 550px;
    --mps-mosaic-height: 620px;
    --mps-effective-mosaic-height: var(--mps-mosaic-height);
    --mps-page-width: 100%;
    --mps-right-bleed: 0px;
    --mps-continuity-peek: 0px;
    --mps-divider-1: #ff2f92;
    --mps-divider-2: #ffd94b;
    --mps-overlay-base: #050a10;
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: visible;
    isolation: isolate;
    min-width: 0;
    color: var(--mps-text);
    background-color: transparent !important;
    background-image: none !important;
    font-family: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

/* Do not let Elementor's widget wrapper crop the slider shadows/controls. */
.elementor-widget-mocap-portfolio-slider,
.elementor-widget-mocap-portfolio-slider > .elementor-widget-container {
    min-width: 0;
    overflow: visible !important;
}

/* The plugin only owns the slider itself. */
.mps-shell,
.mps-main {
    width: 100%;
    min-width: 0;
}

.mps-shell {
    display: block;
    position: relative;
}

.mps-main {
    display: block;
}

/* ---------------- Header / category tabs ---------------- */

.mps-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
}

.mps-tabs {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 1px 22px 1px 1px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
}

.mps-tabs::-webkit-scrollbar {
    display: none;
}

.mps-category-drag-enabled .mps-tabs {
    cursor: grab;
    touch-action: pan-y pinch-zoom;
}

.mps-category-drag-enabled .mps-tabs.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
}

.mps-category-drag-enabled .mps-tabs.is-dragging .mps-tab {
    pointer-events: none;
}

.mps-tab {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    min-width: 110px;
    min-height: 44px;
    padding: 0 22px 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.02);
    color: #d9e0ea;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transform: translateZ(0);
    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

.mps-tab:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}

.mps-tab[aria-selected="true"] {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}

/*
 * Active indicator stays INSIDE the pill. This prevents the gradient
 * from escaping the button or being cut by the surrounding container.
 */
.mps-tab-indicator {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 3px;
    width: 44px;
    max-width: calc(100% - 24px);
    height: 3px;
    border-radius: 999px;
    opacity: 0;
    transform: translateX(-50%) scaleX(.72);
    transform-origin: center;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    background: linear-gradient(
        90deg,
        #ff2f92 0%,
        #7d53ff 28%,
        #12a6ff 55%,
        #5be66e 80%,
        #ffd94b 100%
    );
}

.mps-tab[aria-selected="true"] .mps-tab-indicator {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* ---------------- Navigation arrows ---------------- */

.mps-arrows {
    flex: 0 0 auto;
    display: flex;
    gap: 14px;
    align-items: center;
}

.mps-arrow {
    appearance: none;
    -webkit-appearance: none;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    color: #f8fafc;
    background: rgba(255,255,255,.02);
    background-image: none;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
        transform .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        opacity .22s ease;
}

.mps-arrow::before,
.mps-arrow::after {
    content: none !important;
    display: none !important;
}

.mps-arrow svg {
    display: block;
    flex: 0 0 auto;
}

.mps-arrow:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.08);
    background-image: none;
}

.mps-arrow-next {
    color: #09111b;
    background: #fff;
    background-image: none;
}

.mps-arrow-next:hover {
    background: #f3f5f7;
    background-image: none;
}

.mps-arrow:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* ---------------- Slider stage ---------------- */

.mps-stage {
    position: relative;
    width: calc(100% + var(--mps-right-bleed));
    max-width: none;
    min-width: 0;
    overflow: hidden;
    padding: 9px 0 13px;
    margin: -9px 0 -13px;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-inline: contain;
    outline: none;
    contain: layout paint;
}

.mps-drag-enabled .mps-stage {
    cursor: grab;
}

.mps-stage.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.mps-stage.is-dragging .mps-card {
    pointer-events: none;
}

.mps-track {
    width: max-content;
    min-width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--mps-gap);
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ---------------- Cards carousel ---------------- */

.mps-slide {
    flex: 0 0 var(--mps-card-width, 320px);
    min-width: 0;
    content-visibility: auto;
    contain-intrinsic-size: var(--mps-card-height) var(--mps-card-width, 320px);
}

.mps-slide > .mps-card {
    height: var(--mps-card-height);
}

/* ---------------- Adaptive mosaic ---------------- */

.mps-grid-page {
    flex: 0 0 var(--mps-page-width, 100%);
    width: var(--mps-page-width, 100%);
    min-width: 0;
    height: var(--mps-effective-mosaic-height, var(--mps-mosaic-height));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--mps-gap);
    content-visibility: auto;
    contain-intrinsic-size: var(--mps-effective-mosaic-height, var(--mps-mosaic-height)) 1000px;
}

.mps-grid-item {
    min-width: 0;
    min-height: 0;
}

/* Default five-item composition: completely fills 12 x 6. */
.mps-grid-item.mps-pattern-0 { grid-column: span 4; grid-row: span 6; }
.mps-grid-item.mps-pattern-1 { grid-column: span 3; grid-row: span 6; }
.mps-grid-item.mps-pattern-2 { grid-column: span 5; grid-row: span 3; }
.mps-grid-item.mps-pattern-3 { grid-column: span 3; grid-row: span 3; }
.mps-grid-item.mps-pattern-4 { grid-column: span 2; grid-row: span 3; }

/* Adaptive compositions prevent empty regions on short pages/categories. */
.mps-grid-page.mps-count-1 > .mps-grid-item:nth-child(1) {
    grid-column: span 12;
    grid-row: span 6;
}

.mps-grid-page.mps-count-2 > .mps-grid-item:nth-child(1),
.mps-grid-page.mps-count-2 > .mps-grid-item:nth-child(2) {
    grid-column: span 6;
    grid-row: span 6;
}

.mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(1) {
    grid-column: span 4;
    grid-row: span 6;
}
.mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(2) {
    grid-column: span 3;
    grid-row: span 6;
}
.mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(3) {
    grid-column: span 5;
    grid-row: span 6;
}

.mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(1),
.mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(2) {
    grid-column: span 4;
    grid-row: span 6;
}
.mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(3),
.mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(4) {
    grid-column: span 4;
    grid-row: span 3;
}

.mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(1) {
    grid-column: span 4;
    grid-row: span 6;
}
.mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(2) {
    grid-column: span 3;
    grid-row: span 6;
}
.mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(3) {
    grid-column: span 5;
    grid-row: span 3;
}
.mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(4) {
    grid-column: span 3;
    grid-row: span 3;
}
.mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(5) {
    grid-column: span 2;
    grid-row: span 3;
}

/* Manual video weights continue to be supported. */
.mps-grid-item[data-size="large"] {
    grid-column: span 4;
    grid-row: span 6;
}
.mps-grid-item[data-size="vertical"] {
    grid-column: span 3;
    grid-row: span 6;
}
.mps-grid-item[data-size="horizontal"] {
    grid-column: span 5;
    grid-row: span 3;
}
.mps-grid-item[data-size="small"] {
    grid-column: span 2;
    grid-row: span 3;
}

.mps-grid-item > .mps-card {
    height: 100%;
}

/* ---------------- Individual card ---------------- */

.mps-card {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background: #0d1723;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    isolation: isolate;
    transform: translateZ(0);
    transition:
        transform .26s ease,
        box-shadow .26s ease,
        border-color .26s ease;
}

.mps-card[role="button"],
.mps-card[role="link"] {
    cursor: pointer;
}

.mps-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.mps-card:focus-visible,
.mps-tab:focus-visible,
.mps-arrow:focus-visible,
.mps-lightbox-close:focus-visible {
    outline: 2px solid rgba(255,255,255,.72);
    outline-offset: 3px;
}

.mps-card-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #111922;
}

/*
 * Elementor normally applies `.elementor img { height:auto; }`, which has
 * greater selector specificity than a simple class. The selectors below
 * deliberately override it so gallery images actually occupy the complete
 * card instead of leaving a large empty area below.
 */
.mps-root .mps-card-media > img.mps-card-image,
.elementor .mps-root .mps-card-media > img.mps-card-image,
.mps-root .mps-card-media > .mps-inline-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: var(--mps-image-position, center center) !important;
    z-index: 1;
}

.mps-card-media::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(5,10,16,0) 0%,
            rgba(5,10,16,0) 43%,
            rgba(5,10,16,.08) 60%,
            rgba(5,10,16,.48) 80%,
            rgba(5,10,16,.94) 100%
        );
}

.mps-card-image {
    transition: transform .3s ease, filter .3s ease;
}

.mps-card:hover .mps-card-image {
    transform: scale(1.02);
    filter: contrast(1.03) saturate(1.02);
}

.mps-card-media.is-contain .mps-card-image {
    transform: none;
}

.mps-card:hover .mps-card-media.is-contain .mps-card-image {
    transform: none;
}

.mps-card-tag {
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
    min-height: 34px;
    max-width: calc(100% - 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(14,20,28,.42);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mps-card-content {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 18px 18px;
    pointer-events: none;
}

.mps-card-divider {
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--mps-divider-1),
        #7d53ff 30%,
        #12a6ff 58%,
        #5be66e 80%,
        var(--mps-divider-2)
    );
}

.mps-card-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mps-card-subtitle {
    margin: 0;
    color: #c9d2dd;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: -.01em;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mps-play {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(5,10,16,.58);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .22s ease, background-color .22s ease;
}

.mps-card:hover .mps-play {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(5,10,16,.76);
}

.mps-video-placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.12), transparent 26%),
        linear-gradient(135deg, #141f2b, #090f16);
}


/* Runtime density classes: the JS applies these from the real rendered size. */
.mps-cell-compact .mps-card-content {
    padding: 16px 14px 14px;
}

.mps-cell-compact .mps-card-divider {
    width: 30px;
    height: 3px;
    margin-bottom: 9px;
}

.mps-cell-compact .mps-card-title {
    font-size: 14px;
    margin-bottom: 4px;
}

.mps-cell-compact .mps-card-subtitle {
    font-size: 12px;
    -webkit-line-clamp: 1;
}

.mps-cell-compact .mps-card-tag {
    top: 12px;
    left: 12px;
    min-height: 30px;
    max-width: calc(100% - 24px);
    padding: 7px 11px;
    font-size: 11px;
}

.mps-cell-small .mps-card-content {
    padding: 13px 12px 12px;
}

.mps-cell-small .mps-card-subtitle {
    display: none;
}

.mps-cell-small .mps-card-title {
    font-size: 13px;
    line-height: 1.2;
    -webkit-line-clamp: 1;
}

.mps-cell-small .mps-card-divider {
    width: 26px;
    margin-bottom: 7px;
}

.mps-cell-small .mps-card-tag {
    min-height: 28px;
    padding: 6px 10px;
    font-size: 10px;
}

.mps-cell-wide .mps-card-content {
    max-width: min(78%, 520px);
}

/* ---------------- Footer / progress ---------------- */

.mps-bottom {
    margin-top: 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.mps-progress-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 16px;
}

.mps-bottom-left {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.mps-slide-arrows {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mps-slide-arrow {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.025);
    color: #f8fafc;
    box-shadow: none;
    cursor: pointer;
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
}

.mps-slide-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
    transition: transform .22s cubic-bezier(.22,1,.36,1);
}

.mps-slide-arrow:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.24);
}

.mps-slide-arrow-prev:hover svg {
    transform: translateX(-2px);
}

.mps-slide-arrow-next:hover svg {
    transform: translateX(2px);
}

.mps-slide-arrow:active {
    transform: translateY(0) scale(.96);
}

/* Keep the slide navigation independent from theme/global button active styles.
   Defaults intentionally mirror the primary white navigation control. */
.mps-root button.mps-slide-arrow:active,
.mps-root button.mps-slide-arrow:focus {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #09111b !important;
    border-color: #ffffff !important;
}

.mps-root button
.mps-slide-arrow:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

.mps-slide-arrow:focus-visible {
    outline: 2px solid rgba(255,255,255,.7);
    outline-offset: 3px;
}

.mps-counter {
    flex: 0 0 auto;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mps-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mps-progress-segment {
    width: 36px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
    transition: width .28s ease, height .28s ease, background-color .28s ease;
}

.mps-progress-segment.is-active {
    width: 84px;
    height: 3px;
    background: #fff;
}

.mps-footer-microcopy {
    max-width: 300px;
    padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,.2);
    color: #94a0b1;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-align: right;
}

.mps-template-pool {
    display: none !important;
}

.mps-empty,
.mps-runtime-empty {
    width: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 18px;
    color: #9aa6b6;
    background: rgba(255,255,255,.025);
    text-align: center;
}

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

.mps-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.mps-lightbox.is-open {
    display: flex;
}

.mps-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,7,12,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mps-lightbox-dialog {
    position: relative;
    z-index: 2;
    width: min(1180px, 92vw);
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    background: #071019;
    box-shadow: 0 30px 80px rgba(0,0,0,.48);
}

.mps-lightbox-media {
    position: relative;
    width: 100%;
    min-height: 240px;
    max-height: 74vh;
    aspect-ratio: 16 / 9;
    background: #020507;
}

.mps-lightbox-media img,
.mps-lightbox-media video,
.mps-lightbox-media iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: contain;
    background: #020507;
}

.mps-lightbox-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px 18px;
    color: #fff;
}

.mps-lightbox-title {
    font-size: 16px;
    line-height: 1.3;
}

.mps-lightbox-subtitle {
    color: #b9c3d0;
    font-size: 13px;
    line-height: 1.45;
}

.mps-lightbox-close {
    appearance: none;
    position: fixed;
    z-index: 3;
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font: 300 34px/1 Arial, sans-serif;
    cursor: pointer;
}

body.mps-lightbox-open {
    overflow: hidden;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1023px) {
    .mps-header {
        gap: 12px;
    }

    .mps-grid-page {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    /* Four items fill a 6-column tablet grid. */
    .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(1),
    .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(2) {
        grid-column: span 3;
        grid-row: span 3;
    }
    .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(3),
    .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(4) {
        grid-column: span 3;
        grid-row: span 3;
    }

    .mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(1),
    .mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(2) {
        grid-column: span 3;
        grid-row: span 3;
    }
    .mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(3) {
        grid-column: span 6;
        grid-row: span 3;
    }

    .mps-grid-page.mps-count-2 > .mps-grid-item:nth-child(1),
    .mps-grid-page.mps-count-2 > .mps-grid-item:nth-child(2) {
        grid-column: span 3;
        grid-row: span 6;
    }

    .mps-grid-page.mps-count-1 > .mps-grid-item:nth-child(1) {
        grid-column: span 6;
        grid-row: span 6;
    }

    /* Five items fill exactly 6 x 6: two dominant cards + three compact cards. */
    .mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(1),
    .mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(2) {
        grid-column: span 3;
        grid-row: span 4;
    }
    .mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(3),
    .mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(4),
    .mps-grid-page.mps-count-5 > .mps-grid-item:nth-child(5) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .mps-grid-item[data-size]:not([data-size="auto"]) {
        /* Explicit visual weight is advisory on narrower widths. */
        grid-column: auto;
        grid-row: auto;
    }
}


@media (max-width: 900px) {
    .mps-tabs {
        gap: 9px;
        padding-right: 14px;
    }

    .mps-tab {
        min-width: 0;
        padding-left: 17px;
        padding-right: 17px;
    }

    .mps-arrows {
        gap: 8px;
    }

    .mps-arrow {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 767px) {
    .mps-mode-mosaic .mps-grid-page {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    .mps-mode-mosaic .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(1),
    .mps-mode-mosaic .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(2),
    .mps-mode-mosaic .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(3),
    .mps-mode-mosaic .mps-grid-page.mps-count-4 > .mps-grid-item:nth-child(4) {
        grid-column: span 3;
        grid-row: span 3;
    }

    .mps-mode-mosaic .mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(1) {
        grid-column: span 6;
        grid-row: span 3;
    }
    .mps-mode-mosaic .mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(2),
    .mps-mode-mosaic .mps-grid-page.mps-count-3 > .mps-grid-item:nth-child(3) {
        grid-column: span 3;
        grid-row: span 3;
    }

    .mps-header {
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mps-tabs {
        gap: 9px;
        padding-right: 10px;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 18px), transparent 100%);
    }

    .mps-tab {
        min-width: 0;
        min-height: 40px;
        padding: 0 18px 2px;
        font-size: 13px;
    }

    .mps-tab-indicator {
        bottom: 3px;
        height: 2px;
        width: 34px;
    }

    .mps-arrows {
        gap: 8px;
    }

    .mps-arrow {
        width: 44px;
        height: 44px;
    }

    .mps-card-tag {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
        min-height: 32px;
        font-size: 12px;
    }

    .mps-card-content {
        padding: 18px 16px 16px;
    }

    .mps-card-title {
        font-size: 16px;
    }

    .mps-card-subtitle {
        font-size: 13px;
    }

    .mps-bottom {
        margin-top: 12px;
        gap: 12px;
    }

    .mps-bottom-left {
        gap: 10px;
    }

    .mps-slide-arrows {
        gap: 6px;
    }

    .mps-slide-arrow {
        width: 40px;
        height: 40px;
    }

    .mps-slide-arrow svg {
        width: 18px;
        height: 18px;
    }

    .mps-progress {
        gap: 6px;
    }

    .mps-progress-segment {
        width: 18px;
    }

    .mps-progress-segment.is-active {
        width: 42px;
    }

    .mps-footer-microcopy {
        display: none;
    }

    .mps-lightbox {
        padding: 14px;
    }

    .mps-lightbox-dialog {
        width: 100%;
        border-radius: 14px;
    }

    .mps-lightbox-close {
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 520px) {
    .mps-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .mps-arrows {
        position: relative;
        z-index: 3;
        gap: 6px;
    }

    .mps-arrow {
        width: 40px;
        height: 40px;
    }

    .mps-mode-mosaic .mps-grid-page {
        height: var(--mps-effective-mosaic-height, var(--mps-mosaic-height));
        min-height: 340px;
    }

    .mps-bottom {
        gap: 12px;
    }
}


/* ============================================================
   v1.4.1 — premium interaction system
   - multicolor button accents contained inside controls
   - refined hover/press transitions
   - staged category entry/exit motion
   - full-screen portfolio lightbox
   - smart fit no longer creates blurred duplicate backgrounds
   ============================================================ */

.mps-root {
    --mps-accent-1: #ff2f92;
    --mps-accent-2: #8b5cf6;
    --mps-accent-3: #12a6ff;
    --mps-accent-4: #54e16f;
    --mps-accent-5: #ffd94b;
    --mps-premium-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Category buttons: more tactile, premium and visually explicit. */
.mps-tab {
    isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform .32s var(--mps-premium-ease),
        background-color .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .32s var(--mps-premium-ease);
}

.mps-tab::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% -25%, rgba(255,255,255,.18), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 72%);
    transition: opacity .3s ease;
}

.mps-tab > span:first-child {
    position: relative;
    z-index: 2;
    transition: transform .3s var(--mps-premium-ease);
}

.mps-tab-indicator {
    z-index: 3;
    bottom: 4px;
    width: min(78px, calc(100% - 30px));
    height: 3px;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-50%) scaleX(.72);
    background: transparent;
    box-shadow: none;
    transition:
        opacity .3s ease,
        transform .38s var(--mps-premium-ease),
        width .38s var(--mps-premium-ease),
        box-shadow .3s ease;
}

/*
 * The moving strip is deliberately duplicated in two identical halves.
 * Translating exactly 50% therefore lands on the same pixels where the
 * animation started, eliminating the visible jump at the loop boundary.
 * The yellow -> pink interval is also interpolated, so the final color
 * flows naturally back into the first color.
 */
.mps-tab-indicator::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 200%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--mps-accent-1) 0%,
        var(--mps-accent-2) 8%,
        var(--mps-accent-3) 16%,
        var(--mps-accent-4) 24%,
        var(--mps-accent-5) 32%,
        var(--mps-accent-1) 50%,
        var(--mps-accent-2) 58%,
        var(--mps-accent-3) 66%,
        var(--mps-accent-4) 74%,
        var(--mps-accent-5) 82%,
        var(--mps-accent-1) 100%
    );
    transform: translate3d(0,0,0);
    will-change: transform;
}

.mps-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 28px rgba(0,0,0,.16);
}

.mps-tab:hover::before,
.mps-tab[aria-selected="true"]::before {
    opacity: 1;
}

.mps-tab:hover > span:first-child {
    transform: translateY(-1px);
}

.mps-tab:hover .mps-tab-indicator {
    /* Only the selected category owns the multicolor underline. */
    opacity: 0;
    transform: translateX(-50%) scaleX(.78);
}

.mps-tab[aria-selected="true"] {
    transform: translateY(0);
    border-color: rgba(255,255,255,.21);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 12px 30px rgba(0,0,0,.18);
}

.mps-tab[aria-selected="true"] .mps-tab-indicator,
.mps-tab[aria-selected="true"]:hover .mps-tab-indicator {
    width: min(88px, calc(100% - 26px));
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--mps-accent-3) 28%, transparent),
        0 0 18px color-mix(in srgb, var(--mps-accent-1) 12%, transparent);
}

.mps-tab[aria-selected="true"] .mps-tab-indicator::before {
    animation: mps-gradient-marquee 5.2s linear infinite;
}

.mps-tab:active {
    transform: translateY(0) scale(.975);
    transition-duration: .1s;
}

@keyframes mps-gradient-marquee {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
}

/* Navigation buttons receive the same visual language without becoming loud. */
.mps-arrow {
    isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform .32s var(--mps-premium-ease),
        background-color .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .32s var(--mps-premium-ease);
}

.mps-arrow::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 5%, rgba(255,255,255,.18), transparent 58%);
    transition: opacity .28s ease;
}

.mps-arrow::after {
    /* Navigation arrows are not selectable categories: no multicolor underline. */
    content: none !important;
    display: none !important;
}

.mps-arrow svg {
    position: relative;
    z-index: 3;
    transition: transform .32s var(--mps-premium-ease);
}

.mps-arrow:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.19);
}

.mps-arrow:hover::before { opacity: 1; }
.mps-arrow-prev:hover svg { transform: translateX(-2px); }
.mps-arrow-next:hover svg { transform: translateX(2px); }

.mps-arrow:active {
    transform: translateY(0) scale(.94);
    transition-duration: .1s;
}

/* Never recreate the image as a blurred background. */
.mps-media-backdrop {
    display: none !important;
    background-image: none !important;
}

.mps-card-media.is-smart-cover {
    background: #0d1723;
}

.mps-root .mps-card-media.is-smart-cover > img.mps-card-image,
.elementor .mps-root .mps-card-media.is-smart-cover > img.mps-card-image {
    object-fit: cover !important;
}

.mps-root .mps-card-media.is-contain > img.mps-card-image,
.elementor .mps-root .mps-card-media.is-contain > img.mps-card-image {
    object-fit: contain !important;
    transform: none;
}

/* More sophisticated card hover with stable geometry. */
.mps-card {
    transition:
        transform .42s var(--mps-premium-ease),
        box-shadow .42s var(--mps-premium-ease),
        border-color .3s ease;
}

.mps-card-media::after {
    transition: opacity .36s ease, background .36s ease;
}

.mps-card-image {
    transform-origin: center center;
    transition: transform .55s var(--mps-premium-ease), filter .38s ease;
}

.mps-card-tag,
.mps-card-content,
.mps-card-divider {
    transition:
        transform .38s var(--mps-premium-ease),
        opacity .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}

.mps-card-divider {
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        var(--mps-accent-1),
        var(--mps-accent-2) 27%,
        var(--mps-accent-3) 53%,
        var(--mps-accent-4) 77%,
        var(--mps-accent-5)
    );
    background-size: 180% 100%;
}

.mps-card-view-hint {
    position: absolute;
    z-index: 6;
    top: 16px;
    right: 16px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(7,12,18,.46);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    opacity: 0;
    transform: translateY(-5px) scale(.96);
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity .3s ease, transform .38s var(--mps-premium-ease), background-color .3s ease;
}

.mps-card[data-media-type="image"][data-click-action="lightbox"] {
    cursor: zoom-in;
}

@media (hover: hover) and (pointer: fine) {
    .mps-card:hover {
        transform: translateY(-5px) scale(1.002);
        border-color: rgba(255,255,255,.25);
        box-shadow:
            0 22px 58px rgba(0,0,0,.32),
            inset 0 0 0 1px rgba(255,255,255,.025);
    }

    .mps-card:hover .mps-card-image {
        transform: scale(1.035);
        filter: contrast(1.025) saturate(1.035);
    }

    .mps-card:hover .mps-card-tag {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.3);
    }

    .mps-card:hover .mps-card-content {
        transform: translateY(-2px);
    }

    .mps-card:hover .mps-card-divider {
        transform: scaleX(1.18);
        background-position: 100% 50%;
    }

    .mps-card:hover .mps-card-view-hint,
    .mps-card:focus-visible .mps-card-view-hint {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mps-cell-small .mps-card-view-hint span,
.mps-cell-compact .mps-card-view-hint span {
    display: none;
}

.mps-cell-small .mps-card-view-hint,
.mps-cell-compact .mps-card-view-hint {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    justify-content: center;
    padding: 0;
}

/* Category transition: exit first, then stagger the new composition in. */
.mps-stage {
    transition: opacity .22s ease, filter .22s ease;
}

.mps-stage.is-filter-leaving {
    opacity: .14;
    filter: blur(2px) brightness(.86);
}

.mps-stage.is-filter-entering .mps-card {
    animation: mps-card-enter .58s var(--mps-premium-ease) both;
    animation-delay: calc(var(--mps-enter-index, 0) * 42ms);
}

.mps-stage.is-filter-entering-fade .mps-card {
    animation: mps-card-fade .32s ease both;
    animation-delay: calc(var(--mps-enter-index, 0) * 24ms);
}

@keyframes mps-card-enter {
    0% {
        opacity: 0;
        transform: translate3d(18px, 12px, 0) scale(.982);
        filter: blur(2px);
    }
    55% { opacity: 1; }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes mps-card-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mps-stage.is-moving-next .mps-card-image,
.mps-stage.is-moving-prev .mps-card-image {
    transition-duration: .7s;
}

/* Full-screen media viewer. */
.mps-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    display: flex;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    padding: 0;
    isolation: isolate;
    transform: none !important;
    transition: opacity .26s ease, visibility 0s linear .26s;
}

.mps-lightbox.is-open {
    display: flex;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.mps-lightbox.is-visible {
    opacity: 1;
}

.mps-lightbox-backdrop {
    background:
        radial-gradient(circle at 50% 28%, rgba(19,31,44,.45), transparent 45%),
        rgba(2,5,9,.94);
    opacity: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity .3s ease;
}

.mps-lightbox.is-visible .mps-lightbox-backdrop {
    opacity: 1;
}

.mps-lightbox-dialog {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: scale(.975);
    transition: opacity .32s ease, transform .42s var(--mps-premium-ease, cubic-bezier(.22, 1, .36, 1));
}

.mps-lightbox.is-visible .mps-lightbox-dialog {
    opacity: 1;
    transform: scale(1);
}

.mps-lightbox-media {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(58px, 7vh, 86px) clamp(64px, 7vw, 118px) clamp(96px, 12vh, 132px);
    background: transparent;
    opacity: 1;
    transform: scale(1);
    transition: opacity .18s ease, transform .28s var(--mps-premium-ease, cubic-bezier(.22, 1, .36, 1));
}

.mps-lightbox-media.is-changing {
    opacity: .18;
    transform: scale(.992);
}

.mps-lightbox-media img {
    width: auto;
    height: auto;
    max-width: min(94vw, 1880px);
    max-height: calc(100dvh - 154px);
    object-fit: contain;
    background: transparent;
    border-radius: clamp(8px, .9vw, 16px);
    box-shadow: 0 32px 90px rgba(0,0,0,.48);
}

.mps-lightbox-media video,
.mps-lightbox-media iframe {
    width: min(92vw, 1680px);
    height: auto;
    max-height: calc(100dvh - 170px);
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 32px 90px rgba(0,0,0,.48);
}

.mps-lightbox-caption {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: min(920px, calc(100vw - 160px));
    min-height: 56px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(8,13,20,.68);
    color: #fff;
    box-shadow: 0 14px 42px rgba(0,0,0,.24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mps-lightbox-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mps-lightbox-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 650;
}

.mps-lightbox-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b8c3d0;
    font-size: 12px;
}

.mps-lightbox-counter {
    flex: 0 0 auto;
    color: #dbe3ed;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
}

.mps-lightbox-close,
.mps-lightbox-nav {
    appearance: none;
    -webkit-appearance: none;
    position: fixed;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(12,18,26,.58);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0,0,0,.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform .3s var(--mps-premium-ease, cubic-bezier(.22, 1, .36, 1)), background-color .25s ease, border-color .25s ease;
}

.mps-lightbox-close {
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    width: 50px;
    height: 50px;
    font: inherit;
}

.mps-lightbox-nav {
    top: 50%;
    width: 54px;
    height: 54px;
    transform: translateY(-50%);
}

.mps-lightbox-prev { left: max(20px, env(safe-area-inset-left)); }
.mps-lightbox-next { right: max(20px, env(safe-area-inset-right)); }
.mps-lightbox-nav[hidden] { display: none !important; }

.mps-lightbox-close:hover {
    transform: rotate(4deg) scale(1.06);
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
}

.mps-lightbox-nav:hover {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
}
.mps-lightbox-prev:hover { transform: translateY(-50%) translateX(-2px) scale(1.04); }
.mps-lightbox-next:hover { transform: translateY(-50%) translateX(2px) scale(1.04); }

body.mps-lightbox-open {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-width: 767px) {
    .mps-tab-indicator {
        bottom: 3px;
        width: min(64px, calc(100% - 24px));
    }

    .mps-card-view-hint {
        display: none;
    }

    .mps-lightbox-media {
        padding: 64px 12px 106px;
    }

    .mps-lightbox-media img {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 156px);
        border-radius: 10px;
    }

    .mps-lightbox-media video,
    .mps-lightbox-media iframe {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 180px);
        border-radius: 10px;
    }

    .mps-lightbox-close {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        width: 44px;
        height: 44px;
    }

    .mps-lightbox-nav {
        top: auto;
        bottom: max(18px, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
        transform: none;
    }

    .mps-lightbox-prev { left: 14px; }
    .mps-lightbox-next { right: 14px; }
    .mps-lightbox-prev:hover,
    .mps-lightbox-next:hover { transform: scale(1.04); }

    .mps-lightbox-caption {
        bottom: max(16px, env(safe-area-inset-bottom));
        width: min(68vw, 520px);
        min-height: 44px;
        padding: 9px 12px;
        border-radius: 13px;
    }

    .mps-lightbox-title { font-size: 12px; }
    .mps-lightbox-subtitle { display: none; }
    .mps-lightbox-counter { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .mps-root *,
    .mps-root *::before,
    .mps-root *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   v1.5.0 — GALLERY LIGHTBOX / CATEGORY-SCOPED VIEWER
   ============================================================ */

html.mps-lightbox-open,
body.mps-lightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.mps-lightbox {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 2.4vw, 34px) !important;
}

.mps-lightbox-dialog {
    width: min(1540px, calc(100vw - clamp(28px, 7vw, 104px))) !important;
    height: min(90dvh, 980px) !important;
    max-width: none !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: clamp(16px, 1.6vw, 24px) !important;
    background:
        linear-gradient(180deg, rgba(14,21,30,.98), rgba(5,9,14,.99)) !important;
    box-shadow:
        0 38px 110px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.mps-lightbox.is-visible .mps-lightbox-dialog {
    transform: scale(1) translateY(0) !important;
}

.mps-lightbox-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
    pointer-events: none;
    z-index: 3;
}

.mps-lightbox-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(18px, 2.5vw, 38px) clamp(18px, 3vw, 48px) !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.025), transparent 48%),
        #04070b !important;
}

.mps-lightbox-media img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: clamp(8px, .8vw, 14px) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.38) !important;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .18s ease !important;
}

.mps-lightbox-media video,
.mps-lightbox-media iframe {
    width: min(100%, 1440px) !important;
    height: auto !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #000 !important;
}

.mps-lightbox-caption {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 72px;
    transform: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 22px !important;
    padding: 14px clamp(18px, 2.4vw, 32px) 16px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 0 !important;
    background: rgba(8,13,20,.96) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mps-lightbox-copy {
    gap: 4px !important;
}

.mps-lightbox-category {
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(221,229,239,.72);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mps-lightbox-title {
    font-size: clamp(14px, 1.1vw, 18px) !important;
    font-weight: 700 !important;
    letter-spacing: -.015em;
}

.mps-lightbox-subtitle {
    max-width: 900px;
    font-size: clamp(11px, .9vw, 13px) !important;
}

.mps-lightbox-counter {
    min-width: 68px;
    text-align: right;
    font-size: 11px !important;
    letter-spacing: .14em !important;
}

.mps-lightbox-close,
.mps-lightbox-nav {
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(8,13,20,.78) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.28) !important;
}

.mps-lightbox-close:hover,
.mps-lightbox-nav:hover {
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(255,255,255,.12) !important;
}

.mps-lightbox-nav {
    width: 58px !important;
    height: 58px !important;
}

.mps-lightbox-prev {
    left: max(14px, calc((100vw - min(1540px, calc(100vw - clamp(28px, 7vw, 104px)))) / 2 - 74px)) !important;
}

.mps-lightbox-next {
    right: max(14px, calc((100vw - min(1540px, calc(100vw - clamp(28px, 7vw, 104px)))) / 2 - 74px)) !important;
}

.mps-card[data-media-type="image"][data-click-action="lightbox"] .mps-card-media {
    cursor: zoom-in;
}

@media (max-width: 767px) {
    .mps-lightbox {
        padding: 8px !important;
    }

    .mps-lightbox-dialog {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        border-radius: 16px !important;
    }

    .mps-lightbox-media {
        padding: 54px 8px 10px !important;
    }

    .mps-lightbox-media img {
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 9px !important;
    }

    .mps-lightbox-close {
        top: 18px !important;
        right: 18px !important;
    }

    .mps-lightbox-nav {
        top: 50% !important;
        bottom: auto !important;
        width: 44px !important;
        height: 44px !important;
        transform: translateY(-50%) !important;
    }

    .mps-lightbox-prev { left: 14px !important; }
    .mps-lightbox-next { right: 14px !important; }
    .mps-lightbox-prev:hover,
    .mps-lightbox-next:hover { transform: translateY(-50%) scale(1.04) !important; }

    .mps-lightbox-caption {
        width: 100% !important;
        min-height: 62px;
        padding: 10px 14px 12px !important;
        gap: 10px !important;
    }

    .mps-lightbox-category {
        font-size: 9px;
    }

    .mps-lightbox-title {
        font-size: 13px !important;
    }

    .mps-lightbox-subtitle {
        display: none !important;
    }

    .mps-lightbox-counter {
        min-width: 58px;
        font-size: 9px !important;
    }
}