/**
 * Insights 專用樣式（列表 archive-npinsights.php + 單篇 single-npinsights.php）。
 *
 * ⚠️ 獨立成檔的原因：main.css 正被同時進行的 Portfolio 工作編輯中，
 *    分開避免互相蓋寫；Portfolio 完成後可整段併回 main.css。
 *
 * 全部數值實測自原站（1920，圖片載入完＋進場動畫結束後量測，2026-07-16）。
 * 兩個「原站就不一致」的點，1:1 照抄、不要整理：
 *   1. 這兩頁容器是 1120 @ x400（全站其他頁是 1140 @ x390）。
 *   2. 列表卡片用 Elementor 預設藍 #4054B2、excerpt 字體 Roboto（被隱藏）——
 *      原站這頁沒套自家設計系統。
 */

/* ═══════════ 列表 /insights/ ═══════════ */

.insights-archive__inner {
	max-width: calc(1120px + 48px);   /* 內容 1120 @ x400（實測） */
	margin: 0 auto;
	padding: 214px var(--gutter) 80px;  /* 頂 214、底 80（卡片格底 1442 → 頁尾 1522，實測） */
}

.insights-archive__title { margin-bottom: 77px; }   /* h1 底 284 → 卡片格 361 */

.insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px 30px;   /* 列距 35、欄距 30（實測） */
}

/* 卡片（Elementor cards skin 的實測複刻） */
.insight-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 0 10px rgb(0 0 0 / 0.15);
}

.insight-card__thumb {
	display: block;
	aspect-ratio: 353 / 233;   /* 實測縮圖區比例 */
	overflow: hidden;
	border-radius: 3px 3px 0 0;
}
.insight-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* 原站以「填滿高度＋水平置中」呈現 = cover */
}

.insight-card__body { padding: 0 30px 10px; }

/* 縮圖底 → 標題頂 40（實測） */
.insight-card__title {
	margin-top: 40px;
	font-family: var(--serif-heavy);   /* 原站：Bold 檔 + 600 → 合成加粗 */
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;          /* 33.6px */
	color: #4054b2;            /* Elementor 預設藍（原站如此，非本站色票） */
}
.insight-card__title a { text-decoration: none; }

.insight-card__more {
	display: inline-block;
	margin: 31px 0 11px;       /* 上 31、下 11（實測） */
	align-self: flex-start;
	font-family: var(--serif-heavy);   /* 原站是 Sabon Bold 字形 */
	font-size: 14px;
	font-weight: 500;
	color: #7a7a7a;
	text-transform: uppercase;
	text-decoration: none;
}

/* 卡底 meta：作者｜日期，永遠貼底 */
.insight-card__meta {
	margin-top: auto;
	padding: 15px 30px;
	border-top: 1px solid #eaeaea;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 100;
	line-height: 1.3;          /* 15.6px */
	color: #adadad;
}
.insight-card__meta-sep { margin: 0 8px; }

/* ═══════════ 單篇 /npinsights/{slug}/ ═══════════ */

/* 標題帶：bigimage 滿版背景。從頁面頂端起算（前 111px 藏在頁首後），
   padding 276/200 → EN 兩行標題帶高 624、中文一行 576（皆與原站吻合）。 */
.insight-hero {
	position: relative;
	padding: 276px 0 200px;
	background-color: var(--navy-800);   /* 沒有圖時的保底 */
	background-size: cover;
	background-position: center;
	text-align: center;
}

/* 灰黑 overlay 壓亮圖，讓白字可讀。
   原站 Elementor：色 rgba(2,1,1,.57) × 元素 opacity .5 → 有效值烘成 0.285
   （opacity 疊乘陷阱，見 CLAUDE.md 頁尾一節）。 */
.insight-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(2 1 1 / 0.285);
}

