/* Componente universal de vídeo — SYM Imóveis (v2.10.0) */

.sym-video{position:relative;width:100%;overflow:hidden;border-radius:16px;background:#111;}
.sym-video--v{max-width:320px;}
.sym-video--h{max-width:100%;}

/* v2.13.8 — vídeo vertical em DESTAQUE, grande e centralizado.
   v2.13.9 (ajuste do Diogo no print de 2026-07-16): no mobile ocupa a
   LARGURA TOTAL da coluna, igual ao card "O condomínio" logo abaixo.
   No desktop mantém o teto de 360px centralizado na coluna. */
.sym-video--v.is-hero{
  max-width:none;
  width:100%;
  margin-inline:auto;
  box-shadow:0 28px 56px -28px rgba(0,0,0,.45);
}
@media (min-width:768px){
  .sym-video--v.is-hero{width:min(82vw,360px);}
}

.sym-video-facade{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:0;padding:0;margin:0;background:#111;cursor:pointer;}
.sym-video-facade:focus-visible{outline:3px solid #E97817;outline-offset:2px;}
.sym-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease, opacity .35s ease;}
.sym-video-facade:hover .sym-video-poster{transform:scale(1.04);opacity:.85;}
@media (prefers-reduced-motion: reduce){
  .sym-video-poster{transition:none;}
  .sym-video-facade:hover .sym-video-poster{transform:none;}
}

.sym-video-play{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(17,17,17,.82);color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.35);transition:background .2s ease,transform .2s ease;}
.sym-video-facade:hover .sym-video-play{background:#E97817;transform:scale(1.05);}
.sym-video-play svg{margin-left:3px;}
@media (prefers-reduced-motion: reduce){.sym-video-facade:hover .sym-video-play{transform:none;}}

/* v2.13.8 — extras do vídeo destaque: play maior, selo de CTA e leve
   gradiente pra ancorar o selo (só no .is-hero) */
.is-hero .sym-video-play{width:72px;height:72px;}
.is-hero .sym-video-play svg{width:30px;height:30px;margin-left:4px;}
.sym-video-cta{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:1;font-size:13px;font-weight:600;color:#fff;background:rgba(17,17,17,.72);backdrop-filter:blur(4px);padding:7px 16px;border-radius:999px;white-space:nowrap;pointer-events:none;}
.sym-video-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.38) 100%);pointer-events:none;}

.sym-video-platform{position:absolute;top:10px;left:10px;z-index:1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(17,17,17,.75);padding:3px 9px;border-radius:999px;}

.sym-video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.sym-video-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:20px;}
.sym-video-fallback p{margin:0;font-size:14px;opacity:.85;}
.sym-video-fallback-link{display:inline-block;padding:10px 22px;border:1px solid #fff;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;font-size:14px;}
.sym-video-fallback-link:hover{background:#fff;color:#111;}

/* Seção na página do imóvel — v2.13.8: espaçamento colado no eyebrow
   "Vídeos" (antes 40px de respiro duplo), título maior e tagline */
.sym-videos-imovel{margin:0 0 12px;}
.sym-videos-title{font-size:clamp(26px,4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;}
.sym-videos-tagline{font-size:15px;color:#6b6b6b;margin:0 0 22px;line-height:1.5;max-width:520px;}
.sym-videos-sub{font-size:15px;font-weight:600;margin:24px 0 12px;color:#444;}
.sym-videos-rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.sym-videos-rail .sym-video{flex:0 0 auto;scroll-snap-align:start;}
.sym-videos-rail--v .sym-video{width:200px;}
.sym-videos-rail--h .sym-video{width:300px;}
@media (max-width: 767px){
  .sym-videos-rail--v .sym-video{width:160px;}
}