/**
 * === Image Effects - Hiệu ứng hover ảnh và canonical slot containers ===
 *
 * Mô tả: CSS cho hiệu ứng "loáng kính chéo" (diagonal glass shine) khi hover,
 *        kết hợp scale subtle trên ảnh. Áp dụng cho gallery, service cards,
 *        doctor cards. Đồng thời định nghĩa canonical slot containers với
 *        đúng aspect-ratio theo spec section 3.
 *
 * Flow:
 *   1. .bvyhct-image-frame: wrapper container với overflow:hidden + isolation
 *   2. .bvyhct-image-shine: pseudo-element gradient overlay (thêm thủ công vào HTML)
 *   3. Hover: img scale 1.04 + shine sweep diagonal center→corners
 *   4. @keyframes bvyhct-diagonal-glass-shine: animate từ center ra ngoài
 *   5. prefers-reduced-motion: tắt hoàn toàn animation + transition
 *   6. Slot containers: aspect-ratio cố định, img object-fit:cover
 */

/* ==========================================================================
   Image Frame Wrapper
   ========================================================================== */

.bvyhct-image-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: block;
}

.bvyhct-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  will-change: transform;
}

/* ==========================================================================
   Glass Shine Overlay Element
   Sử dụng: <div class="bvyhct-image-shine" aria-hidden="true"></div>
   bên trong .bvyhct-image-frame
   ========================================================================== */

.bvyhct-image-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 25%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 75%
  );
  transform: translate3d(-55%, -55%, 0) rotate(18deg) scale(0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   Hover States
   ========================================================================== */

.bvyhct-image-frame:hover img {
  transform: scale(1.04);
}

.bvyhct-image-frame:hover .bvyhct-image-shine {
  animation: bvyhct-diagonal-glass-shine 900ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* ==========================================================================
   Keyframe: Loáng kính chéo từ center ra corners
   ========================================================================== */

@keyframes bvyhct-diagonal-glass-shine {
  0% {
    opacity: 0;
    transform: translate3d(-55%, -55%, 0) rotate(18deg) scale(0.2);
  }
  45% {
    opacity: 0.65;
    transform: translate3d(0, 0, 0) rotate(18deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(55%, 55%, 0) rotate(18deg) scale(1.35);
  }
}

/* ==========================================================================
   Reduced Motion — tắt hoàn toàn animation và transition
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bvyhct-image-frame img {
    transition: none;
    will-change: auto;
  }

  .bvyhct-image-frame:hover img {
    transform: none;
  }

  .bvyhct-image-frame:hover .bvyhct-image-shine {
    animation: none;
  }
}

/* ==========================================================================
   Canonical Slot Containers
   Định nghĩa aspect-ratio cho từng slot theo spec section 3
   ========================================================================== */

.img-slot-hero {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}

.img-slot-hero-wide {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.img-slot-intro {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
}

.img-slot-card {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
}

.img-slot-news-featured {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
}

.img-slot-news-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm, 4px);
}

.img-slot-gallery-featured {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
}

.img-slot-gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
}

.img-slot-doctor {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
}

.img-slot-video-poster {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
}

/* Ensure all slot images fill container properly */
.img-slot-hero img,
.img-slot-hero-wide img,
.img-slot-intro img,
.img-slot-card img,
.img-slot-news-featured img,
.img-slot-news-thumb img,
.img-slot-gallery-featured img,
.img-slot-gallery-item img,
.img-slot-doctor img,
.img-slot-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}