/* ============================================================
   香雲寺新站共用樣式(xy- 前綴,避免撞原站全域 CSS)
   原站 html{font-size:10px},一律用 px 勿用 rem。
   色彩對比皆過 WCAG AA:小字 --xy-text-link 5.3:1、按鈕底 4.7:1。
   ============================================================ */
:root {
  --xy-brand: #b56f13;        /* 品牌棕(僅限大標題 >=28px 粗體) */
  --xy-gold: #b88a4d;         /* 淺金棕(裝飾線、圖示、大字) */
  --xy-text-link: #8a6435;    /* 小字連結/強調(對比 5.3:1) */
  --xy-btn: #9a6a2f;          /* 按鈕底色(白字對比 4.7:1) */
  --xy-btn-hover: #b56f13;
  --xy-border: #eadfc8;       /* 卡片框線 */
  --xy-bg-warm: #faf7f0;      /* 區塊底色 */
  --xy-bg-tile: #f3ede0;      /* 圖片底 */
  --xy-text-muted: #766;      /* 次要文字(5.4:1) */
}

/* ---- 區塊與標題列 ---- */
.xy-home-sec { padding: 40px 0; }
.xy-home-sec.alt { background: var(--xy-bg-warm); }
.xy-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--xy-gold); padding-bottom: 8px; margin-bottom: 24px; }
.xy-head h2 { font-family: 'Philosopher', serif; color: var(--xy-brand); font-size: 28px; margin: 0; }
.xy-head a { color: var(--xy-text-link); text-decoration: none; font-size: 16px; }
.xy-head a:hover { text-decoration: underline; }

/* ---- 卡片格線(一排約 3 張,自動 RWD 1→2→3 欄) ---- */
.xy-egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.xy-ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.xy-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }

/* ---- 卡片本體(活動/新聞/列表共用) ---- */
.xy-ecard, .xy-ncard, .xy-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--xy-border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.xy-ecard:hover, .xy-ncard:hover, .xy-card:hover { box-shadow: 0 8px 22px rgba(184,138,77,.28); transform: translateY(-4px); }

/* 海報:2:1 橫式 preview,contain 不裁切(直式海報會左右留白,建議上傳 2:1 縮圖) */
.xy-eposter, .xy-poster { aspect-ratio: 2/1; overflow: hidden; background: var(--xy-bg-tile); }
.xy-eposter img, .xy-poster img { width: 100%; height: 100%; object-fit: contain; }
.xy-nthumb { aspect-ratio: 4/3; overflow: hidden; background: var(--xy-bg-tile); }
.xy-nthumb img { width: 100%; height: 100%; object-fit: cover; }
.xy-noimg { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f3ede0, #e8dcc4); }
.xy-noimg i { font-size: 46px; color: #c3a165; }

.xy-ebody, .xy-nbody { padding: 12px 14px 16px; }
.xy-cardbody { padding: 14px 16px 18px; }
.xy-ecard h3, .xy-ncard h3, .xy-card h2 { font-size: 17px; line-height: 1.5; margin: 4px 0 0; color: #333; font-family: inherit; font-weight: bold; }
.xy-card h2 { margin: 0; }

.xy-meta { display: flex; gap: 7px; align-items: flex-start; color: #666; font-size: 14px; margin: 6px 0 0; line-height: 1.4; }
.xy-meta i { flex: 0 0 auto; color: var(--xy-gold); margin-top: 3px; }
.xy-signup { display: inline-block; margin-top: 10px; background: var(--xy-btn); color: #fff; font-size: 14px; padding: 4px 14px; border-radius: 16px; }
.xy-ndate { color: var(--xy-text-link); font-weight: bold; font-size: 14px; }
.xy-nexcerpt { font-size: 14px; color: #6b6b6b; line-height: 1.5; margin: 6px 0 0; }

/* ---- 列表頁標題區 ---- */
.xy-h1 { font-family: 'Philosopher', serif; color: var(--xy-brand); font-size: 34px; margin: 0; }
.xy-count { color: var(--xy-text-muted); margin: 5px 0 28px; font-size: 15px; }

/* ---- 新聞列表頁(年度篩選+顯示更多,樣式移植自 A 版) ---- */
.xy-newslist { max-width: 880px; margin: 0 auto; padding: 40px 0 56px; }
.xy-newslist .xy-count { margin: 5px 0 20px; }
.xy-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.xy-ybtn {
  border: 1px solid #dccfac; background: #fff; color: var(--xy-text-link);
  padding: 6px 18px; border-radius: 20px; cursor: pointer; font-size: 15px;
  font-variant-numeric: tabular-nums; transition: all .15s;
}
.xy-ybtn:hover { background: #faf3e3; }
.xy-ybtn.is-active { background: var(--xy-gold); color: #fff; border-color: var(--xy-gold); }

.xy-list { list-style: none; padding: 0; margin: 0; }
.xy-row { border-bottom: 1px solid #f0ebdf; }
.xy-row[hidden] { display: none; }
.xy-row a {
  display: flex; align-items: baseline; gap: 20px;
  padding: 15px 6px; text-decoration: none; color: #3a3a3a;
  transition: background .15s, padding-left .15s;
}
.xy-row a:hover { background: var(--xy-bg-warm); padding-left: 14px; }
.xy-row a:hover .xy-title { color: var(--xy-brand); }
.xy-row a:hover .xy-arrow { opacity: 1; transform: translateX(0); }
.xy-date { flex: 0 0 auto; min-width: 96px; color: var(--xy-gold); font-weight: bold; font-variant-numeric: tabular-nums; font-size: 19px; padding-top: 1px; }
.xy-title { flex: 1; line-height: 1.5; font-size: 22px; }
.xy-arrow { color: var(--xy-gold); font-size: 24px; opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; }

.xy-more-wrap { text-align: center; margin-top: 28px; }
.xy-more {
  background: #fff; border: 2px solid var(--xy-gold); color: var(--xy-brand);
  padding: 10px 40px; border-radius: 26px; cursor: pointer; font-size: 17px;
  transition: all .15s;
}
.xy-more:hover { background: var(--xy-gold); color: #fff; }
.xy-more[hidden] { display: none; }

@media (max-width: 520px) {
  .xy-row a { flex-wrap: wrap; gap: 2px 14px; }
  .xy-title { font-size: 19px; }
  .xy-arrow { display: none; }
}

/* ---- 返回連結(詳情頁共用) ---- */
.back-link { display: inline-block; text-align: left; margin-bottom: 16px; color: var(--xy-text-link); text-decoration: none; font-size: 16px; }
.back-link:hover { text-decoration: underline; }
.event-detail .back-link { display: block; }

/* ---- 無障礙修正(蓋過原站 CSS) ---- */
/* 頂部聯絡列:原 #b88a4d 底白字對比僅 3.1:1,加深至 4.7:1 */
#header_main { background: var(--xy-btn); }
#header_main ul li a, #header_main ul li i { color: #fff; }
/* 首頁宗旨/公告段落內的連結:僅靠顏色區分不足(WCAG 1.4.1),加底線 */
#middle .middle_2 a { text-decoration: underline; }

/* ---- 影片/媒體嵌入(16:9,詳情頁共用) ---- */
.media-blocks { max-width: 820px; margin: 24px auto 0; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 18px; border-radius: 8px; overflow: hidden; background: #000; }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }