/**
 * theme-components.css — 介面美化層:互動元件(作品集)
 *
 * 疊在 style.css 之後載入,只做視覺調校,不更動原模板 style.css。
 *
 * v1.2.0 / 2026-09-03
 */

/* 設計變數定義於 theme.css,本檔須在其後載入。 */

/*--------------------------------------------------------------
# 1. 作品集
   篩選列改成膠囊按鈕;卡片改成由下往上的深色漸層遮罩,
   取代原本整塊白遮罩 + 內縮直角框。
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 5px 8px;
  margin-bottom: 34px;
}

.portfolio #portfolio-flters li {
  padding: 7px 15px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border-radius: 999px;
  margin-bottom: 0;
}

.portfolio #portfolio-flters li:hover { color: var(--brand); }

.portfolio #portfolio-flters li.filter-active {
  color: var(--paper);
  background: var(--brand);
}

.portfolio .portfolio-wrap {
  background: var(--paper-2);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(31, 41, 51, 0.07);
}

/* 15 張作品圖比例各異,卡片高度參差。統一裁切比例後成為整齊網格。 */
.portfolio .portfolio-wrap img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.portfolio .portfolio-wrap:hover img { transform: scale(1.05); }

/* 圖與 hover 遮罩收在 .portfolio-media 裡,下方的說明列才不會被遮罩蓋住 */
.portfolio .portfolio-media {
  position: relative;
  overflow: hidden;
}

/* 遮罩:滿版深色漸層。原本掛在 .portfolio-wrap 上會連說明列一起蓋,改掛 media */
.portfolio .portfolio-wrap::before { display: none; }

.portfolio .portfolio-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background: linear-gradient(
    to top,
    rgba(15, 26, 38, 0.90) 0%,
    rgba(15, 26, 38, 0.55) 55%,
    rgba(15, 26, 38, 0.15) 100%
  );
}

.portfolio .portfolio-wrap:hover .portfolio-media::before { opacity: 1; }

/* 原本的內縮直角裝飾框不再需要 */
.portfolio .portfolio-wrap .portfolio-info::before,
.portfolio .portfolio-wrap .portfolio-info::after { display: none; }

/* 標題與分類已移到常駐的說明列,遮罩裡不必再顯示一次 */
.portfolio .portfolio-wrap .portfolio-info h4,
.portfolio .portfolio-wrap .portfolio-info p { display: none; }

/* 遮罩只剩放大 / 外部連結鈕,置中 */
.portfolio .portfolio-wrap .portfolio-info {
  justify-content: center;
  align-items: center;
  padding: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  margin-top: 0;
  text-align: center;
}

/* 圖示置中後正好落在游標下,原本的藍色 hover 在深色遮罩上看不清 ——
   改成一律白字、用透明度做 hover 回饋。 */
.portfolio .portfolio-wrap .portfolio-links a {
  font-size: 22px;
  color: var(--paper);
  opacity: 0.8;
  margin: 0 6px;
}

.portfolio .portfolio-wrap .portfolio-links a:hover { opacity: 1; }

/*--------------------------------------------------------------
# 2. 作品集說明列
   圖片下方常駐一行標題 + 一行敘述。文字落在卡片底色上,
   不隨 hover 出現 —— 不滑鼠也看得到每個專案是什麼。
--------------------------------------------------------------*/
.portfolio .portfolio-caption {
  padding: 14px 18px 16px 18px;
}

.portfolio .portfolio-caption h5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 5px 0;
}

.portfolio .portfolio-caption p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/*--------------------------------------------------------------
# 3. 響應式(元件)
--------------------------------------------------------------*/
@media (max-width: 768px) {
  .portfolio .portfolio-caption { padding: 12px 14px 14px 14px; }
  .portfolio .portfolio-caption h5 { font-size: 14px; }
  .portfolio .portfolio-caption p { font-size: 12.5px; }
}