/* ===============================
   Sub Page Overrides
   - Hero 高度 50vh
   - 背景疊色可視需要微調
================================== */

body.is-sub #heroSection.sub-hero {
  position: relative;
  min-height: 50vh;
  /* ← 子頁 Hero 僅佔 50% 視窗高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0f14;
  /* 可換品牌色/圖片（下方 overlay 會柔化） */
  color: #fff;
  overflow: hidden;
}

body.is-sub #heroSection.sub-hero .overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 400px at 50% -20%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55));
  pointer-events: none;
}



/* 若要改成背景圖（選用）
body.is-sub #heroSection.sub-hero{
  background: url("../img/about-hero.jpg") center/cover no-repeat;
}
*/

/* 讓內文區塊與 Hero 有呼吸感 */
body.is-sub main>section:first-of-type+section {
  scroll-margin-top: 80px;
}

/* 子頁中的卡片 hover 微動態（與首頁一致或略為收斂） */
body.is-sub .card:hover {
  transform: translateY(-2px);
}




/* 疊色：視需要可調透明度/顏色 */
body.is-sub #heroSection.sub-hero .overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 400px at 50% -20%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55));
  z-index: 1;
  pointer-events: none;
}

/* 文字內容 */
body.is-sub #heroSection.sub-hero .content {
  position: relative;
  z-index: 2;
  padding: 24px;
  padding-top: 90px;
}



/* 使用者偏好降低動態時停用位移 */
@media (prefers-reduced-motion: reduce) {
  body.is-sub #heroSection.sub-hero .hero-bg {
    transform: none !important;
  }
}


/* 背景圖：寬度 100%，維持比例不變形，超出上下置中裁切 */
body.is-sub #heroSection.sub-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  /* 讓它撐滿 hero 的 50vh 容器 */
  object-fit: cover;
  /* 不變形：維持比例；必要時裁切 */
  object-position: 50% 50%;
  /* 上下置中（垂直水平皆置中） */
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, calc(-12% + var(--py, 0px)), 0);
  /* parallax 位移 */
  pointer-events: none;
}

section#aboutInfo {
  background-color: #0f1216;
  background: radial-gradient(1200px 800px at 50% -20%, rgba(15, 18, 22, .80), transparent 98%),
    linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(15, 18, 22, 1));
}

section#aboutInfo .card{
  background: rgba(255, 255, 255, 0);
  color: white;
  

}




@media (max-width: 767.98px) {
  body.is-sub #heroSection.sub-hero {
    min-height: 25vh;

  }

  body.is-sub #heroSection.sub-hero .hero-bg {

    transform: translate3d(0, calc(0% + var(--py, 0px)), 0);

  }
}


.mb-2{
  color: #ed481b;
}


/* ===== Cases Page：背景與卡片 ===== */

section#casesInfo {
  background-color: #0f1216;
  background:
    radial-gradient(1200px 800px at 50% -20%, rgba(15, 18, 22, .80), transparent 98%),
    linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(15, 18, 22, 1));
}

section#casesInfo .card {
  background: rgba(255, 255, 255, 0);
  color: #fff;
}

/* ==== Cases：日系柔和版—淡色光軌 + 慢速漂移 ==== */

#casesInfo {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #0c0d11; /* 深灰藍底，日系常用 */
}

#casesInfo h3, #casesInfo p{
  color: white !important;
}

#casesInfo .card{
  background: none;
}



/* 內容置於最上層 */
#casesInfo > * {
  position: relative;
  z-index: 2;
}

/* 慢速、柔和、呼吸感漂移 */
@keyframes casesSoftDrift {
  0% {
    transform: translate3d(-14%, -12%, 0);
  }
  50% {
    transform: translate3d(14%, 10%, 0);
  }
  100% {
    transform: translate3d(-14%, -12%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #casesInfo::before {
    animation: none;
    transform: none;
  }
}

/* ===== 照片牆：不變形、上下左右置中 ===== */

/* .case-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 1.5rem;
}

.case-item {
  position: relative;
  aspect-ratio: 4 / 3;     
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;    
  object-position: center; 
  display: block;
} */

/* ===== Cases：活潑拼貼風照片牆 ===== */

/* 用 dense grid + 不同 span 做拼貼 */
.case-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 6 欄寬，方便拼貼 */
  grid-auto-rows: 100px;                    /* 基礎 row 高度，越小越精細 */
  gap: 10px;
  margin-top: 1rem;
  grid-auto-flow: dense;                   /* 讓空隙自動填滿 */
}

/* 基本卡片樣式 */
.case-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 圖不變形、置中裁切 */
.case-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 維持比例，必要時裁切 */
  object-position: center;  /* 上下左右置中裁切 */
  display: block;
}

/* 🔸 拼貼規則：調整每張圖的大小（可依喜好微調） */
.case-item:nth-child(1) {
  grid-column: span 3;
  grid-row: span 4;
}

.case-item:nth-child(2) {
  grid-column: span 3;
  grid-row: span 2;
}

.case-item:nth-child(3) {
  grid-column: span 2;
  grid-row: span 3;
}

.case-item:nth-child(4) {
  grid-column: span 2;
  grid-row: span 2;
}

.case-item:nth-child(5) {
  grid-column: span 2;
  grid-row: span 3;
}

.case-item:nth-child(6) {
  grid-column: span 3;
  grid-row: span 3;
}
.case-item:nth-child(7) {
  grid-column: span 3;
  grid-row: span 4;
}

.case-item:nth-child(8) {
  grid-column: span 3;
  grid-row: span 2;
}

.case-item:nth-child(9) {
  grid-column: span 2;
  grid-row: span 3;
}

.case-item:nth-child(10) {
  grid-column: span 2;
  grid-row: span 2;
}

.case-item:nth-child(11) {
  grid-column: span 2;
  grid-row: span 3;
}

.case-item:nth-child(12) {
  grid-column: span 3;
  grid-row: span 3;
}
.case-item:nth-child(13) {
  grid-column: span 3;
  grid-row: span 2;
}

.case-item:nth-child(14) {
  grid-column: span 2;
  grid-row: span 3;
}

.case-item:nth-child(15) {
  grid-column: span 2;
  grid-row: span 2;
}
.case-item:nth-child(16) {
  grid-column: span 2;
  grid-row: span 2;
}

.case-item:nth-child(17) {
  grid-column: span 2;
  grid-row: span 3;
}

.case-item:nth-child(18) {
  grid-column: span 3;
  grid-row: span 3;
}
.case-item:nth-child(19) {
  grid-column: span 3;
  grid-row: span 4;
}

.case-item:nth-child(20) {
  grid-column: span 3;
  grid-row: span 2;
}


/* caption 保持原來樣式即可 */
.case-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .4rem .75rem .55rem;
  font-size: .8rem;
  letter-spacing: .04em;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
  color: #fff;
  text-align: left;
}

/* 手機版：改回比較整齊的 2 欄，不要太花 */
@media (max-width: 767.98px) {
  .case-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }

  .case-item,
  .case-item:nth-child(n) {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .case-item {
    border-radius: 12px;
  }
}

/* 照片上小標題（可選，不想要可以拿掉） */
.case-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .4rem .75rem .55rem;
  font-size: .8rem;
  letter-spacing: .04em;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
  color: #fff;
  text-align: left;
}

/* 手機版：間距微縮 */
@media (max-width: 767.98px) {
  .case-gallery {
    gap: 12px;
  }
  .case-item {
    border-radius: 12px;
  }
}