/* ============================================================
   Alisynn 艾莉森｜alisynn-c.css — C 影像畫廊全站元件層（2026-10-21）
   最後載入。把各頁沿用的舊元件統一成編輯體：編號段落標題、襯線內文、
   細線卡片、hairline 表格、常見問題、深色 CTA、照片佔位。
   顏色一律用 design-tokens.css 的變數（深色模式自動跟著變）。
   ============================================================ */

/* ---------- 段落標題：各頁的 ✦／✠ 記號改為 C 的編號 eyebrow ---------- */
:root { --c-gutter: 40px; }
@media (max-width: 768px) { :root { --c-gutter: 20px; } }

main { counter-reset: c-sec; }
main h2:not(.c-plain) {
  counter-increment: c-sec;
  font-family: var(--serif-tc) !important;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
  text-wrap: balance;
}
main h2:not(.c-plain)::before {
  content: counter(c-sec, decimal-leading-zero) !important;
  display: block !important;
  position: static !important;
  width: auto !important; height: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
  color: var(--oxblood) !important;
}
/* 元件內的標題（聯絡卡、商品目錄 CTA、深色區塊）不編號 */
main :is(.site-contact-card, .cta-mid-block, .purchase-directory-cta, .article-toc, [class*="cta"], [class*="hero"]) h2::before,
main h2[id^="site-"]::before, main h2[id^="purchase-"]::before { content: none !important; display: none !important; }
main :is(.site-contact-card, .cta-mid-block, .purchase-directory-cta, [class*="cta"], [class*="hero"]) h2 { counter-increment: none; }

/* 舊版標題左側色條、底線拿掉，改由編號 eyebrow 區隔 */
main h2:not(.c-plain) { border-left: 0 !important; padding-left: 0 !important; background: none !important; }
main h2:not(.c-plain)::after { display: none !important; }

main h3 { font-family: var(--serif-tc); font-weight: 600; letter-spacing: .01em; }

/* ---------- 內文：襯線、寬行距 ---------- */
main.content-wrap, main .article-body, main .prose { color: var(--ink-2); }
main.content-wrap p, main .article-body p, main .prose p,
main.content-wrap li, main .article-body li {
  font-family: var(--serif-tc);
  line-height: 1.95;
}
main p strong, main li strong { color: var(--ink); font-weight: 600; }
/* 沒有任何樣式的連結（零權重，各頁與深色區塊的連結樣式一律優先）：酒紅色，避免出現瀏覽器預設藍 */
:where(main) :where(a:not([class])) { color: var(--oxblood); }
/* 內文段落裡的純文字連結：只加底線，不改各頁原本的連結顏色（避免蓋掉按鈕型連結的配色） */
main :is(p, li) > a:not([class]):not([style]) {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
main :is(p, li) > a:not([class]):not([style]):hover { text-decoration-color: var(--oxblood); }
main blockquote {
  border-left: 2px solid var(--gold-soft);
  background: var(--paper);
  padding: 14px 20px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
}

/* ---------- 卡片：編輯體用細線，不用浮起陰影 ---------- */
main *:not(.btn-top):not(.back-to-top) { box-shadow: none !important; }
main [style*="box-shadow"] { border: 1px solid var(--rule-soft); }
main [style*="border-radius"]:not([style*="50%"]):not([style*="999"]):not([style*="border-radius:2"]) { border-radius: 4px !important; }

/* 卡片、提示框：方角（C 不用大圓角；圓形頭像、膠囊標籤不受影響） */
main :is(div, section, article, aside, a, li, details)[class*="card"],
main :is(div, section, aside)[class*="box"],
main :is(div, section, aside)[class*="callout"],
main :is(div, section, aside)[class*="panel"],
main :is(div, section, a, li)[class*="tile"],
main .faq-item, main .cta-box, main .info-box, main .tip-box {
  border-radius: 2px !important;
}

/* ---------- 表格：hairline ---------- */
main thead, main :is(thead, tr):has(> th), main thead tr { background: transparent !important; }
main table { border-collapse: collapse; width: 100%; font-family: var(--serif-tc); }
main th, main thead td {
  background: transparent !important;
  color: var(--ink-3) !important;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  padding: 12px 14px;
}
main td {
  border: 0 !important;
  border-bottom: 1px solid var(--rule-soft) !important;
  padding: 14px;
  vertical-align: top;
  line-height: 1.8;
}
main td, main tr:nth-child(even) td { background: transparent !important; }

/* ---------- 常見問題 ---------- */
main .faq-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule-soft) !important;
  border-radius: 0 !important;
  padding: 22px 0 !important;
  margin: 0 !important;
}
main .faq-item:first-of-type { border-top: 1px solid var(--rule-soft) !important; }
main .faq-q { font-family: var(--serif-tc) !important; font-size: 18px; font-weight: 600; color: var(--ink) !important; line-height: 1.5; }
main .faq-a { font-family: var(--serif-tc) !important; font-size: 15.5px; line-height: 1.9; color: var(--ink-2) !important; }

