/* ICT Academy Suriname — original 99-second multilingual homepage explainer. */

html body[data-page="home"] main .v5-home-hero__media--video {
  display: flex !important;
  flex-direction: column !important;
  align-self: center;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff;
}

html body[data-page="home"] main .v5-home-hero__media--video::after {
  display: none !important;
  content: none !important;
}

.v5-home-hero__video-frame {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(13, 178, 172, .28), transparent 40%),
    #001f48;
}

.v5-home-hero__video-frame video {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center;
  background: #001f48;
}

html body[data-page="home"] main .v5-home-hero__video-frame > .home-explainer__brand-bug,
html body[data-page="home"] main .v5-home-hero__video-frame > .home-explainer__product-bug {
  position: absolute !important;
  z-index: 3;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, visibility .18s ease;
}

html body[data-page="home"] main .v5-home-hero__video-frame > .home-explainer__brand-bug {
  top: .5rem !important;
  right: auto !important;
  bottom: auto !important;
  left: .5rem !important;
  width: clamp(8rem, 31%, 11rem) !important;
  max-width: 11rem !important;
  filter:
    drop-shadow(0 0 .58rem rgba(226, 251, 255, .82))
    drop-shadow(0 .16rem .34rem rgba(0, 21, 45, .68));
}

html body[data-page="home"] main .v5-home-hero__video-frame > .home-explainer__product-bug {
  top: .5rem !important;
  right: .5rem !important;
  bottom: auto !important;
  left: auto !important;
  width: clamp(7.25rem, 29%, 10rem) !important;
  max-width: 10rem !important;
  filter:
    drop-shadow(0 0 .62rem rgba(229, 252, 255, .9))
    drop-shadow(0 .18rem .38rem rgba(0, 20, 43, .78));
}

html body[data-page="home"] main .v5-home-hero__video-frame > .home-explainer__brand-bug.is-hidden,
html body[data-page="home"] main .v5-home-hero__video-frame > .home-explainer__product-bug.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.v5-home-hero__video-frame video:focus-visible {
  outline: .24rem solid #ffca5a;
  outline-offset: -.24rem;
}

.v5-home-hero__video-frame video::cue {
  color: #fff;
  background: rgba(0, 20, 52, .92);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

html body[data-page="home"] main .v5-home-hero__media--video > .v5-home-hero__badge {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: max-content !important;
  margin: 0 !important;
  padding: 1rem 1.15rem 1.05rem !important;
  overflow: visible !important;
  color: #001f48;
  border: 0 !important;
  border-top: 1px solid rgba(0, 72, 145, .13) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: none !important;
}

.home-explainer__language-note {
  display: block;
  margin-top: .42rem;
  color: #315171;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.home-explainer__transcript {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 700px) {
  html body[data-page="home"] main .v5-home-hero__media--video {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .v5-home-hero__video-frame {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  html body[data-page="home"] main .v5-home-hero__media--video > .v5-home-hero__badge {
    padding: .9rem 1rem 1rem !important;
  }
}

@media (prefers-contrast: more) {
  .v5-home-hero__video-frame {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  .v5-home-hero__video-frame video::cue {
    color: #fff;
    background: #000;
  }

  .home-explainer__brand-bug,
  .home-explainer__product-bug {
    filter:
      drop-shadow(0 0 .2rem #fff)
      drop-shadow(0 0 .45rem #001f48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-explainer__brand-bug,
  .home-explainer__product-bug {
    transition: none;
  }
}

/* Preserve the complete 16:9 branded film, including its logo and end card. */
html body[data-page="home"] main .v5-home-hero__media--video {
  display: flex !important;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  background: #001f48;
}

.v5-home-hero__video-frame {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: #001f48;
}

.v5-home-hero__video-frame video {
  position: static !important;
  object-fit: cover;
  object-position: center;
  background: #001f48;
}

@media (max-width: 980px) {
  html body[data-page="home"] main .v5-home-hero__media--video {
    height: auto !important;
    min-height: 0 !important;
  }

  .v5-home-hero__video-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  html body[data-page="home"] main .v5-home-hero__media--video {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Keep the complete 16:9 film visible. The media card remains part of the
   white hero surface instead of adding a separate text rail or blue panel. */
html body[data-page="home"] main .v5-home-hero__media--video {
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  border-color: rgba(0, 72, 145, .14) !important;
  background: #fff !important;
}

html body[data-page="home"] main .v5-home-hero__video-frame {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: #fff !important;
}

html body[data-page="home"] main .v5-home-hero__video-frame video {
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

html body[data-page="home"] main .v5-home-hero__media--video:hover img {
  transform: none;
}

@media (max-width: 980px) {
  html body[data-page="home"] main .v5-home-hero__media--video {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 15px 34px rgba(0,31,72,.1) !important;
  }
}