/* ═══════════════════════════════════════════════════════════
   resources/css/pages/index.css
   CSS เฉพาะหน้า Home (index)
   ─────────────────────────────────────────────────────────
   ใส่ CSS ที่ใช้เฉพาะหน้า Home เท่านั้นในไฟล์นี้
   ไม่ควรใส่ CSS ที่ใช้ร่วมกันหลายหน้า (ให้ใส่ใน app.css)
═══════════════════════════════════════════════════════════ */

/* ── Hero animated placeholder text (index-specific) ── */
/* CSS เพิ่มเติมสำหรับหน้า Home */

/* ═══════════════════════════════════════════════════════════
   SECTION 6: BILLBOARD (Horizontal Ad Banner 19:6)
   ─────────────────────────────────────────────────────────
   Banner โฆษณาแนวนอน อัตราส่วน 19:6 ขอบมนสไตล์ modern
   คลิกแล้วพาไปที่ LINE OA
═══════════════════════════════════════════════════════════ */
.billboard-section {
  padding: 44px 0 44px;
}

.billboard-banner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 7;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  transform: translateZ(0);
  transition: box-shadow .35s ease, transform .35s ease;
}

.billboard-banner2 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 30 / 15;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  transform: translateZ(0);
  transition: box-shadow .35s ease, transform .35s ease;
}

.billboard-banner::before {
  /* กรอบ gold บาง ๆ แบบ modern เข้ากับโทนเว็บ */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 1.5px solid rgba(215, 166, 92, 0.35);
  pointer-events: none;
  transition: border-color .35s ease;
}

.billboard-banner:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-3px);
}

.billboard-banner:hover::before {
  border-color: rgba(215, 166, 92, .75);
}

.billboard-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.billboard-banner:hover .billboard-img {
  transform: scale(1.035);
}

/* ประกาย shine วิ่งผ่านตอน hover — โทน gold ให้ความรู้สึก premium */
.billboard-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(240, 198, 117, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .75s ease;
}

.billboard-banner:hover .billboard-shine {
  left: 130%;
}

@media (max-width: 767.98px) {
  .billboard-section {
    padding: 4px 0 32px;
  }
  .billboard-banner {
    aspect-ratio: 21 / 7;
    border-radius: var(--radius-sm);
  }
}