@charset "utf-8";
/* CSS Document */

/* Slider 外框容器 */
.grid-slider-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

/* 內層滾動軌道 */
.grid-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

/* 滑鼠懸停時暫停輪播 */
.grid-track:hover {
  animation-play-state: paused;
}

/* CSS Grid 相簿清單 */
.grid-track ul {
  display: grid;
  grid-template-rows: repeat(2, 240px); /* 2 列高度 */
  grid-auto-flow: column;               /* 水平向右延伸 */
  grid-auto-columns: 240px;            /* 單格寬度 */
  gap: 12px;
  list-style: none;
  padding-right: 12px;
}

/* 每 5 張循環：第 1 張佔 2x2 (4格) */
.grid-track ul li:nth-child(5n + 1) {
  grid-row: span 2;
  grid-column: span 2;
}

/* 相片卡片容器 */
.grid-track ul li {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.overlay {
  width: 100%;
  height: 100%;
  position: relative;
}

.overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 圖片縮放也加入平滑過渡 */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------
   Overlay 半透明顏色層 (透過 ::before 處理 Fade In/Out)
------------------------------------------- */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1; /* 預設顯示顏色 */
  /* 核心：設定 0.5 秒柔和淡入淡出 */
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

/* 5 種色票分配到 ::before */
.grid-track ul li:nth-child(5n + 1) .overlay::before {
  background-color: rgba(189, 153, 222, 0.6); /* #bd99de */
}
.grid-track ul li:nth-child(5n + 2) .overlay::before {
  background-color: rgba(63, 165, 200, 0.6);  /* #3fa5c8 */
}
.grid-track ul li:nth-child(5n + 3) .overlay::before {
  background-color: rgba(206, 172, 183, 0.6); /* #ceacb7 */
}
.grid-track ul li:nth-child(5n + 4) .overlay::before {
  background-color: rgba(232, 194, 145, 0.6); /* #e8c291 */
}
.grid-track ul li:nth-child(5n + 5) .overlay::before {
  background-color: rgba(135, 177, 135, 0.6); /* #87b187 */
}

/* -------------------------------------------
   文字層樣式
------------------------------------------- */
.overlay span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; line-height:20px;
  font-size: 15px; padding:0 10px; text-shadow: 0 0 5px rgba(0,0,0,.6);
  font-weight: bold;
  text-transform: uppercase; text-align: center;
  
  /* 文字過渡效果：柔和淡出與微移 */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* -------------------------------------------
   Hover 狀態 (Fade Out 效果)
------------------------------------------- */
/* 1. 圖片微放大 */
.overlay:hover img {
  transform: scale(1.08);
}

/* 2. 半透明顏色漸變 Fade Out 消失 */
.overlay:hover::before {
  opacity: 0;
}

/* 3. （可選）文字在 Hover 時若想保留可移除這行，若想一併淡出隱藏可保留 */
.overlay:hover span {
  opacity: 0;
  transform: translateY(-5px);
}

/* 無縫循環滾動動畫 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


@media screen and (max-width: 960px){
	.grid-track ul {
  grid-template-rows: repeat(2, 150px); /* 2 列高度 */
  grid-auto-columns: 150px;            /* 單格寬度 */
  gap: 12px;
  padding-right: 12px;
}
}