/* jcaed 主題的「自家樣式」。
   版面、字體、RWD 一律交給 legacy-site.css（原站樣式原樣搬過來），這裡只補
   原站沒有、屬於新後台自己的元件：預覽列、表單結果訊息、CMS 區塊（文章列表／圖說／
   一般文字圖片按鈕區塊）——跟 default 主題同一份規則，換成本站紅色（#b51010）當主色。
   規則：不得出現 body/html/img/a/p/h1-h3 等裸元素選擇器，避免覆蓋原站樣式而讓版面走樣。 */

/* 後台預覽列 */
.preview-bar { background: #fdeaea; color: #8f0d0d; text-align: center; padding: 6px; font-size: 13px; }
.preview-bar a { text-decoration: underline; }

/* 表單送出結果 */
.form-result { padding: 11px 16px; margin: 0 auto 18px; max-width: 600px; border-radius: 2px; text-align: center; }
.form-result.ok { background: #fdeaea; color: #8f0d0d; }
.form-result.err { background: #fbe9e7; color: #c62828; }

/* 文章列表（post_list 區塊與 /blog 列表） */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-top: 24px; }
.post-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.post-card h2 { font-size: 20px; margin: 12px 0 4px; }
.post-card .post-date { font-size: 13px; color: #999; letter-spacing: 0.05em; margin: 0 0 8px; }
.pager { margin-top: 30px; display: flex; gap: 8px; }
.pager a, .pager .cur { padding: 7px 13px; color: #333; border: 1px solid rgba(0, 0, 0, .12); }
.pager .cur { background: #b51010; color: #fff; border-color: #b51010; }

/* 搬遷內容用的圖說（原站圖片下方說明文字） */
.img-caption { font-size: 13px; color: #888; text-align: center; margin-top: 8px; line-height: 1.6; }

/* CMS 原生區塊（後台新增的內容用，搬遷頁面用不到） */
.block { padding: 30px 0; }
.block .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.block-hero { background-size: cover; background-position: center; background-color: #f6f2f2; position: relative; }
.block-hero.has-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); }
.hero-inner { position: relative; z-index: 1; padding: 90px 40px; text-align: center; color: #fff; }
.hero-inner h1 { font-size: 46px; font-weight: 300; letter-spacing: 0.05em; color: #fff; margin: 0 0 14px; }
.hero-sub { font-size: 19px; margin: 0 0 26px; }
.gallery-grid, .columns-grid { display: grid; gap: 18px; }
.gallery-grid img { width: 100%; object-fit: cover; }
.columns-grid .col { min-width: 0; }
.block-image img { margin: 0 auto; }
.block-button .wrap { text-align: center; }
.btn { display: inline-block; padding: 12px 28px; background: #b51010; color: #fff; border-radius: 2px; letter-spacing: 0.05em; }
.btn:hover { background: #8f0d0d; }
.site-form { max-width: 560px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin-bottom: 5px; font-size: 14px; }
.form-field input, .form-field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px; font-size: 15px; font-family: inherit; }
.form-field textarea { min-height: 120px; }

/* spacer／counter／faq 區塊（2026-08-20 新增） */
.block-spacer { padding: 0; display: flex; align-items: center; }
.block-spacer .spacer-line { width: 100%; height: 1px; background: currentColor; opacity: .15; }
.counter-grid { display: grid; gap: 24px; text-align: center; }
.counter-number { font-size: 36px; font-weight: 600; color: #b51010; line-height: 1.1; }
.counter-label { font-size: 14px; color: #767676; margin-top: 6px; }
.block-faq .faq-item { border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 16px 0; }
.block-faq .faq-item summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; }
.block-faq .faq-item summary::-webkit-details-marker { display: none; }
.block-faq .faq-item summary::after { content: '+'; float: right; font-weight: 400; color: #b51010; }
.block-faq .faq-item[open] summary::after { content: '−'; }
.block-faq .faq-answer { margin-top: 12px; color: #555; line-height: 1.7; }

/* map／social／file 區塊（2026-08-20 新增） */
.block-map iframe { display: block; }
.block-social-icons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.block-social-icons a { display: inline-flex; align-items: center; gap: 10px; color: #26303b; text-decoration: none; }
.block-social-icons .social-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #b51010; color: #fff;
    transition: transform .15s, box-shadow .15s;
}
.block-social-icons a:hover .social-badge { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.block-social-icons .social-label { font-size: 14px; font-weight: 600; }
.block-file .wrap { text-align: center; }
.file-download { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: #f6f2f2; color: #b51010; border-radius: 2px; font-weight: 600; }
.file-download:hover { background: #fbe9e9; }

@media screen and (max-width: 767px) {
    .block .wrap { padding: 0 20px; }
    .gallery-grid, .columns-grid { grid-template-columns: 1fr !important; }
    .hero-inner h1 { font-size: 32px; }
    .counter-grid { grid-template-columns: repeat(2, 1fr) !important; }
}