/* ==========================================================
   1. Page Banner (通用於內頁頂部形象圖)
   ========================================================== */

.page-banner {
  width: 100%;
  position: relative;
  /* Navbar 避讓邏輯 */
  margin-top: var(--nav-height-mobile, 45px);
  display: block;
}

/* Tablet */
@media (min-width: 768px) {
  .page-banner {
    margin-top: var(--nav-height-tablet, 55px);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .page-banner {
    margin-top: var(--nav-height-desktop, 79px);
  }
}

.page-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================
   2. 全域容器 (RWD Width Control)
   依據 variables.css 定義的寬度
   ========================================================== */
.x720-container {
  /* 核心：讀取 CSS 變數 */
  width: var(--container-fluid-width, 90%);

  /* 置中 */
  margin-left: auto;
  margin-right: auto;

  /* 避免貼邊 */
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================================
   相關連結頁面專屬樣式 (link.css)
   ========================================================================== */

.section-links {
  padding: 40px 0 80px;
}

/* 1. 網格系統 (RWD 排版)
  ========================================================================== */
.links-grid {
  display: grid;
  /* 預設 (768px 以下): 一排 2 個 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

/* Tablet / 小筆電 (769px ~ 1080px): 一排 3 個 */
@media (min-width: 769px) {
  .links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop (1081px ~ 1920px): 一排 4 個 */
@media (min-width: 1081px) {
  .links-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 2. 正方形卡片設計 (Glassmorphism 玻璃擬態)
  ========================================================================== */
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* 強制卡片為 1:1 完美正方形 */

  overflow: hidden; /* 🔥 修正 1：防止內部文字撐開卡片邊界 */

  text-decoration: none;
  padding: 24px 16px;
  background: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.25)
  );
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* ... 邊緣微亮光暈與 hover 特效維持原樣 ... */
.link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.1)
  );
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: screen;
}

.link-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color, rgba(255, 255, 255, 0.9));
}

/* 3. 圖片與文字佔比分配
  ========================================================================== */
.link-card-img-wrapper {
  flex: 1;
  width: 100%;
  max-height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  z-index: 1;
}

.link-card-img {
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
}

.link-card-body {
  padding: 0;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.link-card-title {
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
  color: var(--secondary-color-1);
  line-height: 1.4;
  word-break: break-word;

  /* 🔥 修正 2：強制標題高度為 2 行 (line-height 1.4 * 2 = 2.8em) */
  /* 這樣不管字是一行還兩行，下方區塊高度永遠固定，圖片就不會跟著忽高忽低 */
  height: 2.8em;

  /* 防呆機制：如果標題太長，最多顯示兩行，超過自動加上 ... */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}