/* 寬螢幕版面(2026-10-24 老闆:32 吋螢幕看各功能頁左右空太多 → 以會員中心為準)。
   會員中心用 .container-wide(最寬 1280px、內容 1216px)。各功能頁在 ≥1280px 時把內容排滿這個寬度,
   但表單維持好填的寬度、長文維持好讀的行長:多出來的寬度改放第二欄(服務說明、目錄等)。1280 以下一律維持原本排版。
   靜態檔,由 layouts/app 載入,不用打包;改了這支要把 layouts/app 的 ?v= 加一(Cloudflare 快取靜態檔一年)。 */

.xd-svc-facts { display: none; }

@media (min-width: 1280px) {
    /* ── 服務填寫頁(reading/start、八字):左欄介紹固定、右欄表單 ── */
    .xd-svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42rem); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: start; }
    .xd-svc-aside h1 { font-size: clamp(2.2rem, 2.6vw, 2.75rem); }
    .xd-svc-aside h1 .block { font-size: 1.4rem; }
    .xd-svc-aside > .mx-auto { max-width: none; margin: 0; }
    .xd-svc-main > .max-w-2xl, .xd-svc-main > .max-w-xl { max-width: none; }
    /* v2 標題區原本用 46rem 寬 + margin-left:50% + translateX(-50%) 撐出窄表單容器;放進左欄就收回欄寬 */
    .xd-svc-aside .xd-start-head { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; text-align: left; width: auto; margin: 0; transform: none; }
    .xd-svc-aside .xd-start-head .hx-kicker { justify-content: flex-start; }
    .xd-svc-aside .xd-start-title h1 { font-size: clamp(2.4rem, 3vw, 3rem); }
    .xd-svc-aside .xd-cover-scroll { margin: 0; max-width: 34rem; }
    .xd-svc-aside .text-center { text-align: left; }
    .xd-svc-aside .text-center > .mx-auto { margin-left: 0; }
    .xd-svc-layout.max-w-2xl { max-width: none; }   /* 八字:Livewire 元件根元素本身就是兩欄容器 */
    .xd-svc-aside .xd-cover-scroll-center { margin: 1.75rem 0 0; max-width: 34rem; }
    .xd-svc-aside .mb-12 { margin-bottom: 0; }

    .xd-svc-facts { display: block; margin-top: 2.25rem; max-width: 34rem; }
    .xd-svc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--xd-rule-2, rgb(150 112 44 / 0.42)); border-bottom: 1px solid var(--xd-rule-2, rgb(150 112 44 / 0.42)); }
    .xd-svc-stats > div { padding: 0.9rem 0.25rem; }
    .xd-svc-stats > div + div { padding-left: 1rem; border-left: 1px solid var(--xd-rule, rgb(150 112 44 / 0.24)); }
    .xd-svc-stats dt { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--xd-ink-4, #6F6450); }
    .xd-svc-stats dd { margin: 0.2rem 0 0; font-weight: 800; color: var(--xd-ink, #1C1913); line-height: 1.45; }
    .xd-svc-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; counter-reset: xd-step; display: grid; gap: 1.1rem; }
    .xd-svc-steps li { position: relative; padding-left: 2.6rem; counter-increment: xd-step; }
    .xd-svc-steps li::before { content: counter(xd-step); position: absolute; left: 0; top: 0.05rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
        border-radius: 2px; background: var(--xd-cinnabar, #B4242C); color: #FFF3E6; font-size: 0.85rem; font-weight: 800; }
    .xd-svc-steps strong { display: block; font-weight: 800; color: var(--xd-ink, #1C1913); }
    .xd-svc-steps span { display: block; margin-top: 0.2rem; font-size: 0.9rem; line-height: 1.75; color: var(--xd-ink-4, #6F6450); }
    .xd-svc-guide { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1.75rem; font-weight: 700; color: var(--xd-gold-ink, #7E5D22); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
    .xd-svc-guide svg, .xd-svc-guide i { width: 1rem; height: 1rem; }
    .xd-svc-guide:hover { color: var(--xd-cinnabar-ink, #7A1820); }
}

/* 左欄捲動時固定:螢幕夠高才固定,不然左欄下半部會被切掉 */
@media (min-width: 1280px) and (min-height: 960px) {
    .xd-svc-aside { position: sticky; top: 6.5rem; }
}

/* ── 卡片格子為主的頁面:版面容器排滿會員中心的寬度(說明短文的 max-w-2xl 不動,行長維持好讀) ── */
@media (min-width: 1280px) {
    body[data-page="pricing"] .max-w-5xl.mx-auto,
    body[data-page="free"] .max-w-5xl.mx-auto,
    body[data-page="free"] .max-w-4xl.card-paper,
    body[data-page="ai"] .max-w-5xl.mx-auto,
    body[data-page="love"] .max-w-4xl.card-paper,
    body[data-page="love"] .max-w-6xl.mx-auto,
    body[data-page^="library."] .w-full.min-w-0.mx-auto { max-width: none; }
    /* 籤詩庫:五位神明的籤譜卡片由兩欄改三欄 */
    body[data-page="library.oracle"] .grid.md\:grid-cols-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    /* 塔羅牌義:放寬後六張一排每張太大 → 一排八張 */
    body[data-page="library.tarot"] .grid.md\:grid-cols-6 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ── 長文目錄(public/js/wide-toc.js):命書結果頁、AI 算命、隱私權/條款/退款 ── */
.xd-toc-rail { display: none; }
@media (min-width: 1280px) {
    .xd-read-host { position: relative; }
    .xd-read-host.container-narrow, body[data-page^="legal."] .container-narrow { max-width: 80rem; }
    .xd-read-host h2[id] { scroll-margin-top: 6.5rem; }
    .xd-toc-rail { display: block; position: absolute; bottom: 0; z-index: 2; }
    .xd-toc-rail[hidden] { display: none; }
    .xd-toc { position: sticky; top: 7rem; max-height: calc(100vh - 9rem); overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; }
    .xd-toc-title { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; color: var(--xd-gold-ink, #7E5D22); }
    .xd-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--xd-rule-2, rgb(150 112 44 / 0.42)); }
    .xd-toc li { margin: 0; }
    .xd-toc a { display: block; margin-left: -1px; padding: 0.42rem 0 0.42rem 0.9rem; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.55;
        color: var(--xd-ink-4, #6F6450); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
    .xd-toc a:hover { color: var(--xd-ink, #1C1913); }
    .xd-toc a.is-on { color: var(--xd-ink, #1C1913); font-weight: 700; border-left-color: var(--xd-cinnabar, #B4242C); }
    .xd-toc a:focus-visible { outline: 2px solid var(--xd-gold, #C8A452); outline-offset: 2px; }
}

/* ── 會員中心子頁(帳號設定、個人資料):跟會員中心首頁一樣寬,卡片排兩欄(輸入框留在卡片裡,不會被拉長) ── */
@media (min-width: 1280px) {
    body[data-page="dashboard.account"] section.container-narrow,
    body[data-page="dashboard.profile"] section.container-narrow { max-width: 80rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
    body[data-page="dashboard.account"] section.container-narrow > .card-paper,
    body[data-page="dashboard.profile"] section.container-narrow > .card-paper { margin-top: 0; }
    body[data-page="dashboard.account"] section.container-narrow > :not(.card-paper),
    body[data-page="dashboard.profile"] section.container-narrow > :not(.card-paper) { grid-column: 1 / -1; margin-bottom: 0; }
}