/* 自家廣告（house ads）+ 合作營業員落地頁。
   色票一律用 main.css 的 CSS 變數，這裡不新增任何寫死的顏色。 */

/* ── 廣告卡（網站版位） ───────────────────────────── */
.house-ad {
  display: block;
  border: 1px solid var(--color-border-medium);
  border-radius: 12px;
  background: var(--color-bg-card);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.house-ad:hover { border-color: var(--color-border-focus); transform: translateY(-1px); }

.house-ad__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}
.house-ad__label b { font-weight: 600; color: var(--color-text-muted); }

.house-ad__headline {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}
.house-ad__body { margin: 0; font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); }
.house-ad__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-secondary);
}

/* ── 合作營業員頁 ─────────────────────────────────── */
.partner { max-width: 760px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-16); }

.partner-hero { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); }
.partner-hero__badge {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 2px 8px;
  border: 1px solid var(--color-border-medium);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}
.partner-hero__name { margin: 0; font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-text); }
.partner-hero__role { margin: var(--space-2) 0 0; font-size: var(--font-size-base); color: var(--color-secondary); font-weight: 600; }
.partner-hero__intro { margin: var(--space-4) 0 0; line-height: 1.9; color: var(--color-text-muted); }

.partner-card { margin-top: var(--space-8); }
.partner-card__title { margin: 0 0 var(--space-4); font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); }
.partner-card__note { margin: var(--space-3) 0 0; font-size: var(--font-size-xs); color: var(--color-text-light); }
.partner-card__warn {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border: 1px dashed var(--color-border-medium);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.partner-list { margin: 0; padding-left: 1.4rem; }
.partner-list li { line-height: 1.9; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.partner-list--fine li { font-size: var(--font-size-sm); }

.partner-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.partner-contact__row { display: grid; grid-template-columns: 24px 96px 1fr; align-items: center; gap: var(--space-3); }
.partner-contact__row .material-symbols-outlined { font-size: 20px; color: var(--color-text-light); }
.partner-contact__label { font-size: var(--font-size-sm); color: var(--color-text-light); }
.partner-contact__value { font-size: var(--font-size-base); color: var(--color-text); text-decoration: none; }
a.partner-contact__value { color: var(--color-secondary); }

.partner-faq { margin: 0; }
.partner-faq dt { font-weight: 600; color: var(--color-text); margin-top: var(--space-4); }
.partner-faq dd { margin: var(--space-2) 0 0; line-height: 1.9; color: var(--color-text-muted); }

@media (max-width: 640px) {
  .partner-contact__row { grid-template-columns: 24px 1fr; }
  .partner-contact__label { grid-column: 2; }
  .partner-contact__value { grid-column: 2; }
}

/* ETF 詳情頁的版位：夾在內容與免責聲明之間，沒有廣告時整塊不佔空間。 */
.etf-ad { margin: var(--space-8) 0 var(--space-4); }
.etf-ad:empty { display: none; }
.sidebar-widget--ad:empty { display: none; }

/* ── 圖片版位（native：圖 + 文案）────────────────────
   版面固定不隨素材變：圖用 aspect-ratio 佔位，45 秒換一張時不會把下面的內容頂來頂去
   （廣告造成的版面跳動是最惹人厭的一種）。 */
.house-ad--media { padding: 0; overflow: hidden; }
.house-ad__media {
  display: block;
  width: 100%;
  background: var(--color-bg-card);
}
.house-ad__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.house-ad__text { display: block; padding: var(--space-4); }
.house-ad__headline, .house-ad__body { display: block; }

/* 橫排與否看**版位本身**多寬，不看螢幕多寬：同一支 JS 會把同一張卡塞進
   配息地圖的滿版版位，也會塞進文章頁 300px 的側欄。用 @media 判斷的話，
   桌機的側欄會被判成「寬」而擠成兩欄。 */
[data-house-ad] { container-type: inline-size; }
@container (min-width: 520px) {
  /* 圖左文右，圖不超過四成寬，免得一則廣告吃掉整個首屏 */
  .house-ad--media { display: grid; grid-template-columns: minmax(0, 38%) 1fr; align-items: center; }
  .house-ad--media .house-ad__text { padding: var(--space-6); }
}

/* 配息地圖的版位：夾在 hero 與 sticky 控制列之間，沒廣告時不佔空間 */
.dm-ad { margin: var(--space-6) 0 0; }
.dm-ad:empty { display: none; }