/* ==========================================================================
   人力招募網 首頁（Bento 版型）
   品牌色：深藍 #213d7d / 黃 #fcbb13 / 紅 #c0392b（沿用 TKB 既有識別）

   版型概念：九個入口原本九宮格一律等大，使用者第一眼看不出該點哪個。
   改成 4 欄 Bento —「最新職缺」「我要應徵」「TKB 活動照」占兩格寬且填色／滿版照片，
   其餘六個維持白底小格；主次由「格子大小 + 填色」決定，文案一字未改。

   ⚠ 本站 main.css 沒有全域 box-sizing:border-box，只套在少數選擇器上。
     首頁自己的元件一律在此明確宣告 border-box，否則 padding 會外加、
     造成卡片比預期高一大截（先前「留白過多、內容浮在空中」就是這個原因）。
   ========================================================================== */
:root{
	--idx-bg:#eef1f7;
	--idx-surface:#ffffff;
	--idx-text:#1b2740;
	--idx-muted:#5d6b85;          /* 對白底 4.7:1，符合 WCAG AA */
	--idx-border:#e2e7f1;
	--idx-brand:#213d7d;
	--idx-brand-strong:#1a3066;
	--idx-brand-soft:rgba(33,61,125,.10);
	/* 黃色分兩支：淺底用深黃（才有對比），深底用品牌亮黃 */
	--idx-yellow:#8a5f00;              /* 白底/淡底上的圖示與文字，對白底 5.9:1 */
	--idx-yellow-on-dark:#fcbb13;      /* 深藍底上的文字（品牌原色），對 #1a3066 約 8.9:1 */
	--idx-yellow-soft:rgba(252,187,19,.18);
	--idx-red:#c0392b;
	--idx-red-soft:rgba(192,57,43,.12);
	--idx-shadow:0 1px 2px rgba(20,32,64,.05), 0 6px 18px rgba(20,32,64,.06);
	--idx-shadow-hover:0 4px 10px rgba(20,32,64,.10), 0 14px 32px rgba(20,32,64,.13);
	--idx-radius:14px;

	/* 間距尺度（8 的倍數，避免各處出現隨手訂的數字） */
	--sp-1:8px;  --sp-2:12px; --sp-3:16px;
	--sp-4:20px; --sp-5:24px; --sp-6:32px; --sp-7:40px;
}

/* 首頁元件一律 border-box（見檔頭說明） */
.index-header, .index-header *,
.index-wrap, .index-wrap *{ box-sizing:border-box; }

body{ background:var(--idx-bg); }

.index-wrap{ max-width:1120px; margin:0 auto; padding:0 var(--sp-5); }

/* ========== 首頁專用 Header ========== */
.index-header{
	display:flex; align-items:stretch; width:100%;
	background:var(--idx-surface); border-bottom:1px solid var(--idx-border);
}
/* logo 尺寸對齊 TKB 官網（測試回饋 2026-08-27）。
   官網 main.css：.top-nav-pc aside{ width:15.5% }（≥768px）、img{ width:100% }，
   所以 logo 是「header 寬度的百分比」而非固定像素 —— 這裡照同一比例，
   螢幕越寬 logo 越大，比例才會跟官網一致。
   原圖 230x80（比例 2.88），min-width 防止平板寬度下縮太小。 */
.index-header-logo{
	flex:0 0 15.5%; min-width:200px;
	display:flex; align-items:center; background:#fff;
	padding:12px var(--sp-5);
}
.index-header-logo img{ display:block; width:100%; height:auto; }
.index-header-title{
	flex:1; display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-6); color:#fff;
	background:linear-gradient(100deg,var(--idx-brand-strong),var(--idx-brand));
	font-size:1.6rem; font-weight:800; letter-spacing:3px; margin:0;
}
.index-header-en{ margin-left:auto; font-size:.7rem; font-weight:600; letter-spacing:3px; opacity:.7; }

