/** ==========================================================================
 * Bloque «Trabajos de alumnos» — inc/cei-bloques.php, cei_bloque_galeria()
 *
 * Mosaico denso: las piezas verticales ocupan una columna por tres filas y las
 * horizontales dos por dos, con las esquinas de imagen del sistema. Las filas
 * son de alto fijo porque es lo que hace que el mosaico encaje sin huecos; el
 * recorte lo resuelve object-fit, asi que ninguna pieza se deforma.
 *
 * Se pinta igual con fotos y con videos. Un video va en bucle, sin sonido y con
 * su poster: hasta que carga se ve la foto, y quien pidiera menos movimiento
 * mas abajo lo tiene quieto.
 * ========================================================================== */

.Galeria {
  margin: var(--Global-Espacio-Grupo) 0 0;
}

.Galeria-titulo {
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

/* El tipo por defecto solo si el marcado no trae una clase Global-*, como en
   los bloques de Fundae y Empleo. */
.Galeria-titulo:not([class*="Global-"]) {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-32);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Galeria-texto {
  max-width: 62ch;
  margin: 0 0 var(--Global-Espacio-TituloContenido);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

.Galeria-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: var(--Global-Espacio-TituloContenido);
}

.Galeria-pieza {
  position: relative;
  margin: 0;
  border-radius: var(--Global-Radio-Imagen);
  overflow: hidden;
}

.Galeria-pieza--vertical {
  grid-row: span 3;
}

.Galeria-pieza--horizontal {
  grid-column: span 2;
  grid-row: span 2;
}

/* La clase va dos veces: en las paginas cuyo contenido vive dentro de
   .content_wrapper, el «img { width: 100%; height: auto }» del tema le gana a
   una sola clase y las piezas se salen de su hueco. */
.Galeria .Galeria-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Variante «grande»: la misma rejilla, con la celda mayor
 *
 * El mosaico se dimensiono para las piezas verticales y horizontales de
 * /garantia-laboral/. En /centro-formacion/ son trece fotos apaisadas y todas
 * menos la primera caian en la celda de 200x130: se veian como sellos
 * (Eduardo, 09/09/2026).
 *
 * Aqui la columna parte de 300 y la fila mide 200, asi que en el ancho de
 * contenido salen cuatro columnas: la pieza de portada ocupa 2x2 y las doce
 * restantes rellenan las dieciseis celdas justas, sin huecos.
 * -------------------------------------------------------------------------- */
.Galeria--grande .Galeria-rejilla {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 200px;
}

@media (max-width: 767.98px) {
  .Galeria-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 100px;
    gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  }

  .Galeria--grande .Galeria-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 130px;
  }
}

/* Quien ha pedido menos movimiento ve el poster, no el video en bucle. */
@media (prefers-reduced-motion: reduce) {
  .Galeria-media {
    animation-play-state: paused;
  }
}

/* --------------------------------------------------------------------------
 * EL PIE DE CADA PIEZA: DE QUIÉN ES Y DÓNDE VERLE MÁS (Eduardo, 16/09/2026)
 *
 * Va encima de la imagen, pegado abajo, con un velo oscuro de abajo arriba.
 * Fuera no cabe: la rejilla tiene el alto de fila fijo (130px, 200 en la
 * variante grande) y un pie por debajo descuadraría el mosaico.
 *
 * Se ve siempre, no solo al pasar por encima: es una atribución, no un extra.
 * En una pantalla táctil un hover no existe y el alumno se quedaría sin firma.
 * -------------------------------------------------------------------------- */

.Galeria-pie {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  /* Más relleno por abajo: el degradado se apaga ahí y el texto necesita
     apoyarse en su parte opaca. */
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: var(--Global-Color-White);
}

