/* ═══════════════════════════════════════════════════
   DWR Banner Manager — Frontend Slider CSS
   ═══════════════════════════════════════════════════ */

/* ─── Slider Container ─── */
.dwr-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  border-radius: 0;
  background: #000;
}

/* ─── Track (holds all slides) ─── */
.dwr-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ─── Individual Slide ─── */
.dwr-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  z-index: 0;
}

.dwr-slide-active {
  position: relative;
  opacity: 1;
  z-index: 1;
}

.dwr-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* ─── Image ─── */
/* <picture> (ใช้เมื่อมีรูปมือถือแยก) ต้องเป็น block เต็มพื้นที่ ไม่งั้น .dwr-slide-img อิงขนาดผิด */
.dwr-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
.dwr-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Video ─── */
/* ═══ WD-587 — สไลด์วิดีโอ: สัดส่วนเดิม ไม่ครอป อยู่กลางแบนเนอร์ ═══
   กรอบ (.dwr-slide-video) = เต็มความสูงกล่องแบนเนอร์ ซึ่งชุดบังคับสัดส่วนตาม "ขนาดภาพแนะนำ" ไว้แล้ว (WD-199)
   → สไลด์วิดีโอสูงเท่าสไลด์รูป แบนเนอร์ไม่กระโดดตอนหมุน
   (เดิม: วิดีโอ 16:9 เต็มความกว้าง สูงกว่ากรอบ 24:7 เลยโดนตัดบน/ล่าง + ขยาย 1.3 เท่าเพื่อซ่อนชื่อ YouTube)
   ข้างในเป็นกล่อง 16:9 วางกลาง สูงเท่าที่เหลือหลังหักช่องว่าง · รอบ ๆ เป็นภาพพื้นหลังที่เลือกไว้ */
.dwr-slide-video {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* aspect-ratio ต่อชุดถูกพ่นมาใน <style> ของแบนเนอร์ — ใช้เฉพาะตอนกล่องแม่สูงแบบ auto */
  padding: var(--dwr-video-space, clamp(12px, 2.5vw, 32px));  /* ช่องว่างรอบวิดีโอ · ว่าง = ย่อตามจอ สูงสุด 32px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fff;                         /* ไม่เลือกภาพพื้นหลัง = พื้นขาว */
  background-image: var(--dwr-video-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  container-type: size;                           /* ให้กล่องข้างในรู้ขนาดที่เหลือจริง (cqw/cqh) */
}

/* กล่องวิดีโอ 16:9 — เบราว์เซอร์เก่า (ไม่มี container units): สูงเต็มที่เหลือ กว้างตามสัดส่วน */
.dwr-slide-video__box {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--dwr-video-radius, 16px);
  overflow: hidden;
  flex: 0 0 auto;
}
/* เบราว์เซอร์ปัจจุบัน: เลือกเอาอันที่เล็กกว่าระหว่าง "เต็มความกว้าง" กับ "สูงเต็ม × 16/9"
   → ไม่ล้นทั้งแนวตั้งแนวนอน และคงสัดส่วน 16:9 เป๊ะทุกขนาดจอ */
@supports (width: 1cqw) {
  .dwr-slide-video__box {
    height: auto;
    width: min(100cqw, calc(100cqh * 16 / 9));
  }
}

.dwr-slide-video iframe,
.dwr-slide-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* ปิดเสียง (ไม่มีแถบควบคุม): บล็อกการคลิก/hover ที่ตัวเล่น
     → คลิกทะลุไปที่ <a> ครอบเพื่อ redirect และไม่โชว์ controls ตอน hover */
  pointer-events: none;
}

/* ไม่ crop แล้ว (WD-587 ขอสัดส่วนเดิม) · ยังซ่อนไว้จนกว่า frontend.js จะเติม .dwr-video-ready
   (สถานะ PLAYING + overlay จางหมด) กันปุ่มกลางจอช่วงเริ่มเล่นไม่ให้โผล่ */
.dwr-slide-video iframe {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.dwr-slide-video iframe.dwr-video-ready {
  opacity: 1;
}

/* WD-579: เปิดเสียง = ต้องกดแถบควบคุมได้ จึงคืน pointer-events ให้ iframe */
.dwr-slide-video--sound iframe,
.dwr-slide-video--sound video {
  pointer-events: auto;
}

/* ─── Arrows ─── */
.dwr-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  opacity: 0;
}

.dwr-slider:hover .dwr-slider-arrow {
  opacity: 1;
}

.dwr-slider-prev {
  left: 16px;
}

.dwr-slider-next {
  right: 16px;
}

.dwr-slider-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-50%) scale(1.1);
}

/* ─── Dots ─── */
.dwr-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.dwr-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}

.dwr-slider-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.dwr-dot-active {
  background: #fff;
  width: 28px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .dwr-slider-arrow {
    width: 36px;
    height: 36px;
    font-size: 16px;
    opacity: 1;
  }
  .dwr-slider-prev { left: 8px; }
  .dwr-slider-next { right: 8px; }

  .dwr-slider-dot {
    width: 10px;
    height: 10px;
  }
  .dwr-slider-dots {
    bottom: 10px;
    gap: 6px;
  }
}

/* ═══ WD-320 — ข้อความทับแบนเนอร์ (กล่องคนละชุดสำหรับเดสก์ท็อป/มือถือ) ═══ */
.dwr-slide-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* 1cqw = 1% ของความกว้างกรอบ → ตัวอักษรย่อขยายพร้อมภาพเอง ไม่ต้องเดา breakpoint */
  container-type: inline-size;
}
.dwr-ovb {
  position: absolute;
  left: var(--b-x, 50%);
  top: var(--b-y, 50%);
  width: var(--b-w, 60%);
  transform: translate(-50%, -50%);
  color: var(--b-color, #fff);
  line-height: 1.35;
  pointer-events: auto;
  font-size: 28px;                          /* fallback เบราว์เซอร์ที่ไม่มี cqw */
  font-size: calc(var(--b-s, 2.7) * 1cqw);
}
.dwr-ovb--left   { text-align: left; }
.dwr-ovb--center { text-align: center; }
.dwr-ovb--right  { text-align: right; }

/* พื้นหลังเกาะเฉพาะตัวอักษร ไม่ใช่เต็มความกว้างกล่อง — กล่องกว้างไว้คุมจุดตัดบรรทัด */
.dwr-ovb__in { display: inline-block; }
.dwr-ovb.has-bg .dwr-ovb__in {
  background: var(--b-bg);
  padding: .35em .7em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* เลือกชุดตามความกว้างจอ — ชุดที่ไม่ใช้ซ่อนไว้ ไม่ได้ลบทิ้งจาก DOM */
.dwr-ovb--m { display: none; }
@media (max-width: 767px) {
  .dwr-ovb--d { display: none; }
  .dwr-ovb--m { display: block; }
}