/* =========================================================
   ICDS8 – HERO (Key Visual)
   วางต่อท้าย css/style.css
   - ใช้ class ขึ้นต้น hero-kv / kv- จึงไม่ชนกับ CSS เดิม
   - section นี้ต้องอยู่ "นอก" <div class="container"> เพื่อให้เต็มความกว้างจอ
   - ภาพวางที่ images/hero/ → bg-icds.jpg, river.png, kinaree.png

   หลักการ: hero สูงตามสัดส่วน 16:9 และทุกอย่างย่อขยายตามหน่วย --u
   ========================================================= */

.hero-kv {
  --kv-gold: #f1b94a;
  --kv-gold-line: #d9a441;

  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: #020342;
  color: #fff;
	
  margin: 0 0 36px;              /* ← ระยะห่างจาก section experience (ปรับเลขได้) */
  border-radius: 24px;  /* ← โค้งเฉพาะมุมล่าง */
 
}

.hero-kv__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* สัดส่วน 16:9 ตามภาพ key visual */
  background: #020342 url("../images/hero/bg-icds.jpg") center / cover no-repeat;
  font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}

.kv-scene {
  position: absolute;
  inset: 0;
  container-type: size;          /* ให้ลูกใช้ cqw / cqh ได้ */
  --u: min(1cqw, 1.7778cqh);     /* 1 หน่วย = 1/100 ของความกว้างภาพ 16:9 ที่พอดีกับกรอบ */
}

/* ---------- นางกินรี (อยู่หลังสายน้ำ) ---------- */
.kv-kinaree {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * -13);
  bottom: 9.5%;
  width: calc(var(--u) * 52);
  max-width: none;               /* กัน img { max-width:100% } ของเว็บมาบีบภาพ */
  height: auto;
  pointer-events: none;
  transform-origin: 55% 95%;
  animation: kv-dance 7s ease-in-out infinite;
  will-change: transform;
   filter: brightness(60%);
}
@keyframes kv-dance {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(calc(var(--u) * .6), calc(var(--u) * -1.1)) rotate(.9deg); }
  50%  { transform: translate(calc(var(--u) * 1.2), calc(var(--u) * -.4)) rotate(-.4deg); }
  75%  { transform: translate(calc(var(--u) * .4), calc(var(--u) * -1.3)) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ---------- สายน้ำ (อยู่หน้านางกินรี) : ขยับขึ้นลงช้าๆ ---------- */
.kv-river {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  height: 44.5%;
  pointer-events: none;
}
.kv-river img {
  position: absolute;
  left: -2%;
  bottom: -3%;                   /* ยื่นต่ำกว่าขอบล่าง เวลาขยับขึ้นจะไม่เห็นช่องว่าง */
  width: 104%;
  max-width: none;               /* สำคัญ: ไม่งั้นรูปถูกบีบเหลือ 100% แล้วขวามือโหว่ */
  height: 103%;
  object-fit: cover;             /* เต็มความกว้างเสมอ ไม่ยืดภาพ */
  object-position: 50% 100%;
  animation: kv-bob 5s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kv-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-2.2%); }
}

/* ---------- ข้อความ ---------- */
.kv-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--u) * 5.2);
}

.kv-logo {
  display: block;
  width: calc(var(--u) * 23);
  max-width: none;
  height: auto;
  margin: 0;
}

.kv-title {
  margin: calc(var(--u) * 1.3) 0 0;
  font-weight: 500;
  font-size: calc(var(--u) * 1.9);
  line-height: 1.18;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kv-location {
  position: relative;
  margin: calc(var(--u) * 1.1) 0 0;
  padding-top: calc(var(--u) * 1);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--u) * 1.4);
}
.kv-location::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: calc(var(--u) * 19.6);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--kv-gold-line), transparent);
}

.kv-theme { margin-top: calc(var(--u) * 3.2); }

.kv-theme-title {
  margin: 0;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: calc(var(--u) * 5.6);
  line-height: 1.05;
  background: linear-gradient(180deg, #ffd978 0%, #e8aa3a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(241,185,74,.35));
}
.kv-theme-title::after {
  content: "";
  display: block;
  height: 2px;
  width: 88%;
  margin: calc(var(--u) * .2) auto 0;
  background: linear-gradient(90deg, transparent, var(--kv-gold-line) 15%, var(--kv-gold-line) 85%, transparent);
}

.kv-theme-sub {
  margin: calc(var(--u) * 1.2) 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: calc(var(--u) * 1.95);
  line-height: 1.3;
}

.kv-meta { margin-top: calc(var(--u) * 3.4); }
.kv-date {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--u) * 1.35);
}
.kv-venue {
  margin: calc(var(--u) * .7) 0 0;
  font-weight: 400;
  font-size: calc(var(--u) * 1.12);
  line-height: 1.25;
}

/* ---------- มือถือ / แท็บเล็ตแนวตั้ง ---------- */
@media (max-width: 700px) {
  .hero-kv__stage { aspect-ratio: auto; height: max(640px, 165vw); }
  .kv-scene { container-type: normal; --u: 1vw; }

  .kv-content { padding: calc(var(--u) * 8) calc(var(--u) * 6) 0; justify-content: flex-start; }
  .kv-logo { width: calc(var(--u) * 54); }
  .kv-title { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 4.4); }
  .kv-location { margin-top: calc(var(--u) * 3); padding-top: calc(var(--u) * 3); font-size: calc(var(--u) * 3.6); }
  .kv-location::before { width: calc(var(--u) * 56); }
  .kv-theme { margin-top: calc(var(--u) * 7); }
  .kv-theme-title { font-size: calc(var(--u) * 11); }
  .kv-theme-sub { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 4.4); }
  .kv-meta { margin-top: calc(var(--u) * 7); }
  .kv-date { font-size: calc(var(--u) * 3.8); }
  .kv-venue { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 3.2); }

  .kv-river { height: 26%; }
  .kv-river img { width: 200%; left: -50%; }
  .kv-kinaree {
    width: calc(var(--u) * 95); left: calc(var(--u) * -24); bottom: 12%;
    opacity: .5;                  /* จางลงให้ตัวหนังสืออ่านง่าย */
  }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหวในระบบ */
@media (prefers-reduced-motion: reduce) {
  .kv-kinaree, .kv-river img { animation: none !important; }
}