/* ==========================================================================
   Alvinist Block Theme — 設計 tokens（提案 1a 雜誌多欄）＋版面樣式
   深淺雙主題：預設深色，「開燈」切換淺色（記憶於 localStorage）
   ========================================================================== */

/* ---- Tokens：Dark（網站預設） ---- */
:root {
	--al-bg: oklch(0.16 0.01 250);
	--al-card: oklch(0.185 0.008 250);
	--al-surface: oklch(0.22 0.01 250);
	--al-text: oklch(0.95 0.005 250);
	--al-muted: oklch(0.62 0.02 250);
	--al-border: oklch(0.28 0.01 250);
	--al-accent: #e8ff00;
	--al-accent-text: #e8ff00;
	--al-on-accent: oklch(0.16 0.01 250);
	--al-link: #e8ff00;
	--al-link-hover: #f4ff5e;
	--al-pill-bg: oklch(0.16 0.01 250 / 0.55);
	--al-cat-review: #34d97b;
	--al-cat-phone: #a78bfa;
	--al-cat-news: #66aaff;
	--al-cat-deal: #ff8a3d;
	--al-cat-ai: #ff4fd8;
	--al-img-ph-a: oklch(0.235 0.012 250);
	--al-img-ph-b: oklch(0.185 0.008 250);
	--al-img-ph-c: oklch(0.27 0.014 250);
	--al-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
	color-scheme: dark;
}

/* ---- Tokens：Light（開燈後） ---- */
html[data-theme="light"] {
	--al-bg: oklch(0.97 0.004 250);
	--al-card: oklch(0.99 0.003 250);
	--al-surface: oklch(0.95 0.004 250);
	--al-text: oklch(0.18 0.01 250);
	--al-muted: oklch(0.46 0.02 250);
	--al-border: oklch(0.9 0.005 250);
	--al-accent: oklch(0.85 0.19 112);
	--al-accent-text: oklch(0.52 0.11 112);
	--al-on-accent: oklch(0.22 0.03 112);
	--al-link: oklch(0.5 0.11 112);
	--al-link-hover: oklch(0.6 0.13 112);
	--al-pill-bg: oklch(1 0 0 / 0.85);
	--al-cat-review: #0f9d4f;
	--al-cat-phone: #7040e0;
	--al-cat-news: #1e6fd9;
	--al-cat-deal: #e05d00;
	--al-cat-ai: #c0129e;
	--al-img-ph-a: oklch(0.93 0.006 250);
	--al-img-ph-b: oklch(0.965 0.004 250);
	--al-img-ph-c: oklch(0.905 0.009 250);
	--al-shadow: 0 12px 32px oklch(0.16 0.01 250 / 0.1);
	color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; }
body { transition: background-color 0.25s ease, color 0.25s ease; }

/* ==========================================================================
   頁首
   ========================================================================== */
