/* ============================================================================
   CUSTODE · 03-inventory.css — la capa de la rejilla del inventario
   ----------------------------------------------------------------------------
   El tercero de los huecos que `CUSTODE_STYLESHEETS` (functions.php) traia
   declarados y vacios. Se reserva para vestir la rejilla de tarjetas sin
   reescribir su estructura; hoy tiene un solo inquilino: el avance en video que
   llevan dos de las veintiseis tarjetas.

   La rejilla, la card y sus tipografias siguen viviendo en 05-pages.css, que
   entra DESPUES que esta hoja. Por eso aqui no se toca ni `.c-listing` ni
   `.c-plate`: todo cuelga de dos clases nuevas, `.c-listing__video` y
   `.c-listing__vbadge`, que no existen en ninguna otra hoja y no compiten con
   nadie.
   ========================================================================= */

/* ── §1 · El avance ───────────────────────────────────────────────────────── */

/* Se apila EXACTAMENTE sobre la fotografia de portada, con el mismo recorte
   (`object-fit: cover`) y la misma gradacion de la marca, para que el paso de
   una a otro no se note como un salto. `--c-z-plate` lo deja por encima de la
   foto y por debajo de `.c-plate::after`, la orla interior, que sigue cerrando
   la lamina por arriba. */
.c-listing__video   { position: absolute; inset: 0;
                      inline-size: 100%; block-size: 100%;
                      object-fit: cover; filter: var(--c-grade);
                      z-index: var(--c-z-plate);
                      opacity: 0;
                      transition: opacity var(--c-dur-hover) var(--c-ease-ink);
                      pointer-events: none; }

/* La clase la pone card-video.js cuando el clip ya esta soltando fotogramas.
   Mientras no llegue —red lenta, formato no soportado, autoplay denegado— la
   tarjeta se queda con su fotografia y no se ve ningun hueco negro. */
.c-listing__video.is-playing { opacity: 1; }

/* ── §2 · El rotulo ───────────────────────────────────────────────────────── */

/* Va SIEMPRE visible, se reproduzca o no el avance: su trabajo no es acompanar
   al video, es avisar de que ese inmueble tiene recorrido. En el movil, donde
   el clip puede tardar o no llegar a arrancar, es lo unico que lo dice. */
.c-listing__vbadge  { position: absolute;
                      inset-block-start: var(--c-sp-3);
                      inset-inline-start: var(--c-sp-3);
                      z-index: var(--c-z-meta);
                      padding: var(--c-sp-1) var(--c-sp-2);
                      background: var(--c-veil-62);
                      color: var(--c-inv-000);
                      font-family: var(--c-font-label);
                      font-size: var(--c-fs-l3); font-weight: var(--c-fw-label);
                      letter-spacing: .10em; text-transform: uppercase; }

/* Un punto de laton delante: el mismo recurso que ya usa `.c-eyebrow` para
   marcar el principio de una linea, aqui a escala de rotulo. */
.c-listing__vbadge::before {
                      content: ""; display: inline-block;
                      inline-size: 5px; block-size: 5px;
                      margin-inline-end: var(--c-sp-2);
                      vertical-align: middle;
                      border-radius: 50%;
                      background: var(--c-brass-hi); }