/* ====================================================================
 * LA GALERIA — el trabajo en mosaico vertical
 * PHP: inc/portafolio-mosaico.php
 *
 * SE LLAMA `cm-galeria` Y NO `cm-mosaico`, Y ESO IMPORTA.
 * `cm-mosaico` ya existe en portada.css: es la rejilla de 12 columnas del
 * portafolio destacado. Cuando esta seccion usaba ese nombre, su contenedor
 * pasaba a ser una PIEZA de aquella rejilla —`grid-column: span 7`— y la
 * galeria entera se encogia al 58 % del ancho con huecos por dentro. Se veia
 * como un fallo de maquetacion y era un choque de nombres.
 * ==================================================================== */

/*
 * MARCOS VERTICALES PORQUE LAS FOTOS SON VERTICALES.
 *
 * Medido sobre la biblioteca: 72 verticales, 4 cuadradas, 0 apaisadas. Un
 * mosaico de marcos horizontales recortaria la mayor parte de cada toma — y en
 * el portafolio de un fotografo, ensenar sus fotos mal recortadas es el peor
 * error posible.
 */

.cm-galeria {
  padding-block: clamp(56px, 8vw, 110px);
  background: var(--hueso, #F5F3EF);
}

.cm-galeria__cabeza { margin-bottom: clamp(28px, 4vw, 48px); }

/*
 * LA ETIQUETA DE ESTA SECCIÓN VA EN TERRACOTA, NO EN ÁMBAR.
 *
 * `.cm-etiqueta` nace ámbar porque su sitio natural es el fondo negro, y hay
 * una regla que la pasa a terracota sobre papel: `.cm-fondo--hueso
 * .cm-etiqueta`. Pero esta sección NO lleva la clase `cm-fondo--hueso` —se
 * pinta su propio fondo hueso en `.cm-galeria`— así que la regla no la
 * alcanzaba y el ámbar caía sobre el papel: 1,6:1 medido. Prácticamente
 * invisible.
 *
 * Se cazó al renombrar `cm-eyebrow` (que no tenía CSS ninguno) por la clase de
 * la casa: hasta entonces el fallo estaba escondido detrás de otro fallo.
 */
.cm-galeria .cm-etiqueta { color: var(--brasa-texto); }

/*
 * El mínimo del clamp se alcanzaba a los 640 px y de ahí hacia abajo el titular
 * se quedaba clavado en 32 px, mientras los demás titulares de la portada suben
 * a 44,9 en el teléfono. Resultado medido: las DOS secciones que enseñan el
 * trabajo —la galería y los reels— eran las únicas con el titular pequeño.
 *
 * `min(11.5vw, 3.6rem)` como mínimo del clamp mantiene el tope de escritorio
 * intacto (a 1440 sigue dando 57,6 px porque manda el 3,6rem del final) y
 * devuelve la escala en el teléfono.
 */
.cm-galeria__titulo {
  margin: 8px 0 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(min(11.5vw, 3.6rem), 5vw, 3.6rem);
  line-height: 1;
  color: var(--tinta, #101010);
}

.cm-galeria__bajada {
  margin: 12px 0 0;
  max-width: 52ch;
  color: var(--tinta-suave, #5A5A5A);
  line-height: 1.6;
}

/* --- La rejilla ----------------------------------------------------- */

/*
 * `grid-auto-rows` FIJO Y NO `auto`.
 *
 * Las piezas altas ocupan mas filas que las normales. Para que eso signifique
 * algo, la fila tiene que medir siempre lo mismo: con filas automaticas cada una
 * se ajustaria a su contenido y «tres filas» no seria mas que «dos».
 */
/*
 * MARCOS VERTICALES POR PROPORCION, NO POR FILAS.
 *
 * La version anterior daba la altura con `grid-row: span 2` sobre filas de
 * 144px. Eso ataba la ALTURA a un numero fijo mientras el ANCHO lo repartia la
 * rejilla: al ocupar el contenedor entero, las casillas salian de 335x305, o
 * sea casi cuadradas, y recortaban de mala manera unas fotos que son todas
 * verticales.
 *
 * Con `aspect-ratio` el marco es vertical a cualquier ancho de pantalla, y como
 * todas las casillas miden igual la rejilla cierra siempre en filas completas:
 * ni huecos por dentro ni escalones abajo.
 */
.cm-galeria__rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-galeria__casilla {
  /* 4:5 — la proporcion de un retrato de redes, que es como esta grabado todo
     el material de esta casa. */
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #0E0E0E;
}

.cm-galeria__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * ANCLADO ARRIBA. Lo que sobra de un retrato vertical al recortarlo son los
   * pies, no la cara. Con el recorte centrado, las piezas cortan cabezas.
   */
  object-position: center 28%;
  transition: transform 500ms cubic-bezier(.22, .8, .3, 1), filter 320ms ease;
}

/*
 * AL PASAR POR ENCIMA, LA QUE SE MIRA SE ILUMINA Y LAS DEMAS SE APAGAN.
 *
 * En una galeria a todo color ninguna foto se mira: compiten entre ellas.
 * Apagando el resto, la que el raton toca se separa.
 *
 * `:has()` lo hace sin JavaScript, y va dentro de `@media (hover: hover)`: en
 * una pantalla tactil el navegador EMULA el hover al tocar, y sin esa guarda
 * tocar una foto dejaria las demas apagadas hasta tocar en otro sitio.
 */
@media (hover: hover) {
  .cm-galeria__rejilla:has(.cm-galeria__casilla:hover) .cm-galeria__foto {
    filter: saturate(.5) brightness(.86);
  }

  .cm-galeria__casilla:hover .cm-galeria__foto {
    transform: scale(1.05);
    filter: none;
  }
}

/* --- Pantallas medianas y telefono ---------------------------------- */

/*
 * CUATRO COLUMNAS Y LUEGO DOS. NUNCA TRES.
 *
 * El numero de fotos es siempre multiplo de CUATRO (lo garantiza el PHP), asi
 * que con cuatro y con dos columnas la rejilla cierra siempre en filas
 * completas. Un paso intermedio por tres dejaria una casilla suelta al final
 * —ocho entre tres son dos filas y dos— y un hueco ahi no se lee como diseno,
 * se lee como una foto que no cargo.
 *
 * A 700px, cuatro columnas dan marcos de unos 160px de ancho: en formato 4:5
 * siguen siendo retratos perfectamente legibles.
 */
@media (max-width: 700px) {
  .cm-galeria__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-galeria__foto { transition: none; }
  .cm-galeria__casilla:hover .cm-galeria__foto { transform: none; }
}


/* ====================================================================
 * EN EL TELÉFONO NO ES UNA REJILLA, ES UN CARRIL
 * --------------------------------------------------------------------
 * VA AL FINAL DEL ARCHIVO a propósito: la regla de arriba pone dos
 * columnas por debajo de 700 px y aquí hay que desarmarla. Con la misma
 * especificidad solo gana la que va después.
 *
 * POR QUÉ. Medido a 390: cada foto medía 172x215 px = 36.980 px². En
 * 1440 mide 335x419 = 140.365 px². El teléfono le daba a cada trabajo
 * LA CUARTA PARTE del área. Un estudio de fotografía enseñando su
 * portafolio en sellos de correos.
 *
 * Y LO PEOR ES QUE YA SE ESTABA PAGANDO EL TAMAÑO GRANDE: el navegador
 * descarga el JPEG de 819x1024 (150-190 KB) y lo pinta a 172 px, o sea
 * tira el 78 % de los píxeles que acaba de bajar. En carril la foto pasa
 * a 335x419 —exactamente el tamaño que tiene en escritorio— usando el
 * MISMO archivo. Cuatro veces el área por cero bytes.
 *
 * De paso la sección baja de 1.212 px a unos 740.
 * ==================================================================== */

@media (max-width: 700px) {
  .cm-galeria__rejilla {
    display: flex;
    grid-template-columns: none;   /* desarma la rejilla de 4/2 columnas */
    gap: 12px;

    /* Sangra a los dos bordes y devuelve el aire por dentro: la primera foto
       queda alineada con el titular y las demás siguen hasta el borde. */
    margin-inline: calc(var(--canal) * -1);
    padding-inline: var(--canal);

    overflow-x: auto;
    scroll-snap-type: x mandatory;

    /* Al llegar al final del carril, el arrastre NO encadena con el gesto de
       «atrás» del navegador. */
    overscroll-behavior-x: contain;

    /*
     * AQUI NO VA `touch-action`, Y ESO ES UNA DECISION MEDIDA.
     *
     * Lo natural es escribir `touch-action: pan-x pinch-zoom` para «declarar
     * que el carril solo gestiona el eje X». Se probo con eventos tactiles de
     * verdad (CDP Input.dispatchTouchEvent, no un raton simulado) y hace
     * EXACTAMENTE LO CONTRARIO de lo que promete: `pan-x` no significa «lo
     * vertical que pase al padre», significa «en este elemento el gesto
     * vertical NO ESTA PERMITIDO». Medido a 390x844: un arrastre vertical
     * empezado encima del carril movia la pagina 0 px, contra los 335 px del
     * MISMO arrastre empezado sobre un parrafo. La pagina se quedaba clavada
     * justo donde esta el trabajo.
     *
     * El valor por defecto —`auto`— ya hace lo correcto sin ayuda: el gesto
     * horizontal mueve el carril y el vertical se lo lleva la pagina. Es una
     * de esas veces en que la linea de mas es el fallo.
     */

    scrollbar-width: none;
  }
  .cm-galeria__rejilla::-webkit-scrollbar { display: none; }

  .cm-galeria__casilla {
    /*
     * 86vw y no 100: el trozo que asoma de la siguiente foto es el ÚNICO
     * aviso de que hay más. Sin él nadie arrastra. No es una foto «a
     * medias»: es el borde de la siguiente, que es como se lee una
     * secuencia. `aspect-ratio: 4/5` ya viene de la regla base.
     */
    flex: 0 0 86vw;
    scroll-snap-align: center;
  }
}

/*
 * MENOS MOVIMIENTO: el imán pasa a blando y el carril se arrastra libre, sin
 * frenazos ni recolocaciones. Cada foto sigue estando ENTERA en reposo, así
 * que no queda nada a medio pintar.
 */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .cm-galeria__rejilla { scroll-snap-type: x proximity; scroll-behavior: auto; }
}