/* ============================================================
   萬能科技大學 — 內頁樣式（page hero、側欄、legacy 內容重塑）
   ============================================================ */

/* ---------- 頁首橫幅 ---------- */
.page-hero {
  background: var(--grad-header);
  color: #fff;
  padding-block: var(--sp-6);
  position: relative;
}
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--gold-500) 0 14px, transparent 14px 26px);
  opacity: 0.65;
}
.page-hero .container {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.crumbs {
  font-size: var(--fs-xs); color: var(--sky-300);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center;
}
.crumbs a { color: var(--sky-200); }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: 0.5; }
.crumbs .cur { color: #fff; font-weight: 600; }
.page-title {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: 0.04em;
  text-wrap: balance;
}
.site-search {
  display: flex; gap: var(--sp-2); max-width: 360px;
}
.site-search input {
  flex: 1; padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(255,255,255,0.3); border-radius: var(--r-full);
  background: rgba(255,255,255,0.1); color: #fff;
}
.site-search input::placeholder { color: var(--sky-300); }
.site-search input:focus { outline: none; border-color: var(--sky-300); background: rgba(255,255,255,0.16); }
.site-search button {
  width: 40px; border-radius: var(--r-full);
  background: rgba(255,255,255,0.14); font-size: 0.9rem;
}
.site-search button:hover { background: var(--gold-500); }
@media (min-width: 768px) {
  .page-hero .container { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .crumbs { grid-column: 1 / -1; }
}

/* ---------- 版面：側欄 + 內容 ---------- */
.page-main { padding-block: var(--sp-6) var(--sp-8); }
.page-layout { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .page-layout.has-side { display: grid; grid-template-columns: 240px 1fr; align-items: start; }
}
.page-side nav {
  background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.page-side ul { display: flex; flex-wrap: wrap; }
@media (min-width: 1024px) {
  .page-side ul { flex-direction: column; flex-wrap: nowrap; }
  .page-side { position: sticky; top: 80px; }
}
.page-side li { flex: 1 1 auto; }
.page-side a {
  display: block; padding: var(--sp-3) var(--sp-4);
  color: var(--c-text-soft); font-size: var(--fs-sm); font-weight: 600;
  border-left: 3px solid transparent; white-space: nowrap;
}
.page-side a:hover {
  background: var(--mist-50); color: var(--navy-800);
  border-left-color: var(--gold-500);
}

/* ---------- 頁籤 ---------- */
.page-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.page-tabs a {
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--mist-100); border-radius: var(--r-full);
  background: var(--c-surface); color: var(--c-text-soft);
  font-size: var(--fs-sm); font-weight: 600;
}
.page-tabs a:hover { border-color: var(--sky-300); color: var(--navy-800); }
.page-tabs a.cur {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
}

/* ============================================================
   Legacy 內容重塑（原站 CMS 輸出的標記）
   ============================================================ */
.legacy {
  background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  overflow-wrap: break-word;
}
@media (min-width: 768px) { .legacy { padding: var(--sp-6); } }

.legacy img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.legacy a { text-decoration: underline; text-underline-offset: 3px; }
.legacy iframe { max-width: 100%; border: 0; border-radius: var(--r-sm); }

/* 原站的小節標題 */
.legacy .right_caption,
.legacy .caption_news {
  font-size: var(--fs-lg); font-weight: 700; color: var(--navy-800);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--mist-100);
}
.legacy .right_caption:first-child { margin-top: 0; }
.legacy .right_caption::before {
  content: "✈ "; color: var(--gold-500); font-size: 0.8em;
}

/* 表格（公告列表、聯絡資訊等） */
.legacy table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-block: var(--sp-4);
}
.legacy table caption {
  text-align: left; font-weight: 700; font-size: var(--fs-md);
  color: var(--navy-800); padding-bottom: var(--sp-3);
}
.legacy th, .legacy td {
  padding: var(--sp-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--mist-100);
}
.legacy thead td, .legacy th { background: var(--mist-50); color: var(--navy-800); font-weight: 700; }
.legacy tr:hover td { background: var(--mist-50); }