.al-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--al-card);
	border-bottom: 1px solid var(--al-border);
	backdrop-filter: blur(8px);
}
/* 頁首/頁尾內容列左右留白（避免貼齊視窗邊緣） */
.al-header .wp-block-group.alignwide,
.al-footer .wp-block-group.alignwide {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
/* 品牌：Logo（CSS mask，顏色跟隨主題）＋ ALVINIST ＋ 艾爾科技 */
.al-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--al-text);
}
.al-logo {
	display: inline-block;
	width: 28px;
	height: 22.6px;
	background-color: var(--al-text);
	-webkit-mask-image: url("data:image/png;base64,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");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url("data:image/png;base64,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");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	flex-shrink: 0;
}
.al-brand .al-brand__en {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 900;
	letter-spacing: 0.08em;
	font-size: 19px;
	color: var(--al-text);
}
.al-brand .al-brand__zh {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 900;
	font-size: 16px;
	letter-spacing: 0.14em;
	color: var(--al-text);
	border-left: 2px solid var(--al-border);
	padding-left: 10px;
	white-space: nowrap;
}
/* 主導覽：動態 pattern（分類＋頁面），桌機水平、行動版橫向滑動 */
.al-nav {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.al-nav::-webkit-scrollbar { display: none; }
.al-nav a {
	font-size: 14px;
	font-weight: 500;
	color: var(--al-muted);
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
	transition: color 0.15s, background-color 0.15s;
}
.al-nav a:hover {
	color: var(--al-accent-text);
	background: var(--al-surface);
}
/* 漢堡鈕（僅行動版顯示） */
.al-nav-toggle {
	display: none;
	appearance: none;
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--al-border);
	background: var(--al-surface);
	color: var(--al-text);
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* 面板內搜尋框：桌機隱藏（桌機用 header 原本的搜尋框） */
.al-nav__search { display: none; }
@media (max-width: 781px) {
	.al-nav-toggle { display: inline-flex; }
	/* 行動版 header 不放搜尋框，收進選單面板 */
	.al-header .wp-block-search { display: none; }
	.al-nav__search {
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--al-surface);
		border: 1px solid var(--al-border);
		border-radius: 999px;
		padding: 10px 16px;
		margin: 12px 0 6px;
		color: var(--al-muted);
		position: relative;
	}
	.al-nav__search input {
		flex: 1;
		border: 0;
		background: transparent;
		color: var(--al-text);
		font-size: 15px;
		font-family: inherit;
		outline: none;
		min-width: 0;
	}
	/* 行動版：選單收進下拉面板（The Verge 式） */
	.al-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		flex-direction: column;
		gap: 0;
		overflow: visible;
		background: var(--al-card);
		border-bottom: 1px solid var(--al-border);
		box-shadow: var(--al-shadow);
		padding: 6px 20px 18px;
	}
	.al-nav.is-open { display: flex; }
	.al-nav a {
		font-size: 19px;
		font-weight: 700;
		color: var(--al-text);
		padding: 15px 4px;
		border-radius: 0;
		border-bottom: 1px solid var(--al-border);
	}
	.al-nav a:last-child { border-bottom: 0; }
	.al-nav a:hover { background: transparent; }
}

/* 搜尋（Phase ③ 換即時搜尋） */
.al-header .wp-block-search__inside-wrapper {
	background: var(--al-surface);
	border: 1px solid var(--al-border);
	border-radius: 999px;
	padding: 2px 6px 2px 14px;
	max-width: 220px;
}
.al-header .wp-block-search__input {
	background: transparent;
	border: 0;
	font-size: 13px;
	color: var(--al-text);
}
.al-header .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--al-muted);
	padding: 4px;
	margin: 0;
}

/* 深淺切換：燈泡按鈕（深色＝燈關著，點擊「開燈」→ 淺色） */
.al-theme-toggle {
	appearance: none;
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--al-border);
	background: var(--al-surface);
	position: relative;
	flex-shrink: 0;
	transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.al-theme-toggle::after {
	content: "";
	position: absolute;
	inset: 7px;
	background: var(--al-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-3.9 0-7 3.1-7 7 0 2.4 1.2 4.5 3 5.7V18c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7zm2 12.2-.9.6V17h-2.2v-1.2l-.9-.6C8.7 14.3 8 12.7 8 11c0-2.8 1.8-5 4-5s4 2.2 4 5c0 1.7-.7 3.3-2 4.2zM10 20h4v1c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1v-1z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-3.9 0-7 3.1-7 7 0 2.4 1.2 4.5 3 5.7V18c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7zm2 12.2-.9.6V17h-2.2v-1.2l-.9-.6C8.7 14.3 8 12.7 8 11c0-2.8 1.8-5 4-5s4 2.2 4 5c0 1.7-.7 3.3-2 4.2zM10 20h4v1c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1v-1z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color 0.2s;
}
.al-theme-toggle:hover::after { background: var(--al-text); }
html[data-theme="light"] .al-theme-toggle {
	border-color: #f0c040;
	background: #fff7e0;
	box-shadow: 0 0 14px rgba(255, 200, 40, 0.45);
}
html[data-theme="light"] .al-theme-toggle::after {
	background: #d97706;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-3.3 0-6 2.7-6 6 0 2 1 3.8 2.6 4.9l.4.3V18c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1.8l.4-.3C17 14.8 18 13 18 11c0-3.3-2.7-6-6-6zM10 20h4v1c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1v-1z'/%3E%3Cpath d='M12 1v2M4.9 3.9l1.4 1.4M1 11h2M21 11h2M17.7 5.3l1.4-1.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-3.3 0-6 2.7-6 6 0 2 1 3.8 2.6 4.9l.4.3V18c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1.8l.4-.3C17 14.8 18 13 18 11c0-3.3-2.7-6-6-6zM10 20h4v1c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1v-1z'/%3E%3Cpath d='M12 1v2M4.9 3.9l1.4 1.4M1 11h2M21 11h2M17.7 5.3l1.4-1.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.al-theme-toggle:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 2px; }

/* ==========================================================================
   分類 pill（覆蓋於圖上或列表中）
   ========================================================================== */
.al-cat-pill a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	height: 18px; /* 固定高度：🔥 emoji 與純文字項目完全等高對齊 */
	color: var(--al-accent-text) !important;
	text-decoration: none;
	white-space: nowrap;
}
.al-cat-pill a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
	flex-shrink: 0;
}
/* post-terms 外層 flex（block-level），仍吃版面置中約束（文章頁頂部） */
/* 站上分類名稱已自帶 🔥，不重複添加 */
.al-cat-pill a.al-cat--deal::before { content: none; }
/* 多分類：隱藏逗號分隔，等高 flex 置中（🔥 emoji 與圓點完全對齊，不會上下飄） */
.al-cat-pill .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.al-cat-pill,
span.al-cat-pill {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}
/* 分類專屬色（functions.php 依分類名稱加上 al-cat--* class） */
.al-cat-pill a.al-cat--review { color: var(--al-cat-review) !important; }
.al-cat-pill a.al-cat--phone { color: var(--al-cat-phone) !important; }
.al-cat-pill a.al-cat--news { color: var(--al-cat-news) !important; }
.al-cat-pill a.al-cat--deal { color: var(--al-cat-deal) !important; }
.al-cat-pill a.al-cat--ai { color: var(--al-cat-ai) !important; }
/* 限時優惠不顯示圓點：站上分類名稱已自帶 🔥（content:none 規則在上方） */
.al-cat-pill--overlay {
	position: absolute !important;
	left: 16px;
	top: 16px;
	z-index: 2;
	background: var(--al-pill-bg);
	backdrop-filter: blur(6px);
	padding: 7px 13px;
	border-radius: 999px;
	margin: 0;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	width: auto;
	max-width: calc(100% - 32px);
	overflow: hidden;
}

