/* =============================================================================
   components/footer.css — 站台共用深色漸層頁尾
   -----------------------------------------------------------------------------
   從 components.css §7B 拆出。HTML 唯一來源在 includes/footer.php。
   漸層為頁尾專用，依指示不進 token（全站不再重用）。
   載入順序：tokens.css → components.css → navigation.css → footer.css → page.css
   ============================================================================= */

.ds-footer {
  /* 漸層為頁尾專用，依指示不進 token（全站不再重用） */
  background: linear-gradient(10deg, #001038 10%, #005487 70%, #00b8d7 150%);
  border-top: var(--ds-border-width) solid var(--ds-color-on-dark-hairline);
  padding-block: var(--ds-space-3xl) var(--ds-space-2xl);
  color: var(--ds-color-on-dark-muted);
}

.ds-footer__inner {
  width: 100%;
  max-width: var(--ds-footer-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter, var(--ds-container-padding-desktop));
}

.ds-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-xl);
  padding-bottom: var(--ds-space-2xl);
  border-bottom: var(--ds-border-width) solid var(--ds-color-on-dark-hairline);
}

/* 品牌＋三欄網站地圖＋按鈕區同一列；手機改為單欄 */
@media (width > 768px) {
  .ds-footer__top {
    /* 網站地圖三欄與按鈕區依內容寬度，其餘空間給品牌區 */
    grid-template-columns: minmax(0, 1fr) repeat(3, auto) auto;
    gap: var(--ds-space-xl) clamp(var(--ds-space-md), 2.4vw, var(--ds-space-xl));
  }
}

/* 桌機：網站地圖三欄之間 72px */
@media (width > 1024px) {
  .ds-footer__top { column-gap: var(--ds-space-3xl); }
}
.ds-footer__logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.ds-footer__eq {
  margin-top: var(--ds-space-md);
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.ds-footer__address {
  margin-top: var(--ds-space-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-body-sm-line);
}

.ds-footer__col-title {
  margin-bottom: var(--ds-space-sm);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}

.ds-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-footer__link {
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-caption-line);
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-footer__link:hover,
.ds-footer__link.is-hover { color: var(--ds-color-on-dark); }

.ds-footer__link:focus-visible {
  outline: none;
  border-radius: var(--ds-radius-sm);
  box-shadow: 0 0 0 2px var(--ds-color-on-dark);
}

.ds-footer__actions { display: flex; flex-direction: column; }

.ds-footer__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  max-width: 14rem;
}

.ds-footer__cta {
  width: 100%;
  justify-content: space-between;
}

.ds-footer__cta .ds-icon { transition: transform var(--ds-duration-fast) var(--ds-ease); }
.ds-footer__cta:hover .ds-icon { transform: translateX(2px); }

.ds-footer__social {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: auto;
  padding-top: var(--ds-space-xl);
}

.ds-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-avatar-size);
  height: var(--ds-avatar-size);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-on-dark-hairline);
  color: var(--ds-color-on-dark-muted);
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-footer__social-link:hover,
.ds-footer__social-link.is-hover {
  background: var(--ds-color-on-dark-hairline);
  color: var(--ds-color-on-dark);
}

.ds-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-sm);
  padding-top: var(--ds-space-lg);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}