/* ========== Banner 輪播 ========== */
.vbanner-index{
	width:100%; margin:var(--sp-5) 0 0; position:relative;
	border-radius:var(--idx-radius); overflow:hidden; box-shadow:var(--idx-shadow);
}
.vbanner-index .slider-mb{ position:absolute !important; visibility:hidden; opacity:0; z-index:-1; width:100%; }
.vbanner-index .slick-list{ overflow:hidden; }
/* 圖片小於 6 張、被 JS 加上 .is-buggy 時的補正 */
.center.is-buggy .slick-track{ left:-23% !important; }
.vbanner-index img{ width:100%; height:auto; display:block; }
.b-pc, .b-mb{ display:block; width:100%; }
.b-pc a, .b-mb a{ display:block; width:100%; outline:none; }

/* ========== 區塊標題 ========== */
.index-sec-head{
	display:flex; align-items:center; gap:var(--sp-2);
	margin:var(--sp-6) 0 var(--sp-4);
}
.index-ey{
	font-size:.68rem; letter-spacing:3px; color:var(--idx-brand); font-weight:800;
	text-transform:uppercase; flex:none;
}
.index-sec-head h2{
	font-size:1.35rem; margin:0; letter-spacing:1px; color:var(--idx-text);
	font-weight:800; flex:none;
}
.index-rule{ flex:1; height:1px; background:var(--idx-border); }

/* ========== 入口格（Bento） ==========
   4 欄；.is-wide 占 2 欄。DOM 順序已排好，靠自動排版即可得到：
     列1  最新職缺(寬) | 福利制度 | 最新消息
     列2  TKB 活動照(寬,照片) | 關於 TKB | 影音專區
     列3  我要應徵(寬) | FAQ 專區 | 企業社會責任
   列高固定 140px，卡片內容垂直置中；高度統一，靠寬度與填色分主次。
   ============================================================ */