/* ---------- 頁首照片（.hero > .hero-card，147 頁）：C 的全幅照片＋雙層遮罩 ----------
   照片上只放分類 eyebrow、標題、導言；作者日期改由照片下方的 masthead 呈現。
   照片永遠是深色，所以頁首內一律鎖定淺色模式的色彩變數（深色模式下文字也維持淺色）。 */
:is(.hero-card, .sel-hero, .topic-hero, .ti-hero, .cat-hero, .answer-hero, .answer-index-hero,
    .event-hero, .contact-hero, .method-hero, .policy-hero, .page-hero, .product-hero,
    .product-index-hero, .hero-article, .situation-hero, .source-hero, .tool-hero, .cta-mid-block) {
  --ivory: #f5f0e6; --ivory-2: #ebe4d4; --paper: #faf6ec;
  --ink: #1c1814; --ink-2: #4a423a; --ink-3: #8a8270;
  --rule: #d6cdb8; --rule-soft: #e8dfca; --oxblood: #6e1f23; --oxblood-deep: #4d1416;
  --gold-soft: #b89058; --gold-ink: #c9a86a;
}
.hero { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.hero > .hero-card {
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: clamp(380px, 56vh, 600px);
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 72px max(var(--c-gutter), calc((100vw - 1120px) / 2)) 52px !important;
  text-align: left !important;
  background-image:
    linear-gradient(180deg, rgba(20,15,12,.34) 0%, rgba(20,15,12,.16) 30%, rgba(20,15,12,.5) 64%, rgba(20,15,12,.86) 100%),
    linear-gradient(95deg, rgba(20,15,12,.62) 0%, rgba(20,15,12,.24) 46%, transparent 70%),
    var(--hero-photo) !important;
}
.hero > .hero-card::before, .hero > .hero-card::after { display: none !important; }
.hero-card :is(.hero-category, .hero-tag) {
  background: none !important; border: 0 !important; backdrop-filter: none !important;
  padding: 0 !important; margin: 0 0 18px !important; border-radius: 0 !important;
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .2em !important; text-transform: uppercase;
  color: rgba(245,240,230,.9) !important;
}
.hero-card :is(.hero-category, .hero-tag)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); }
.hero > .hero-card h1 {
  font-family: var(--serif-tc) !important;
  font-size: clamp(32px, 4.6vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
  max-width: 16em;
  margin: 0 !important;
  text-shadow: 0 2px 30px rgba(20,15,12,.6) !important;
}
.hero-card .hero-subtitle, .hero-card .hero-sub {
  font-family: var(--serif-tc) !important;
  font-size: 17px !important; line-height: 1.85 !important;
  max-width: 40em; margin: 18px 0 0 !important; opacity: .9;
}
.hero-card .hero-meta {
  margin-top: 22px !important; display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--mono); font-size: 11px !important; letter-spacing: .14em; opacity: .85 !important;
}
.hero-card .hero-icons, .hero-card .hero-badge-row:empty { display: none !important; }

