/* Falcon 6048's video section (product_scroll.blade.php): the copy on the left, the video
   on the right in a 16:9 frame, which holds an H3 cover with a Play button until the
   visitor asks for the player (js/product-video.js). Sized on the Falcon type scale
   (falcon-type.css); the heading takes the section-title size, left-aligned.

   On deep navy with light type, so the video reads as its own chapter between the light
   Architecture and AI Workloads sections: #071d38 is the hero banner's foot, a step darker
   than the sticky bar's #0c2544 (1.10:1, the gap the bar already keeps from the banner). */
#falcon-6048-video { padding: 80px 0 64px; background: #071d38; } /* the shared section rhythm: content 80px down, 64px under it */
/* The section title every section has, hidden: screen readers get it, and the In Action
   tab lands on it. Taken out of the flow with no offsets, it sits where it would have
   been, at the top of the grid, so the tab lands the grid 40px under the bar. */
#falcon-6048-video .product-video-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; }
#falcon-6048-video .product-video-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.35fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center; }

/* ---- Copy ---- */
#falcon-6048-video .product-video-title {
  margin: 0 0 20px;
  color: #fff;
  font-size: var(--type-section);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#falcon-6048-video .product-video-description {
  margin: 0;
  color: #c5d1df;
  font-size: var(--type-lead);
  line-height: var(--leading-lead); }

/* ---- Video frame: the cover, then the player in its place ---- */
#falcon-6048-video .product-video-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: #0c2544; }
#falcon-6048-video .product-video-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer; }
  #falcon-6048-video .product-video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* the frame clips anything outside it, so the focus ring is drawn just inside its edge */
  #falcon-6048-video .product-video-play:focus { outline: none; }
  #falcon-6048-video .product-video-play:focus-visible { box-shadow: inset 0 0 0 3px #53d1f3; }
#falcon-6048-video .product-video-label {
  position: absolute;
  top: 16px;
  left: 20px;
  color: #fff;
  font-size: var(--type-ui);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  letter-spacing: .04em; }
/* a white disc with a navy triangle: the shape says Play without relying on its colour */
#falcon-6048-video .product-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: background-color .2s, transform .2s; }
  #falcon-6048-video .product-video-icon svg { width: 30px; height: 30px; margin-left: 3px; fill: #071d38; }
  #falcon-6048-video .product-video-play:hover .product-video-icon,
  #falcon-6048-video .product-video-play:focus-visible .product-video-icon {
    background: #53d1f3;
    transform: translate(-50%, -50%) scale(1.06); }
#falcon-6048-video .product-video-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0; }
/* without the script there is no player to load; the frame offers YouTube instead */
#falcon-6048-video .product-video-link {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: #53d1f3;
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold); }

@media screen and (max-width: 768px) {
  #falcon-6048-video { padding: 56px 0; }
  #falcon-6048-video .product-video-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #falcon-6048-video .product-video-icon { width: 64px; height: 64px; }
    #falcon-6048-video .product-video-icon svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) {
  #falcon-6048-video .product-video-icon { transition: none; }
  #falcon-6048-video .product-video-play:hover .product-video-icon,
  #falcon-6048-video .product-video-play:focus-visible .product-video-icon { transform: translate(-50%, -50%); } }