/* ==========================================================================
   首頁 Hero（1a：左主打＋右清單）
   ========================================================================== */
.al-hero { gap: 32px; }
.al-hero__main { position: relative; }
.al-hero__main .wp-block-post-featured-image {
	border-radius: var(--wp--custom--radius--card, 6px);
	overflow: hidden;
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, var(--al-img-ph-a) 0%, var(--al-img-ph-b) 45%, var(--al-img-ph-c) 100%);
}
.al-hero__main .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.al-hero__main .wp-block-post-title {
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.4;
	margin-top: 18px;
}
.al-hero__main .wp-block-post-title a { color: var(--al-text); }
.al-hero__main .wp-block-post-title a:hover { color: var(--al-accent-text); }

.al-section-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--al-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 2px;
}

/* 右側清單列 */
.al-list-item {
	padding: 16px 0 !important;
	border-top: 1px solid var(--al-border);
	display: flex;
	align-items: center;
	gap: 16px;
}
.al-list-item .al-list-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.al-list-item .al-list-item__text > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.al-list-item .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}
.al-list-item .wp-block-post-title a { color: var(--al-text); }
.al-list-item .wp-block-post-title a:hover { color: var(--al-accent-text); }
.al-list-item .wp-block-post-featured-image {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--thumb, 8px);
	overflow: hidden;
	margin: 0;
	background: linear-gradient(135deg, var(--al-img-ph-a), var(--al-img-ph-c));
}
.al-list-item .wp-block-post-featured-image img { width: 96px; height: 96px; object-fit: cover; }

/* 文章 meta 行 */
.al-post-meta {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 12px;
	color: var(--al-muted);
	white-space: nowrap;
}
.al-post-meta .wp-block-post-date { font-size: 12px; color: var(--al-muted); }
.al-post-meta time { color: var(--al-muted); }

/* ==========================================================================
   文章卡片格線（3 欄）
   ========================================================================== */
/* 強制格線列／欄間距，不依賴區塊屬性產生的 inline gap（避免快取／屬性格式不一致造成首屏與無限捲動載入的間距不同步）。 */
.al-grid .wp-block-post-template { row-gap: 40px !important; column-gap: 24px !important; }
.al-grid .wp-block-post { background: transparent; align-self: start; }
.al-card { display: flex; flex-direction: column; gap: 8px; }
/* WP 區塊預設 layout（is-layout-flow）會在子元素間額外疊加 margin-block-start，
   跟這裡自訂的 flex gap 疊加造成標題與 meta 行距忽大忽小（伺服端渲染 vs. 無限捲動 JS 插入的卡片不一致）。
   直接歸零，讓間距完全由 gap 控制。 */