/* 其他頁首（各分類索引、手記、主題、問答、閱讀、修會、台灣教堂、文章頁首）：同樣改為全幅、方角、靠左下 */
:is(.page-hero, .product-index-hero, .sel-hero, .ti-hero, .topic-hero, .cat-hero, .answer-hero,
    .answer-index-hero, .event-hero, .contact-hero, .method-hero, .policy-hero, .hero-article,
    .situation-hero, .source-hero, .tool-hero) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: clamp(340px, 50vh, 560px);
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 72px max(var(--c-gutter), calc((100vw - 1120px) / 2)) 52px !important;
  background-image:
    linear-gradient(180deg, rgba(20,15,12,.34) 0%, rgba(20,15,12,.16) 30%, rgba(20,15,12,.5) 64%, rgba(20,15,12,.86) 100%),
    linear-gradient(95deg, rgba(20,15,12,.62) 0%, rgba(20,15,12,.24) 46%, transparent 70%),
    var(--hero-photo) !important;
  background-size: cover !important;
  background-position: center !important;
}
:is(.page-hero, .product-index-hero, .sel-hero, .ti-hero, .topic-hero, .cat-hero, .answer-hero,
    .answer-index-hero, .event-hero, .contact-hero, .method-hero, .policy-hero, .hero-article,
    .situation-hero, .source-hero, .tool-hero)::before { display: none !important; }
:is(.page-hero, .product-index-hero, .sel-hero, .ti-hero, .topic-hero, .cat-hero, .answer-hero,
    .answer-index-hero, .event-hero, .contact-hero, .method-hero, .policy-hero, .hero-article,
    .situation-hero, .source-hero, .tool-hero) > * { max-width: 760px; margin-left: 0 !important; margin-right: 0 !important; }
