/* MediaPlaceholder — TEMPORAL.
   Estilos del hueco que marca una foto o un video pendiente. Se borra entero
   cuando lleguen los assets reales (ver snipplets/vanhaus/media-placeholder.tpl). */

body.vh-system .vh-ph{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  border-radius:14px;
  /* Gris neutro si no se pasa accentColor. */
  border:1px solid var(--vh-ph-accent,#3b3e46);
  background-color:#111317;
  /* Textura sutil: trama de puntos + un barrido diagonal muy leve. */
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px),
    radial-gradient(circle at center,rgba(255,255,255,.05) 1px,transparent 1.3px),
    radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--vh-ph-accent,#5b6070) 12%,transparent),transparent 70%);
  background-size:auto,16px 16px,auto;
  color:var(--vh-ph-accent,#8d929e);
}
body.vh-system .vh-ph::after{
  /* Esquina cortada, mismo gesto que las tarjetas de spec. */
  content:"";position:absolute;top:0;right:0;width:14px;height:14px;
  background:linear-gradient(225deg,color-mix(in srgb,var(--vh-ph-accent,#5b6070) 45%,transparent),transparent 70%);
}
body.vh-system .vh-ph-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:16px;text-align:center;
}
body.vh-system .vh-ph-icon{
  width:clamp(34px,7vw,48px);height:clamp(34px,7vw,48px);
  color:inherit;opacity:.85;flex:0 0 auto;
}
body.vh-system .vh-ph-label{
  max-width:100%;
  font:600 clamp(9px,1.5vw,11px)/1.45 "Open Sans",Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,currentColor 70%,#ffffff 30%);
  opacity:.85;overflow-wrap:anywhere;
}
/* El hueco listo para recibir el asset real: mismo contenedor, sin decoración. */
body.vh-system .vh-ph-slot{position:relative;width:100%;overflow:hidden;border-radius:14px}
body.vh-system .vh-ph-slot>img,body.vh-system .vh-ph-slot>video{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:767px){
  body.vh-system .vh-ph{border-radius:12px}
  body.vh-system .vh-ph-inner{gap:9px;padding:12px}
  body.vh-system .vh-ph-label{letter-spacing:.13em}
}
@media(prefers-reduced-motion:reduce){body.vh-system .vh-ph{background-image:none;background-color:#121419}}