/* 自家廣告（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; }

/* ── 內文中段版位(web_article)────────────────────────
   橫幅式:圖滿版在上,下面只留**一行**來源標示 + CTA。
   這格放的是券商橫幅,文字已經燒在圖裡 —— 再把 headline / body 印一次
   只會把版面拉長、同一句話講兩遍。那兩個欄位留著是給側欄(web_inline)
   的直式卡用的,所以是在這裡隱藏,不是從資料刪掉。 */
.house-ad-inline { margin: var(--space-8) 0; }
.house-ad-inline:empty { display: none; }   /* 沒廣告就整塊收起,不留空白框 */

/* 🚨 整張卡是一個 <a>,坐在 .article-prose 裡,會被
   `.article-prose a:not(.btn) { text-decoration: underline }` 掃到 ——
   那條的權重是 (0,2,1),所以選擇器**至少要三個 class** 才壓得過去。
   曾經用 `.house-ad-inline .house-ad *`(0,2,0)失敗過,別再寫回去。 */
.article-prose .house-ad-inline .house-ad,
.article-prose .house-ad-inline .house-ad * {
  text-decoration: none;
}

.house-ad-inline .house-ad { padding: 0; overflow: hidden; }
.house-ad-inline .house-ad--media { display: block; }

.house-ad-inline .house-ad__media { display: block; width: 100%; }
.house-ad-inline .house-ad__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* 圖已經說完了:標題與內文在這個版位不出現 */
.house-ad-inline .house-ad__headline,
.house-ad-inline .house-ad__body { display: none; }

/* 剩下的壓成一行:左邊來源標示、右邊 CTA */
.house-ad-inline .house-ad__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.house-ad-inline .house-ad__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}
.house-ad-inline .house-ad__label b {
  font-weight: 700;
  color: var(--color-text-muted);
}
/* 唯一要保留底線的一行:它是要被點的。權重得再高一級,壓過上面那條 reset。 */
.article-prose .house-ad-inline .house-ad .house-ad__cta {
  margin-top: 0;
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}