/* =====================================================================
   GALERÍA EasyDNNnews · mosaico 3 / 1 ancha / 2 desiguales
   Ajustado a tu plantilla: .galeria > .galeria-list > .galeria-list-item
   =====================================================================

   EL PATRÓN
   Tus 6 imágenes son hermanas dentro de .galeria-list, no hay filas.
   Así que el orden lo hace nth-child. Uso 6n para que el patrón se
   repita solo si el módulo lista más de un artículo (6 imágenes por
   artículo: 1..6, luego 7..12, etc.).

       posición 1, 2, 3  ->  un tercio cada una
       posición 4        ->  ancho completo (imagen4galeriafull)
       posición 5        ->  45%
       posición 6        ->  55%

   EL ALTO
   Las anchuras son porcentajes, pero el alto va en píxeles: es lo más
   simple y lo más predecible. Si quieres la galería más alta o más
   baja, cambia SOLO los tres valores de "height" marcados abajo.

   OJO CON EL BLOQUE DE ADMIN
   El div .admin_actions se imprime dentro de .galeria-list y cuenta
   como hermano, así que a un usuario con permisos de edición se le
   descuadra el patrón. Por eso lo saco del flujo más abajo. Si a ti se
   te ve descuadrado estando logueado, es eso.
   ===================================================================== */


/* ---------- CONTENEDOR ---------- */
.galeria-news{
  width: 84%;
  margin: 1rem 0 0 0;
}

.galeria-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* el bloque de acciones del admin no debe contar como columna */
.galeria-list .admin_actions{
  flex: 0 0 100%;
  order: -1;
}


/* ---------- CADA IMAGEN ---------- */
.galeria-list-item{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #e9e9e9;
  margin: 0;
  padding: 0;
  height: 260px;              /* <-- ALTO 1 de 3 (escritorio) */
}

.galeria-list-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  transition: transform 0.45s ease;
}

.galeria-list-item:hover img{
  transform: scale(1.05);
}

/* si el campo personalizado viene vacío, el div igual se imprime;
   esta regla lo esconde para que no deje un hueco gris */
.galeria-list-item:not(:has(img)){
  display: none;
}


/* ---------- EL PATRÓN ---------- */

/* 1, 2 y 3 — un tercio cada una (2 huecos de 10px) */
.galeria-list-item:nth-child(6n + 1),
.galeria-list-item:nth-child(6n + 2),
.galeria-list-item:nth-child(6n + 3){
  flex: 0 0 calc((100% - 20px) / 3);
  /* max-width: calc((100% - 20px) / 3); */
}

/* 4 — ancho completo */
.galeria-list-item:nth-child(6n + 4){
  flex: 0 0 100%;
  max-width: 100%;
}

/* 5 — 45% del ancho restante (1 hueco de 10px) */
.galeria-list-item:nth-child(6n + 5){
  flex: 0 0 calc((100% - 10px) * 0.45);
  max-width: calc((100% - 10px) * 0.45);
}

/* 6 — el 55% que sobra */
.galeria-list-item:nth-child(6n + 6){
  flex: 0 0 calc((100% - 10px) * 0.55);
  max-width: calc((100% - 10px) * 0.55);
}


/* ---------- TABLET ---------- */
@media (max-width: 1024px){
  .galeria-list-item{
    height: 200px;            /* <-- ALTO 2 de 3 */
  }
}


/* ---------- MÓVIL ---------- */
/* Se rompe el mosaico: las tres de arriba pasan a dos por fila y las
   de abajo a la mitad cada una. La ancha se queda ancha. */
@media (max-width: 600px){
  .galeria-list{
    gap: 8px;
  }

  .galeria-list-item{
    height: 150px;            /* <-- ALTO 3 de 3 */
  }

  .galeria-list-item:nth-child(6n + 1),
  .galeria-list-item:nth-child(6n + 2),
  .galeria-list-item:nth-child(6n + 3),
  .galeria-list-item:nth-child(6n + 5),
  .galeria-list-item:nth-child(6n + 6){
    /* flex: 0 0 calc((100% - 8px) / 2); */
    /* max-width: calc((100% - 8px) / 2); */
  }

  .galeria-list-item:nth-child(6n + 4){
    flex: 0 0 100%;
    max-width: 100%;
  }
  .galeria-news{
  width: 100%;
  margin: 1rem 0 0 0;
}
}


/* =====================================================================
   ALTERNATIVA: alto automático en vez de píxeles
   =====================================================================
   Con "height" en píxeles, si la pantalla es ancha las tres primeras
   se ven apaisadas; si es angosta, se ven cuadradas. Si prefieres que
   la proporción se mantenga sola a cualquier ancho, borra los tres
   "height" de arriba y descomenta este bloque.

.galeria-list-item{
  height: auto;
}
.galeria-list-item:nth-child(6n + 1),
.galeria-list-item:nth-child(6n + 2),
.galeria-list-item:nth-child(6n + 3){
  aspect-ratio: 5 / 6;
}
.galeria-list-item:nth-child(6n + 4){
  aspect-ratio: 26 / 10;
}
.galeria-list-item:nth-child(6n + 5),
.galeria-list-item:nth-child(6n + 6){
  aspect-ratio: 13 / 11;
}

   Ojo: la 5 y la 6 son de anchos distintos (45% y 55%), así que con la
   misma aspect-ratio quedarían de alturas distintas y la fila se ve
   escalonada. Si te pasa, dale a las dos la misma altura fija y listo.
   ===================================================================== */