/*
 * Estilos del carrusel de galerías y del lightbox.
 * Se carga solo en páginas públicas que muestran noticias.
 */

/* ---------- Galería normal (sin JS, fallback) ---------- */
/* base.css ya define .galeria con display:grid. Estos estilos solo
   añaden el modo carrusel cuando JS está activo. */

.galeria--carrusel {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 1.5em 0;
    /* Hueco a derecha e izquierda para que las flechas no tapen las
       imágenes. En móvil bajamos el padding lateral. */
    padding: 0 3.5rem;
}

@media (max-width: 575px) {
    .galeria--carrusel { padding: 0 2.5rem; }
}

.galeria--carrusel:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 4px;
    border-radius: var(--radio-borde);
}

.galeria__pista {
    display: flex;
    gap: 0.75rem;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* Respetar la preferencia de "reducir movimiento" del sistema. */
@media (prefers-reduced-motion: reduce) {
    .galeria__pista {
        transition: none;
    }
}

/* Cada item se calcula para que SIEMPRE se vean exactamente 3 imágenes
   completas y la mitad de la cuarta (3,5 items en total). Fórmula:
       ancho item = (100% - hueco-total) / 3,5
   donde hueco-total son los 3 gaps que hay entre los 4 items que están
   parcial o totalmente en vista (3 × 0,75rem = 2,25rem).

   "min-width: 0" es imprescindible: por defecto, los items flex tienen
   min-width "auto" (el tamaño natural de su contenido), lo que haría
   que las imágenes grandes ignoraran el flex-basis y los items se
   quedaran más anchos de la cuenta. Lo bajamos a 0 para que respeten
   el cálculo. */
.galeria__item {
    flex: 0 0 calc((100% - 2.25rem) / 3.5);
    min-width: 0;
    aspect-ratio: 1 / 1;
    background: var(--color-fondo-alterno);
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}

.galeria__item img:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: -3px;
}

.galeria--pocas .galeria__pista {
    flex-wrap: wrap;
    justify-content: center;
}

.galeria--pocas .galeria__item {
    flex: 0 0 calc(33.333% - 0.5rem);
    max-width: 320px;
}

/* En móvil mostramos 2 imágenes completas + media tercera (2,5 en total).
   Misma fórmula: (100% - 2 × gap) / 2,5. */
@media (max-width: 575px) {
    .galeria__item {
        flex-basis: calc((100% - 1.5rem) / 2.5);
    }
    .galeria--pocas .galeria__item {
        flex-basis: calc(50% - 0.5rem);
    }
}

/* ---------- Contador de posición ---------- */

/* El contador "Mostrando X-Y de N" del carrusel NO se ve visualmente
   (decisión de diseño), pero queda en el DOM con aria-live para que
   los lectores de pantalla anuncien el cambio al pulsar las flechas.
   Usa la misma técnica que el .visually-hidden de base.css. */
.galeria__contador {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    margin: 0;
    padding: 0;
}

/* ---------- Flechas del carrusel ---------- */

/* Antes iban superpuestas sobre la imagen, lo que dificultaba ver bien
   el contenido. Ahora viven en el padding lateral del figure, fuera de
   la zona de imágenes. */
.galeria__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-primario);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}

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

.galeria__flecha:hover:not(:disabled) {
    background: var(--color-primario-claro);
}

.galeria__flecha:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 3px;
}

.galeria__flecha:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.galeria__flecha--anterior { left: 0.25rem; }
.galeria__flecha--siguiente { right: 0.25rem; }

@media (min-width: 768px) {
    .galeria__flecha--anterior { left: 0.5rem; }
    .galeria__flecha--siguiente { right: 0.5rem; }
}

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

/* El lightbox vive dentro del modal, así que aprovechamos su trampa de
   foco y manejo de Escape. Le damos un tratamiento especial con la
   clase modal--lightbox para que ocupe casi toda la pantalla. */
.modal--lightbox {
    max-width: 92vw;
    width: 92vw;
    max-height: 95vh;
    background: #1a1a1a;
    color: #fff;
}

.modal--lightbox .modal-cabecera {
    border-color: rgba(255, 255, 255, 0.15);
}

.modal--lightbox .modal-titulo {
    color: #fff;
}

.modal--lightbox .modal-cerrar {
    color: #fff;
}

.modal--lightbox .modal-cerrar:hover,
.modal--lightbox .modal-cerrar:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.modal--lightbox .modal-contenido {
    padding: 0;
    background: #1a1a1a;
}

.lightbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-3);
    min-height: 50vh;
}

.lightbox__imagen {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radio-borde);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
    background: var(--color-primario);
    border-color: #fff;
}

.lightbox__nav--anterior { left: var(--espacio-2); }
.lightbox__nav--siguiente { right: var(--espacio-2); }

.lightbox__contador {
    position: absolute;
    bottom: var(--espacio-2);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.9rem;
    max-width: 90%;
    text-align: center;
    line-height: 1.3;
}