/*===========================================================================
  blog_home.css
  首頁（index.php）部落格雙欄版型：精選大圖 + 卡片網格 + 右側欄
  · 只在首頁載入，於 common.css 之後，覆蓋優先
  · 純樣式，尊重後台 文章/消息/商店 開關
===========================================================================*/

:root{
	--bh-accent:   #007AB0;   /* 藍 主色 */
	--bh-accent-2: #00A6E0;   /* 輔助藍 */
	--bh-ink:      #15293a;
	--bh-ink-soft: #3a4f63;
	--bh-muted:    #6b8298;
	--bh-line:     #d9e7f1;
	--bh-card:     #ffffff;
	--bh-soft:     #e6f3fa;
	--bh-radius:   14px;
	--bh-shadow:   0 1px 2px rgba(15,41,58,.04), 0 8px 24px -8px rgba(0,99,150,.12);
	--bh-shadow-h: 0 2px 4px rgba(15,41,58,.05), 0 22px 40px -14px rgba(0,99,150,.28);
}

/*===========================================================================
  品牌大刀頭 Hero（清新藍調科技感）
===========================================================================*/
.bh_hero{
	position:relative;
	overflow:hidden;
	max-width:1180px;
	margin:26px auto 0;
	border-radius:var( --bh-radius );
	box-shadow:var( --bh-shadow );
	background:linear-gradient(135deg, #044c72 0%, #0073a8 55%, #007AB0 130%);
	color:#fff;
}
/* 右上柔光暈 + 左上細點紋，增加層次 */
.bh_hero:after{
	content:'';
	position:absolute; top:-90px; right:-70px;
	width:320px; height:320px; border-radius:50%;
	background:radial-gradient(circle at 35% 35%, rgba(0,166,224,.42), rgba(0,166,224,0) 70%);
}
.bh_hero:before{
	content:'';
	position:absolute; inset:0;
	background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
	background-size:22px 22px;
	-webkit-mask-image:linear-gradient(115deg, rgba(0,0,0,.55), transparent 62%);
	mask-image:linear-gradient(115deg, rgba(0,0,0,.55), transparent 62%);
	pointer-events:none;
}
.bh_hero_inner{
	position:relative; z-index:2;
	max-width:none;
	margin:0;
	padding:48px 44px 50px;
}
.bh_hero_eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:11px;
	font-weight:700;
	letter-spacing:2.5px;
	text-transform:uppercase;
	color:#fff;
	padding:5px 14px 5px 10px;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.28);
	border-radius:20px;
	margin-bottom:18px;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}
.bh_hero_eyebrow:before{
	content:'';
	width:6px; height:6px; border-radius:50%;
	background:#7fdfff;
	box-shadow:0 0 0 3px rgba(127,223,255,.25);
}
.bh_hero_title{
	font-family:var( --sk-serif, 'Noto Serif TC', serif );
	font-size:34px;
	font-weight:900;
	letter-spacing:1.5px;
	line-height:1.25;
	margin:0 0 12px;
	text-shadow:0 2px 12px rgba(0,40,70,.25);
}
.bh_hero_sub{
	font-size:15px;
	line-height:1.9;
	color:rgba(255,255,255,.86);
	max-width:600px;
	margin:0 0 26px;
}
.bh_hero_actions{ display:flex; flex-wrap:wrap; gap:14px; }
.bh_hero_btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:13px 26px;
	border-radius:999px;
	font-size:15.5px;
	font-weight:700;
	letter-spacing:1px;
	text-decoration:none;
	background:#fff;
	color:var( --bh-accent );
	box-shadow:0 12px 30px -12px rgba(0,0,0,.4);
	transition:transform .2s, box-shadow .2s;
}
.bh_hero_btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(0,0,0,.5); color:var( --bh-accent ); }
.bh_hero_btn.ghost{
	background:transparent;
	color:#fff;
	border:1.5px solid rgba(255,255,255,.55);
	box-shadow:none;
}
.bh_hero_btn.ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }

