/* Homepage "see who's on the other side" video block (#smart-money-video).
   Behaviour lives in polylab-home-video.js; the video itself is only fetched near the viewport. */

#smart-money-video .home-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas: "copy frame" "actions frame";
  grid-template-rows: auto 1fr;
  column-gap: clamp(22px, 4vw, 48px);
  row-gap: 18px;
  align-items: start;
  border: 1px solid rgba(46, 117, 255, 0.22);
  border-radius: var(--radius, 24px);
  background: linear-gradient(135deg, rgba(0, 195, 136, 0.08), rgba(46, 117, 255, 0.10) 52%, rgba(15, 17, 26, 0.88));
  padding: clamp(18px, 4vw, 34px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#smart-money-video .home-video-copy { grid-area: copy; align-self: end; }
#smart-money-video .home-video-copy .smart-money-analysis-title { margin-top: 14px; }
#smart-money-video .home-video-frame { grid-area: frame; align-self: center; }
#smart-money-video .home-video-actions { grid-area: actions; margin-top: 0; align-self: start; }

#smart-money-video .home-video-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--text, #edf2ff);
}

#smart-money-video .home-video-points li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
#smart-money-video .home-video-points i { color: var(--green, #00c388); font-size: 1.15rem; margin-top: 1px; }

#smart-money-video .home-video-note {
  margin-top: 14px;
  color: var(--muted, #a5b0cb);
  font-size: 0.8rem;
  opacity: 0.85;
}

#smart-money-video .home-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;              /* reserves the space before the video loads: no layout shift */
  border-radius: 20px;
  overflow: hidden;
  background: #070a11 center / cover no-repeat;
  border: 1px solid rgba(130, 148, 194, 0.22);
  box-shadow: 0 24px 70px rgba(3, 8, 24, 0.55), 0 0 60px rgba(46, 117, 255, 0.12);
}

#smart-money-video .home-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}

#smart-money-video .home-video-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 10, 17, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, opacity 200ms ease;
}

#smart-money-video .home-video-btn:hover { background: rgba(46, 117, 255, 0.55); }
#smart-money-video .home-video-btn:focus-visible { outline: 2px solid var(--blue, #2e75ff); outline-offset: 2px; }

/* sound toggle: a 44px touch target in the top corner (the burned-in captions sit at the bottom) */
#smart-money-video .home-video-sound {
  right: 12px;
  top: 12px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.85rem;
}

#smart-money-video .home-video-sound i { font-size: 1.15rem; }

/* big play button: shown when autoplay is off (reduced motion, data saver) or was blocked */
#smart-money-video .home-video-play {
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  font-size: 2.2rem;
  background: rgba(46, 117, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 40px rgba(46, 117, 255, 0.45);
}

#smart-money-video .home-video-play:hover { transform: scale(1.06); background: rgba(46, 117, 255, 1); }
#smart-money-video [hidden] { display: none !important; }

@media (max-width: 860px) {
  /* on phones the copy leads, the video follows full-width, the buttons close the block */
  #smart-money-video .home-video {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "frame" "actions";
    grid-template-rows: auto;
  }
  #smart-money-video .home-video-frame { max-width: 560px; margin: 0 auto; border-radius: 16px; }
}

@media (max-width: 480px) {
  #smart-money-video .home-video { padding: 14px; border-radius: 18px; }
  #smart-money-video .home-video-copy { padding: 6px 4px 0; }
  #smart-money-video .home-video-points { font-size: 0.95rem; }
  #smart-money-video .home-video-sound { top: 8px; right: 8px; padding: 0 12px; font-size: 0.78rem; }
  #smart-money-video .home-video-actions .button-primary,
  #smart-money-video .home-video-actions .button-secondary { flex: 1 1 100%; justify-content: center; text-align: center; }
}