/**
 * assets/css/hero.css
 * CSS riêng cho sections/01-hero.php, bao gồm cả Hero Gallery (coverflow 5 ảnh).
 * Dùng biến từ base.css, KHÔNG tự định nghĩa lại token.
 *
 * CẬP NHẬT: gallery card đổi từ vuông (1:1) sang ngang (16:10), tràn full-width.
 * Text hero tăng size trên desktop. Áp dụng grid-max-width 1440px.
 */

/* ================= 01 - HERO ================= */
.section-hero {
  position: relative;
  background-color: var(--cream);
  /* Chừa chỗ cho gallery tràn xuống dưới hero-visual */
  padding-bottom: clamp(180px, 28vw, 360px);
}

.hero-visual {
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 520px;
}

/* Lớp video nền thật - full-bleed. object-fit thay cho background-size/position vì
   giờ là <video>, không còn là div nữa. pointer-events:none để KHÔNG thể click/chạm
   vào video (không hiện tay pointer, không thể bấm dừng - giống status "trang trí"
   thuần túy, khác hẳn video ở section Results là có UI play/pause/volume riêng). */
.hero-image-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background-color: var(
    --champagne
  ); /* màu chờ trong lúc video chưa kịp buffer xong */
  pointer-events: none;
}

/* Overlay đen 35% */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
}

/* Gradient fade xuống cream */
.hero-fade-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(247, 242, 231, 0) 0%,
    var(--cream) 100%
  );
}

/* Khối text + CTA - canh giữa vùng nav↔gallery */
.hero-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 28%;
  z-index: 3;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 90px 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
}

.hero-eyebrow {
  color: rgba(247, 242, 231, 0.8);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
}

.hero-title {
  color: var(--cream);
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1.05;
  margin-bottom: 8px;
}

/* Nút CTA - kính mờ sáng */
/* Mặc định: hiệu ứng kính mờ (glass), chữ + mũi tên màu trắng, KHÔNG có vòng tròn
   nền sau mũi tên. Bấm/hover/focus vào mới đảo ngược sang nền trắng đặc (xem bên dưới).
   LƯU Ý: mọi selector ở đây đều có tiền tố "#hero" để CHẮC CHẮN thắng .btn-book-solid
   dùng chung của site (0,0,1,0) - nếu chỉ để ".hero-btn" trơn thì specificity bằng nhau
   (0,0,1,0) và bên nào load SAU trong CSS sẽ thắng, dễ bị lật kèo như vừa gặp. */
#hero .hero-btn {
  font-size: clamp(16px, 1.7vw, 20px);
  padding: 8px 8px 8px 34px;
  gap: 18px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--cream);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Sau khi bấm/hover/focus (đảo ngược): nền trắng đặc, chữ + icon chuyển tối - giống
   .btn-book-solid mặc định của site. :active phủ cả lúc đang giữ chuột/chạm (mobile);
   :hover và :focus-visible giữ hiệu ứng này lại sau khi đã tương tác xong. */
#hero .hero-btn:hover,
#hero .hero-btn:focus,
#hero .hero-btn:focus-visible,
#hero .hero-btn:active {
  background: var(--cream);
  border-color: transparent;
  color: var(--green-deep);
  box-shadow: none;
  outline: none;
}

/* Focus ring riêng cho điều hướng bằng bàn phím (Tab) - không hiện khi bấm chuột/chạm */
#hero .hero-btn:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

/* Link phụ "See all treatments" - nhẹ nhàng hơn hẳn CTA chính, chỉ là text
   link có gạch chân, không cạnh tranh thị giác với nút Book chính. */
#hero .hero-link-all {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 500;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(247, 242, 231, 0.5);
  transition:
    color 0.25s ease,
    text-decoration-color 0.25s ease;
}

#hero .hero-link-all:hover,
#hero .hero-link-all:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

#hero .hero-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Mặc định: không có nền tròn, chỉ icon mũi tên trắng */
  background: transparent;
  color: var(--cream);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

/* Khi nút đảo sang trắng đặc, mũi tên đổi thành vòng tròn tối để vẫn nổi rõ trên nền sáng */
#hero .hero-btn:hover .hero-btn-arrow,
#hero .hero-btn:focus .hero-btn-arrow,
#hero .hero-btn:focus-visible .hero-btn-arrow,
#hero .hero-btn:active .hero-btn-arrow {
  background: var(--green-deep);
  color: var(--cream);
}

/* ================= HERO GALLERY (coverflow, ảnh NGANG 16:10) =================
   Gallery tràn full-width: 2 ảnh bên cạnh kéo dài tới mép màn hình.
   Ảnh giữa to, rõ nét; 2 ảnh bên thu nhỏ, nghiêng, lộ nửa. */

.hero-gallery {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(50%);
  z-index: 2;
  /* KHÔNG padding ngang - gallery tràn full-width tới mép */
}

.hero-gallery-viewport {
  position: relative;
  width: 100%;
  /* Ảnh giữa chiếm 72% width, tỉ lệ 16:10 → chiều cao = 72% * (10/16) = 45% */
  padding-bottom: 45%;
}

.hero-gallery-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 72%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--champagne);
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 34px rgba(15, 42, 33, 0.3);
  transition:
    transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.7s ease;
  transform: translate(-50%, 0) translate(var(--x, 0%), var(--y, 0%))
    scale(var(--s, 1)) rotate(var(--r, 0deg));
  opacity: var(--o, 0);
  z-index: var(--z, 1);
}

/* --- Desktop ≥1024px --- */
@media (min-width: 1024px) {
  .section-hero {
    padding-bottom: clamp(200px, 18vw, 320px);
  }

  .hero-visual {
    height: 82vh;
  }

  .hero-image-bg {
    object-position: center 30%;
  }

  .hero-container {
    bottom: 24%;
    padding-top: 40px;
  }

  .hero-content {
    max-width: 800px;
  }

  /* Gallery desktop: ảnh giữa hẹp hơn tương đối, nhưng vẫn ngang (16:10) */
  .hero-gallery-viewport {
    padding-bottom: 22%;
  }

  .hero-gallery-item {
    width: 38%;
    box-shadow: 0 24px 48px rgba(15, 42, 33, 0.3);
  }
}

/* --- Màn rất lớn ≥1440px: gallery tràn viền rõ hơn --- */
@media (min-width: 1440px) {
  .hero-gallery-item {
    width: 36%;
  }

  .hero-gallery-viewport {
    padding-bottom: 20%;
  }
}