/*---------- 頂部輪播：收進版心、加圓角 ----------*/
#index_carousel{
	max-width:1180px;
	margin:26px auto 6px;
	border-radius:var( --bh-radius );
	overflow:hidden;
}
#index_carousel .imgAreaContain{ border-radius:var( --bh-radius ); }

/*---------- 版面外層：雙欄 ----------*/
.bloghome{
	max-width:1180px;
	margin:0 auto;
	padding:26px 24px 60px;
	display:flex;
	align-items:flex-start;
	gap:36px;
}
.bh_main{ width:calc( 100% - 336px ); }
.bh_side{
	width:300px;
	position:sticky;
	top:80px;
	flex-shrink:0;
}

/*---------- 區塊標題 ----------*/
.bh_sectit{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	margin:6px 0 22px;
	padding-bottom:12px;
	border-bottom:1px solid var( --bh-line );
}
.bh_sectit_h{
	font-size:23px;
	font-weight:800;
	letter-spacing:1px;
	color:var( --bh-ink );
	margin:0;
	position:relative;
	padding-left:14px;
}
.bh_sectit_h:before{
	content:'';
	position:absolute; left:0; top:50%;
	transform:translateY(-50%);
	width:5px; height:.82em;
	background:var( --bh-accent );
	border-radius:3px;
}
.bh_seemore{
	display:inline-flex; align-items:center; gap:4px;
	font-size:13.5px;
	font-weight:500;
	color:var( --bh-muted );
	text-decoration:none;
	white-space:nowrap;
	padding:6px 12px;
	border-radius:999px;
	transition:color .15s, background .15s;
}
.bh_seemore i{ font-size:12px; transition:transform .2s; }
.bh_seemore:hover{ color:var( --bh-accent ); background:var( --bh-soft ); }
.bh_seemore:hover i{ transform:translateX(3px); }
.bh_main .bh_sectit:not(:first-child){ margin-top:46px; }

/*---------- 文章網格：桌機固定雙欄，12 篇剛好 6 列 ----------*/
.bh_grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:26px;
	align-items:stretch;
}

/*---------- 共用 meta ----------*/
.bh_meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:auto;
	padding-top:12px;
	border-top:1px solid var( --bh-line );
	font-size:12.5px;
	color:var( --bh-muted );
}
.bh_date{
	display:inline-flex; align-items:center; gap:5px;
	color:var( --bh-muted );
	letter-spacing:.3px;
	font-variant-numeric:tabular-nums;
}
.bh_date i{ font-size:12px; opacity:.75; }
.bh_more{
	display:inline-flex; align-items:center; gap:4px;
	font-size:12.5px;
	font-weight:700;
	color:var( --bh-accent );
	opacity:0;
	transform:translateX(-6px);
	transition:opacity .2s, transform .2s;
}
.bh_more i{ font-size:12px; transition:transform .2s; }
.bh_card:hover .bh_more{ opacity:1; transform:translateX(0); }
.bh_card:hover .bh_more i{ transform:translateX(3px); }
/* 分類標籤：浮在封面左上 */
.bh_pill{
	position:absolute;
	left:14px; top:14px;
	z-index:2;
	display:inline-block;
	padding:4px 11px;
	background:rgba(255,255,255,.92);
	color:var( --bh-accent );
	border-radius:999px;
	font-weight:700;
	font-size:11px;
	letter-spacing:1px;
	box-shadow:0 2px 10px rgba(0,40,70,.18);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}

