/**
 * 工程實績列表頁樣式 — archive-company_announce。
 * 依 DESIGN.md：暖白 canvas、hairline 分層、銅棕稀有 accent、無陰影（案例圖除外）、
 * 亮帶↔深帶節奏、作品卡 4:3 圖 + h4 標題、chip pill 篩選器。
 *
 * 依賴 :root token（由 style.css 提供）。若 style.css 未載入這些變數，以下為安全 fallback。
 */
:root {
	--ink: #1C1E20;
	--paper: #F4F2ED;
	--metal: #6D7378;
	--steel: #323A40;
	--copper: #9A744D;
	--white: #FFFFFF;
	--copper-hover: rgba(154, 116, 77, .85);
	--ink-on-dark: #F4F2ED;
	--metal-on-dark: #A9AEB2;
	--hairline: rgba(109, 115, 120, .28);
	--hairline-strong: rgba(109, 115, 120, .5);
	--scrim-gradient: linear-gradient(180deg, rgba(28, 30, 32, .15) 0%, rgba(28, 30, 32, .55) 100%);
	--font-zh: "Noto Sans TC", sans-serif;
	--font-en: "Inter", "Manrope", sans-serif;
	--radius: 4px;
	--sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px;
	--sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px;
	--sp-section: 96px; --sp-section-sm: 56px;
	--container: 1440px; --gutter: 32px;
	--ease-out: cubic-bezier(.16, .84, .44, 1);
	--dur-fast: 180ms; --dur: 280ms; --dur-slow: 400ms;
}

/* ── 版型骨架（頁面局部，避免依賴全站 .container 已定義） ── */
.archive-cases .container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.archive-cases .section {
	padding-block: var(--sp-section);
}
.archive-cases img {
	max-width: 100%;
	height: auto;
}

/* 螢幕閱讀器專用（dt 語意保留，視覺不佔位） */
.cases-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ── 頁首亮帶（暖白） ── */
.archive-hero {
	background: var(--paper);
	padding-block: var(--sp-xxl) var(--sp-xl);
	border-bottom: 1px solid var(--hairline);
}
.archive-hero__crumbs {
	font: 400 .8125rem/1.5 var(--font-zh);
	color: var(--metal);
	letter-spacing: .2px;
	display: flex; gap: var(--sp-xs); align-items: center;
}
.archive-hero__crumbs a { color: var(--metal); text-decoration: none; }
.archive-hero__crumbs a:hover { color: var(--copper); }
.archive-hero__crumbs span[aria-current] { color: var(--ink); }
.archive-hero__eyebrow {
	font: 600 .8125rem/1.3 var(--font-en);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--copper);
	margin-top: var(--sp-lg);
}
.archive-hero__title {
	font: 700 clamp(1.75rem, 4vw, 2.5rem)/1.2 var(--font-zh);
	color: var(--ink);
	margin-top: var(--sp-xs);
	letter-spacing: 0;
}
.archive-hero__lead {
	font: 400 1.125rem/1.7 var(--font-zh);
	color: var(--ink);
	max-width: 52ch;
	margin-top: var(--sp-md);
}

/* ── 篩選器帶（暖白，接頁首後不換底：以 hairline 與留白分層） ── */
.archive-filters {
	background: var(--paper);
	padding-block: var(--sp-xl);
}
.cases-filter {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}
.cases-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-sm);
}
.cases-filter__label {
	font: 600 .8125rem/1.3 var(--font-en);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--metal);
	flex: 0 0 auto;
	min-width: 5.5em;
}
.cases-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
}

/* chip（依 DESIGN.md §6.5） */
.chip {
	background: transparent;
	color: var(--metal);
	border: 1px solid var(--hairline-strong);
	border-radius: 9999px;
	padding: 8px 18px;
	font: 400 .9375rem/1 var(--font-zh);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.chip[aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* ── 案例網格帶（純白，與暖白拉出微差；作品優先） ── */
.archive-grid {
	background: var(--white);
	padding-block: var(--sp-xxl) var(--sp-section);
}
.cases-count {
	font: 400 .9375rem/1.6 var(--font-zh);
	color: var(--metal);
	margin-bottom: var(--sp-lg);
}
.cases-count [data-count-value] {
	color: var(--copper);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.grid-projects {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-lg);
}
@media (max-width: 1023px) {
	.grid-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.grid-projects { grid-template-columns: 1fr; }
}

/* 作品卡（DESIGN.md §6.3） */
.project-card {
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease-out);
}
.project-card:hover { border-color: var(--copper); }
.project-card.is-hidden { display: none; }

.project-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.project-card__media {
	overflow: hidden;
	background: var(--paper);
}
.ratio-card { aspect-ratio: 4 / 3; }
.project-card__img,
.project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--dur-slow) var(--ease-out);
}
.project-card:hover .project-card__img,
.project-card:hover .project-card__media img { transform: scale(1.04); }

/* 無圖降級：不破版，中性佔位 */
.project-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(135deg,
			var(--paper) 0, var(--paper) 12px,
			var(--white) 12px, var(--white) 24px);
}

.project-card__body {
	padding: var(--sp-lg);
}
.project-card__title {
	font: 600 1.125rem/1.4 var(--font-zh);
	color: var(--ink);
	margin: 0;
}

.project-card__meta {
	margin: var(--sp-sm) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-xxs);
}
.project-card__row {
	display: block;
}
.project-card__row dd {
	margin: 0;
	font: 400 .9375rem/1.5 var(--font-zh);
	color: var(--metal);
}
.project-card__row--loc dd { color: var(--metal); }

.project-card__tags {
	list-style: none;
	margin: var(--sp-md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
}
.project-card__tag {
	font: 400 .75rem/1.3 var(--font-en);
	letter-spacing: .4px;
	color: var(--metal);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: 3px 10px;
}

.project-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sp-md);
	font: 600 .8125rem/1.3 var(--font-en);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--copper);
}
.project-card__more::after {
	content: "›";
	transition: transform var(--dur-fast) var(--ease-out);
}
.project-card:hover .project-card__more::after { transform: translateX(4px); }

/* 篩選無結果 / 空集合 */
.cases-empty {
	font: 400 1.0625rem/1.7 var(--font-zh);
	color: var(--metal);
	padding-block: var(--sp-xl);
	text-align: center;
}
.cases-empty[hidden] { display: none; }

/* ── 進場動效（淡入 + 位移，respect reduced-motion） ── */
@keyframes cases-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
.archive-cases .reveal {
	animation: cases-fade-up var(--dur) var(--ease-out) both;
}
.archive-cases .reveal.d1 { animation-delay: 60ms; }
.archive-cases .reveal.d2 { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
	.archive-cases .reveal { animation: none; }
	.project-card:hover .project-card__img,
	.project-card:hover .project-card__media img { transform: none; }
}

/* ── 手機 section 留白收斂 ── */
@media (max-width: 767px) {
	.archive-cases .section { padding-block: var(--sp-section-sm); }
	.archive-grid { padding-block: var(--sp-xl) var(--sp-section-sm); }
	.archive-hero__lead { font-size: 1rem; }
	.cases-filter__label { min-width: 100%; }
}