/*
 * KummaraDS — kds-foto (#2034)
 * ============================================================
 * Una imagen o un video con la proporción fija: la grilla no salta mientras carga y la foto real manda.
 *
 *   <figure class="kds-foto kds-foto--cuadrado"><img src="…" alt="Filtro de aceite" loading="lazy"></figure>
 *   <figure class="kds-foto kds-foto--16x9 kds-foto--cubrir"><video …></video></figure>
 *   <figure class="kds-foto kds-foto--vacia" aria-hidden="true"></figure>     sin foto: el lugar queda igual
 *
 *   --cuadrado (por defecto) · --4x3 · --16x9 · --retrato (3:4) · --2x3 (la foto alta de ropa y calzado; un video
 *   vertical, como un Short, la llena con un recorte chico arriba y abajo). En una grilla todas las tarjetas llevan
 *   la misma, así la fila queda pareja.
 *   --cubrir   la imagen llena el marco y se recorta (por defecto se ve entera, sobre el fondo hundido)
 *   --filete   la foto entera sobre blanco, con un filete fino alrededor (la tarjeta de la tienda, #2038)
 *
 * EL VIDEO DEL PRODUCTO (#2035): encima de la foto, mudo y en bucle, sin controles ni nada encima: se ve sólo el
 * producto. Lo maneja js/components/kds-foto.js: lo baja recién cuando el marco se acerca a la pantalla, lo para
 * cuando sale y aparece cuando ya se está reproduciendo; hasta ahí, y si no carga, se ve la foto. Con el mouse
 * encima del marco —o de la tarjeta que lo lleva— el video se va y queda la foto. Con «reducir el movimiento» no se
 * reproduce: queda la foto. El archivo lo sirve quien lo guarda, no la página.
 *
 *   <figure class="kds-foto kds-foto--2x3 kds-foto--cubrir">
 *     <img src="filtro.jpg" alt="Filtro de aceite FA-12" loading="lazy">
 *     <video class="kds-foto__video" data-kds-video="filtro.mp4" muted loop playsinline preload="none"
 *            aria-hidden="true" tabindex="-1"></video>
 *   </figure>
 * ============================================================
 */

.kds-foto {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    aspect-ratio: var(--kds-foto-proporcion, 1);
    border-radius: var(--kds-foto-radio, var(--kds-radio-superficie, .375rem));
    background: var(--kds-foto-fondo, var(--kds-superficie-2, #f8f9fa));
}

.kds-foto > img,
.kds-foto > video,
.kds-foto > picture,
.kds-foto > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--kds-foto-ajuste, contain);
}

.kds-foto--cuadrado { --kds-foto-proporcion: 1; }
.kds-foto--4x3 { --kds-foto-proporcion: 4 / 3; }
.kds-foto--16x9 { --kds-foto-proporcion: 16 / 9; }
.kds-foto--retrato { --kds-foto-proporcion: 3 / 4; }
.kds-foto--2x3 { --kds-foto-proporcion: 2 / 3; }
.kds-foto--cubrir { --kds-foto-ajuste: cover; }

.kds-foto--filete {
    --kds-foto-fondo: var(--kds-superficie, #fff);
    border: 1px solid var(--kds-borde, #ebedf0);
}

.kds-foto--vacia::before {
    content: "";
    position: absolute;
    inset: 30%;
    background: var(--kds-texto-3, #6b6b6b);
    opacity: .35;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='M3 5h18v14H3z'/%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='m3 16 5-5 4 4 3-3 6 6'/%3e%3ccircle cx='16' cy='9' r='1.6' fill='%23000'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='M3 5h18v14H3z'/%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' d='m3 16 5-5 4 4 3-3 6 6'/%3e%3ccircle cx='16' cy='9' r='1.6' fill='%23000'/%3e%3c/svg%3e") center / contain no-repeat;
}

.kds-foto > .kds-foto__video {
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.kds-foto > .kds-foto__video.is-andando { opacity: 1; }

.kds-foto:hover > .kds-foto__video,
.kds-tarjeta:is(:hover, :focus-within) .kds-foto > .kds-foto__video { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .kds-foto > .kds-foto__video { display: none; }
}