/*---------- 精選大圖（橫跨整列） ----------*/
.bh_feat{
	grid-column:1 / -1;
	display:flex;
	background:var( --bh-card );
	border:1px solid var( --bh-line );
	border-radius:var( --bh-radius );
	overflow:hidden;
	box-shadow:var( --bh-shadow );
	text-decoration:none;
	color:inherit;
	transition:transform .2s, box-shadow .2s;
}
.bh_feat:hover{ transform:translateY(-3px); box-shadow:var( --bh-shadow-h ); }
.bh_feat_img{ width:56%; overflow:hidden; }
.bh_feat_img .imgAreaContain{ transition:transform .5s; }
.bh_feat:hover .bh_feat_img .imgAreaContain{ transform:scale(1.06); }
.bh_feat_body{
	width:44%;
	padding:30px 32px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.bh_feat_title{
	font-size:25px;
	font-weight:800;
	line-height:1.45;
	color:var( --bh-ink );
	margin:0 0 12px;
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bh_feat:hover .bh_feat_title{ color:var( --bh-accent ); }
.bh_feat_desc{
	font-size:15px;
	line-height:1.85;
	color:var( --bh-ink-soft );
	margin:0 0 18px;
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bh_readmore{
	font-size:14.5px;
	font-weight:700;
	color:var( --bh-accent );
	letter-spacing:1px;
}

/*---------- 一般卡片 ----------*/
.bh_card{
	display:flex;
	flex-direction:column;
	background:var( --bh-card );
	border:1px solid var( --bh-line );
	border-radius:var( --bh-radius );
	overflow:hidden;
	box-shadow:var( --bh-shadow );
	text-decoration:none;
	color:inherit;
	transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.bh_card:hover{ transform:translateY(-5px); box-shadow:var( --bh-shadow-h ); border-color:rgba(0,166,224,.55); }
.bh_card_img{
	position:relative;
	overflow:hidden;
	background:var( --bh-soft );
	aspect-ratio:8/5;
}
/* 封面下緣淡淡漸層，讓圖與白底銜接柔和 */
.bh_card_img:after{
	content:'';
	position:absolute; left:0; right:0; bottom:0;
	height:34%;
	background:linear-gradient(to top, rgba(15,41,58,.14), rgba(15,41,58,0));
	pointer-events:none;
}
.bh_card_img .imgAreaContain{ transition:transform .5s; }
.bh_card:hover .bh_card_img .imgAreaContain{ transform:scale(1.06); }
.bh_card_body{ padding:20px 22px 18px; display:flex; flex-direction:column; flex:1; }
.bh_card_title{
	font-size:18px;
	font-weight:700;
	line-height:1.5;
	color:var( --bh-ink );
	margin:0 0 10px;
	min-height:3em;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	transition:color .2s;
}
.bh_card:hover .bh_card_title{ color:var( --bh-accent ); }
.bh_card_desc{
	font-size:13.5px;
	line-height:1.75;
	color:var( --bh-muted );
	margin:0 0 16px;
	flex:1;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/*---------- 中間橫幅 ----------*/
.bh_banner{
	margin:40px 0 10px;
	border-radius:var( --bh-radius );
	overflow:hidden;
}
.bh_banner img{ display:block; width:100%; border-radius:var( --bh-radius ); }

/*===========================================================================
  右側欄
===========================================================================*/
.bh_widget{
	background:var( --bh-card );
	border:1px solid var( --bh-line );
	border-radius:var( --bh-radius );
	box-shadow:var( --bh-shadow );
	padding:20px 22px 12px;
	margin-bottom:22px;
}
.bh_widget_t{
	position:relative;
	font-size:15.5px;
	font-weight:800;
	letter-spacing:1.5px;
	color:var( --bh-ink );
	margin:0 0 10px;
	padding-bottom:12px;
	display:block;
	border-bottom:1px solid var( --bh-line );
}
.bh_widget_t:after{
	content:'';
	position:absolute; left:0; bottom:-1px;
	width:36px; height:2px;
	background:var( --bh-accent );
	border-radius:2px;
}
/* 分類 */
.bh_catlist{ margin:0; padding:0; }
.bh_catlist li{ list-style:none; border-bottom:1px solid var( --bh-line ); }
.bh_catlist li:last-child{ border-bottom:0; }
.bh_catlist li a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:11px 2px;
	font-size:14.5px;
	color:var( --bh-ink-soft );
	text-decoration:none;
	transition:color .15s, padding-left .15s;
}
.bh_catlist li a:hover{ color:var( --bh-accent ); padding-left:6px; }
.bh_catlist li a span{
	min-width:28px;
	padding:1px 8px;
	border-radius:999px;
	background:var( --bh-soft );
	color:var( --bh-muted );
	font-size:12px;
	font-weight:600;
	text-align:center;
	font-variant-numeric:tabular-nums;
	transition:background .15s, color .15s;
}
.bh_catlist li a:hover span{ background:var( --bh-accent ); color:#fff; }
/* 熱門文章 */
.bh_hotlist{ margin:0; padding:0; }
.bh_hotlist li{ list-style:none; border-bottom:1px solid var( --bh-line ); }
.bh_hotlist li:last-child{ border-bottom:0; }
.bh_hotlist li a{
	display:flex;
	align-items:flex-start;
	gap:11px;
	padding:12px 2px;
	text-decoration:none;
	transition:color .15s;
}
.bh_hotnum{
	flex-shrink:0;
	width:26px; height:26px;
	border-radius:8px;
	background:var( --bh-soft );
	color:var( --bh-accent );
	font-weight:800;
	font-size:13px;
	display:flex; align-items:center; justify-content:center;
	margin-top:2px;
}
.bh_hotlist li:nth-child(1) .bh_hotnum,
.bh_hotlist li:nth-child(2) .bh_hotnum,
.bh_hotlist li:nth-child(3) .bh_hotnum{
	background:var( --bh-accent );
	color:#fff;
}
.bh_hottxt{
	font-size:14px;
	line-height:1.65;
	color:var( --bh-ink-soft );
	transition:color .15s;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bh_hotlist li a:hover .bh_hottxt{ color:var( --bh-accent ); }

/*===========================================================================
  響應式
===========================================================================*/
@media screen and (max-width:991px){
	.bloghome{ flex-direction:column; gap:0; }
	.bh_main{ width:100%; }
	.bh_side{ width:100%; position:static; margin-top:36px; }
	.bh_feat_title{ font-size:22px; }
}
@media screen and (max-width:680px){
	.bloghome{ padding:20px 14px 44px; }
	#index_carousel{ margin-top:14px; border-radius:0; }
	.bh_grid{ grid-template-columns:1fr; gap:18px; }
	.bh_card_body{ padding:16px 18px 14px; }
	.bh_card_title{ font-size:17px; }
	.bh_more{ opacity:1; transform:none; }
	.bh_feat{ flex-direction:column; }
	.bh_feat_img, .bh_feat_body{ width:100%; }
	.bh_feat_body{ padding:22px 20px; }
	.bh_sectit_h{ font-size:20px; }
}

/*===========================================================================
  文章列表頁（article.php）專屬
===========================================================================*/
.bloghome--list{ padding-top:26px; align-items:stretch; }

/* 主欄白底面板 */
.bloghome--list .bh_main{
	background:var( --bh-card );
	border:1px solid var( --bh-line );
	border-radius:16px;
	box-shadow:var( --bh-shadow );
	padding:28px 34px 30px;
}
.bloghome--list .bh_sectit{ margin-top:0; }

/* 麵包屑 */
.bh_crumb{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	list-style:none;
	margin:-8px 0 22px;
	padding:0;
	font-size:13px;
}
.bh_crumb li{ color:var( --bh-muted ); }
.bh_crumb li + li:before{ content:'\203A'; padding:0 9px; color:var( --bh-muted ); }
.bh_crumb li a{ color:var( --bh-muted ); text-decoration:none; transition:color .15s; }
.bh_crumb li a:hover{ color:var( --bh-accent ); }
.bh_crumb li:last-child{ color:var( --bh-ink-soft ); }

/* === vocus 風格文章流 === */
.vc_feed{ width:100%; }
.vc_item{
	display:flex;
	align-items:flex-start;
	gap:28px;
	padding:26px 4px 28px;
	border-bottom:1px solid var( --bh-line );
	text-decoration:none;
	color:inherit;
}
.vc_item:first-child{ padding-top:6px; }
.vc_item:last-child{ border-bottom:0; }
.vc_main{ flex:1; min-width:0; }
.vc_pub{
	font-size:13px;
	font-weight:700;
	letter-spacing:.5px;
	color:var( --bh-accent );
	margin-bottom:9px;
}
.vc_title{
	font-family:var( --sk-sans, 'Noto Sans TC', sans-serif ) !important;
	font-size:21px;
	font-weight:800;
	line-height:1.5;
	letter-spacing:.5px;
	color:var( --bh-ink );
	margin:0 0 9px;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	transition:color .15s;
}
.vc_item:hover .vc_title{ color:var( --bh-accent ); }
.vc_excerpt{
	font-size:15px;
	line-height:1.8;
	color:var( --bh-ink-soft );
	margin:0 0 14px;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vc_meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:9px;
	font-size:13px;
	color:var( --bh-muted );
}
.vc_dot{ width:3px; height:3px; border-radius:50%; background:var( --bh-muted ); display:inline-block; }
.vc_thumb{
	flex-shrink:0;
	width:176px;
	height:118px;
	border-radius:10px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:var( --bh-soft );
}

@media screen and (max-width:600px){
	.vc_item{ gap:16px; padding:20px 0 22px; }
	.vc_title{ font-size:18px; }
	.vc_excerpt{ -webkit-line-clamp:2; font-size:14px; }
	.vc_thumb{ width:104px; height:92px; border-radius:8px; }
	.bloghome--list .bh_main{ padding:20px 18px 22px; border-radius:12px; }
}

/* 目前分類高亮 */
.bh_catlist li.on > a{ color:var( --bh-accent ); font-weight:700; }
.bh_catlist li.on > a span{ color:var( --bh-accent ); }

/* 分頁器 */
.bh_pager{ margin-top:34px; text-align:center; }
.bh_pager .pagination{
	display:inline-flex;
	flex-wrap:wrap;
	gap:6px;
	padding:0;
	margin:0;
	list-style:none;
}
.bh_pager .pagination > li > a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 12px;
	border:1px solid var( --bh-line );
	border-radius:10px;
	background:var( --bh-card );
	color:var( --bh-ink-soft );
	font-size:15px;
	text-decoration:none;
	transition:all .15s;
}
.bh_pager .pagination > li > a:hover{
	border-color:var( --bh-accent );
	color:var( --bh-accent );
}
.bh_pager .pagination > li.active > a{
	background:var( --bh-accent );
	border-color:var( --bh-accent );
	color:#fff;
	font-weight:700;
}
.bh_pager .pagination > li.disabled > a{
	opacity:.4;
	pointer-events:none;
}

@media screen and (max-width:680px){
	.bh_grid--list{ grid-template-columns:1fr; }
}

/* Hero 響應式 */
@media screen and (max-width:991px){
	.bh_hero_title{ font-size:42px; }
	.bh_hero_inner{ padding:60px 24px 64px; }
}
@media screen and (max-width:680px){
	.bh_hero_title{ font-size:32px; letter-spacing:2px; }
	.bh_hero_sub{ font-size:16px; }
	.bh_hero_inner{ padding:48px 18px 52px; }
	.bh_hero:after{ width:340px; height:340px; }
}

/*===========================================================================
  SEO 補強（2026.09.13）：縮圖改成真正的 <img alt>，爬蟲讀得到
===========================================================================*/
.vc_thumb{ overflow:hidden; }
.vc_thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.vc_item:hover .vc_thumb img{ transform:scale(1.05); }
.bh_card_img img, .bh_feat_img img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:8/5; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.bh_card:hover .bh_card_img img{ transform:scale(1.05); }
ol.bh_crumb{ list-style:none; padding-left:0; }