/* ═══════════════════════════════════════════════════════════════════
   rwe-editorial-cards — CSS del repeater de tarjetas editoriales
   R1: sacado del <style> inline. Dos variantes: editorial / fullbleed.

   Estrategia:
   - `gap` (solo en variant=editorial) → variable --rwec-gap (calc. en PHP: gap o 0).
   - grid-template-columns en móvil (900px) según variant → variable --rwec-cols-m.
   - bloque `if fullbleed` (media query 480px → 1 col) → clase `.rwec-fullbleed`.
   - estilos del trigger de vídeo → SIEMPRE en el CSS (si no hay vídeo, esos
     elementos no existen; no molesta).

   El wrapper es `#uid.rwec-grid` (id + clase en el mismo elemento). El CSS usa
   la clase `.rwec-grid`; el id se mantiene por si el JS lo usa.

   Variables (inyectadas en el wrapper .rwec-grid):
     --rwec-bf     fuente base
     --rwec-cols   columnas (desktop)
     --rwec-gap    gap (px, ya con unidad; 0 si no es editorial)
     --rwec-cols-m grid-template-columns en <=900px [calculado en PHP]
   ═══════════════════════════════════════════════════════════════════ */

.rwec-grid{ font-family:var(--rwec-bf,inherit); }
.rwec-grid.rwec-grid{ display:grid; grid-template-columns:repeat(var(--rwec-cols,3),1fr); gap:var(--rwec-gap,0); }
@media (max-width:900px){
    .rwec-grid.rwec-grid{ grid-template-columns:var(--rwec-cols-m,1fr) !important; gap:var(--rwec-gap-m,0) !important; }
}
/* Variante fullbleed: en móvil pequeño, 1 columna */
.rwec-grid.rwec-fullbleed{ }
@media (max-width:480px){
    .rwec-fullbleed.rwec-grid{ grid-template-columns:1fr !important; }
}

.rwec-grid a{ text-decoration:none; }

/* Trigger de vídeo (si la tarjeta lleva vídeo inline; si no, no hay estos elementos) */
.rwec-grid .rwec-video-trigger{ position:absolute; inset:0; cursor:pointer; border:0; padding:0; background:none; display:block; width:100%; height:100%; }
.rwec-grid .rwec-video-frame iframe{ width:100%; height:100%; border:0; position:absolute; inset:0; }