/* El nombre y, debajo, lo que curso (Eduardo, 29/09/2026), en una columna. */
.Galeria-firma {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.Galeria-alumno,
.Galeria-curso {
  min-width: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-500);
  line-height: 1.2;
  letter-spacing: var(--Font-Letter-spacing-2);
  /* Un nombre largo no puede empujar a los iconos fuera de la pieza. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El curso, un paso por detras del nombre: sin peso y algo mas apagado. */
.Galeria-curso {
  font-weight: var(--Font-Weight-400);
  opacity: 0.85;
}

/*
 * Variante «firma al pasar por encima» (Eduardo, 29/09/2026, para el portfolio
 * de la Home v2): el pie va escondido y aparece con el raton sobre la pieza, o
 * con el foco dentro (los enlaces de las redes). Solo donde hay raton: en una
 * pantalla tactil no existe el hover y la firma se quedaria sin verse, asi que
 * ahi sigue a la vista, como en el bloque normal.
 */
@media (hover: hover) {
  .Galeria--firmaHover .Galeria-pie {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .Galeria--firmaHover .Galeria-pieza:hover .Galeria-pie,
  .Galeria--firmaHover .Galeria-pieza:focus-within .Galeria-pie {
    opacity: 1;
  }
}

/* La @ con enlace a su perfil (Eduardo, 29/09/2026): del color de lo que la
   rodea sobre la foto, y en las fichas con su gris (lo pone la variante, abajo). */
.Galeria a.Galeria-arroba {
  text-decoration: none;
}

.Galeria:not(.Galeria--fichas) a.Galeria-arroba {
  color: inherit;
}

.Galeria a.Galeria-arroba:hover,
.Galeria a.Galeria-arroba:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.Galeria--fichas a.Galeria-arroba:hover,
.Galeria--fichas a.Galeria-arroba:focus-visible {
  color: var(--Global-Color-Black);
}

.Galeria-redes {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.Galeria-redItem {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El área pulsable, de 32px: los iconos miden 20 y solos se quedan por debajo
   de lo que un dedo acierta. */
.Galeria .Galeria-red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px;
  color: var(--Global-Color-White);
  text-decoration: none;
}

.Galeria-redIcono {
  display: block;
  width: 20px;
  height: 20px;
  /* Los iconos de Tabler vienen en negro; aquí van sobre el velo oscuro. */
  filter: brightness(0) invert(1);
}

/* Cuando falta el SVG de esa red, su nombre escrito. */
.Galeria-redNombre {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  line-height: 1;
  white-space: nowrap;
}

.Galeria-red:has(.Galeria-redNombre) {
  width: auto;
  height: auto;
  margin: 0;
  text-decoration: underline;
}

/* La flecha que el tema pone a toda <li> dentro de una sección de curso: aquí
   no, que estas son iconos en fila. */
.Galeria-redItem::before {
  content: none !important;
}


/* ==========================================================================
 * VARIANTE ANIMADA — .Galeria--animada (Eduardo, 16/09/2026)
 *
 * Cada pieza entra al desplazar la página: sube un poco, crece de 0,94 a 1 y
 * aparece. Lo lleva el navegador con una animación atada al scroll
 * (`animation-timeline: view()`), sin una sola línea de JavaScript ni un
 * IntersectionObserver: la pieza avanza su animación según cuánto ha entrado
 * en pantalla, así que si desplazas hacia atrás se deshace sola.
 *
 * DOS GUARDAS, Y LAS DOS IMPRESCINDIBLES:
 *
 * 1. `@supports`. Sin él, un navegador que no entienda `animation-timeline`
 *    se quedaría con el `opacity: 0` del fotograma inicial y el portfolio
 *    entero sería invisible. Dentro del @supports, quien no lo soporta no ve
 *    ninguna de estas reglas y el mosaico sale tal cual, quieto.
 *
 * 2. `prefers-reduced-motion`. Quien ha pedido menos movimiento ve el mosaico
 *    puesto, sin entrada.
 *
 * EL RANGO va de `entry 0%` a `cover 30%` (Eduardo, 16/09/2026). Empieza en
 * cuanto la pieza asoma por abajo y termina cuando está a un 70% de altura de
 * la ventana, o sea algo por debajo de la mitad: así la pieza ya está puesta
 * antes de llegar a la zona donde se lee.
 *
 * El número no es el «70%» directamente: `cover` mide el recorrido completo de
 * la pieza por la ventana, y para una pieza normal un `cover p%` la deja más o
 * menos al (100 − p)% de altura. De ahí que 70% de altura sean 30 de cover.
 *
 * Pasó por `entry 60%` —acababa en cuanto la pieza estaba dentro, en un
 * suspiro—, por `cover 45%` y por `cover 50%`, que terminaba en el centro justo
 * y se notaba tarde.
 *
 * Y el punto de partida es exagerado a propósito: 90px abajo y al 82% de su
 * tamaño. Con el recorrido tan largo, un desplazamiento corto no se nota.
 *
 * `cover` mide el recorrido completo de la pieza por la ventana y `entry` solo
 * su asomada, que es la diferencia entre las dos.
 * ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ceiGaleriaEntra {
      from {
        opacity: 0;
        transform: translateY(90px) scale(0.82);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .Galeria--animada .Galeria-pieza {
      animation: ceiGaleriaEntra linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

/* ==========================================================================
 * VARIANTE «FICHAS» — .Galeria--fichas (Eduardo, 29/09/2026, portfolio de la
 * Home v2)
 *
 * Nada encima de la foto: el curso va arriba, en gris; debajo de la foto, el
 * nombre a la izquierda y la @ del perfil a la derecha. Y el mosaico más
 * grande: columnas de 280 px en vez de 200 y filas de 150 en vez de 130.
 *
 * El marcado es el de siempre (la foto y el <figcaption> con la firma): la
 * pieza pasa a ser una rejilla de tres filas y el <figcaption> y la firma van
 * con `display: contents`, así que el curso, el nombre y la @ se colocan
 * cada uno en su celda. La foto se queda con la fila del medio y con ella las
 * esquinas redondeadas; la celda del mosaico sigue teniendo su alto fijo, que
 * es lo que hace que encaje sin huecos.
 * ========================================================================== */
.Galeria--fichas .Galeria-rejilla {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 150px;
}

.Galeria--fichas .Galeria-pieza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Cuatro filas (Eduardo, 02/10/2026): curso, foto, nombre y apellidos, y la @
     debajo del nombre, no a su lado. */
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px 12px;
  border-radius: 0;
  overflow: visible;
}

/* La foto (o el vídeo), en la fila del medio y con las esquinas del sistema. */
.Galeria--fichas .Galeria-pieza > picture,
.Galeria--fichas .Galeria-pieza > video.Galeria-media {
  grid-area: 2 / 1 / 3 / -1;
  border-radius: var(--Global-Radio-Imagen);
  overflow: hidden;
}

.Galeria--fichas .Galeria-pieza > picture {
  position: relative;
  display: block;
  min-height: 0;
}

.Galeria--fichas .Galeria-pie,
.Galeria--fichas .Galeria-firma {
  display: contents;
}

.Galeria--fichas :is(.Galeria-curso, .Galeria-alumno, .Galeria-arroba) {
  min-width: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  line-height: 1.2;
  letter-spacing: var(--Font-Letter-spacing-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

.Galeria--fichas .Galeria-curso {
  grid-area: 1 / 1 / 2 / -1;
  font-weight: var(--Font-Weight-400);
  color: var(--Global-Color-Grey-Secondary);
}

.Galeria--fichas .Galeria-alumno {
  grid-area: 3 / 1 / 4 / -1;
  font-weight: var(--Font-Weight-500);
  color: var(--Global-Color-Black);
}

.Galeria--fichas .Galeria-arroba {
  grid-area: 4 / 1 / 5 / 2;
  justify-self: start;
  font-weight: var(--Font-Weight-400);
  color: var(--Global-Color-Grey-Secondary);
}

/* Las redes, si algún día las lleva, en la misma fila que la @. */
.Galeria--fichas .Galeria-redes {
  grid-area: 4 / 2 / 5 / 3;
  justify-self: end;
}

/* Con @, la @ es el enlace a su perfil (los portfolios, inc/cei-portfolios.php) y
   la lista de redes sobra: irían las dos en la misma celda, una encima de otra. */
.Galeria--fichas .Galeria-arroba ~ .Galeria-redes {
  display: none;
}

@media (max-width: 767.98px) {
  /* En el móvil, dos columnas como el resto, pero con filas algo más altas:
     las dos líneas de texto le quitan sitio a la foto. */
  .Galeria--fichas .Galeria-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 130px;
  }
}