/* =========================================================
   科技教育專欄頁專屬樣式
   ========================================================= */
.column-hero-carousel { background:#061f3b; }
.column-carousel { position:relative; width:100%; overflow:hidden; }
.column-carousel-viewport { position:relative; min-height:clamp(520px,58vw,760px); }
.column-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.035); transition:opacity .65s ease,transform 1s var(--ease),visibility .65s; }
.column-slide.is-active { opacity:1; visibility:visible; transform:scale(1); }
.column-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,31,60,.87) 0,rgba(3,31,60,.56) 43%,rgba(3,31,60,.08) 75%); }
.column-slide img { width:100%; height:100%; min-height:inherit; object-fit:cover; }
.column-slide-overlay { position:absolute; z-index:2; left:max(5vw,calc((100vw - var(--container))/2)); top:50%; width:min(600px,48vw); color:#fff; transform:translateY(-50%); }
.column-slide-overlay>p { margin:0 0 10px; color:var(--yellow); font-size:.78rem; font-weight:950; letter-spacing:.13em; }
.column-slide-overlay h1,.column-slide-overlay h2 { margin-bottom:18px; font-size:clamp(2.35rem,5vw,5.4rem); }
.column-slide-overlay>span { display:block; max-width:580px; margin-bottom:24px; color:rgba(255,255,255,.78); font-size:clamp(.96rem,1.4vw,1.14rem); }
.column-carousel .carousel-arrow { top:50%; }
.column-carousel-bottom { position:absolute; z-index:6; right:max(4vw,calc((100vw - var(--container))/2)); bottom:28px; display:flex; align-items:center; gap:14px; padding:9px 13px; border-radius:999px; color:#fff; background:rgba(3,31,60,.62); backdrop-filter:blur(10px); }
.carousel-status { display:inline-flex; align-items:center; gap:5px; font-size:.77rem; font-weight:850; }
.carousel-status b { color:var(--yellow); font-size:1rem; }

.column-intro { background:radial-gradient(circle at 10% 20%,rgba(0,119,200,.08),transparent 24%),#fff; }
.education-values { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.education-values article { position:relative; min-height:210px; padding:26px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .32s var(--ease),box-shadow .32s,border-color .32s; }
.education-values article:hover { transform:translateY(-8px); border-color:#8ec8ed; box-shadow:var(--shadow-md); }
.education-values article::after { content:""; position:absolute; right:-35px; bottom:-45px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(245,179,53,.2),transparent 70%); }
.education-values span { display:grid; place-items:center; width:54px; height:54px; margin-bottom:20px; border-radius:16px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--blue-800)); font-size:1.5rem; font-weight:900; }
.education-values article:nth-child(2) span { background:linear-gradient(145deg,var(--yellow),#ef8400); }
.education-values article:nth-child(3) span { background:linear-gradient(145deg,var(--purple),#493384); }
.education-values article:nth-child(4) span { background:linear-gradient(145deg,#38a3dd,var(--blue-800)); }
.education-values p { color:var(--muted); }

.steam-explorer { position:relative; display:grid; grid-template-columns:210px 1fr 310px; gap:28px; min-height:490px; padding:32px; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:#fff; box-shadow:var(--shadow-md); }
.steam-explorer::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 92% 20%,rgba(245,179,53,.16),transparent 24%),radial-gradient(circle at 5% 90%,rgba(0,119,200,.09),transparent 26%); pointer-events:none; }
.steam-tabs { position:relative; z-index:2; display:grid; align-content:center; gap:10px; }
.steam-tab { display:grid; grid-template-columns:46px 1fr; align-items:center; gap:12px; min-height:68px; padding:9px 13px; border:1px solid var(--line); border-radius:16px; text-align:left; color:#4a5d74; background:#fff; cursor:pointer; transition:transform .22s,color .22s,background .22s,border-color .22s,box-shadow .22s; }
.steam-tab:hover { transform:translateX(4px); border-color:#91c8eb; }
.steam-tab b { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:#fff; background:var(--blue); font-size:1.2rem; }
.steam-tab:nth-child(2) b { background:#2e8dce; }.steam-tab:nth-child(3) b { background:#f0a000; }.steam-tab:nth-child(4) b { background:#dd6c79; }.steam-tab:nth-child(5) b { background:#7863bd; }
.steam-tab span { font-size:.76rem; font-weight:900; line-height:1.35; }
.steam-tab.is-active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--blue-800)); box-shadow:0 12px 28px rgba(0,119,200,.2); }
.steam-tab.is-active b { color:var(--blue-900); background:#fff; }
.steam-panel { position:relative; z-index:2; align-self:center; }
.steam-panel .steam-letter { color:rgba(0,119,200,.09); font-size:8rem; font-weight:950; line-height:.8; }
.steam-panel h3 { margin:-18px 0 12px; color:var(--blue-900); font-size:clamp(1.8rem,3vw,3rem); }
.steam-panel .lead { color:var(--muted); font-size:1.02rem; }
.steam-panel ul { display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.steam-panel li { position:relative; padding:12px 14px 12px 42px; border:1px solid var(--line); border-radius:14px; color:#4e6075; background:#f8fcff; }
.steam-panel li::before { content:"✦"; position:absolute; left:15px; color:var(--yellow); }
.steam-art { position:relative; z-index:2; min-height:360px; align-self:center; }
.book-illustration { position:absolute; left:50%; top:50%; width:235px; height:150px; transform:translate(-50%,-50%) rotate(-5deg); filter:drop-shadow(0 24px 30px rgba(3,48,88,.18)); }
.book-illustration span { position:absolute; top:20px; width:122px; height:112px; border:5px solid #fff; background:linear-gradient(145deg,var(--blue),var(--blue-800)); }
.book-illustration span:first-child { left:0; border-radius:24px 4px 20px 26px; transform:skewY(8deg); }
.book-illustration span:nth-child(2) { right:0; border-radius:4px 24px 26px 20px; transform:skewY(-8deg); background:linear-gradient(145deg,var(--yellow-2),var(--yellow)); }
.book-illustration::after { content:"STEAM"; position:absolute; z-index:3; left:50%; top:48%; color:#fff; font-size:1.2rem; font-weight:950; letter-spacing:.14em; transform:translate(-50%,-50%); }
.steam-art .gem-blue { position:absolute; left:1%; top:11%; animation:gemFloat 4s ease-in-out infinite; }
.steam-art .gem-yellow { position:absolute; right:5%; bottom:10%; width:46px; height:46px; animation:gemFloat 4.6s ease-in-out infinite reverse; }
.orbit-star { position:absolute; right:12%; top:8%; color:var(--blue); font-size:3rem; font-style:normal; animation:twinkleSimple 2.6s infinite; }

.article-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) auto; gap:16px; align-items:center; margin-bottom:26px; }
.article-search { position:relative; }
.article-search::before { content:"⌕"; position:absolute; left:17px; top:50%; color:var(--blue); font-size:1.2rem; transform:translateY(-52%); }
.article-search input { width:100%; height:54px; padding:0 18px 0 48px; border:1px solid #cfe0ee; border-radius:17px; background:#fff; outline:none; transition:border-color .2s,box-shadow .2s; }
.article-search input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,119,200,.1); }
.article-filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.article-filter { min-height:42px; padding:0 15px; border:1px solid #cfe0ee; border-radius:999px; color:#4e6077; background:#fff; font-size:.82rem; font-weight:900; cursor:pointer; transition:transform .2s,color .2s,background .2s,border-color .2s; }
.article-filter:hover { transform:translateY(-2px); color:var(--blue-800); border-color:#8dc8ee; }
.article-filter.is-active { color:#fff; border-color:var(--blue); background:linear-gradient(135deg,var(--blue),var(--blue-800)); }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.article-card { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.article-card:hover { transform:translateY(-8px); border-color:#8ec8ed; box-shadow:var(--shadow-md); }
.article-image { overflow:hidden; aspect-ratio:1200/628; background:#e9f5ff; }
.article-image img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.article-card:hover .article-image img { transform:scale(1.05); }
.article-content { padding:23px; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; color:var(--muted); font-size:.73rem; font-weight:800; }
.article-meta span:first-child { color:var(--orange); }
.article-content h3 { margin-bottom:10px; color:var(--blue-900); }
.article-content>p { color:var(--muted); font-size:.9rem; }
.article-read { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; color:var(--blue-700); background:none; font-weight:900; cursor:pointer; }
.article-read span { transition:transform .2s; }.article-read:hover span { transform:translateX(4px); }
.article-body .article-lead { padding:18px 20px; border-left:4px solid var(--yellow); border-radius:0 14px 14px 0; color:var(--blue-900); background:#fff8e5; font-size:1.05rem; font-weight:750; }
.article-body h3 { margin-top:28px; color:var(--blue-800); }
.article-body p,.article-body li { color:#53657a; }
.article-modal-hero { overflow:hidden; margin:-34px -34px 26px; border-radius:28px 28px 0 0; }
.article-modal-hero img { width:100%; aspect-ratio:1200/520; object-fit:cover; }
.article-modal-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; color:var(--muted); font-size:.78rem; font-weight:850; }
.article-modal-meta span:first-child { color:var(--orange); }
.article-modal h2 { color:var(--blue-900); }

@media (max-width:1000px) {
  .column-carousel-viewport { min-height:620px; }
  .column-slide-overlay { width:56vw; }
  .education-values { grid-template-columns:repeat(2,1fr); }
  .steam-explorer { grid-template-columns:180px 1fr; }
  .steam-art { display:none; }
  .article-grid { grid-template-columns:repeat(2,1fr); }
  .article-toolbar { grid-template-columns:1fr; }.article-filters{justify-content:flex-start}
}
@media (max-width:700px) {
  .column-carousel-viewport { min-height:680px; }
  .column-slide::after { background:linear-gradient(0deg,rgba(3,31,60,.93) 0,rgba(3,31,60,.5) 50%,rgba(3,31,60,.08) 82%); }
  .column-slide img { object-position:center; }
  .column-slide-overlay { left:22px; right:22px; top:auto; bottom:84px; width:auto; transform:none; }
  .column-slide-overlay h1,.column-slide-overlay h2 { font-size:clamp(2rem,10vw,3.25rem); }
  .column-carousel-bottom { left:50%; right:auto; bottom:20px; transform:translateX(-50%); }
  .education-values { grid-template-columns:1fr; }
  .steam-explorer { grid-template-columns:1fr; padding:22px; }
  .steam-tabs { display:flex; overflow-x:auto; align-content:initial; scrollbar-width:none; }.steam-tabs::-webkit-scrollbar{display:none}
  .steam-tab { flex:0 0 145px; }.steam-tab:hover{transform:translateY(-2px)}
  .steam-panel .steam-letter { font-size:6rem; }
  .article-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }.article-filters::-webkit-scrollbar{display:none}.article-filter{flex:0 0 auto}
  .article-grid { grid-template-columns:1fr; }
  .article-modal-hero { margin:-24px -18px 22px; }
}