.insight-hero__inner {
	position: relative;   /* 疊在 overlay 之上 */
	max-width: var(--wrap-box);   /* 標題帶容器是 1140（跟內容區的 1120 不同，實測） */
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.insight-hero__title {
	font-family: var(--serif);   /* 不用 h1 的 Heavy */
	font-size: 48px;
	line-height: 48px;
	font-weight: 400;   /* ⚠️ 例外：單篇標題帶實測是 400（Sabon Roman），非全站 h1 的 700 */
	color: var(--white);
}

.insight-hero__meta {
	margin-top: 30px;
	font-family: var(--sans);
	font-size: 18px;
	line-height: 22px;
	color: var(--white);
}
.insight-hero__meta-sep { margin: 0 15px; }

/* 內容區：帶底 +130，左內文 732 + 間距 50 + 右側欄 338 = 1120 */
.insight-body {
	max-width: calc(1120px + 48px);
	margin: 130px auto 0;
	padding: 0 var(--gutter) 9px;  /* 底 9（實測：原站內文底 3885 → 頁尾 3894） */
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.insight-content { flex: 0 0 732px; max-width: 732px; }

.insight-content p { margin-bottom: 20px; }   /* 實測 */

/* 內文小標（原站內容用 h3）：Sabon 25/30 w600 #092443、上 35 下 20（實測） */
.insight-content h3 {
	margin: 35px 0 20px;
	font-family: var(--serif);
	font-size: 25px;
	font-weight: 600;
	line-height: 30px;
	color: var(--navy-700);
}

/* 舊內容的 WP 對齊 class。
   ⚠️ alignright 照原站實測是 float:none 的 inline 圖（x839 y754 margin 0）——
   訪談篇的照片「靠右」是前面 float-left 60% 的 div 擠出來的，不是真的 float right。
   寫成 float:right 會貼齊右緣 1132、位置差 10px（踩過）。 */
.insight-content .alignright {
	float: none;
	display: inline;
	margin: 0;
}
.insight-content .alignleft  { float: left; margin: 0 20px 20px 0; }
.insight-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.insight-content img { height: auto; }
.insight-content::after { content: ''; display: table; clear: both; }

/* 文末作者框（實測：divider→15→小標(=section-label)→15→兩欄，總高 218） */
.insight-author__divider {
	padding: 2px 0;   /* Elementor divider 的 gap=2 */
}
.insight-author__divider::before {
	content: '';
	display: block;
	border-top: 1px solid #b7b7b7;
}

/* ⚠️ 選擇器都帶 .insight-content 前綴：作者框在內文裡，
   不加前綴會被 `.insight-content p { margin-bottom: 20px }` 蓋掉。 */
.insight-content .insight-author__heading { margin: 15px 0; }   /* .section-label 提供字體，這裡只調間距 */

.insight-author__row { display: flex; }
.insight-author__photo {
	flex: 0 0 146px;   /* 20% 欄（732 × .2），欄內 padding 10（實測） */
	padding: 10px;
}
.insight-author__image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}
.insight-author__info { flex: 1; padding: 10px; }

.insight-content .insight-author__name {
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 18px;
	color: #000;
	margin: 0 0 5px;   /* 與第一行間距 5（實測 space_between_widgets） */
}
.insight-content .insight-author__line {
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
	color: var(--navy-900);
}
.insight-content .insight-author__line--first { line-height: 1.2; }

/* LinkedIn 行：原站 FA icon 16px 黑 + ::after「Linkedin」字樣（icon 元件上距 -10 + 元件間距 5 = 淨 +5） */
.insight-content .insight-author__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 5px 0 10px;   /* 原站 icon 元件 line box 較高，補 10 讓框底對齊 3885 */
	font-family: var(--sans);
	font-size: 16px;
	color: #000;
	text-decoration: none;
}
.insight-author__linkedin svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* 側欄：跟著頁面下滑（原站用 JetTricks 複製一份 fixed；這裡用等效的 sticky）。
   實測黏住時「Recent Insights」標題在 viewport top 86 → sticky top 80 + padding 6。 */
.insight-side {
	flex: 0 0 338px;
	max-width: 338px;
	padding-top: 6px;   /* 實測：原站側欄比內文欄低 6px 起排 */
	position: sticky;
	top: 80px;
}

.insight-side__title {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 18px;
	color: var(--blue-500);
	margin-bottom: 40px;   /* 標題底 → 第一張小卡 40（實測） */
}

.insight-side__list { margin-left: 20px; }   /* 小卡比標題右縮 20（實測） */

.insight-side__item {
	padding: 10px;
	margin-bottom: 15px;
	box-shadow: 0 0 10px rgb(0 0 0 / 0.15);
	background: #fff;
}

.insight-side__item a {
	display: flex;
	align-items: flex-start;
	text-decoration: none;
}

.insight-side__thumb { flex: 0 0 85px; }
.insight-side__thumb img {
	width: 85px;
	height: 85px;
	object-fit: cover;
}

.insight-side__meta { padding-left: 25px; }

/* 原站側欄字體是 Work Sans（Google Font，僅此處使用；中文落到 --cjk 黑體） */
.insight-side__post-title {
	display: block;
	font-family: 'Work Sans', var(--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: #000;
}
.insight-side__post-date {
	display: block;
	margin-top: 22px;   /* 實測：標題與日期間距意外地大，原站如此 */
	font-family: 'Work Sans', var(--sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 22px;
	color: #000;
}

/* ═══════════ 行動版 ═══════════ */
/* ⚠️ 尚未對照原站實測，以下是暫定的合理收斂，之後要補量 */

@media (max-width: 1024px) {
	.insights-grid { grid-template-columns: repeat(2, 1fr); }
	.insight-body { flex-direction: column; }
	.insight-content { flex: none; max-width: 100%; }
	.insight-side { flex: none; max-width: 420px; }
}

@media (max-width: 767px) {
	.insights-archive__inner { padding: 160px var(--gutter) 56px; }
	.insights-archive__title { margin-bottom: 40px; }
	.insights-grid { grid-template-columns: 1fr; }
	.insight-hero { padding: 180px 0 100px; }
	.insight-hero__title { font-size: 32px; line-height: 38px; }
	.insight-body { margin-top: 60px; }
	.insight-side__list { margin-left: 0; }
}