/**
 * page-about.css — 關於鼎大頁（page-about.php）
 *
 * 依 DESIGN.md：亮帶↔深帶交替、hairline + 留白分層（不用陰影，唯一例外案例圖）、
 * 銅棕 --copper 僅出現在 eyebrow/年份/CTA/hover（面積 <5%）、圓角 0–6px、1440 max。
 * CSS 變數（--ink/--paper/--metal/--steel/--copper 等）由 style.css :root 提供。
 */

/* ---------- 版型基底 ---------- */
.about-page .container{
	max-width: var(--container, 1440px);
	margin-inline: auto;
	padding-inline: var(--gutter, 32px);
}
.about-page .section{ padding-block: var(--sp-section, 96px); }
.about-page .section-light{ background: var(--paper); color: var(--ink); }
.about-page .section-white{ background: var(--white); color: var(--ink); }
.about-page .section-dark{ background: var(--steel); color: var(--ink-on-dark); }
.about-page img{ max-width: 100%; height: auto; }

/* eyebrow：英數小標，唯一銅棕文字用途之一 */
.about-page .about-hero__eyebrow,
.about-intro__eyebrow,
.about-timeline__eyebrow,
.about-capabilities__eyebrow,
.about-gallery__eyebrow,
.about-contact__eyebrow{
	font: 600 .8125rem/1.3 var(--font-en, "Inter", sans-serif);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--copper);
	margin: 0 0 var(--sp-sm, 12px);
}
/* 深底上的 eyebrow：銅棕在深灰藍上仍可讀，保留 accent */
.about-page .on-dark.about-timeline__eyebrow,
.about-page .on-dark.about-contact__eyebrow{ color: var(--copper); }

/* ---------- 1. 品牌開場 Hero（深底 + 主圖 + 35% 遮罩） ---------- */
.about-hero{
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	background: var(--ink);
	color: var(--ink-on-dark);
	overflow: hidden;
}
.about-hero__bg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.about-hero__scrim{
	position: absolute;
	inset: 0;
	background: var(--scrim-gradient, linear-gradient(180deg, rgba(28,30,32,.15) 0%, rgba(28,30,32,.55) 100%));
}
.about-hero__inner{
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--sp-section, 96px);
}
.about-hero__title{
	font: 700 clamp(2rem, 5vw, 3.25rem)/1.18 var(--font-zh, "Noto Sans TC", sans-serif);
	letter-spacing: 0;
	color: var(--ink-on-dark);
	margin: 0;
	max-width: 20ch;
}
.about-hero__tagline{
	font: 400 clamp(1rem, 2vw, 1.125rem)/1.7 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink-on-dark);
	margin: var(--sp-md, 16px) 0 0;
	max-width: 40ch;
}

/* ---------- 2. 公司簡介（亮帶，兩欄 lead / body） ---------- */
.about-intro__grid{
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: var(--sp-xxl, 48px);
	align-items: start;
}
.about-intro__title{
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
	margin: 0;
}
.about-intro__body{ max-width: 62ch; }
.about-intro__p{
	font: 400 1.0625rem/1.8 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
	margin: 0 0 var(--sp-lg, 24px);
}
.about-intro__p:last-child{ margin-bottom: 0; }

/* 後台 the_content() 回退容器（後台有填內容時） */
.about-editor__body{
	max-width: 72ch;
	font: 400 1.0625rem/1.8 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
}
.about-editor__body p{ margin: 0 0 var(--sp-lg, 24px); }
.about-editor__body img{ border-radius: var(--radius, 4px); }

/* ---------- 3. 公司歷程 時間軸（深帶） ---------- */
.about-timeline__title{
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink-on-dark);
	margin: 0 0 var(--sp-xxl, 48px);
}
.about-timeline__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.about-timeline__item{
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--sp-xl, 32px);
	padding-block: var(--sp-lg, 24px);
	border-top: 1px solid var(--hairline-on-dark, rgba(244,242,237,.16));
}
.about-timeline__item:last-child{
	border-bottom: 1px solid var(--hairline-on-dark, rgba(244,242,237,.16));
}
.about-timeline__year{
	font: 700 clamp(1.75rem, 4vw, 2.5rem)/1 var(--font-en, "Inter", sans-serif);
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
	color: var(--copper);
}
.about-timeline__label{
	font: 600 1.125rem/1.4 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink-on-dark);
	margin: 0 0 var(--sp-xs, 8px);
}
.about-timeline__text{
	font: 400 1rem/1.7 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal-on-dark, #A9AEB2);
	margin: 0;
	max-width: 52ch;
}

