/* JITS Galleries: tiles, “Media slider” widget, gallery page, lightbox. */

/* Tiles (photo or video thumbnail opening the lightbox). */
.jits-gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: #e6e9f5;
}

.jits-gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 600ms ease;
}

.jits-gallery-tile:hover img,
.jits-gallery-tile:focus-visible:not(.is-restored-focus) img {
    transform: scale(1.04);
}

.jits-gallery-tile:focus-visible {
    outline: 3px solid var(--button-primary-bg, #163cdb);
    outline-offset: 2px;
}

/* Focus given back by the lightbox when it closes: no focus ring. */
.jits-gallery-tile.is-restored-focus {
    outline: none;
}

/* Video: play button over the thumbnail. */
.jits-gallery-tile__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: rgba(255, 0, 51, 0.92);
    transform: translate(-50%, -50%);
    transition: background-color 200ms ease, transform 200ms ease;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 54%;
        border-style: solid;
        border-width: 0.5rem 0 0.5rem 0.85rem;
        border-color: transparent transparent transparent #ffffff;
        transform: translate(-50%, -50%);
    }
}

.jits-gallery-tile:hover .jits-gallery-tile__play,
.jits-gallery-tile:focus-visible .jits-gallery-tile__play {
    background: #ff0033;
    transform: translate(-50%, -50%) scale(1.08);
}

/* “Media slider” widget. */
.jits-media-slider {
    --jits-ms-ratio: 3 / 2;
    --jits-ms-title: #2b2b2b;
    --jits-ms-arrow: var(--button-primary-bg, #163cdb);
    --jits-ms-arrow-size: 2.125rem;
    --jits-ms-arrow-space: calc(var(--jits-ms-arrow-size) + 0.75rem);
}

.jits-media-slider__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    color: var(--jits-ms-title);
}

.jits-media-slider__title {
    margin: 0;
    color: inherit;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
}

.jits-media-slider__see-all {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;

    svg {
        width: 2.25rem;
        height: auto;
        transition: transform 200ms ease;
    }

    &:hover svg,
    &:focus-visible svg {
        transform: translateX(0.25rem);
    }
}

/* Room for the arrows inside the widget (the slides get narrower)… */
.jits-media-slider__body {
    position: relative;
    padding-inline: var(--jits-ms-arrow-space);
}

/* …or, with enough room beside the widget (set by script), arrows outside. */
.jits-media-slider.is-arrows-outside .jits-media-slider__body {
    padding-inline: 0;
}

.jits-media-slider__item {
    aspect-ratio: var(--jits-ms-ratio);
    border-radius: 4px;
}

.jits-media-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jits-ms-arrow-size);
    height: var(--jits-ms-arrow-size);
    padding: 0;
    border: 1px solid var(--jits-ms-arrow);
    border-radius: 4px;
    background: #ffffff;
    color: var(--jits-ms-arrow);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 200ms ease, color 200ms ease;

    svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    &:hover,
    &:focus-visible {
        background: var(--jits-ms-arrow);
        color: #ffffff;
    }

    &:focus-visible {
        outline: 2px solid var(--jits-ms-arrow);
        outline-offset: 2px;
    }

    /* Swiper classes: start / end of the carousel, or every item visible. */
    &.swiper-button-disabled,
    &.swiper-button-lock {
        visibility: hidden;
    }
}

.jits-media-slider__arrow--prev {
    left: 0;
}

.jits-media-slider__arrow--next {
    right: 0;
}

.jits-media-slider.is-arrows-outside .jits-media-slider__arrow--prev {
    left: calc(-1 * var(--jits-ms-arrow-space));
}

.jits-media-slider.is-arrows-outside .jits-media-slider__arrow--next {
    right: calc(-1 * var(--jits-ms-arrow-space));
}

/* Elementor editor only: no gallery. */
.jits-media-slider__empty {
    padding: 1.5rem;
    border: 1px dashed currentColor;
    text-align: center;
}

@media (max-width: 767px) {
    .jits-media-slider__body {
        padding-inline: 0;
    }

    .jits-media-slider__arrow {
        display: none;
    }

    .jits-media-slider__see-all {
        gap: 0.75rem;
        font-size: 1rem;
    }
}

/* Gallery page. */
.jits-gallery-page {
    padding-block: 6rem 7rem;
}