:is(.page-hero, .product-index-hero, .sel-hero, .ti-hero, .topic-hero, .cat-hero, .answer-hero,
    .answer-index-hero, .event-hero, .contact-hero, .method-hero, .policy-hero, .hero-article,
    .situation-hero, .source-hero, .tool-hero) h1 {
  font-family: var(--serif-tc) !important;
  font-size: clamp(32px, 4.6vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 2px 30px rgba(20,15,12,.6) !important;
}
/* 商品詳情頁首保留原本左右版面，只改方角 */
.product-hero { border-radius: 2px !important; }
:is(.sel-hero-meta, .topic-hero-meta) { font-family: var(--mono); font-size: 11px !important; letter-spacing: .12em; }

/* 頁首上的分類膠囊改為 mono eyebrow */
:is(.page-hero, .product-index-hero, .sel-hero, .ti-hero, .topic-hero, .cat-hero, .answer-hero,
    .answer-index-hero, .event-hero, .hero-article, .situation-hero, .source-hero, .tool-hero, .hero-card)
  :is(.hero-tag, .hero-badge, .topic-hero-tag, .sel-hero-tag, .answer-hero-tag, .event-hero-label,
      .method-hero-label, .situation-kicker, .source-kicker, .tool-kicker, .page-hero-label, .cat-hero-label) {
  background: none !important; border: 0 !important; backdrop-filter: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; margin-bottom: 16px !important;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .2em !important; text-transform: uppercase;
  color: rgba(245,240,230,.9) !important;
}

/* ---------- 文章作者資訊列（header.php masthead） ---------- */
.article-masthead {
  max-width: 1120px;
  margin: 0 auto 8px;
  padding: 16px 24px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.article-masthead > span, .article-masthead > a { display: inline-flex; gap: 8px; align-items: baseline; }
.article-masthead b {
  font-family: var(--serif-tc); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.article-masthead a { color: inherit; text-decoration: none; }
.article-masthead a:hover b, .article-masthead a:hover { color: var(--oxblood); }
.article-masthead .is-updated b { color: var(--oxblood); }

/* ---------- 商品目錄 CTA（cta-mid.php）：C 的深色方塊 ---------- */
.cta-mid-block {
  border-radius: 0;
  border: 0;
  background: var(--ink);
  padding: 44px 44px;
}
.cta-mid-block::before { display: none; }
.cta-mid-text h3 { font-family: var(--serif-tc); font-weight: 600; font-size: 22px; letter-spacing: .02em; }
/* 深色橫幅裡的文字一律淺色（各頁的 .article-body h3 等規則會蓋過） */
.cta-mid-block :is(h2, h3, h4, p, span, strong) { color: var(--ivory) !important; }
.cta-mid-text p { font-family: var(--serif-tc); opacity: .78; }
.cta-mid-btn {
  border-radius: 0;
  box-shadow: none;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em;
  padding: 16px 28px;
}
.cta-mid-btn:hover { box-shadow: none; background: var(--oxblood-deep); }

/* ---------- 照片佔位（新增照片區塊尚無授權照片時使用） ---------- */
.photo-ph {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: repeating-linear-gradient(135deg, var(--ivory-2) 0 10px, var(--paper) 10px 20px);
  border: 1px solid var(--rule-soft);
  color: var(--ink-3);
}
.photo-ph::after {
  content: attr(data-label);
  padding: 12px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.photo-ph.is-wide { aspect-ratio: 16 / 9; }

/* ---------- 手機選單常用入口：emoji 改為編號 ---------- */
.nav-drawer--v2 .nav-quick-icon {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--oxblood);
  align-self: flex-start; padding-top: 3px;
}
.nav-drawer--v2 a[aria-current="page"] .nav-quick-icon { color: var(--ivory); }

@media (max-width: 600px) {
  .article-masthead { padding: 14px 20px; gap: 8px 20px; }
  .cta-mid-block { padding: 32px 22px; }
  main th, main td { padding: 10px 8px; }
  main td { min-width: 5em; }
  main th { white-space: nowrap; }
}

/* ---------- emoji 圖示拿掉後留下的空位 ---------- */
main :is([class*="icon"], [class*="emoji"], .cat-badge):empty { display: none !important; }

/* ---------- 個別元件對比修正（全站對比掃描找到的金底淺字、淺底淺字） ---------- */
main :is(.cta-gold, .badge-gold, .badge-amber, .budget-header.t3, .gift-rank.r10) {
  --ivory: #f5f0e6; --paper: #faf6ec; background: #76602f !important; color: #f5f0e6 !important;
}
main .scapular-card .card-subtitle { --ivory: #f5f0e6; }
main .topic-card.saints .card-num { color: var(--ink) !important; }
main .chief-avatar { background: #6e1f23 !important; color: #f5f0e6 !important; }
main :is(.buy-btn, .btn-product-limited) { background: #6e1f23 !important; color: #f5f0e6 !important; }
main :is(.room-header, .time-badge, .station-num, .gift-rank-badge) { background: #76602f !important; }
main :is(.room-header, .time-badge, .station-num, .gift-rank-badge),
main :is(.room-header, .time-badge, .station-num, .gift-rank-badge) * { color: #f5f0e6 !important; }
main .cat-img text { fill: #f5f0e6; }
/* 金底元件在深色模式也維持淺色模式的配色（深色模式的 --gold-ink 是淺金，當底色會讓字看不清） */
main :is(.mat-tag, .scapular-card .card-subtitle, .topic-card.saints, .intention-note) {
  --ivory: #f5f0e6; --ivory-2: #ebe4d4; --paper: #faf6ec; --ink: #1c1814; --ink-2: #4a423a; --ink-3: #8a8270;
  --rule: #d6cdb8; --rule-soft: #e8dfca; --oxblood: #6e1f23; --gold-ink: #76602f; --gold-soft: #b89058;
}
main .ed-trust-card { --ivory: #f5f0e6; --ink: #1c1814; --gold-ink: #c9a86a; --gold-soft: #b89058; }
main .budget-badge.b2 { background: #76602f !important; }
main .intention-note { color: var(--ink); }