/**
 * Widget galería B2B — contrato BEM (.infocode-gallery).
 * Se carga después del theme (public/css/default.css | dark.css | …) y usa las variables :root de cada theme.
 */

.infocode-gallery {
    --infocode-gallery-gap: 1rem;
    --infocode-gallery-surface-main: var(--background, #ffffff);
    --infocode-gallery-surface-thumbs: var(--background, #ffffff);
    --infocode-gallery-nav-fg: var(--primary, #1479ff);
    --infocode-gallery-nav-bg: rgba(255, 255, 255, 0.85);
    --infocode-gallery-hint-fg: var(--secondary-text, #9ca3af);
    min-width: 0;
    overflow: hidden;
}

.infocode-gallery__thumbs {
    background-color: var(--infocode-gallery-surface-thumbs);
}

/* Misma superficie en el interior de Swiper (evita franjas blancas si otra hoja pinta .swiper). */
.infocode-gallery__thumbs.swiper,
.infocode-gallery__thumbs .swiper-wrapper {
    background-color: var(--infocode-gallery-surface-thumbs);
}

.infocode-gallery__main {
    background-color: var(--infocode-gallery-surface-main);
    height: min(400px, 100vh);
    min-width: 0;
    overflow: hidden;
}

.infocode-gallery__main-slide,
.infocode-gallery__zoom {
    height: 100%;
}

.infocode-gallery__thumbs .swiper-navigation-icon,
.infocode-gallery__main .swiper-navigation-icon {
    color: var(--infocode-gallery-nav-fg);
    width: 17px;
    height: 17px;
}

.infocode-gallery__thumbs .swiper-button-next,
.infocode-gallery__thumbs .swiper-button-prev {
    background-color: var(--infocode-gallery-nav-bg) !important;
}

.infocode-gallery__main .swiper-button-next,
.infocode-gallery__main .swiper-button-prev {
    background-color: var(--infocode-gallery-nav-bg);
}

.infocode-gallery__hint {
    margin: 0;
    color: var(--infocode-gallery-hint-fg);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.infocode-gallery__media {
    max-width: 100%;
}

.infocode-gallery__main img.infocode-gallery__media {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
}

.infocode-gallery--layout-360 .infocode-gallery__main {
    background-color: var(--infocode-gallery-surface-main);
}
