/**
 * DANCE SOUL 頁面版型元件（.ds-section / .ds-card / .ds-grid ...）
 *
 * 原本寫在頁首範本與各頁面內容裡的 <style>，現在統一由這個檔案輸出。
 * 只能引用 tokens.css 的 --ds-* 變數，不得寫死色碼。
 */

.ds-section{padding:56px 0}
.ds-section-inner{max-width:var(--ds-maxw-wide);margin:0 auto}
.ds-eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-fg-muted);margin:0 0 8px}
.ds-card{background:var(--ds-bg-card);border:1px solid var(--ds-border);border-radius:var(--ds-radius);padding:24px;box-shadow:var(--ds-shadow);height:100%}
.ds-grid{display:grid;gap:20px}
.ds-grid>*{margin-top:0!important;margin-bottom:0!important}
.ds-grid-3{grid-template-columns:repeat(3,1fr)}
.ds-grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:781px){.ds-grid-3,.ds-grid-2{grid-template-columns:1fr}}
.ds-btn-primary .wp-block-button__link{background:var(--ds-accent)!important;color:var(--ds-accent-fg)!important;border-radius:999px!important}
.ds-btn-outline .wp-block-button__link{background:transparent!important;color:var(--ds-fg)!important;border:1px solid var(--ds-fg)!important;border-radius:999px!important}
.ds-step-num{font-size:13px;color:var(--ds-fg-muted);margin:0 0 4px}
.ds-price{font-size:26px;font-weight:700;margin:8px 0 2px}
.ds-price-note{font-size:13px;color:var(--ds-fg-muted)}
.ds-faq-q{font-weight:600;margin:0 0 4px}
.ds-table{background:var(--ds-bg-card);border:1px solid var(--ds-border);border-radius:var(--ds-radius);overflow:hidden}
.ds-table table{border-collapse:collapse;width:100%;margin:0}
.ds-table th,.ds-table td{border:none;border-bottom:1px solid var(--ds-border);padding:14px 16px;text-align:left;font-size:14px;vertical-align:top;line-height:1.5}
.ds-table thead th{background:transparent;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-fg-muted);font-weight:600;border-bottom:2px solid var(--ds-border)}
.ds-table tbody tr:last-child td{border-bottom:none}
.ds-table tbody tr:nth-child(even){background:var(--ds-fill)}
.ds-table td:first-child,.ds-table th:first-child{font-weight:600;color:var(--ds-fg)}
.ds-table td:nth-child(2){font-weight:700;white-space:nowrap}
.ds-nav-card h3{font-size:20px;line-height:1.35;font-weight:700;margin:0 0 10px}.ds-nav-card p{font-size:15px;line-height:1.6}@media (max-width:680px){
.ds-table table,.ds-table thead,.ds-table tbody,.ds-table th,.ds-table td,.ds-table tr{display:block}
.ds-table thead{display:none}
.ds-table tbody tr{border-bottom:1px solid var(--ds-border);padding:16px 16px 12px}
.ds-table tbody tr:nth-child(even){background:transparent}
.ds-table tbody tr:last-child{border-bottom:none}
.ds-table td{border:none;padding:4px 0;display:flex;gap:12px;justify-content:space-between;align-items:baseline;text-align:right}
.ds-table td::before{content:attr(data-label);font-size:12px;color:var(--ds-fg-muted);text-align:left;flex:0 0 auto}
.ds-table td:first-child{font-weight:700;font-size:15px;padding:0 0 6px}
.ds-table td:first-child::before{content:none}
.ds-table td:nth-child(2){font-weight:700}
}
.ds-warm{background:var(--ds-warm-bg);color:var(--ds-warm-fg);border-radius:var(--ds-radius);padding:24px}.ds-warm :is(h2,h3,h4,p,li,strong){color:var(--ds-warm-fg)}.ds-cool{background:var(--ds-cool-bg);color:var(--ds-cool-fg);border-radius:var(--ds-radius);padding:24px}.ds-cool :is(h2,h3,h4,p,li,strong){color:var(--ds-cool-fg)}.ds-promo-badge{display:inline-block;background:var(--ds-promo);color:var(--ds-on-brand);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.4}@media (max-width:680px){.ds-warm,.ds-cool{padding:16px}.ds-promo-badge{font-size:12px;padding:5px 12px}}
.ds-icon-link{display:inline-flex;align-items:center;flex-wrap:wrap;row-gap:2px;gap:8px;color:inherit;text-decoration:none;font-weight:600}
.ds-icon-link svg{width:18px;height:18px;flex:0 0 auto;stroke-width:2}
.ds-icon-link:hover{text-decoration:underline}
.ds-icon-row{display:flex;flex-direction:column;gap:2px}
.ds-icon-row .ds-icon-sub{flex-basis:100%;font-size:12px;color:var(--ds-fg-muted);font-weight:400;padding-left:26px}
.ds-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ds-photo-grid>*{margin-top:0!important;margin-bottom:0!important}
.ds-photo-grid img{width:100%;height:180px;object-fit:cover;border-radius:var(--ds-radius);display:block}
@media (max-width:680px){.ds-photo-grid{grid-template-columns:repeat(2,1fr)}.ds-photo-grid img{height:120px}}
.ds-media-flex{display:flex;gap:32px;align-items:center}
.ds-media-flex>*{flex:1;min-width:0}
.ds-media-flex img{width:100%;border-radius:var(--ds-radius);display:block;object-fit:cover;aspect-ratio:4/3}
@media (max-width:820px){.ds-media-flex{flex-direction:column}}
.ds-price-card .ds-price-name{font-weight:600;margin:0}.ds-price-card .ds-price{font-size:28px;font-weight:700;line-height:1.2;margin:6px 0 4px}.ds-price-card .ds-price-meta{font-size:13px;opacity:.75;margin:0;line-height:1.5}@media (max-width:781px){.ds-grid.ds-grid-m2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}}@media (max-width:680px){.ds-price-card{padding:14px!important}.ds-price-card .ds-price-name{font-size:14px}.ds-price-card .ds-price{font-size:22px}.ds-price-card .ds-price-meta{font-size:12px}.ds-card h3{font-size:20px;line-height:1.35;font-weight:700;margin:0 0 10px}.ds-card h3 a{color:inherit;text-decoration:none}}@media (max-width:820px){.ds-media-flex figure.wp-block-image,.ds-media-flex img{width:100%;max-width:100%}}

/* ------------------------------------------------------------------
 * 版面邊界（全站唯一定義）
 *
 * 原則：內容區保留主題的左右間距；.ds-section 用負邊距撐滿全寬，
 * 再由 .ds-section-inner 補回同樣的間距。兩者數值一致，因此不再需要
 * 逐頁 !important 互相覆蓋。
 * ------------------------------------------------------------------ */
/* 桌面版：把內容區的左右間距還給主題。
 * 手機版（≤780px）維持全站 18px 的窄邊距，由「其他 CSS」的手機區塊負責。
 * 舊版頁面仍帶有「padding:0 !important」的殘留規則，所以這裡需要 !important；
 * 殘留規則清除後（見 docs/MIGRATION.md）可以移除。 */
@media (min-width: 781px) {
	.wp-site-blocks .entry-content.has-global-padding,
	.wp-site-blocks .wp-block-post-content.has-global-padding {
		padding-left: var(--wp--style--root--padding-left) !important;
		padding-right: var(--wp--style--root--padding-right) !important;
	}
}
.wp-site-blocks .ds-section {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.wp-site-blocks .ds-section > .ds-section-inner {
	padding-left: var(--wp--style--root--padding-left, 0px);
	padding-right: var(--wp--style--root--padding-right, 0px);
}