.al-card > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.al-card .wp-block-post-featured-image {
	aspect-ratio: 16/10;
	border-radius: var(--wp--custom--radius--card, 6px);
	overflow: hidden;
	margin: 0 0 4px;
	background: linear-gradient(135deg, var(--al-img-ph-a) 0%, var(--al-img-ph-b) 45%, var(--al-img-ph-c) 100%);
}
.al-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.al-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.al-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}
.al-card .wp-block-post-title a { color: var(--al-text); background-image: linear-gradient(var(--al-accent), var(--al-accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.2s; }
.al-card .wp-block-post-title a:hover { color: var(--al-accent-text); background-size: 100% 2px; }

/* ==========================================================================
   首頁無限捲動
   ========================================================================== */
.al-loadmore {
	text-align: center;
	padding: 1.5rem 0 0.5rem;
	font-size: 13px;
	color: var(--al-muted);
	min-height: 24px;
}
.al-loadmore.is-loading::after { content: "載入更多文章…"; }
.al-loadmore.is-done::after { content: "— 已顯示全部文章 —"; opacity: 0.6; }

/* ==========================================================================
   頁尾
   ========================================================================== */
.al-footer {
	border-top: 1px solid var(--al-border);
	color: var(--al-muted);
	font-size: 12px;
}
.al-footer a { color: var(--al-muted); }
.al-footer a:hover { color: var(--al-accent-text); }

/* 社群圓鈕（頁首＋頁尾共用，YT/IG） */
.al-socials { display: inline-flex; gap: 8px; align-items: center; }
.al-socials a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--al-surface);
	border: 1px solid var(--al-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--al-muted);
	transition: color 0.15s, border-color 0.15s;
}
.al-socials a:hover { color: var(--al-accent-text); border-color: var(--al-accent); }
.al-socials svg { width: 15px; height: 15px; display: block; }

/* ==========================================================================
   文章頁 — 繁體中文閱讀最佳化
   ========================================================================== */
.al-article .al-cat-pill--lg a { font-size: 13px; }
.al-article__title {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.45;
	letter-spacing: 0.01em;
	margin: 0.5em 0 0.4em;
}
.al-article__meta {
	font-size: 13px;
	color: var(--al-muted);
	margin-bottom: 1.75rem;
	gap: 4px;
}
.al-article__hero {
	border-radius: var(--wp--custom--radius--card, 6px);
	overflow: hidden;
	margin-bottom: 2rem;
}
/* 內文：字級 17px、行高 2、段距 1.6em、微字距 — 針對繁中調校 */
.al-article .wp-block-post-content {
	font-size: 17px;
	line-height: 2;
	letter-spacing: 0.015em;
	color: var(--al-text);
}
.al-article .wp-block-post-content > p { margin: 0 0 1.6em; }
.al-article .wp-block-post-content h2 {
	font-size: 1.5em;
	margin: 2em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--al-border);
}
.al-article .wp-block-post-content h3 { font-size: 1.2em; margin: 1.8em 0 0.6em; }
.al-article .wp-block-post-content a {
	color: var(--al-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, var(--al-accent) 55%, transparent);
	text-underline-offset: 4px;
}
.al-article .wp-block-post-content a:hover { color: var(--al-link-hover); text-decoration-color: var(--al-accent); }
.al-article .wp-block-post-content img { border-radius: var(--wp--custom--radius--card, 6px); height: auto; }
.al-article .wp-block-post-content figcaption {
	font-size: 13px;
	color: var(--al-muted);
	text-align: center;
	margin-top: 8px;
}
.al-article .wp-block-post-content blockquote {
	margin: 1.6em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--al-accent);
	color: var(--al-muted);
	font-family: var(--wp--preset--font-family--serif);
}
.al-article .wp-block-post-content ul,
.al-article .wp-block-post-content ol { margin: 0 0 1.6em; padding-left: 1.5em; }
.al-article .wp-block-post-content li { margin-bottom: 0.4em; }
.al-article__tags {
	display: block;
	margin-top: 2.5rem;
	font-size: 13px;
	color: var(--al-muted);
}
.al-article__tags a {
	display: inline-block;
	background: var(--al-surface);
	border: 1px solid var(--al-border);
	border-radius: 999px;
	padding: 3px 12px;
	margin: 0 6px 6px 0;
	color: var(--al-muted);
	font-size: 12px;
}
.al-article__tags a:hover { color: var(--al-accent-text); border-color: var(--al-accent); }
/* 標籤之間不顯示逗號 */
.al-article__tags .wp-block-post-terms__separator { display: none; }

