/* 為固定的 Header 預留空間 - 使用 CSS 變數動態調整 */
/* 注意：案例頁面使用 flex 佈局，需要特殊處理 */
html {
  scroll-behavior: smooth;
}

/* 覆蓋 styles.css 的 body padding-top */
body {
  padding-top: 0 !important;
}

/* 主要內容區域 - 預留 header 空間 */
#gallery-container {
  scroll-snap-type: y mandatory; /* 強制垂直方向的滾動吸附 */
  scroll-padding-top: var(--header-height, 120px);
  padding-top: 40px; 
}

/* 在最後一張圖片後面增加一個半屏高的空白區域，避免直接碰到 footer */
#gallery-container::after {
  content: '';
  display: block;
  height: 10vh; /* 縮小與 footer 之間的間隔 */
  width: 100%;
}

/* 單張圖片的區塊 */
.gallery-item {
  height: 100vh; /* 每張圖片區塊都佔滿一個螢幕的高度 */
  width: 100%;
  scroll-snap-align: start; /* 將此元素的頂部與容器對齊 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 確保圖片完整顯示且不變形 */
  transition: transform 0.3s ease, z-index 0s 0.3s; /* 動畫效果 */
  position: relative;
}

/* 當圖片處於 hover 狀態時 */
.gallery-item img.hovered {
  position: fixed; /* 提升到 fixed 定位以覆蓋整個畫面 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100; /* 確保在最上層 */
  background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
  padding: 2rem; /* 讓圖片與螢幕邊緣有點間距 */
  box-sizing: border-box;
  transform: scale(1); /* 放大到 1 */
  transition: transform 0.3s ease, background-color 0.3s ease; /* 移入時的動畫 */
}

/* 手機版輪播圖片水平置中對齊 */
@media (max-width: 767px) {
  /* 確保輪播區塊本身是置中容器 */
  #gallery-container .carousel-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* 確保輪播圖片在容器中水平置中，且不會被拉伸 */
  #gallery-container .carousel-slide img {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 確保燈箱圖片水平置中對齊 */
  #lightbox {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #lightbox-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  #lightbox-prev,
  #lightbox-next {
    /* 確保按鈕在最上層 */
    z-index: 20;
    /* 放大按鈕並增加點擊區域 */
    transform: translateY(-50%) scale(1.2);
    padding: 1rem; /* 增加內邊距，擴大點擊範圍 */
    background-color: rgba(0, 0, 0, 0.5); /* 加深背景色 */
  }

  #lightbox-prev {
    left: 0.5rem; /* 調整與螢幕邊緣的距離 */
  }

  #lightbox-next {
    right: 0.5rem; /* 調整與螢幕邊緣的距離 */
  }

  #lightbox-prev svg,
  #lightbox-next svg {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
  }
}