/* Rejilla del portfolio.
 *
 * El problema no eran las columnas: las dos de cada fila ya medían lo mismo
 * (616 px a 1440). Lo que descuadraba las filas eran las imágenes, que se
 * renderizaban a tamaños distintos (600x338 frente a 520x296) porque unas
 * figuras usan `size-large` dentro de un div y otras `size-full` sueltas.
 *
 * Es CSS y solo CSS: no se toca el marcado de Kubio, así que borrar este
 * fichero y su <link> en clientes/index.html devuelve la página a como estaba.
 *
 * Las 24 capturas de cliente son 16:9 en origen (1898x1080 y similares), así
 * que `object-fit: cover` con esa proporción no recorta nada apreciable.
 */

/* --- Imágenes: mismo tamaño para todas, a cualquier ancho --------------- */

.wp-block-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.wp-block-image figure,
figure.wp-block-image {
    width: 100%;
    margin: 0;
}

.wp-block-image a {
    display: block;
}

.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;

    /* Un marco discreto: sobre fondo oscuro, las capturas de webs claras se
     * fundían unas con otras y no se leían como piezas separadas. */
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* --- Dos columnas, solo de tablet para arriba -------------------------- */
/*
 * En móvil NO se tocan las columnas. Al forzarlas también ahí, las dos se
 * apretaban en 390 px: capturas de 180 px de ancho, títulos pegados al borde y
 * la columna derecha saliéndose de la pantalla. Por debajo de 768 px se deja
 * el comportamiento original de Kubio, que ya apila una por fila.
 */
@media (min-width: 768px) {
    /* Las columnas de Kubio se dimensionan por contenido (flex-basis:auto,
     * flex-grow:0): su ancho salía del tamaño intrínseco de la imagen. Al
     * ponerle `width:100%` a la imagen ese ancho desaparece, la columna pasa a
     * max-content y las dos dejan de caber. Por eso hay que darles base
     * explícita, y por eso hace falta el `column-gap` de aquí abajo: sumaban
     * exactamente el ancho de la fila y cualquier separación las hacía saltar
     * de línea (la página se iba de 4770 a 10260 px).
     *
     * `!important` a conciencia: Kubio genera una clase distinta por elemento
     * (style-local-34-container), así que no hay forma limpia de ganarle por
     * especificidad sin escribir 24 selectores.
     */
    .wp-block-kubio-row__inner:has(.wp-block-image) > .wp-block-kubio-column__container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;

        /* Kubio dejó una fila con 15 px de padding lateral en vez de los 8 px
         * del resto, así que BAÑOS10 y QUALICER salían 14 px más estrechas
         * (572 en vez de 586) que las otras 22. Se igualan todas. */
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .wp-block-kubio-row__inner:has(.wp-block-image) {
        row-gap: 2.25rem;
        column-gap: 1.75rem;
    }

    .wp-block-kubio-row__inner:has(.wp-block-image) .wp-block-kubio-heading__text {
        margin-bottom: .6rem;
    }
}


/* --- Red de seguridad: las figuras que venían con otras clases ---------- */
/*
 * ITCOM y AZULEJOS ALCOR llegaban de WordPress con
 * `<figure class="aligncenter size-large|size-full">`, sin `wp-block-image`.
 * Las reglas de arriba apuntan a `.wp-block-image img`, así que a esas dos no
 * les llegaban: la figura se encogía a su contenido y se centraba, y la imagen
 * salía a tamaño natural. Se veían diminutas dentro de una celda normal.
 *
 * El marcado ya está igualado (normalizar-figuras.py), pero esta regla queda
 * como respaldo: si alguien vuelve a insertar una imagen centrada, o si un
 * navegador conserva en caché la versión antigua del HTML, la tarjeta se ve
 * igual que las demás de todas formas.
 */
.wp-block-kubio-column__container figure.aligncenter,
.wp-block-kubio-column__container figure[class*="size-"] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.wp-block-kubio-column__container figure[class*="size-"] img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}


/* --- EL ENLACE, que era la causa de verdad ------------------------------ */
/*
 * Las tarjetas de ITCOM y ALCOR salían minúsculas SOLO en móviles de densidad
 * alta. Con densidad 1 se veían bien, y por eso costó tanto encontrarlo: el
 * arnés captura con `--force-device-scale-factor=1`.
 *
 * El mecanismo es un círculo:
 *
 *   · el <a> que envuelve la imagen quedaba en `display: inline-block`, así que
 *     su ancho lo marca su contenido;
 *   · la imagen lleva `width: 100%`, o sea el 100% de ese <a>;
 *   · con `sizes="auto"` y densidad 3, el tamaño intrínseco de la imagen es
 *     120 px, no 390.
 *
 * Resultado: el <a> mide 120 porque la imagen mide 120, y la imagen mide 120
 * porque el <a> mide 120. Con densidad 1 el intrínseco era 390 y el círculo se
 * cerraba en el valor bueno, de ahí que pareciera correcto.
 *
 * En las otras 22 el <a> ya salía `block` y por eso nunca se encogían.
 *
 * Poniendo `display:block` y `width:100%` en el enlace, el ancho lo manda la
 * columna y no el contenido. Se rompe el círculo.
 */
.wp-block-kubio-column__container figure a,
.wp-block-image a {
    display: block !important;
    width: 100% !important;
}


/* --- Que un nombre largo no descuadre la fila --------------------------- */
/*
 * Los títulos van encima de cada captura. Si uno ocupa dos líneas y el de al
 * lado una, la imagen de esa tarjeta baja y la fila queda torcida. Pasaba con
 * «DIGITA INFORMATION TECNOLOGIES» entre 768 y 900 px de ancho, que es donde la
 * columna se queda en 330 px.
 *
 * Ese nombre ya se ha acortado a DIGITATEK, pero la regla se queda como
 * respaldo: reservando la altura de dos líneas, todas las tarjetas empiezan a
 * la misma altura aunque mañana se añada un cliente de nombre largo.
 */
.wp-block-kubio-column__container .wp-block-kubio-heading__text {
    min-height: 2.4em;
    display: flex;
    align-items: flex-end;
}