/* ==============================
   why-section
   ============================== */

/* 區塊基本 */
.why-section {
  padding: clamp(40px, 6vw, 80px) 0;
}
.why-title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(22px, 5.5vw, 28px);
  margin-bottom: 12px;
}

/* 卡片：mobile-first 單欄 */
.why-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  isolation: isolate; /* 疊層更安全 */
}
/* 圖片 */
.why-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.35s ease;
}
/* 暗化疊層 */
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35)
  );
  transition: opacity 0.35s ease;
}
/* 中央白字 */
.why-label {
  position: absolute;
  inset: auto 12px 50% 12px;
  translate: 0 50%;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: clamp(
    1.25rem,
    4.6vw,
    1.6rem
  ); /* 原本最大約1.25rem → 提升到1.6rem */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); /* 提高對比 */
  letter-spacing: 0.8px;
}

/* 桌機 hover（只在可 hover 裝置） */
@media (hover: hover) and (pointer: fine) {
  .why-card:hover img {
    transform: scale(1.06);
  }
  .why-card:hover::before {
    opacity: 0.28;
  }
}

/* 鍵盤/可及性 */
.why-card:focus-visible {
  outline: 3px solid #83c6bf;
  outline-offset: 3px;
}

/* 平板/桌機：用 Bootstrap 欄位就會 2/3 欄，這裡只微調間距 */
@media (min-width: 768px) {
  .why-title {
    margin-bottom: 16px;
  }
}

/* ===== 桌機 hover 整合效果：圖片＋文字＋遮罩 同步動畫 ===== */
@media (hover: hover) and (pointer: fine) {
  .why-card {
    transition: transform 0.35s ease;
  }

  .why-card img {
    transition: transform 0.35s ease;
  }

  .why-card::before {
    transition: opacity 0.35s ease;
  }

  .why-card .why-label {
    transition: transform 0.35s ease, filter 0.35s ease;
  }

  .why-card:hover {
    transform: translateY(-3px); /* 整張卡片輕輕浮起 */
  }

  .why-card:hover img {
    transform: scale(1.06); /* 圖片微放大 */
  }

  .why-card:hover::before {
    opacity: 0.25; /* 背景稍微變亮一點 */
  }

  .why-card:hover .why-label {
    transform: scale(1.06); /* 文字同步微放大 */
    filter: brightness(1.15); /* 文字微亮化 */
  }
}