/* 讓過寬表格可橫向捲動：包在 .legacy 內以 overflow 控制 */
.legacy { overflow-x: auto; }

/* 公告列表表格 */
.legacy .tbnews .td_title a { font-weight: 600; text-decoration: none; }
.legacy .tbnews .td_title a:hover { text-decoration: underline; }
.legacy .tbnews .td_class { white-space: nowrap; color: var(--blue-600); }

/* 篩選下拉 */
.legacy select {
  font: inherit; font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--ink-300); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text);
  max-width: 100%;
  margin: 0 var(--sp-2) var(--sp-2) 0;
}

/* 新聞內頁照片 */
.legacy .news_photo { margin-block: var(--sp-4); }
.legacy .news_photo img { box-shadow: var(--shadow-md); }

/* enews 電子報卡片、joinus 圖卡 */
.legacy .new_icon,
.legacy ul.new,
.legacy .news_list {
  display: grid; gap: var(--sp-4); list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-block: var(--sp-4);
}
.legacy .new_icon li, .legacy .news_list li { margin: 0; }
.legacy .new_icon img { width: 100%; }

/* 內容中的 ul/ol 恢復預設樣式 */
.legacy ul:not(.new_icon):not(.news_list) { list-style: disc; padding-left: 1.4em; }
.legacy ol { list-style: decimal; padding-left: 1.4em; }
.legacy li { margin-block: var(--sp-1); }

/* 分享按鈕列等雜項 */
.legacy .share { display: flex; gap: var(--sp-2); margin-block: var(--sp-4); }

/* 內頁裡殘留的舊版面容器：拉平 */
.legacy .content, .legacy .right { display: block; width: auto; float: none; }

/* ============================================================
   圖片版式（由 tools/polish.py 產生的 figure / 圖廊）
   ============================================================ */
.legacy .vnu-figure {
  margin: var(--sp-5) auto;
  max-width: 720px;
  text-align: center;
}
.legacy .vnu-figure img {
  display: inline-block;
  max-height: 520px; width: auto; max-width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.legacy .vnu-figure figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm); color: var(--c-text-faint);
  line-height: 1.6;
}

.legacy .vnu-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}
.legacy .vnu-gallery .vnu-figure { margin: 0; max-width: none; }
.legacy .vnu-gallery img {
  width: 100%; height: 220px; max-height: none;
  object-fit: cover;
  transition: transform var(--dur-move) var(--ease-out);
}
.legacy .vnu-gallery .vnu-figure:hover img { transform: scale(1.03); }
.legacy .vnu-gallery figcaption { text-align: left; }

/* 「更多」文字連結（取代舊 MORE 圖） */
.legacy .more-link {
  display: inline-block;
  margin-block: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--blue-600); text-decoration: none;
}
.legacy .more-link:hover { color: var(--navy-800); }

/* ============================================================
   內容排版層級
   ============================================================ */
.legacy { line-height: 1.8; }
.legacy p { margin-block: var(--sp-3); }
.legacy h1, .legacy h2, .legacy h3, .legacy h4 {
  color: var(--navy-800); line-height: 1.4;
  margin: var(--sp-5) 0 var(--sp-3);
}
.legacy h1 { font-size: var(--fs-xl); }
.legacy h2 { font-size: var(--fs-lg); }
.legacy h3, .legacy h4 { font-size: var(--fs-md); }

/* 舊 CMS 的 blockquote 多當小節標題用 → callout 樣式 */
.legacy blockquote {
  margin: var(--sp-5) 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-left: 4px solid var(--gold-500);
  background: var(--mist-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-weight: 700; color: var(--navy-800);
}
.legacy blockquote p { margin: 0; }

.legacy hr {
  border: 0; height: 1px; margin-block: var(--sp-5);
  background: var(--mist-100);
}

/* iframe（YouTube 等）：16:9 響應式 */
.legacy iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  box-shadow: var(--shadow-md);
}

/* 篩選無結果：萬大獅出場 */
.filter-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center; color: var(--c-text-faint);
}
.filter-empty img {
  width: 120px; border-radius: var(--r-md);
}