/* ---------- 4. 核心能力（亮帶，卡片網格 hairline 分層） ---------- */
.about-capabilities__title{
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
	margin: 0 0 var(--sp-xxl, 48px);
}
.about-capabilities__grid{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-lg, 24px);
}
.about-cap{
	background: var(--white);
	border: 1px solid var(--hairline, rgba(109,115,120,.28));
	border-radius: var(--radius, 4px);
	padding: var(--sp-lg, 24px);
	transition: border-color var(--dur, 280ms) var(--ease-out, cubic-bezier(.16,.84,.44,1));
}
.about-cap:hover{ border-color: var(--copper); }
.about-cap__title{
	font: 600 1.125rem/1.4 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
	margin: 0 0 var(--sp-xs, 8px);
}
.about-cap__text{
	font: 400 1rem/1.7 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
	margin: 0;
}

/* ---------- 5. 真實照片區（純白帶；唯一允許陰影＝案例圖） ---------- */
.about-gallery__title{
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink);
	margin: 0 0 var(--sp-xl, 32px);
}
.about-gallery__figure{
	margin: 0;
	border-radius: var(--radius, 4px);
	overflow: hidden;
	box-shadow: 0 5px 30px rgba(28,30,32,.18); /* DESIGN.md 唯一允許陰影：案例圖 */
}
.about-gallery__figure img{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

/* ---------- 6. 公司資訊（深帶，資訊 + CTA） ---------- */
.about-contact__wrap{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-xxl, 48px);
	align-items: center;
}
.about-contact__title{
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink-on-dark);
	margin: 0 0 var(--sp-lg, 24px);
}
.about-contact__list{ margin: 0; }
.about-contact__row{
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--sp-md, 16px);
	padding-block: var(--sp-sm, 12px);
	border-top: 1px solid var(--hairline-on-dark, rgba(244,242,237,.16));
}
.about-contact__row:last-child{
	border-bottom: 1px solid var(--hairline-on-dark, rgba(244,242,237,.16));
}
.about-contact__row dt{
	font: 600 .9375rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--metal-on-dark, #A9AEB2);
	margin: 0;
}
.about-contact__row dd{
	font: 400 1rem/1.6 var(--font-zh, "Noto Sans TC", sans-serif);
	color: var(--ink-on-dark);
	margin: 0;
	word-break: break-word;
}
.about-contact__row dd a{
	color: var(--ink-on-dark);
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.16,.84,.44,1));
}
.about-contact__row dd a:hover{ color: var(--copper); }

/* CTA 主鈕（唯一 copper 填色） */
.about-contact__btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--copper);
	color: var(--white);
	font: 600 1rem/1 var(--font-zh, "Noto Sans TC", sans-serif);
	letter-spacing: .4px;
	border-radius: var(--radius, 4px);
	padding: 14px 28px;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.16,.84,.44,1));
}
.about-contact__btn:hover{ background: var(--copper-hover, rgba(154,116,77,.85)); }

/* ---------- 響應式：平板 ≤1023 ---------- */
@media (max-width: 1023px){
	.about-intro__grid{ grid-template-columns: 1fr; gap: var(--sp-lg, 24px); }
	.about-capabilities__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 響應式：手機 <768（單欄、不橫捲、section 縮 56） ---------- */
@media (max-width: 767px){
	.about-page .section{ padding-block: var(--sp-section-sm, 56px); }
	.about-hero{ min-height: 48vh; }
	.about-intro__p,
	.about-editor__body{ font-size: 1rem; }
	.about-timeline__item{
		grid-template-columns: 1fr;
		gap: var(--sp-sm, 12px);
	}
	.about-capabilities__grid{ grid-template-columns: 1fr; }
	.about-contact__wrap{
		grid-template-columns: 1fr;
		gap: var(--sp-xl, 32px);
		align-items: start;
	}
	.about-contact__row{ grid-template-columns: 88px 1fr; }
	.about-contact__btn{ width: 100%; justify-content: center; }
}