.jits-gallery-page__title {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 4rem;
    color: var(--button-primary-bg, #163cdb);
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
}

.jits-gallery-page__icon svg {
    display: block;
    width: 0.9em;
    height: 0.9em;
}

/*
 * Justified grid: each tile keeps its proportions (--w / --h), every row is
 * about --jits-gallery-row high and fills the width; the last row is not
 * stretched (::after takes the remaining room).
 */
.jits-gallery-grid {
    --jits-gallery-row: 9rem;

    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    &::after {
        content: "";
        flex-grow: 999999;
    }
}

.jits-gallery-grid__item {
    flex-grow: calc(var(--w) / var(--h));
    flex-basis: calc(var(--jits-gallery-row) * var(--w) / var(--h));
    aspect-ratio: var(--w) / var(--h);
}

/* Optional text of the gallery (editor), between the title and the grid. */
.jits-gallery-page__title:has(+ .jits-gallery-page__content) {
    margin-bottom: 2.5rem;
}

.jits-gallery-page__content {
    max-width: 52rem;
    margin-bottom: 3.5rem;
    color: #383838;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;

    > :first-child {
        margin-top: 0;
    }

    > :last-child {
        margin-bottom: 0;
    }

    p {
        margin: 0 0 1em;
    }

    a {
        color: var(--button-primary-bg, #163cdb);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/*
 * Gallery holding only videos: large 16:9 videos, two per row (one on phones).
 * Thumbnail with the title and a YouTube-like play button, replaced by the
 * player on click (assets/grid.js).
 */
.jits-gallery-videos {
    /* Columns: 2, or the “Columns” setting of the Elementor “Video grid” widget. */
    --jits-video-columns: 2;
    display: grid;
    grid-template-columns: repeat(var(--jits-video-columns), minmax(0, 1fr));
    gap: 4rem 4.5rem;
}

.jits-gallery-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 5px;
    background: #000000;
}

.jits-gallery-video__poster,
.jits-gallery-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.jits-gallery-video__poster {
    display: block;
    color: #ffffff;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Darker top, under the title. */
    &::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        z-index: 1;
        height: 35%;
        background: linear-gradient(rgb(0 0 0 / 0.55), transparent);
        pointer-events: none;
    }
}

.jits-gallery-video__title {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}

.jits-gallery-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 4.25rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #ff0000;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 54%;
        border-block: 0.6rem solid transparent;
        border-left: 1.05rem solid #ffffff;
        transform: translate(-50%, -50%);
    }
}

.jits-gallery-video__file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Uploaded video: the button lies over the first frame (or the chosen poster). */
.jits-gallery-video__poster--file {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.jits-gallery-video__poster:hover .jits-gallery-video__play,
.jits-gallery-video__poster:focus-visible .jits-gallery-video__play {
    background: #cc0000;
}

.jits-gallery-video__poster:focus-visible {
    outline: 3px solid var(--button-primary-bg, #163cdb);
    outline-offset: -3px;
}

.jits-gallery-page__more {
    margin-top: 4rem;
    text-align: center;
}

.jits-gallery-page__more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    min-height: 2.75rem;
    padding: 0.625rem 2rem;
    border-radius: 4px;
    background: var(--button-primary-bg, #163cdb);
    color: var(--button-primary-text, #ffffff);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 200ms ease;

    &:hover,
    &:focus-visible {
        background: var(--button-primary-hover-bg, #2f55f0);
    }

    &:focus-visible {
        outline: 2px solid var(--button-primary-bg, #163cdb);
        outline-offset: 3px;
    }

    &[aria-busy="true"] {
        opacity: 0.6;
        cursor: progress;
    }
}

@media (max-width: 767px) {
    .jits-gallery-page {
        padding-block: 3.5rem 4.5rem;
    }

    .jits-gallery-page__title {
        margin-bottom: 2rem;
    }

    .jits-gallery-grid {
        --jits-gallery-row: 7rem;
    }

    .jits-gallery-videos {
        --jits-video-columns: 1;
        gap: 2rem;
    }

    .jits-gallery-video__title {
        font-size: 1rem;
    }
}

/* Lightbox (native <dialog>, full screen). */
.jits-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
}

.jits-lightbox::backdrop {
    background: color-mix(in srgb, var(--header-bg, #010f2c) 94%, transparent);
}

html:has(.jits-lightbox[open]) {
    overflow: hidden;
}

.jits-lightbox__stage {
    position: absolute;
    inset: 4rem 5.5rem 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jits-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.jits-lightbox__video {
    width: min(100%, (100dvh - 9rem) * 16 / 9);
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 4px;
    background: #000000;
}

.jits-lightbox__footer {
    position: absolute;
    inset: auto 5.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
}

.jits-lightbox__caption,
.jits-lightbox__counter {
    margin: 0;
}

.jits-lightbox__counter {
    margin-left: auto;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

.jits-lightbox__button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 200ms ease;

    svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    &:hover,
    &:focus-visible {
        background: var(--button-primary-bg, #163cdb);
    }

    &:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    &[hidden] {
        display: none;
    }
}

.jits-lightbox__previous,
.jits-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
}

.jits-lightbox__previous {
    left: 1.25rem;
}

.jits-lightbox__next {
    right: 1.25rem;
}

.jits-lightbox__close {
    top: 1rem;
    right: 1.25rem;
}

@media (max-width: 767px) {
    .jits-lightbox__stage {
        inset: 4rem 0.75rem 4.5rem;
    }

    .jits-lightbox__previous,
    .jits-lightbox__next {
        top: auto;
        bottom: 0.75rem;
        transform: none;
    }

    .jits-lightbox__footer {
        inset: auto 4.5rem 1.6rem;
        text-align: center;
    }

    .jits-lightbox__caption {
        display: none;
    }

    .jits-lightbox__counter {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jits-gallery-tile img,
    .jits-gallery-tile__play {
        transition: none;
    }
}