/*
 * 海外／跨站建案卡。
 *
 * 每一條規則都收在 .overseas-project-card 底下，不是為了美觀：房地王的
 * .ht-skeleton-card .ht-skeleton-media 有 aspect-ratio: 3/2，特異性 (0,2,0)。
 * 這些規則原本寫成 body.page-index .overseas-project-media，特異性 (0,2,1) 所以贏；
 * 搬進套件時解除頁型限定會掉到 (0,1,0)，圖片比例就被骨架那條蓋成 3/2。
 * 收在卡片底下讓它回到 (0,2,0) 並且不依賴載入順序以外的假設，
 * 同時也避免套件的類名洩漏到使用端其他地方。
 */

.overseas-project-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 0.0625rem solid #f3f4f6;
  border-radius: 1rem;
  transition: border-color .15s, box-shadow .15s;
}

.overseas-project-card:hover {
  border-color: #e5e7eb;
  box-shadow: 0 0.625rem 1.5rem rgba(17, 24, 39, .1);
}

.overseas-project-card .overseas-project-media {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
}

.overseas-project-card .overseas-project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s;
}

.overseas-project-card:hover .overseas-project-media img {
  transform: scale(1.02);
}

.overseas-project-card .overseas-project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.overseas-project-card .overseas-project-title {
  overflow: hidden;
  color: #111827;
  font-size: var(--ht-type-card-title);
  font-weight: 700;
  line-height: 1.375;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overseas-project-card .overseas-project-description {
  display: -webkit-box;
  overflow: hidden;
  color: #6b7280;
  font-size: var(--ht-text-base);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.overseas-project-card .overseas-project-category-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
}

/*
 * 標籤色刻意用 hex，不追房地王的 Tailwind 色票。房地王升到 Tailwind 4 之後
 * gray-500／gray-100 改用 OKLCH：轉成 sRGB 是 rgb(106,114,130)／rgb(243,244,246)，
 * 這裡的 #6b7280／#f3f4f6 是 rgb(107,114,128)／rgb(243,244,246)——背景完全相同，
 * 文字差 ≤2/255，實機截圖分辨不出來。2026-08-29 使用者決定維持 hex：
 * 套件不依賴任一使用端的 Tailwind 版本，比消掉那 2/255 值錢。看到這個差異不用「修」。
 */
.overseas-project-card .overseas-project-category.card-tag {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 9999px;
}

@media (max-width: 63.9375rem) {
  .overseas-project-card {
    flex: 0 0 min(78vw, 20rem);
    scroll-snap-align: start;
  }
}

.project-card-link {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.project-card-link .ht-skeleton-media img {
  backface-visibility: hidden;
  transition: opacity 280ms ease, transform 200ms ease;
}

.project-card-link .card-title {
  font-size: var(--ht-text-lg);
}

.project-card-link .project-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0.75rem;
}

/*
 * 錨點列在使用端是水平捲動容器：內容比容器寬時要能捲，比容器窄時要撐滿。
 * 這兩條原本是 Blade 上的 w-max / min-w-full，搬進套件後 Tailwind 掃不到而失效。
 *
 * 刻意不設 gap。Blade 上原本還有一個 gap-0.5，但它從來沒有生效過——房地王的
 * custom.css 有 `#anchor-nav { gap: 0.5rem !important }`，ID 選擇器加 !important
 * 一律贏過工具類。2026-08-30 一度在這裡補上 gap 並用 !important 蓋回去，實測會把
 * 正式站的 8.5px 改成 2.1px；那是新的外觀改動而不是修復，已回退。
 * 間距屬於使用端的決定，套件不搶。
 */
.anav-top-bar #anchor-nav {
  width: max-content;
  min-width: 100%;
}

.project-card-link .project-card-region,
.project-card-link .project-card-status {
  font-weight: inherit;
  white-space: nowrap;
}

.project-card-link .project-card-meta-separator {
  margin: 0 0.375rem;
  color: #d1d5db;
}

.project-card-link .project-origin-badge {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  color: #fff;
  font-size: var(--ht-text-sm);
  font-weight: 600;
  line-height: 1.2;
  background: var(--brand-600, #e4007f);
  border: 0;
  border-radius: 0 0 0.75rem 0;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .project-card-link:hover {
    border-color: #e5e7eb;
    box-shadow: 0 0.625rem 1.5rem rgba(17, 24, 39, 0.1);
  }

  .project-card-link:hover .ht-skeleton-media img {
    transform: scale(1.02);
  }
}

.project-card-link.listing-card,
.project-card-link .listing-card-media {
  min-width: 0;
}

.project-card-link.listing-card {
  max-width: 100%;
}

.project-card-link .listing-card-media img {
  width: 100%;
  max-width: 100%;
}

.project-card-link.listing-card:focus-visible {
  outline: 3px solid var(--brand-600, #ff5722);
  outline-offset: 3px;
}

@media (max-width: 63.9375rem) {
  .mobile-native-ad-recommendation .project-card-link {
    flex-direction: row;
    align-items: stretch;
  }

  .mobile-native-ad-recommendation .project-card-link > .ht-skeleton-media {
    flex: 0 0 45%;
    width: 45%;
  }

  .mobile-native-ad-recommendation .project-card-link > .ht-skeleton-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-native-ad-recommendation .project-card-link > :last-child {
    flex: 1 1 55%;
    min-width: 0;
    padding-left: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  body.page-price .mobile-native-ad .project-card-link {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 45rem) and (max-width: 63.9375rem) {
  .mobile-native-ad .project-card-link {
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card-link,
  .project-card-link img {
    transition: none;
  }
}