/* ==================================================================
   文章列表（分類、封存、搜尋頁）
   - 分類標籤：和首頁「最新消息」的分類按鈕同一種毛玻璃藥丸（對應 site-redesign.css 的 .hp-categories a）
   - 每篇文章下方的「閱讀更多」按鈕（由 functions.php 的 updm_archive_read_more 輸出）
   - 縮圖固定 3:2
   - 文章標題用 h2 的字級、行高 1.8
   ================================================================== */

/* ---- 縮圖 3:2 ---- */
.updm-list article.post .post-featured-img-wrap { aspect-ratio: 3 / 2; height: auto !important; }
/* 外框線與淡陰影：色調同分類按鈕 */
.updm-list article.post .post-featured-img-wrap {
  overflow: hidden; background: #fff;   /* 圓角沿用佈景主題的 5px */
  box-shadow: 0 0 0 1px rgba(0,93,118,.18), 0 2px 4px rgba(0,93,118,.06), 0 14px 30px -10px rgba(0,93,118,.22);
}
@media only screen and (min-width: 691px) {
  /* 原本縮圖是絕對定位、高度跟著右側文字長短變；改成左右並排，縮圖固定比例 */
  .updm-list article.post .article-content-wrap { display: flex; align-items: flex-start; }
  .updm-list article.post .post-featured-img-wrap { position: relative !important; flex: 0 0 33%; width: 33% !important; }
  .updm-list article.post .post-content-wrap { position: relative; left: auto !important; flex: 1 1 auto; min-width: 0; }
  /* 右側內容的上緣對齊左側圖片 */
  .updm-list article.post .post-content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ---- 日期：移到分類標籤上方，前面加日曆小圖示（網站已載入的 Font Awesome 4.7） ---- */
.updm-list article.post .post-content-wrap { display: flex; flex-direction: column; }
.updm-list article.post .post-content-wrap > * { order: 1; }
.updm-list article.post .post-content-wrap > .grav-wrap { order: 0; margin: 0 0 12px !important; padding: 0; }
.updm-list article.post .grav-wrap > a, .updm-list article.post .grav-wrap .text > a { display: none; }
.updm-list article.post .grav-wrap .text { display: block; margin: 0; padding: 0; }
.updm-list article.post .grav-wrap .text span {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0;
  font-size: 14px; line-height: 1.4; letter-spacing: .06em; color: #777;
}
.updm-list article.post .grav-wrap .text span::before {
  content: "\f133"; font-family: FontAwesome; font-size: 13px; line-height: 1; color: #02acd8;
}

/* ---- 文章標題：跟著網站 h2 的字級（佈景主題設定 24 / 21 / 20 / 17px），行高 1.8 ---- */
.updm-list article.post .post-header h3.title,
.updm-list article.post .post-header h3.title a { font-size: 24px; line-height: 1.8; }
@media only screen and (max-width: 1300px) {
  .updm-list article.post .post-header h3.title, .updm-list article.post .post-header h3.title a { font-size: 21px; }
}
@media only screen and (max-width: 999px) {
  .updm-list article.post .post-header h3.title, .updm-list article.post .post-header h3.title a { font-size: 20px; }
}
@media only screen and (max-width: 690px) {
  .updm-list article.post .post-header h3.title, .updm-list article.post .post-header h3.title a { font-size: 17px; }
}

/* ---- 分類標籤：首頁的按鈕樣式 ---- */
.updm-list article.post .meta-category { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
/* 後台用來決定顯示位置的分類，不給訪客看：顯示於海報區、顯示於活動花絮區 */
.updm-list article.post .meta-category a.event-poster,
.updm-list article.post .meta-category a.event-gallery { display: none; }
.updm-list article.post .meta-category a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; margin: 0; padding: 8px 14px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: .04em; color: #000;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%), linear-gradient(180deg, #e9f4f8, #d9ecf4);
  box-shadow: 0 0 0 1px rgba(0,93,118,.28), inset 0 0 0 1.5px rgba(255,255,255,.85), inset 0 -3px 2px rgba(238,250,255,.95), inset 0 -8px 14px rgba(2,172,216,.08), inset 0 3px 6px rgba(255,255,255,.4), 0 1px 2px rgba(0,93,118,.08), 2px 8px 20px -6px rgba(0,93,118,.18);
  transition: background .2s ease, color .15s ease, box-shadow .2s ease, transform .2s ease;
}
/* 佈景主題用 !important 把分類文字設成藍色，滑過填滿藍色時字會看不見；改回首頁的黑字 */
.updm-list article.post .meta-category a,
.updm-list article.post .meta-category a:hover,
.updm-list article.post .meta-category a:focus { color: #000 !important; }

/* ---- 閱讀更多：同一種藥丸，加上箭頭 ---- */
.updm-list article.post .updm-read-more { position: relative; z-index: 150; margin: 18px 0 4px; }
.updm-list article.post .updm-read-more a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: .06em; color: #000; text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%), linear-gradient(180deg, #e9f4f8, #d9ecf4);
  box-shadow: 0 0 0 1px rgba(0,93,118,.28), inset 0 0 0 1.5px rgba(255,255,255,.85), inset 0 -3px 2px rgba(238,250,255,.95), inset 0 -8px 14px rgba(2,172,216,.08), inset 0 3px 6px rgba(255,255,255,.4), 0 1px 2px rgba(0,93,118,.08), 2px 8px 20px -6px rgba(0,93,118,.18);
  transition: background .2s ease, color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.updm-list article.post .updm-read-more i { font-style: normal; display: inline-block; transition: transform .3s ease; }

/* 滑過與鍵盤聚焦：和首頁一樣填滿藍色、微微浮起 */
.updm-list article.post .meta-category a:focus-visible,
.updm-list article.post .updm-read-more a:focus-visible {
  outline: none; background: #02acd8; background-image: linear-gradient(180deg, rgba(255,255,255,.16), transparent 60%); color: #000;
  box-shadow: 0 0 0 1px rgba(0,93,118,.5), inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -3px 3px rgba(2,172,216,.18), 0 5px 14px -5px rgba(0,93,118,.35);
}
@media (hover: hover) and (pointer: fine) {
  .updm-list article.post .meta-category a:hover,
  .updm-list article.post .updm-read-more a:hover {
    background: #02acd8; background-image: linear-gradient(180deg, rgba(255,255,255,.16), transparent 60%); color: #000; transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(0,93,118,.5), inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -3px 3px rgba(2,172,216,.18), 0 12px 24px -5px rgba(0,93,118,.38);
  }
  .updm-list article.post .updm-read-more a:hover i { transform: translateX(3px); }
}
.updm-list article.post .meta-category a:active,
.updm-list article.post .updm-read-more a:active { transform: translateY(0); }

/* 邊緣的白色反光，滑過時出現（同首頁） */
.updm-list article.post .meta-category a::before,
.updm-list article.post .updm-read-more a::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from 220deg, transparent 0deg, transparent 170deg, rgba(255,255,255,.55) 225deg, #fff 270deg, rgba(255,255,255,.55) 310deg, transparent 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .2s ease;
  /* 佈景主題在分類的 :before 畫 2px 藍色底線（含 !important 的底色與展開動畫），這裡全部蓋掉 */
  width: auto; height: auto; transform: none !important; background-color: transparent !important;
}
.updm-list article.post .meta-category a:focus-visible::before,
.updm-list article.post .updm-read-more a:focus-visible::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .updm-list article.post .meta-category a:hover::before,
  .updm-list article.post .updm-read-more a:hover::before { opacity: 1; }
}

@media only screen and (max-width: 690px) {
  .updm-list article.post .meta-category a { padding: 7px 11px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .updm-list article.post .meta-category a,
  .updm-list article.post .updm-read-more a,
  .updm-list article.post .updm-read-more i { transition: none; transform: none !important; }
}