/* Los valores de Configuración llegan como variables en :root (ver Assets.php). */
.insider-gallery {
    display: grid;
    grid-template-columns: repeat(var(--insider-gallery-columns-mobile, 2), minmax(0, 1fr));
    gap: var(--insider-gallery-gap, 10px);
    margin: 0 0 1.5em;
}

@media (min-width: 600px) {
    .insider-gallery {
        grid-template-columns: repeat(var(--insider-gallery-columns-tablet, 3), minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .insider-gallery {
        grid-template-columns: repeat(var(--insider-gallery-columns, 4), minmax(0, 1fr));
    }
}

.insider-gallery .insider-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: var(--insider-gallery-ratio, 2 / 3);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #f0f0f1;
    border-radius: var(--insider-gallery-radius, 0);
    box-shadow: none;
}

.insider-gallery .insider-gallery__item:focus-visible {
    outline: 3px solid var(--insider-gallery-accent, #604c8d);
    outline-offset: 2px;
}

.insider-gallery .insider-gallery__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

/* El pie en la grilla solo se muestra con mouse o teclado. En pantallas táctiles queda para el lightbox. */
.insider-gallery__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: 24px 10px 10px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--insider-gallery-caption-color, #fff);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    background: linear-gradient(to top, color-mix(in srgb, var(--insider-gallery-caption-bg, #000) 80%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .insider-gallery__caption {
        display: block;
    }

    .insider-gallery__item:hover .insider-gallery__caption,
    .insider-gallery__item:focus-visible .insider-gallery__caption {
        opacity: 1;
    }
}

/*
 * Lightbox. Los botones repiten los del reproductor de Insider Shorts: círculos oscuros con ícono
 * blanco, cerrar de 48 px y flechas de 44 px a 12 px del borde. Al pasar el mouse el fondo se vuelve
 * sólido, con el mismo tono que allí le da el tema.
 */
html.insider-gallery-lock,
html.insider-gallery-lock body {
    overflow: hidden;
}

.pswp {
    --pswp-bg: var(--insider-gallery-lightbox-bg, #000);
    --pswp-icon-color: #fff;
}

.pswp .pswp__top-bar {
    top: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    height: 48px;
    align-items: center;
    gap: 8px;
}

.pswp .pswp__button {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
    color: #fff;
    background: rgba(17, 17, 17, 0.67);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

/* PhotoSwipe y el tema cambian el fondo en estos estados. */
.pswp .pswp__button:focus {
    color: #fff;
    background: rgba(17, 17, 17, 0.67);
    border: 0;
    box-shadow: none;
}

.pswp .pswp__button:hover,
.pswp .pswp__button:active {
    color: #fff;
    background: #161616;
    border: 0;
    box-shadow: none;
}

.pswp .pswp__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pswp .pswp__button .pswp__icn {
    position: static;
    width: auto;
    height: auto;
    color: inherit;
    fill: none;
    overflow: visible;
}

.pswp .pswp__button--close,
.pswp .pswp__button--zoom {
    width: 48px;
    height: 48px;
    opacity: 1;
}

.pswp .pswp__button--arrow {
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
}

.pswp .pswp__button--arrow--prev {
    left: 12px;
}

.pswp .pswp__button--arrow--next {
    right: 12px;
}

/* PhotoSwipe usa la opacidad para aparecer y desaparecer: solo se aplica con la interfaz visible. */
.pswp.pswp--ui-visible .pswp__button--arrow {
    opacity: var(--insider-gallery-controls-opacity, 1);
}

.pswp.pswp--ui-visible .pswp__button--arrow:disabled {
    opacity: calc(var(--insider-gallery-controls-opacity, 1) * 0.35);
}

.pswp .pswp__counter {
    height: auto;
    margin: 0 auto 0 0;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    text-shadow: none;
    background: rgba(17, 17, 17, 0.67);
    border-radius: 999px;
    opacity: 1;
}

/* Pie de foto dentro del lightbox */
.pswp__insider-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--insider-gallery-caption-color, #fff);
    text-align: center;
    background: rgba(0, 0, 0, 0.65);
    background: color-mix(in srgb, var(--insider-gallery-caption-bg, #000) 65%, transparent);
}

.pswp__insider-caption[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .insider-gallery__caption {
        transition: none;
    }
}