/* card-media.css : estilos de las tarjetas con video / carrusel de fotos.
   Pareja de static/js/card-media.js y de templates/public/_card_media.html.

   Vivia inline en public/_card_media_assets.html. Salio de ahi para que se
   cachee un anio con la URL versionada. Se enlaza desde el HEAD: estas reglas
   estilizan tarjetas que estan arriba en la pagina, y descubiertas al final del
   body el navegador ya las pinto sin estilo.
*/

/* Todo cuelga de [data-cardmedia], NO de las clases de una plantilla concreta.
   Esa es la razón de que el mismo partial sirva en el home, en la búsqueda, en
   la landing y en el minisitio del agente, que usa Tailwind y no tiene ni
   .card ni .ph. Una superficie nueva es incluir el partial, sin tocar CSS. */
[data-cardmedia]{position:relative;overflow:hidden}
/* Los distintivos de la tarjeta van SOBRE el video y las fotos. */
[data-cardmedia] .tier-ribbon,[data-cardmedia] .op-pill,
[data-cardmedia] .cm-over{z-index:5}
.cm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;z-index:1;background:var(--grey,#504f50)}
.cm-video.on{opacity:1}
.cm-badge{position:absolute;right:10px;bottom:10px;z-index:3;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(25,25,25,.62);padding:4px 9px;border-radius:999px;
  backdrop-filter:blur(4px);pointer-events:none}
.cm-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease;z-index:1}
.cm-slide.on{opacity:1}
/* Flechas: aparecen al pasar el mouse. Son spans, no botones, para no meter un
   control interactivo dentro del <a> de la tarjeta. */
.cm-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:30px;height:30px;border-radius:50%;display:none;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink,#191919);font-size:17px;line-height:1;
  box-shadow:0 3px 12px rgba(25,25,25,.22);cursor:pointer;transition:background .18s}
.cm-arrow.prev{left:8px;padding-bottom:2px}
.cm-arrow.next{right:8px;padding-bottom:2px}
.cm-arrow:hover{background:#fff}
[data-cardmedia]:hover .cm-arrow{display:grid}
.cm-dots{position:absolute;left:0;right:0;bottom:9px;z-index:3;display:flex;
  justify-content:center;gap:5px;pointer-events:none}
.cm-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);
  transition:background .25s,width .25s}
.cm-dots i.on{background:#fff;width:14px;border-radius:3px}
/* En pantalla táctil no hay hover: las flechas no sirven, los puntos sí. */
@media (hover:none){ [data-cardmedia]:hover .cm-arrow{display:none} }
@media (prefers-reduced-motion: reduce){
  .cm-video,.cm-slide{transition:none}
}