/**
 * page.css — 首頁版面:hero 與工作區卡片。
 *
 * Hero 的主視覺是生成圖(img/hero.jpg),貼在右側、往左自然淡出。
 * 淡出用 mask 做,不是壓一塊半透明色板 —— 硬邊會把畫面切成兩半。
 * 標題區實測亮度中位 172,黑字對比約 8:1,遠高於 WCAG 大字標準 3:1。
 */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  padding: 64px 0 56px;
  isolation: isolate;
}

/* 主視覺:靠右對齊,四周用漸層遮罩化進背景。
 *
 * ★ 右緣必須出血到視窗邊,不能停在容器邊 —— 停住的話寬螢幕上會露出
 *   一道垂直硬邊,暗色模式(screen 混合)下更明顯,整塊圖變成發亮的矩形。
 *   `calc(-50vw + 50%)` 把它從容器推到視窗邊緣。
 */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 兩側都出血到視窗邊。
   *
   * ★ 只出血右邊會讓版面往右倒:實測寬螢幕下右半亮度是左半的 3.0 倍、
   *   視覺重心跑到 63.8%,而最左側 10% 是一條亮度只有 14.5 的死暗帶
   *   —— 那是容器左邊距,圖停在容器邊就把它空在那裡。
   *   兩側都出血後,圖的淡出尾巴會繼續延伸進左邊距,補掉那條空白。
   */
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  z-index: -1;
  background: url("../img/hero.jpg") right center / cover no-repeat;
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
  /* 左側留一層極淡的餘光(0.22)墊底,不是直接透明 —— 讓亮度連續地降到邊緣,
   * 標題區則仍然夠乾淨。右緣與下緣同樣化掉,避免可見的圖片邊界。 */
  -webkit-mask-image:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.22) 14%,
      rgba(0, 0, 0, 0.30) 30%, #000 62%, #000 92%, transparent 100%),
    linear-gradient(0deg, transparent 0%, #000 26%);
  mask-image:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.22) 14%,
      rgba(0, 0, 0, 0.30) 30%, #000 62%, #000 92%, transparent 100%),
    linear-gradient(0deg, transparent 0%, #000 26%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__text {
  position: relative;
  max-width: 560px;
}

.hero__title {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

/* 強調色只給最關鍵的那幾個字 —— 眼睛會先讀到它。
 *
 * ★ 這裡刻意**不用**暖色跨到冷色的漸層。實測 #f59022(31°) 到 #3fb6c8(188°)
 *   的 sRGB 內插,中點會落在色相 72° 的橄欖綠 —— 憑空多出第三個色相,
 *   而且出現在整頁最大的字上。改成暖色系內部的漸層,全程維持在 22°~31°。
 */
.hero__accent {
  background: linear-gradient(96deg, #f59022 0%, #ea6f1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 470px;
  margin-top: 22px;
  /* color: var(--text-mid); */
  color: text;
  font-size: var(--fs-base);
}

/* ---------- 卡片列 ---------- */

.cards {
  display: grid;
  /* ★ 一行最多三張(使用者 2026-09-12 拍板),第四張落到第二行 */
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              border-color 0.22s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card-hover);
}

/* 卡片頂圖:只取生成圖的中段,主體才不會被裁掉 */
.card__art {
  width: 100%;
  height: 132px;
  object-fit: cover;
  object-position: center 55%;
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
  border-bottom: 1px solid var(--line);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 20px;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
}

.card__icon svg {
  width: 21px;
  height: 21px;
}

/* 四張卡各給一個色相,但都落在品牌的暖/冷兩端之間 */
.card--image .card__icon { background: linear-gradient(140deg, #4fc3d4, #2f97b4); }
.card--music .card__icon { background: linear-gradient(140deg, #7f8ff0, #5b6ad8); }
.card--video .card__icon { background: linear-gradient(140deg, #f5a13a, #e07716); }
.card--business .card__icon { background: linear-gradient(140deg, #3fb6c8, #1e7f92); }
.card--research .card__icon { background: linear-gradient(140deg, #f5a13a, #e07716); }
.card--docs .card__icon { background: linear-gradient(140deg, #3fb6c8, #1e7f92); }

.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card__desc {
  margin-top: 10px;
  color: var(--text-mid);
  font-size: var(--fs-md);
  line-height: 1.75;
}

/* ---------- 標籤 ---------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.tag {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

/* ---------- 卡片底列 ---------- */

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 推到底,三張卡的底列才會對齊 */
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.card__count {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.card__arrow {
  color: var(--text-dim);
  transition: transform 0.22s ease, color 0.22s ease;
}

.card:hover .card__arrow {
  transform: translateX(4px);
  color: var(--text);
}

/* ---------- 窄螢幕 ---------- */

@media (max-width: 940px) {
  .cards { grid-template-columns: 1fr; }

  .hero { min-height: 0; padding: 48px 0 44px; }

  /* 直式版面下主視覺退成整片淡背景,不與文字爭位置 */
  .hero::after {
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    opacity: calc(var(--art-opacity) * 0.4);
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 60%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 60%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .card__art { height: 148px; }
}

@media (max-width: 620px) {
  .page { padding: 0 18px 64px; }
}

/* 卡片變成連結之後,整塊都要可點,而且要有 focus 環 */
.card__link {
  display: block;
  height: 100%;
}

.card__link:focus-visible {
  outline: 2px solid var(--brand-cool);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* 還沒做的工作區:降透明度並擋掉游標,但不要隱藏 —— 使用者要知道它存在 */
.card[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}