/* Video carousel — tokens from Figma 3182:89056 (desktop) / 3182:106746 (mobile),
   cross-checked against SRS Part11 §Video Table 59 (player 812x451 / 353x196, radius 8)
   and Table 60 (description 14px/24px Medium Italic #4d4d4d centered). */

.uiw-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Horizontal track: native swipe/scroll-snap, one slide at a time. */
.uiw-video-track {
  display: flex;
  /* flex-start, NOT the default stretch: a slide whose description is empty must stay short so the
     dots sit directly below the player (SRS Table 60). widget.js then sizes the track to the
     ACTIVE slide, otherwise the track would still keep the tallest slide's height. */
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.uiw-video-track::-webkit-scrollbar { display: none; }

.uiw-video-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.uiw-video-player {
  position: relative;
  width: 812px;
  /* 16:9, not the Figma-measured 812x451 (1.8004): a YouTube embed always keeps the source video's
     own aspect ratio inside the iframe, so a container ratio off from 16:9 pillarboxes (black bars)
     the standard-16:9 YouTube content instead of filling it. */
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
  flex: none;
}

.uiw-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.uiw-video-desc {
  width: 930px;
  max-width: 100%;
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
  font-size: 14px;
  font-weight: 500;
  /* AB#132021 — default to Figma's italic baseline when content carries no explicit format of its
     own ("không chỉnh gì thì theo Figma (italic), có chỉnh trong Rich text thì theo cái đã chỉnh").
     A later explicit format from the rich text editor (e.g. <em>/<i>, or an inline font-style on
     the child element itself) still wins per normal CSS cascade — this only sets the baseline. */
  font-style: italic;
  line-height: 24px;
  letter-spacing: -0.14px;
  color: #4d4d4d;
  text-align: center;
}

/* Rich-text description: strip the editor's block margins so the measured line-height holds. */
.uiw-video-desc p,
.uiw-video-desc ul,
.uiw-video-desc ol { margin: 0; }

.uiw-video-dots {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  /* Drag/swipe navigation lives on this row (BA answer A4) — no browser text selection while dragging. */
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.uiw-video-dot,
.uiw-video-dot-active {
  height: 6px;
  border: 0;
  border-radius: 6px;
  padding: 0;
  flex: none;
  cursor: pointer;
  appearance: none;
}

.uiw-video-dot {
  width: 40px;
  background-color: #ffc58a;
}

.uiw-video-dot-active {
  width: 80px;
  background-color: #ff7300;
}

/* ---- Mobile (Figma frame 3182:106746 — 353px content inside a 393px viewport) ---- */
@media (max-width: 640px) {
  .uiw-video {
    gap: 32px;
    padding: 0 20px;
  }

  .uiw-video-slide {
    gap: 32px;
  }

  /* 16:9 (see desktop rule) — fluid width, e.g. 353 x 198.6 at a 393px viewport. */
  .uiw-video-player {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .uiw-video-desc {
    width: 100%;
  }
}

/* Transparent drag/tap surface over the player (SRS Table 58/61: drag the PLAYER AREA to change
   video). It must sit ABOVE .uiw-video-frame, which is itself absolutely positioned; the YouTube
   thumbnail and its play button stay visible through it. widget.js removes this element on a tap,
   handing the pointer back to the iframe/video for native controls. */
.uiw-video-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: grab;
  /* let a VERTICAL swipe scroll the page; the horizontal one is ours (widget.js) */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}