.index-grid{
	display:grid; grid-template-columns:repeat(4,1fr);
	grid-auto-rows:140px; gap:var(--sp-3);
}
.index-card{
	position:relative; display:flex; align-items:center; gap:var(--sp-3);
	background:var(--idx-surface); border:1px solid var(--idx-border);
	border-radius:var(--idx-radius); padding:var(--sp-4);
	box-shadow:var(--idx-shadow); overflow:hidden;
	color:var(--idx-text); text-decoration:none; cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.index-card.is-wide{ grid-column:span 2; padding:var(--sp-5); }

/* 左側色條：hover 時滑出，暗示「可進入」 */
.index-card::before{
	content:""; position:absolute; left:0; top:var(--sp-3); bottom:var(--sp-3);
	width:3px; border-radius:0 3px 3px 0;
	background:var(--ac); opacity:0; transition:opacity .2s ease;
}
.index-card:hover{
	transform:translateY(-3px); box-shadow:var(--idx-shadow-hover);
	border-color:transparent; text-decoration:none;
}
.index-card:hover::before{ opacity:1; }
.index-card:focus-visible{ outline:3px solid var(--idx-brand); outline-offset:2px; }

.card-chip{
	width:46px; height:46px; flex:none; border-radius:12px;
	display:grid; place-items:center;
	background:var(--ac-soft); color:var(--ac);
	transition:background .2s ease, color .2s ease;
}
.card-chip i{ font-size:1.4rem; line-height:1; }
.index-card:hover .card-chip{ background:var(--ac); color:#fff; }

.card-txt{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.card-txt b{ font-size:1.08rem; font-weight:800; letter-spacing:.5px; line-height:1.3; }
.card-txt small{ color:var(--idx-muted); font-size:.82rem; font-weight:500; line-height:1.4; }

.card-go{
	margin-left:auto; color:#6b7794; flex:none;   /* 對白底 4.5:1（非文字元素也一併拉到 AA）*/
	transition:transform .2s ease, color .2s ease;
}
.card-go i{ font-size:.95rem; }
.index-card:hover .card-go{ transform:translateX(3px); color:var(--ac); }

/* 外部連結標記：放右上角，不與箭頭搶位 */
.card-ext{
	position:absolute; top:10px; right:12px; font-size:.6rem; color:var(--idx-muted);
	border:1px solid var(--idx-border); border-radius:20px; padding:1px 8px; letter-spacing:1px;
	line-height:1.6;
}
.card-ext i{ font-size:.52rem; }

/* icon 配色 */
.ac-blue{ --ac:var(--idx-brand); --ac-soft:var(--idx-brand-soft); }
.ac-red{ --ac:var(--idx-red); --ac-soft:var(--idx-red-soft); }
.ac-yellow{ --ac:var(--idx-yellow); --ac-soft:var(--idx-yellow-soft); }

/* ---------- 主要入口 1：最新職缺（深藍填色，白字對比 10:1） ---------- */
.index-card.is-primary{
	--ac:var(--idx-yellow-on-dark); --ac-soft:rgba(255,255,255,.14);
	background:linear-gradient(120deg,var(--idx-brand-strong),var(--idx-brand));
	border-color:transparent; color:#fff;
}
.index-card.is-primary:hover{ color:#fff; }
.index-card.is-primary .card-txt b{ font-size:1.5rem; }
.index-card.is-primary .card-txt small{ color:rgba(255,255,255,.86); font-size:.9rem; }
.index-card.is-primary .card-chip{ width:56px; height:56px; border-radius:14px; }
.index-card.is-primary .card-chip i{ font-size:1.7rem; }
.index-card.is-primary:hover .card-chip{ background:var(--idx-yellow-on-dark); color:var(--idx-brand-strong); }
.index-card.is-primary .card-go{ color:rgba(255,255,255,.8); }
.index-card.is-primary .card-ext{ color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.45); }

/* ---------- 主要入口 2：我要應徵（品牌黃填色，深藍字對比 8.4:1） ---------- */
.index-card.is-apply{
	--ac:var(--idx-brand-strong); --ac-soft:rgba(27,39,64,.14);
	background:linear-gradient(120deg,#fcbb13,#f5a623);
	border-color:transparent; color:var(--idx-text);
}
.index-card.is-apply:hover{ color:var(--idx-text); }
.index-card.is-apply .card-txt b{ font-size:1.5rem; }
.index-card.is-apply .card-txt small{ color:#4a3a12; font-size:.9rem; }
.index-card.is-apply .card-chip{ width:56px; height:56px; border-radius:14px; }
.index-card.is-apply .card-chip i{ font-size:1.7rem; }
.index-card.is-apply .card-go{ color:#4a3a12; }

/* ---------- 活動照：照片鋪滿整格，文字疊在漸層遮罩上 ---------- */
/* 選擇器要含兩個 class，否則被 .index-card.is-wide 的 padding 蓋掉，文字貼不到底 */
.index-card.index-card-photos{
	padding:0; align-items:flex-end;
	/* owl 未載入或 JS 失效時的保底底色，讓白字仍讀得到 */
	background:linear-gradient(120deg,var(--idx-brand-strong),var(--idx-brand));
	border-color:transparent; color:#fff;
}
.index-card-photos:hover{ color:#fff; }
.index-card-photos .life-mini-carousel{ position:absolute; inset:0; margin:0; }
.index-card-photos .life-mini-carousel,
.index-card-photos .owl-stage-outer,
.index-card-photos .owl-stage,
.index-card-photos .owl-item,
.index-card-photos .owl-item .item{ height:100%; }
.index-card-photos .life-mini-carousel img{
	width:100%; height:100%; object-fit:cover; display:block; border-radius:0;
}
/* 底部漸層：確保照片再亮，標題仍達 AA */
.index-card-photos::after{
	content:""; position:absolute; inset:0; z-index:1;
	background:linear-gradient(180deg,rgba(16,24,44,0) 38%,rgba(16,24,44,.82) 100%);
	pointer-events:none;
}
.index-card-photos .card-txt{
	position:relative; z-index:2; padding:var(--sp-4) var(--sp-5); width:100%;
}
.index-card-photos .card-txt b{ font-size:1.25rem; }
.index-card-photos .card-txt small{ color:rgba(255,255,255,.9); font-size:.85rem; }

/* ========== 底部 CTA ========== */
.index-cta{
	margin:var(--sp-4) 0 var(--sp-7);
	display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
	background:var(--idx-surface); border:1px solid var(--idx-border);
	border-radius:var(--idx-radius); box-shadow:var(--idx-shadow);
	padding:var(--sp-4) var(--sp-5);
}
.cta-lead{ font-size:1.05rem; font-weight:800; color:var(--idx-text); line-height:1.4; }
.cta-lead small{ display:block; font-weight:500; color:var(--idx-muted); font-size:.85rem; margin-top:2px; }
.cta-spacer{ flex:1; }
.cta-fb{
	display:inline-flex; align-items:center; gap:var(--sp-1); color:#1668c9; font-weight:700;
	padding:10px var(--sp-2); text-decoration:none; border-radius:8px;
	transition:color .2s ease, background .2s ease;
}
.cta-fb i{ font-size:1.5rem; }
.cta-fb:hover{ color:#0f4c96; background:rgba(22,104,201,.07); }
.cta-fb:focus-visible{ outline:3px solid var(--idx-brand); outline-offset:2px; }
.cta-apply{
	display:inline-flex; align-items:center; gap:var(--sp-1);
	background:var(--idx-brand); color:#fff;
	font-weight:800; letter-spacing:1px; padding:12px var(--sp-5);
	border-radius:10px; font-size:1rem;
	text-decoration:none; box-shadow:0 4px 12px var(--idx-brand-soft);
	transition:background .2s ease, transform .2s ease, color .2s ease;
}
.cta-apply:hover{ background:var(--idx-brand-strong); transform:translateY(-2px); color:var(--idx-yellow-on-dark); }
.cta-apply:focus-visible{ outline:3px solid var(--idx-brand); outline-offset:3px; }

/* ==========================================================================
   RWD
   ========================================================================== */
/* 平板：4 欄 -> 2 欄，寬格剛好整列 */
@media (max-width:900px){
	.index-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:132px; }
	.index-card.is-primary .card-txt b,
	.index-card.is-apply .card-txt b{ font-size:1.3rem; }
}

@media (max-width:767px){
	.index-header{ flex-direction:column; align-items:center; }
	.index-header-logo{ flex:none; width:100%; min-width:0; padding:var(--sp-2) 0; justify-content:center; }
	/* 手機直向：照官網手機版比例，logo 約占畫面 45% */
	.index-header-logo img{ width:45%; max-width:230px; height:auto; margin:0 auto; }
	.index-header-title{
		width:100%; padding:var(--sp-2) var(--sp-4); font-size:1.4rem;
		justify-content:center; text-align:center;
	}
	.index-header-en{ display:none; }

	/* Banner 桌機/手機切換 */
	.vbanner-index .slider{ position:absolute !important; visibility:hidden; opacity:0; z-index:-1; width:100%; }
	.vbanner-index .slider-mb{ position:relative !important; visibility:visible; opacity:1; z-index:1; }

	/* 卡片改單欄；高度改由內容決定，避免九格固定高把頁面拉得太長 */
	.index-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
	.index-card{ min-height:88px; }
	.index-card.is-wide{ grid-column:span 1; padding:var(--sp-4); }
	.index-card.index-card-photos{ padding:0; }
	.index-card.is-primary .card-txt b,
	.index-card.is-apply .card-txt b{ font-size:1.25rem; }
	.index-card.is-primary .card-chip,
	.index-card.is-apply .card-chip{ width:50px; height:50px; }
	/* 活動照維持照片格，給固定高度才看得出是照片 */
	.index-card-photos{ min-height:170px; }

	.index-sec-head{ margin:var(--sp-5) 0 var(--sp-3); }

	/* CTA 置中堆疊；按鈕 44px 以上符合觸控標準 */
	.index-cta{ justify-content:center; text-align:center; gap:var(--sp-2); }
	.cta-lead{ width:100%; }
	.cta-spacer{ display:none; }
	.cta-apply{ padding:14px var(--sp-5); }
}

@media (max-width:480px){
	.vbanner-index .slick-slide img{ width:100%; height:auto; max-height:300px; object-fit:contain; margin:0 auto; }
}

/* 尊重使用者的減少動態偏好 */
@media (prefers-reduced-motion:reduce){
	.index-card, .index-card::before, .card-chip, .card-go,
	.cta-apply, .cta-fb{ transition:none !important; }
	.index-card:hover{ transform:none; }
	.cta-apply:hover{ transform:none; }
}