/* Horizon Hub V24 — viewport containment, hero particles, professional video controls */

/* Keep every page inside the actual device viewport. This fixes accidental page-width
   expansion without disabling normal browser accessibility zoom. */
html,body{width:100%;max-width:100%;overflow-x:clip!important}
body{min-width:0!important}
main,.section,.shell,header,footer{max-width:100%}
img,video,iframe,svg,canvas{max-width:100%}

/* YouTube rail: the moving track may be wide, but its viewport never becomes wider
   than the page/device. */
.v11-video-section{position:relative;max-width:100vw!important;overflow:hidden!important}
.v11-video-section .video-marquee{
  position:relative!important;width:100%!important;max-width:100vw!important;
  overflow:hidden!important;contain:layout paint!important;overscroll-behavior-x:contain
}
.v11-video-section .video-marquee-track{
  display:flex!important;width:max-content!important;max-width:none!important;
  grid-template-columns:none!important;flex-wrap:nowrap!important
}
.v11-video-section .youtube-card{max-width:min(310px,82vw)!important}

/* Professional controls for the moving YouTube rail. */
.hh-video-controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;width:min(1200px,calc(100% - 40px));margin:8px auto 0}
.hh-video-control{appearance:none;border:1px solid #d5e0e5;background:#fff;color:#0a2135;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(6,27,46,.10);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.hh-video-control:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(6,27,46,.15);border-color:#9fb4be}
.hh-video-control:active{transform:translateY(0) scale(.96)}
.hh-video-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Hero particles on desktop too: subtle, decorative, and kept behind content. */
.v12-hero{position:relative;isolation:isolate;overflow:hidden!important}
.v12-hero .shell,.v12-hero-grid{position:relative;z-index:2}
.v12-hero:before,.v12-hero:after{content:"";position:absolute;pointer-events:none;z-index:1;border-radius:50%}
.v12-hero:before{
  width:420px;height:420px;right:-105px;top:38px;
  background:
    radial-gradient(circle at 20% 14%,rgba(21,217,160,.34) 0 4px,transparent 5px),
    radial-gradient(circle at 54% 8%,rgba(38,126,255,.22) 0 5px,transparent 6px),
    radial-gradient(circle at 80% 28%,rgba(21,217,160,.24) 0 3px,transparent 4px),
    radial-gradient(circle at 34% 52%,rgba(38,126,255,.18) 0 4px,transparent 5px),
    radial-gradient(circle at 70% 66%,rgba(21,217,160,.24) 0 4px,transparent 5px),
    radial-gradient(circle at 42% 86%,rgba(38,126,255,.18) 0 3px,transparent 4px);
  animation:hhV24ParticlesFloat 10s ease-in-out infinite alternate
}
.v12-hero:after{
  width:330px;height:330px;right:-95px;bottom:-75px;border:1px solid rgba(21,217,160,.15);
  box-shadow:0 0 0 48px rgba(21,217,160,.028),0 0 0 96px rgba(36,122,210,.02);
  animation:hhV24ParticlesOrbit 18s linear infinite
}
@keyframes hhV24ParticlesFloat{to{transform:translate(-22px,30px) rotate(13deg)}}
@keyframes hhV24ParticlesOrbit{to{transform:rotate(360deg)}}

@media(max-width:720px){
  /* More particles in the upper-right blank area requested on mobile. */
  .v12-hero:before{
    width:300px;height:390px;right:-96px;top:35px;
    background:
      radial-gradient(circle at 25% 8%,rgba(21,217,160,.38) 0 3px,transparent 4px),
      radial-gradient(circle at 68% 5%,rgba(38,126,255,.26) 0 4px,transparent 5px),
      radial-gradient(circle at 43% 24%,rgba(21,217,160,.27) 0 3px,transparent 4px),
      radial-gradient(circle at 82% 32%,rgba(38,126,255,.22) 0 3px,transparent 4px),
      radial-gradient(circle at 31% 47%,rgba(38,126,255,.20) 0 3px,transparent 4px),
      radial-gradient(circle at 68% 59%,rgba(21,217,160,.29) 0 3px,transparent 4px),
      radial-gradient(circle at 47% 78%,rgba(38,126,255,.18) 0 3px,transparent 4px),
      radial-gradient(circle at 84% 88%,rgba(21,217,160,.24) 0 3px,transparent 4px)!important;
  }
  .v12-hero:after{width:220px;height:220px;right:-72px;bottom:55px!important}
  .v11-video-section .video-marquee{width:100%!important;max-width:100%!important}
  .v11-video-section .youtube-card{width:min(260px,76vw)!important;min-width:min(260px,76vw)!important;flex-basis:min(260px,76vw)!important}
  .hh-video-controls{width:calc(100% - 28px);margin-top:6px}
  .hh-video-control{width:42px;height:42px}
}

@media(prefers-reduced-motion:reduce){.v12-hero:before,.v12-hero:after{animation:none!important}}