/* === ATLAS GLOVE VIDEO ===
   Used by sections/landing-glove-video.liquid.
   Forensic clone of sunday.ai's "Skill Capture Glove in use" video
   card that follows the centered paragraph.
   Source measurements: /tmp/sunday-glove-video/measurements.json

   Layout:
     mobile  <1024px : section is plain block, video card 100% wide
     desktop >=1024px: section is a 12-col grid (24px gap matching
                       sunday's gap-6), video card spans col 4–9
                       (cols start:4 span:6 of 12) → ~684px wide
                       and horizontally centered. */

.ac-glove-video-section{
  width:100%;
  padding:0 16px 64px;
  background:#ffffff;
}

@media (min-width:1024px){
  .ac-glove-video-section{
    padding:0 24px 96px;
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:24px;
  }
  .ac-glove-video{
    grid-column:4 / span 6;
  }
}

/* === VIDEO CARD ===
   16/9 aspect, 12px radius, black bg, overflow:hidden, GPU
   compositing fix (isolation + translateZ + webkit-mask) matching
   the rest of the Atlas video cards to avoid Safari's rounded-
   corner + <video> paint bug.

   Cursor:pointer because the whole card is clickable to toggle
   play/pause via atlas-glove-video.min.js. The card is the click
   target (rather than just the small caption icon) so the user
   gets a generous hit area — matches sunday's UX where any tap
   on the video card toggles playback. */
.ac-glove-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

.ac-glove-video:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* Tint removed — was rgba(0,0,0,0.15) (sunday's bg-black/15
   scrim) but it was reading as visibly darker than sunday's
   actual rendered card. Without the tint the white overlay text
   still has enough contrast because the video has dark areas
   throughout. If glare on the badges/caption ever becomes an
   issue we can reintroduce a lighter scrim (0.05–0.08). */

.ac-glove-video__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* === OVERLAY ===
   Sits above the video, inset 12px from card edges (p-3 in sunday).
   flex-col + justify-between puts badges row at top, caption row at
   bottom. pointer-events:none so the underlying video stays
   interactive (paused/played by the browser autoplay loop). */
.ac-glove-video__overlay{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px;
  pointer-events:none;
  color:#fff;
}

/* Top-left badges row.
   gap 4px between badges (sunday's gap-1). */
.ac-glove-video__badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}

/* Per-badge style — exact sunday tokens:
   mono 12px / lh 16 / ls +0.025em / 400, white text,
   1px border rgba(255,255,255,0.2), radius 4px,
   padding 3px 5px, transparent bg, no-wrap. */
.ac-glove-video__badge{
  display:inline-block;
  padding:3px 5px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:4px;
  background:transparent;
  font-family:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:400;
  line-height:16px;
  letter-spacing:0.025em;
  color:#fff;
  white-space:nowrap;
}

/* Bottom-left caption with play icon.
   Geist Mono 14px / lh 1.2 / ls +0.025em / 400, white.
   Icon-text gap 8px matches sunday's gap-2 in the row. */
.ac-glove-video__caption{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:0.025em;
  color:#fff;
}

.ac-glove-video__caption-icon{
  flex:none;
  width:14px;
  height:14px;
  fill:currentColor;
  display:block;
}

/* Two SVGs in the caption: play (default) and pause (when video
   is playing). The JS toggles a `data-playing` attribute on the
   card element; CSS hides whichever one is the wrong state. */
.ac-glove-video__caption-icon--pause{display:none}
.ac-glove-video[data-playing] .ac-glove-video__caption-icon--play{display:none}
.ac-glove-video[data-playing] .ac-glove-video__caption-icon--pause{display:block}

@media (prefers-reduced-motion:reduce){
  .ac-glove-video{cursor:default}
}