/* ==========================================================================
   歸檔／搜尋頁標題（雜誌感：主題色豎條＋襯線大字）
   ========================================================================== */
.al-archive-title {
	font-size: clamp(24px, 3.2vw, 34px);
	position: relative;
	padding-left: 20px;
	line-height: 1.3;
}
.al-archive-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 6px;
	border-radius: 3px;
	background: var(--al-accent);
}
.al-archive-title .al-archive-title__accent { color: var(--al-accent-text); }

/* ==========================================================================
   聯絡我們／影音作品（區塊版頁面）
   ========================================================================== */
/* 極簡社群清單（聯絡我們） */
.al-social-list { max-width: 560px; margin: 2rem 0 0; }
.al-social-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 4px;
	border-top: 1px solid var(--al-border);
	color: var(--al-text);
	text-decoration: none;
	transition: color 0.15s;
}
.al-social-list .al-social-row:last-of-type { border-bottom: 1px solid var(--al-border); }
.al-social-row svg { width: 18px; height: 18px; color: var(--al-muted); flex-shrink: 0; transition: color 0.15s; }
.al-social-row .al-social-row__name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
}
.al-social-row .al-social-row__handle {
	margin-left: auto;
	font-size: 13px;
	color: var(--al-muted);
	font-family: var(--wp--preset--font-family--mono);
}
.al-social-row .al-social-row__arrow {
	color: var(--al-muted);
	font-size: 15px;
	transition: transform 0.15s, color 0.15s;
}
.al-social-row:hover,
.al-social-row:hover svg,
.al-social-row:hover .al-social-row__arrow { color: var(--al-accent-text); }
.al-social-row:hover .al-social-row__arrow { transform: translate(2px, -2px); }

/* 服務項目 chips（極簡外框膠囊） */
.al-chiplist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}
.al-chiplist li {
	border: 1px solid var(--al-border);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 14px;
	color: var(--al-text);
	background: var(--al-card);
}

/* 合作洽詢（極簡資訊列） */
.al-biz { max-width: 560px; margin: 1.25rem 0 0; }
.al-biz__company {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
}
.al-biz__company small {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--al-muted);
	letter-spacing: 0.05em;
}
.al-biz__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	color: var(--al-accent-text) !important;
	text-decoration: none;
	border-bottom: 1px solid var(--al-accent);
	padding-bottom: 2px;
}
.al-biz__mail:hover { color: var(--al-link-hover) !important; }
.al-biz__contact { font-size: 14px; color: var(--al-muted); margin-top: 6px; }
.al-page-lead {
	font-size: clamp(16px, 1.6vw, 19px);
	color: var(--al-muted);
	line-height: 1.9;
}
.al-embed-note { font-size: 12px; color: var(--al-muted); text-align: center; }

/* ==========================================================================
   分頁
   ========================================================================== */
.wp-block-query-pagination a, .wp-block-query-pagination-numbers .page-numbers {
	color: var(--al-muted);
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 6px;
}
.wp-block-query-pagination a:hover { color: var(--al-accent-text); background: var(--al-surface); }
.wp-block-query-pagination-numbers .current { color: var(--al-accent-text); font-weight: 700; }

/* ==========================================================================
   RWD（設計稿 375px 行動版）
   ========================================================================== */
@media (max-width: 781px) {
	.al-hero { gap: 8px; }
	.al-hero__main .wp-block-post-title { font-size: 20px; margin-top: 12px; }
	.al-list-item { padding: 14px 0 !important; gap: 12px; }
	.al-list-item .wp-block-post-title { font-size: 15px; }
	.al-list-item .wp-block-post-featured-image,
	.al-list-item .wp-block-post-featured-image img { width: 64px; height: 64px; border-radius: 6px; }
	.al-cat-pill--overlay { left: 12px; top: 12px; padding: 4px 9px; }
}
@media (max-width: 599px) {
	.al-brand .al-brand__zh { display: none; }
	.al-header .al-socials { display: none; }
}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
