/*
 * Brand CMS Core — Default Theme CSS
 * ============================================================
 * Customize per client:
 *   1. Override CSS custom properties (:root block) — colours, fonts, spacing
 *   2. Add client-specific rules after the base layer
 *   3. Replace this file entirely in a different theme directory
 *
 * Structure:
 *   Custom Properties → Reset → Layout → Header → Footer →
 *   Buttons → Hero → Carousel → Grid → CTA → FAQ → Blog →
 *   Custom HTML block → Utilities → Responsive
 * ============================================================
 */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    /* Brand colours — override these per client */
    --color-primary:      #2563eb;
    --color-primary-hover:#1d4ed8;
    --color-accent:       #f59e0b;

    /* Neutrals */
    --color-text:         #1e293b;
    --color-text-muted:   #64748b;
    --color-bg:           #ffffff;
    --color-bg-alt:       #f8fafc;
    --color-border:       #e2e8f0;

    /* Hero */
    --color-hero-overlay: rgba(0, 0, 0, 0.45);
    --hero-min-height:    520px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;

    /* Layout */
    --container:     1200px;
    --space-block:   72px;
    --radius:        8px;
    --radius-lg:     12px;

    /* Top-level page-title typography (V3 Sprint 14E Final Visual Polish).
       Single contract shared by .page-hero__title (About/FAQ/Blog/Legal/Contact/
       Static) and .block__section-label (Services/Cases/Products/Courses/Spaces
       list heroes + section labels) so every Top-level H1 shares one size /
       weight / line-height. Detail titles keep their own .detail__title rule. */
    --page-title-size:        clamp(1.5rem, 2.5vw, 2.1rem);
    --page-title-weight:      800;
    --page-title-line-height: 1.25;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html   { scroll-behavior: smooth; }
body   { font-family: var(--font-sans); color: var(--color-text);
         background: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased;
         /* V3 Sprint 14E remote repair (bottom whitespace root cause): flex sticky
            footer — main grows to fill, footer sits at the bottom on short pages,
            long pages scroll naturally. Replaces the old .site-main {min-height:60vh}
            which forced a large empty band on every short-content page. */
         display: flex; flex-direction: column; min-height: 100vh; }
img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Layout ────────────────────────────────────────────────── */
.site-main { flex: 1 0 auto; }

.block__inner {
    max-width: var(--container);
    margin:    0 auto;
    padding:   var(--space-block) 24px;
}

/* ── Site Header ───────────────────────────────────────────── */
.site-header {
    position: sticky;
    top:       0;
    z-index:   100;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.site-header__inner {
    max-width: var(--container);
    margin:    0 auto;
    padding:   0 24px;
    height:    64px;
    display:   flex;
    align-items:     center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo {
    font-size:   1.25rem;
    font-weight: 800;
    color:       var(--color-primary);
    flex-shrink: 0;
}
.site-logo img { height: 40px; width: auto; }

.site-nav ul { display: flex; align-items: center; gap: 28px; }
.site-nav a  {
    font-size:  .9rem;
    font-weight: 500;
    color:       var(--color-text-muted);
    transition:  color .2s;
}
.site-nav a:hover { color: var(--color-primary); }

/* Mobile nav toggle — hidden on desktop (V3 Sprint 14E remote repair) */
.site-nav-toggle { display: none; }

/* ── Site Footer ───────────────────────────────────────────── */
.site-footer {
    background: var(--color-text);
    color:      #94a3b8;
    padding:    48px 0 32px;
}

.site-footer__inner {
    max-width:  var(--container);
    margin:     0 auto;
    padding:    0 24px;
    display:    flex;
    flex-wrap:  wrap;
    gap:        16px;
    align-items: center;
    justify-content: space-between;
}

/* P-ITF-POST-S7-W1-B: footer nav links are navigation controls, not prose
   links — they carry a Touch-44 floor (min-height + inline-flex centering +
   controlled padding) while keeping the compact wrap rhythm. Deterministic
   flex-wrap preserves DOM order at every width. */
.site-footer__links { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 2px;
    color: #94a3b8;
    font-size: .85rem;
    line-height: 1.35;
    transition: color .2s;
}
.site-footer__links a:hover { color: #fff; }

.site-footer__social { display: flex; gap: 14px; flex-wrap: wrap; }
.site-footer__social a { color: #94a3b8; font-size: .85rem; transition: color .2s; }
.site-footer__social a:hover { color: #fff; }

.site-footer__copy {
    width: 100%;
    font-size: .78rem;
    text-align: center;
    margin-top: 16px;
    color: #64748b;
}

/* ── Buttons ───────────────────────────────────────────────── */
/* G3-A（G0-D4 根修復）：原生控制項不吃繼承字族（UA stylesheet 對
   button/input/select/textarea 指定 Arial），使輪播控制、回到頂端、
   選單開關、查詢表單裸 input 等全部落回 UA 字族。inherit 使其取
   body 的 var(--font-sans)。僅字族——尺寸/幾何契約不動。 */
button, input, select, textarea { font-family: inherit; }

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         12px 28px;
    border-radius:   var(--radius);
    font-size:       .95rem;
    font-weight:     600;
    /* G3-A（G0-D4 修復）：原生 <button class="btn"> 不吃繼承字族（UA 指定
       Arial）；inherit 取 body 的 var(--font-sans)。 */
    font-family:     inherit;
    cursor:          pointer;
    transition:      background .2s, color .2s, border-color .2s;
    text-decoration: none;
    white-space:     nowrap;
}

.btn--hero {
    background: var(--color-primary);
    color:      #fff;
    border:     2px solid transparent;
}
.btn--hero:hover { background: var(--color-primary-hover); }

.btn--cta {
    background: #fff;
    color:      var(--color-primary);
    border:     2px solid transparent;
}
.btn--cta:hover { background: #eff6ff; }

.btn--outline {
    background: transparent;
    color:      var(--color-primary);
    border:     2px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff; }

/* ── Block Base ────────────────────────────────────────────── */
.block__section-label {
    font-size:     var(--page-title-size);
    font-weight:   var(--page-title-weight);
    margin-bottom: 8px;
    color:         var(--color-text);
    line-height:   var(--page-title-line-height);
}

.block__subtitle {
    font-size:     1rem;
    color:         var(--color-text-muted);
    margin-bottom: 36px;
    max-width:     640px;
}

/* 14G-U1-CA-R2：統一共通 Header（七個共通 Header 區塊）
   .block__title 沿用 page-title 度量（與 .block__section-label 相同字級/字重/行高，
   但 class 獨立，不影響 listing 頁之 .block__section-label 契約）；
   .block__eyebrow 為眉題／小標籤（services section_label 專用）。 */
.block__title {
    font-size:     var(--page-title-size);
    font-weight:   var(--page-title-weight);
    margin-bottom: 8px;
    color:         var(--color-text);
    line-height:   var(--page-title-line-height);
}

.block__eyebrow {
    font-size:      .8rem;
    font-weight:    600;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom:  8px;
}

.block__cta-row { margin-top: 36px; text-align: center; }

/* 14G-U1-CA：主副標題對齊（僅非預設值輸出 class；預設 left 維持現行版面）
   14G-U1-CA-R2：class 作用於 .block__header 包裝，同時控制
   .block__title 與 .block__subtitle；不影響卡片、grid、區塊 CTA。
   14G-U1-CA-R3：subtitle 有 max-width:640px——center/right 除 text-align 外，
   subtitle 容器本身亦須對齊（center→margin-inline:auto；right→inline-start auto），
   否則容器停在本側造成水平偏移。 */
.block--subtitle-center { text-align: center; margin-inline: auto; }
.block--subtitle-right  { text-align: right; }
.block--subtitle-center .block__subtitle { margin-inline: auto; }
.block--subtitle-right  .block__subtitle { margin-inline-start: auto; margin-inline-end: 0; }

/* Dev-only empty notice */
.block__empty-notice {
    padding:      24px;
    background:   #fffbeb;
    border:       1px dashed #fcd34d;
    border-radius: var(--radius);
    color:        #92400e;
    font-size:    .85rem;
    margin-bottom: 16px;
}

/* ── Block: Hero (shared) ──────────────────────────────────── */
.block--hero {
    position:    relative;
    min-height:  var(--hero-min-height);
    background:  #1e293b center / cover no-repeat;
    display:     flex;
    align-items: center;
}

.block--hero::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: var(--color-hero-overlay);
}

.hero__content {
    position:        relative;
    z-index:         1;
    width:           100%;
    max-width:       var(--container);
    margin:          0 auto;
    padding:         48px 24px;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             20px;
}

.hero__heading {
    font-size:     clamp(2rem, 4.5vw, 3.2rem);
    font-weight:   800;
    color:         #fff;
    line-height:   1.18;
    max-width:     680px;
    overflow-wrap: anywhere;
}

.hero__text {
    font-size:     1.1rem;
    color:         rgba(255, 255, 255, .88);
    max-width:     560px;
    line-height:   1.6;
    overflow-wrap: anywhere;
}

/* 14G-U1-CA：Hero 內容對齊（僅非預設值輸出 class；預設 left/center ＝現行版面）
   水平：.hero__content flex item 對齊＋文字對齊；
   垂直：單圖由 .block--hero flex 控制，carousel 由 .carousel__slide flex 控制。 */
.hero--content-center .hero__content { align-items: center;   text-align: center; }
.hero--content-right  .hero__content { align-items: flex-end; text-align: right; }
.hero--content-top                    { align-items: flex-start; }
.hero--content-bottom                 { align-items: flex-end; }
.hero--content-top    .carousel__slide { align-items: flex-start; }
.hero--content-bottom .carousel__slide { align-items: flex-end; }

/* ── Block: Carousel ─────────────────────────────────────────
   V3 Sprint 14G-U1-MSR1 full-bleed repair：
   .carousel 為 .block--hero（display:flex）的 flex item，原本無 width
   會以 shrink-to-fit 退化為內容寬（靠左），導致 slide 背景圖只覆蓋
   左側一部分；改為明確 width:100%。slide 以 flex:0 0 100% 取代
   min-width:100%（百分比 min-width 在 intrinsic sizing 中會退化），
   保證每張 slide 各自佔 carousel viewport 100% 寬度。 */
/* 14G-U1-CA-R3 Carousel 互動修復（root cause）：
   track 未 transform 時無 stacking context，.hero__content（z-index:1）可逃至
   section 層級壓過 .block--hero::after 遮罩 → 第一張 CTA 可點；一旦 goTo 寫入
   inline transform，track 產生 stacking context，content 被困在 track 內、
   與 section::after 同層且 DOM 在前 → 遮罩整片蓋住 content 攔截點擊（refresh 後
   transform 消失故暫時恢復）。修復＝遮罩所有權移至 slide 內（section 遮罩對
   carousel 停用，避免 MSR1 曾排除的雙重遮罩），slide 內 .hero__content z-index:1
   恆在 slide::after（z-auto）之上，與 transform 無關；遮罩 pointer-events:none。
   另以 aria-hidden 屬性（JS 既有同步）驅動 visibility：inactive slide 退出
   hit-test 與 tab order；hide 延遲 .5s 配合 track 滑動動畫，show 立即。 */
.carousel          { position: relative; overflow: hidden; width: 100%; }
.carousel__track   { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.carousel__slide   { flex: 0 0 100%; min-height: var(--hero-min-height);
                     background: #1e293b center / cover no-repeat;
                     display: flex; align-items: center;
                     position: relative; }
.carousel__slide::after { content: ''; position: absolute; inset: 0;
                     background: var(--hero-overlay-gradient);
                     pointer-events: none; }
.block--hero-carousel::after { content: none; }
.carousel__slide[aria-hidden="true"]  { visibility: hidden; transition: visibility 0s linear .5s; }
.carousel__slide[aria-hidden="false"] { visibility: visible; transition: visibility 0s; }

.carousel__btn {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    z-index:    5;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    color:      #fff;
    border:     2px solid rgba(255,255,255,.3);
    width:      48px; height: 48px;
    border-radius: 50%;
    font-size:  1rem;
    cursor:     pointer;
    display:    flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.carousel__btn:hover { background: rgba(255,255,255,.35); }
.carousel__btn--prev { left: 20px; }
.carousel__btn--next { right: 20px; }

.carousel__dots {
    position:  absolute;
    bottom:    20px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       8px;
    z-index:   5;
}
.carousel__dot {
    width:        10px; height: 10px;
    border-radius: 50%;
    background:   rgba(255,255,255,.45);
    border:       2px solid rgba(255,255,255,.5);
    cursor:       pointer;
    transition:   background .2s;
}
/* G4-R2：is-active 改用 background-color（非 shorthand）——不重設
   background-clip，14G 的 content-box 44px 觸控目標內僅 ~10px 白點亮起；
   border-color 移除後回落 1388 的 transparent，僅可見指示變小、hitbox 不變。 */
.carousel__dot.is-active { background-color: #fff; }

/* ── Block: Grid (services + cases) ───────────────────────── */
.block--grid      { background: var(--color-bg-alt); }
.block--services  { background: var(--color-bg-alt); }

.grid-items {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   24px;
}

.grid-item {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .25s, transform .25s;
}
.grid-item:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.09);
    transform:  translateY(-3px);
}

.grid-item__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.grid-item__body {
    padding:        20px 22px 22px;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.grid-item__title {
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 8px;
    line-height:   1.4;
    overflow-wrap: anywhere;
}
.grid-item__title a:hover { color: var(--color-primary); }

.grid-item__meta {
    font-size:     .78rem;
    color:         var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.grid-item__desc {
    font-size:     .875rem;
    color:         var(--color-text-muted);
    line-height:   1.55;
    overflow-wrap: anywhere;
}

/* ── Block: CTA ────────────────────────────────────────────── */
.block--cta { background: var(--color-primary); }

/* G2（G0-D2）：動作群整組置中——文字與按鈕成為同一置中群組
   （OWNER：HOMEPAGE_BLOCK_CTA_ALIGNMENT_CENTERED；原 space-between 的
   文字左／按鈕右布局取消，行動版原 column/center 覆寫與桌面一致）。 */
.block--cta .block__inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    flex-wrap:       wrap;
    gap:             24px;
    padding-top:     56px;
    padding-bottom:  56px;
}

.cta__text {
    font-size:  1.25rem;
    font-weight: 600;
    color:      #fff;
    max-width:  620px;
    line-height: 1.5;
}

/* ── Block: FAQ ────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item details {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
    background:    #fff;
}

.faq-item__q {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         18px 22px;
    font-weight:     600;
    font-size:       .95rem;
    cursor:          pointer;
    transition:      background .2s;
    list-style:      none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-text { min-width: 0; overflow-wrap: anywhere; }
.faq-item__chevron {
    position:    relative;
    width:       22px;
    height:      22px;
    flex-shrink: 0;
    margin-left: 12px;
    border-radius: 50%;
    background:  var(--color-bg-alt);
    transition:  transform .2s;
}
.faq-item__chevron::before {
    content:     '+';
    position:    absolute;
    inset:       0;
    display:     flex;
    align-items:     center;
    justify-content: center;
    font-size:   1rem;
    font-weight: 300;
    color:       var(--color-primary);
}
details[open] .faq-item__q            { background: var(--color-bg-alt); }
details[open] .faq-item__chevron::before { content: '−'; }

.faq-item__a {
    padding:       18px 22px;
    color:         var(--color-text-muted);
    font-size:     .9rem;
    line-height:   1.75;
    border-top:    1px solid var(--color-border);
    white-space:   pre-wrap;
}

/* ── Block: Blog ───────────────────────────────────────────── */
.blog-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
}

.blog-card {
    background:    #fff;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .25s;
}
.blog-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.09); }

.blog-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.blog-card__body { padding: 20px 22px 22px; flex: 1; }

.blog-card__date {
    display:    block;
    font-size:  .75rem;
    color:      var(--color-text-muted);
    margin-bottom: 6px;
}

.blog-card__title {
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 8px;
    line-height:   1.4;
    overflow-wrap: anywhere;
}
.blog-card__title a:hover { color: var(--color-primary); }

.blog-card__excerpt {
    font-size:     .875rem;
    color:         var(--color-text-muted);
    line-height:   1.55;
    overflow-wrap: anywhere;
}

/* ── Block: Custom HTML ────────────────────────────────────── */
/* Let the embedded HTML control its own layout */
.block--custom .block__inner { padding: 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    :root { --space-block: 52px; }
    .grid-items    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .blog-cards    { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 640px) {
    :root { --space-block: 40px; --hero-min-height: 380px; }

    .site-header__inner { padding: 0 16px; }
    .site-nav ul        { gap: 16px; }

    .block--cta .block__inner {
        flex-direction: column;
        text-align:     center;
    }
    .cta__text { max-width: 100%; }

    .site-footer__inner { flex-direction: column; gap: 14px; align-items: flex-start; }
    .site-footer__copy  { text-align: left; }

    .hero__content { padding: 36px 16px; }
}

@media (max-width: 480px) {
    /* Mobile nav — hamburger reveals a collapsible panel (V3 Sprint 14E repair).
       The panel is position:absolute so it contributes NO document-flow height
       when closed (does not create bottom whitespace). Links stay in the DOM. */
    .site-nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        /* G3-A（§7 Touch44）：44×44 行動選單開關。G3-A-R1 註：此規則所屬
           ≤640 區塊，且 foundation.css 於 ≤768 亦有同名 40×40 規則並在
           載入順序上後勝——本宣告實際被覆蓋；生效規則請見下方
           G3-A-R1 cascade enforcement。 */
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--color-border);
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        align-self: center;
    }
    .site-nav-toggle__bar {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--color-text);
        border-radius: 1px;
        margin: 0 auto;
        transition: transform .15s ease, opacity .15s ease;
    }
    .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
    .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease;
    }
    .site-nav.is-open { max-height: 80vh; overflow-y: auto; }
    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px;
    }
    .site-nav li a {
        display: block;
        padding: 12px 4px;
        border-bottom: 1px solid var(--color-border);
    }
    .site-nav li:last-child a { border-bottom: none; }
}
/* G3-A-R1 — cascade enforcement（G3_A_INEFFECTIVE_CASCADE_OVERRIDE_REPAIRED）：
   foundation.css 的行動導覽規則（≤768，.site-nav-toggle 40×40）在 Default
   的 link 順序（theme.css → foundation.css）下以同 specificity 後勝，使
   G3-A 的 44×44 意圖失效，且 641–768px 區間只有 foundation 規則存在。
   以 Owner 指定模式 `.site-header .site-nav-toggle`（(0,2,0) 勝 (0,1,0)，
   與順序無關）在 foundation 的整個 ≤768 斷點覆蓋；僅取 width/height——
   display/位置/圖示幾何/開合行為/焦點樣式全部不動；
   .site-header__inner 固定 64px 高，44px 開關置中不變。 */
@media (max-width: 768px) {
    .site-header .site-nav-toggle {
        width: 44px;
        height: 44px;
    }
}
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
    .site-nav, .site-nav-toggle__bar { transition: none; }
}

/* ── Top-level page hero (V3 Sprint 14E visual consistency) ──
   Shared full-width hero band for Top-level public pages (About/FAQ/Blog/Legal/
   Contact/Static). Uses the same --color-bg-alt token as the entity list
   .block--grid sections so every Top-level hero shares one background. Title +
   subtitle use the shared --page-title-* typography contract (same as
   .block__section-label), centered, constrained to the container. Detail pages
   keep their own left-aligned .detail chrome (detail-shell.php) — untouched. */
.page-hero {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 48px 24px 32px;
    text-align: center;
}
.page-hero__title {
    max-width: var(--container);
    margin: 0 auto 8px;
    font-size: var(--page-title-size);
    font-weight: var(--page-title-weight);
    color: var(--color-text);
    line-height: var(--page-title-line-height);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.page-hero__subtitle {
    max-width: var(--container);
    margin: 0 auto;
    font-size: 1rem;
    color: var(--color-text-muted);
}
@media (max-width: 640px) {
    .page-hero { padding: 32px 16px 24px; }
    /* Explicit mobile floor for the shared title contract (clamp already
       bottoms out at 1.5rem; pinned here so all Top-level titles match). */
    .page-hero__title, .block__section-label { font-size: 1.5rem; }
    /* 14G-U1-CA-R2：共通主標題沿用同一 mobile pin（獨立規則，不改既有 selector 契約） */
    .block__title { font-size: 1.5rem; }
}

/* ── Course enrollment form (V3 Sprint 14E Round-2 mobile repair) ──
   The schedule is rendered as semantic <label> cards (no <table>). These rules
   keep desktop presentation identical while letting the input grids collapse to
   a single column on narrow screens and giving each session meta field a label. */
.course-enroll__form {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px 28px;
}
.course-enroll__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.course-session__body { min-width: 0; }
.course-session__meta {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin-top: 3px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.course-session__field { display: inline-flex; align-items: baseline; }
.course-session__label {
    font-size: .72rem;
    color: #94a3b8;
    margin-right: 4px;
}
@media (max-width: 560px) {
    .course-enroll__form { padding: 18px 16px; }
    .course-enroll__row  { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Booking / enrollment semantic presentation (P-ITF-D4-S5 / DEC-165) ──
   SHARED_SEMANTIC_CLASS_PRESENTATION_REFACTOR: the Space booking region and
   the Course enrollment region were previously hardcoded inline in the two
   shared show.php templates; every visual value below is MIGRATED from those
   inline declarations (Default visual parity — same values, now in classes).
   A custom theme (e.g. professional-services) owns its own copy of this
   vocabulary in assets/theme-scoped.css; tokens (var(--booking-*)) let a
   theme re-point colors without touching structure. No escalation rules;
   the sealed space-cal-* DOM/JS contract is unchanged. */

/* Region band + heading (was: margin-top:48px;padding-top:*;border-top) */
.booking-region {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}
.booking-region__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}
.booking-region__title--course {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.booking-region__intro {
    color: var(--color-text-muted);
    font-size: .85rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Neutral intro notice (was: inline #f8fafc panel) */
.booking-notice {
    font-size: .875rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
}

/* Rules panel (was: inline amber #fffbeb/#fde68a/#92400e) */
.booking-rules {
    font-size: .875rem;
    color: var(--color-text);
    line-height: 1.85;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--booking-rules-bg, #fffbeb);
    border: 1px solid var(--booking-rules-border, #fde68a);
    border-radius: var(--radius);
}
.booking-rules__title {
    display: block;
    margin-bottom: 4px;
    color: var(--booking-rules-ink, #92400e);
}

/* Flash banners (was: inline green/red panels; course margin-top variant) */
.form-flash--ok {
    background: var(--booking-ok-bg, #f0fdf4);
    border: 1px solid var(--booking-ok-border, #86efac);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    color: var(--booking-ok-ink, #166534);
    font-size: .9rem;
}
.form-flash--err {
    background: var(--booking-err-bg, #fef2f2);
    border: 1px solid var(--booking-err-border, #fca5a5);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    color: var(--booking-err-ink, #b91c1c);
    font-size: .9rem;
}
.form-flash--ok--course,
.form-flash--err--course {
    margin-top: 48px;
    margin-bottom: 0;
    padding: 12px 16px;
    line-height: 1.6;
}
.form-flash--ok--course { background: var(--booking-ok-bg, #dcfce7); }
.form-flash--err--course { background: var(--booking-err-bg, #fee2e2); color: var(--booking-err-ink, #991b1b); }

/* Course enrollment card (was: .course-enroll__form shell — kept; inner
   region band migrated) */
.enroll-unavailable {
    padding: 24px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    color: var(--color-text-muted);
    font-size: .9rem;
}

/* Session option card (was: inline label card + selected #3b82f6/#eff6ff) */
.session-option {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--booking-session-bg, #fff);
}
.session-option:has(input:disabled) { cursor: default; background: var(--color-bg-alt); }
.session-option__inner { display: flex; align-items: flex-start; gap: 10px; }
.session-option__input { margin-top: 3px; }
.session-option__body { flex: 1; min-width: 0; }
.session-option__title {
    font-weight: 600;
    color: var(--color-text);
    font-size: .92rem;
}
.session-option__full-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: var(--booking-full-bg, #fee2e2);
    color: var(--booking-full-ink, #991b1b);
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
}
.session-option__seats {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.session-option__seats-unlimited { color: var(--booking-ok-ink, #15803d); }
.session-option.is-selected {
    border-color: var(--color-primary);
    background: var(--booking-session-selected-bg, #eff6ff);
}

/* Field selection legend (was: inline strong 選擇梯次) */
.session-select__legend {
    display: block;
    font-size: .9rem;
    color: var(--color-text);
    margin-bottom: 10px;
}
.session-select { margin-bottom: 20px; }

/* Booking form primitives (was: inline label/input styles, both templates) */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.booking-form__label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 6px;
}
.booking-form__label--strong { font-weight: 600; }
.booking-form__req { color: #ef4444; }
/* P-ITF-POST-S7-W1-C: booking/enrollment fields are single-line interactive
   controls — they carry the shared 44px floor (same contract as .f-input
   below) with the original practical padding retained. */
.booking-form__field {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    box-sizing: border-box;
    border: 1px solid var(--booking-input-border, #d1d5db);
    border-radius: var(--radius);
    font-size: .9rem;
    outline: none;
    font-family: inherit;
    max-width: 100%;
}
.booking-form__field--pad { padding: 10px 12px; box-sizing: border-box; }
.booking-form__hint {
    font-size: .72rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.booking-form__terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1.5;
}
.booking-form__terms input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}
.booking-form__terms--narrow { gap: 8px; font-size: .82rem; color: #475569; line-height: 1.7; margin-bottom: 14px; }
.booking-form__link { color: var(--color-primary); }
.booking-form__note-row { margin-bottom: 14px; }
.booking-submit {
    padding: 12px 32px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.booking-submit--course {
    display: inline-block;
    padding: 12px 28px;
    font-size: .95rem;
}
.booking-submit:hover { background: var(--color-primary-hover); }

/* Disabled (non-bookable) sessions info (was: inline #f8fafc cards) */
.session-info-list {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.session-info-list__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}
.session-info-list__intro {
    color: #94a3b8;
    font-size: .8rem;
    margin-bottom: 16px;
    line-height: 1.6;
}
.session-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}
.session-info__body { flex: 1; min-width: 0; }
.session-info__title {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: .92rem;
}
.session-info__chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
}
.session-info__chip--started { background: #e2e8f0; color: #475569; }
.session-info__chip--closed   { background: var(--booking-rules-bg, #fef3c7); color: var(--booking-rules-ink, #92400e); }

/* ── Space availability calendar (V3 Sprint 10F → S5 shared semantic;
   W1-D presentation refinement) ──
   MIGRATED VERBATIM from the inline <style> block that lived inside
   spaces/show.php. Every selector is .space-cal* prefixed (same scoping
   contract); var() fallbacks preserved so a theme that omits a token still
   renders sanely. State semantics (is-open/is-past/is-blackout/is-closed/
   is-selected/is-loading) are unchanged — the calendar JS only ever
   toggles these class names.
   W1-D (P-ITF-POST-S7-W1-D, PRESENTATION_ONLY): the 7-column weekday
   grid is semantic and stays 7 columns at EVERY viewport. Day controls
   carry a 44×44 floor with NO density exception: >=768px tracks are wide
   enough on their own; on narrow phones the control stretches past its
   grid track into the GAP only (margin-inline trick) — hit areas never
   overlap a sibling button, and the calendar never overflows the page.
   JS state machine / DOM ids / aria / endpoint contracts untouched. */
.space-cal {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    font-size: .9rem;
    color: var(--color-text, #1e293b);
}
.space-cal[hidden] { display: none; }
.space-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.space-cal__title { font-weight: 600; font-size: 1rem; color: var(--color-text, #1e293b); }
.space-cal__nav {
    width: 44px; height: 44px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg, #ffffff);
    border-radius: var(--radius, 8px);
    color: var(--color-text, #1e293b);
    font-size: 1.15rem; line-height: 1;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none; appearance: none;
}
.space-cal__nav:hover:not(:disabled) { background: var(--color-bg-alt, #f8fafc); border-color: var(--color-primary, #2563eb); }
.space-cal__nav:disabled { opacity: .4; cursor: not-allowed; }
.space-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.space-cal__wd {
    text-align: center;
    font-size: .72rem; font-weight: 600;
    color: var(--color-text-muted, #64748b);
    padding: 4px 0;
}
.space-cal__blank { min-height: 1px; }
.space-cal__cell {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 6px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    background: var(--color-bg, #ffffff);
    color: var(--color-text, #1e293b);
    font-family: inherit; font-size: .85rem;
    text-align: left;
    cursor: default;
    overflow: hidden;
    -webkit-appearance: none; appearance: none;
}
/* W1-D: an interactive day fills its track; where the track alone cannot
   reach 44px (narrow phones), the control widens into the shared gap via
   negative margins — never into a sibling's hit area (gap >= stretch). */
.space-cal__cell[data-date] {
    display: block;
    width: 100%;
    min-height: 44px;
}
.space-cal__cell.is-open { cursor: pointer; }
.space-cal__cell.is-open:hover { border-color: var(--color-primary, #2563eb); background: var(--space-cal-hover-bg, #eff6ff); }
.space-cal__cell.is-open.is-selected {
    background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff;
}
.space-cal__cell.is-past,
.space-cal__cell.is-closed {
    background: var(--color-bg-alt, #f8fafc); color: var(--color-text-muted, #64748b); opacity: .55;
}
.space-cal__cell.is-blackout {
    background: var(--space-cal-blackout-bg, #fef2f2); border-color: var(--space-cal-blackout-border, #fca5a5); color: var(--space-cal-blackout-ink, #b91c1c); opacity: .7;
}
.space-cal__cell.is-loading { background: var(--color-bg-alt, #f8fafc); color: var(--color-text-muted, #64748b); }
.space-cal__cell.is-selected { outline: 2px solid var(--color-primary, #2563eb); outline-offset: -2px; }
/* W1-D: keyboard focus ring for interactive day controls (state clarity). */
.space-cal__cell[data-date]:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: -2px;
}
.space-cal__num { display: block; line-height: 1.2; }
.space-cal__occ {
    position: absolute; top: 3px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: var(--color-bg-alt, #f8fafc); color: var(--color-text-muted, #64748b);
    font-size: .65rem; font-weight: 600; line-height: 16px; text-align: center;
}
.space-cal__cell.is-selected .space-cal__occ { background: rgba(255, 255, 255, .28); color: #fff; }
.space-cal__loading {
    grid-column: 1 / -1; padding: 16px; text-align: center;
    color: var(--color-text-muted, #64748b); font-size: .85rem;
}
.space-cal__err {
    margin: 10px 0 0; padding: 10px 12px;
    background: var(--space-cal-err-bg, #fff7ed); border: 1px solid var(--space-cal-err-border, #fed7aa); border-radius: var(--radius, 8px);
    color: var(--space-cal-err-ink, #9a3412); font-size: .85rem;
}
.space-cal__err[hidden] { display: none; }
.space-cal__day {
    margin-top: 14px; padding: 12px;
    background: var(--color-bg-alt, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px);
    font-size: .85rem;
}
.space-cal__day[hidden] { display: none; }
.space-cal__day-date { font-weight: 600; margin-bottom: 4px; }
.space-cal__bh { color: var(--color-text-muted, #64748b); margin-bottom: 6px; }
.space-cal__occ-list { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.space-cal__occ-list li { margin-bottom: 2px; }
.space-cal__occ-st {
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    border-radius: 999px; background: var(--color-bg, #ffffff); border: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-text-muted, #64748b); font-size: .7rem;
}
.space-cal__day-hint { color: var(--color-text-muted, #64748b); font-size: .78rem; margin: 6px 0 0; }
.space-cal__check {
    margin-top: 12px; padding: 10px 12px; min-height: 20px;
    border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px);
    background: var(--color-bg-alt, #f8fafc); color: var(--color-text, #1e293b); font-size: .85rem;
}
.space-cal__check:empty { display: none; }
.space-cal__check.is-ok      { background: var(--booking-ok-bg, #f0fdf4); border-color: var(--booking-ok-border, #86efac); color: var(--booking-ok-ink, #166534); }
.space-cal__check.is-err     { background: var(--booking-err-bg, #fef2f2); border-color: var(--booking-err-border, #fca5a5); color: var(--booking-err-ink, #b91c1c); }
.space-cal__check.is-warn    { background: var(--booking-rules-bg, #fffbeb); border-color: var(--booking-rules-border, #fde68a); color: var(--booking-rules-ink, #92400e); }
.space-cal__check.is-loading { background: var(--color-bg-alt, #f8fafc); color: var(--color-text-muted, #64748b); }
.space-cal__note { margin: 8px 0 0; font-size: .75rem; color: var(--color-text-muted, #64748b); }

/* Booking form responsive grid (migrated verbatim from the inline block;
   min-width:0 + 1-col collapse is the sealed overflow fix) */
.space-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.space-form-grid > div { min-width: 0; }
/* W1-C: booking textareas get a readable 3-line floor (course notes/remarks
   measured 73–88px — a two-line floor keeps the practical Default rhythm).
   input/select keep their 44px floor from .booking-form__field above. */
.space-booking-form input,
.space-booking-form select,
.space-booking-form textarea { max-width: 100%; box-sizing: border-box; }
.space-booking-form textarea { min-height: 96px; }
.course-enroll__form textarea { min-height: 96px; box-sizing: border-box; }

@media (max-width: 640px) {
    .space-cal { padding: 8px; }
    /* W1-D mobile calendar geometry: the 7-column semantic grid stays;
       where a track alone cannot reach 44px the interactive control
       stretches exactly into the shared gap (edge-to-edge hit areas,
       never overlapping a sibling) to hold the 44px floor. */
    .space-cal__cell { min-height: 44px; padding: 4px 2px; font-size: .78rem; }
    .space-cal__cell[data-date] {
        min-height: 44px;
        width: calc(100% + 3px);
        margin-inline: -1.5px;
    }
    .space-cal__wd   { font-size: .66rem; padding: 2px 0; }
    .space-cal__grid { gap: 3px; }
    .space-cal__occ  { min-width: 14px; height: 14px; line-height: 14px; font-size: .6rem; }
    .space-form-grid { grid-template-columns: 1fr; }
}
/* W1-D ultra-narrow (≤359px): 7×44 side-by-side cannot fit inside the
   detail shell's 16px gutters (7×44=308 > ~286 available), so the
   calendar card goes full-bleed — the sanctioned "calendar container
   adjustment": it negates the shell gutters, uses the full viewport
   width, tightens the gap to 2px, and the control stretches edge-to-
   edge to stay ≥44 wide. Page overflow stays 0; weekday/date semantics
   and the 7-column grid are untouched. */
@media (max-width: 359px) {
    .space-cal {
        margin-inline: -16px;
        padding: 8px 4px;
        border-inline-width: 1px;
        border-radius: 0;
    }
    .space-cal__grid { gap: 2px; }
    .space-cal__cell[data-date] {
        width: calc(100% + 2px);
        margin-inline: -1px;
    }
}

/* ── Course / space shared S5 responsive floor ──
   Session cards stack their flex row; the enroll grid inherits
   .course-enroll__row's existing 1-col collapse (sealed above). */
@media (max-width: 560px) {
    .session-option__inner { flex-wrap: wrap; }
}

/* ── Floating action stack (P-ITF-POST-S7-W1-A) ──────────────
   ONE fixed container owns the geometry: position/right/bottom/safe-area/
   z-index/gap. Back-to-top and the float-cta nav are in-stack children with
   NO independent fixed offsets — any enabled combination is collision-free
   by construction (replaces the old right:84px/72px side-by-side magic). */
.float-stack {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ── Back-to-top button (V3 Sprint 14E Round-2) ──────────────
   In-stack child (see .float-stack above).
   Hidden via visibility/opacity until the user scrolls past 320px (JS toggles
   .is-visible). Respects prefers-reduced-motion. Only emitted on public pages
   when the back_to_top_enabled setting is on (footer.php gates output). */
.back-to-top {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .back-to-top { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none; }
}

/* ── Floating CTA ──────────────────────────────────────────── */
.float-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.float-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: transform .15s ease, box-shadow .15s ease;
}

.float-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.24);
}

.float-cta__btn--phone     { background: #25d366; }
.float-cta__btn--line      { background: #06c755; }
.float-cta__btn--messenger { background: #0084ff; }

@media (max-width: 640px) {
    .float-stack {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    .float-cta {
        gap: 8px;
    }
    .float-cta__btn {
        width: 44px;
        height: 44px;
    }
}

/* ── Block visual modernization (V3 Sprint 14G-U1, Level B) ──
   僅新增＋局部覆寫，不刪段重建；沿用既有 --color-* 與 --container，
   新值一律用局部 component custom properties（供未來 14G-T 承接）。 */
.block--hero,
.block--grid,
.block--cta,
.block--faq,
.block--blog {
    --block-card-shadow:       0 1px 2px rgba(15, 23, 42, .05);
    --block-card-shadow-hover: 0 14px 34px rgba(15, 23, 42, .12);
    --block-badge-bg:          #f1f5f9;
    --block-badge-text:        #475569;
    --block-accent:            var(--color-primary);
    --block-placeholder-bg:    linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%);
    --block-placeholder-text:  #94a3b8;
    --hero-panel-bg:           rgba(15, 23, 42, .46);
    --hero-panel-border:       rgba(255, 255, 255, .18);
    --hero-overlay-gradient:   linear-gradient(100deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.42) 55%, rgba(15,23,42,.18) 100%);
}

/* Hero：漸層遮罩＋內容面板；無圖時改深色漸層底 */
.block--hero::after { background: var(--hero-overlay-gradient); }

.block--hero-noimg { background: linear-gradient(120deg, #1e293b 0%, #334155 100%); }
.block--hero-noimg::after { background: none; }

.hero__panel {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             20px;
    max-width:       660px;
    padding:         28px 32px;
    background:      var(--hero-panel-bg);
    border:          1px solid var(--hero-panel-border);
    border-radius:   var(--radius-lg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Carousel：dot 擴大觸控目標。
   14G-U1-MSR1：移除 U1 附加的 .carousel__slide::after——它與
   .block--hero::after 形成雙重遮罩；slide 遮罩回歸 HEAD 單遮罩語意
   （section::after 覆蓋整個 carousel viewport，content z-index 高於遮罩）。 */
.carousel__dot {
    width:           44px;
    height:          44px;
    padding:         16px;
    background-clip: content-box;
    border-color:    transparent;
}

/* Grid card：陰影層級、無圖 placeholder、徽章／價格／動作列（取代 inline style） */
.grid-item { box-shadow: var(--block-card-shadow); }
.grid-item:hover { box-shadow: var(--block-card-shadow-hover); }

.grid-item__image--placeholder {
    aspect-ratio:    4 / 3;
    background:      var(--block-placeholder-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--block-placeholder-text);
    font-size:       .8rem;
    letter-spacing:  .1em;
}

.grid-item__price {
    font-size:     .9rem;
    font-weight:   700;
    color:         var(--block-accent);
    margin-bottom: 6px;
}

.grid-item__badges {
    display:       flex;
    flex-wrap:     wrap;
    gap:           4px;
    margin-bottom: 8px;
    font-size:     .72rem;
    color:         var(--color-text-muted);
}

.badge {
    display:       inline-block;
    padding:       2px 8px;
    background:    var(--block-badge-bg);
    color:         var(--block-badge-text);
    border-radius: 4px;
}

.badge-status {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 999px;
    font-size:     .72rem;
    font-weight:   600;
    margin-bottom: 8px;
    background:    var(--block-badge-bg);
    color:         var(--block-badge-text);
}
.badge-status--open        { background: #dcfce7; color: #166534; }
.badge-status--closed      { background: #fee2e2; color: #991b1b; }
.badge-status--coming_soon { background: #fef3c7; color: #92400e; }

.chip {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 999px;
    font-size:     .72rem;
    margin-bottom: 6px;
}
.chip--category { background: #fff7ed; color: #c2410c; }

.grid-item__actions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    margin-top:      auto;
    padding-top:     14px;
    /* 14G-U1-CA-R2：卡片操作按鈕水平置中（僅 wrapper；不影響卡片文字與區塊 CTA） */
    justify-content: center;
}

/* Buttons：block 內使用的小型按鈕與 primary variant */
.btn--primary {
    background: var(--color-primary);
    color:      #fff;
    border:     2px solid transparent;
}
.btn--primary:hover { background: var(--color-primary-hover); }

/* G2（G0-D3）：Touch44——.btn--sm 互動高度 >=44px；.btn 為 inline-flex
   置中，僅提升 min-height，不改變既有 padding／字級視覺。 */
.btn--sm {
    padding:    8px 16px;
    font-size:  .8rem;
    min-height: 44px;
}

/* CTA：品牌色漸層 */
.block--cta {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}
.cta__action { flex-shrink: 0; }
.cta__text { overflow-wrap: anywhere; }

/* Blog card：無圖 placeholder（與 grid 統一） */
.blog-card__image--placeholder {
    aspect-ratio:    16 / 9;
    background:      var(--block-placeholder-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--block-placeholder-text);
    font-size:       .8rem;
    letter-spacing:  .1em;
}

/* Focus-visible：互動元素鍵盤可見焦點（AA） */
.btn:focus-visible,
.faq-item__q:focus-visible,
.grid-item__title a:focus-visible,
.blog-card__title a:focus-visible,
.blog-card__image a:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius:  2px;
}
.btn--cta:focus-visible,
.carousel__btn:focus-visible,
.carousel__dot:focus-visible {
    outline:        2px solid #fff;
    outline-offset: 2px;
}

/* G4-R2 DEFAULT_HEADER_KEYBOARD_FOCUS：header 兩個可聚焦控制項未涵蓋於
   上述 enumerated baseline（:focus-visible 只在鍵盤焦點出現，滑鼠點擊不會
   殘留 ring）；沿用 U1 同語言（--color-primary outline）。僅 outline
   屬性——不設 border-radius，site-nav-toggle 既有圓角不變。header 無
   overflow 宣告，outline 不被裁切。 */
.site-logo:focus-visible,
.site-nav-toggle:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}

/* RWD 補強（320／390／768／1024／1280／1440 無水平捲動） */
@media (max-width: 768px) {
    .hero__panel { padding: 22px 20px; }
    .carousel__btn { width: 44px; height: 44px; }
    .carousel__btn--prev { left: 8px; }
    .carousel__btn--next { right: 8px; }
}

@media (max-width: 480px) {
    .grid-items { grid-template-columns: 1fr; }
    .blog-cards { grid-template-columns: 1fr; }
    .hero__panel { padding: 18px 16px; max-width: 100%; }
    .grid-item__actions .btn { flex: 1 1 auto; }
}

/* prefers-reduced-motion：停用輪播位移動畫與卡片 hover 動畫 */
@media (prefers-reduced-motion: reduce) {
    .carousel__track { transition: none; }
    .grid-item,
    .blog-card { transition: none; }
    .grid-item:hover { transform: none; }
}

/* ── P-ITF-POST-S7-W1-C — public surface visual rhythm ─────────────────────
   Semantic measure roles: the foundation layer owns the structural variants
   (.page-container--page/legal/faq/contact); these aliases give the shared
   detail prose and booking surfaces a named role instead of scattered
   magic widths. Theme-local, additive; foundation values unchanged. */
:root {
    --measure-prose: 800px;   /* detail body / static+legal prose role  */
    --measure-form:  1080px;  /* contact+form shells (page-container--contact parity) */
}

/* Shared single-line control floor: .f-input rides on foundation padding —
   layer the 44px contract here so the exact3 file owns the geometry fix
   (measured 37px before). Textareas keep their own taller rhythm. */
.f-input, .f-select {
    min-height: 44px;
    box-sizing: border-box;
    /* G3-A（G0-D4 修復）：.f-select 為唯一無 font-family 的表單控制類
       （foundation 只覆蓋 .f-input/.f-textarea/.f-submit）。 */
    font-family: inherit;
}

/* W1-C quote/404 note: the A1 "96px line-height" was .error-page__code (the
   6rem display numeral, line-height 1 — intentional) — MEASUREMENT_ARTIFACT;
   prose (.error-page__text line-height 1.7) needs no change. No rule added. */

/* W1-C: the sealed workflow lookup templates (course-enrollments/book) carry
   inline-sized bare inputs (38–40px). CSS-only floor via their stable field
   ids — no template edits; the hidden honeypot (#website) stays untouched. */
input#customer_email,
input#enroll_code,
input#booking_code {
    min-height: 44px;
    box-sizing: border-box;
}

/* ── Product category navigation (P-ITF-POST-S7-WAVE-2) ─────────
   Neutral SaaS/default-theme treatment: pill links that wrap safely
   (long labels wrap inside their own pill, never overflow the row),
   >=44px touch height on every link, current item gets the accent
   fill. Sits with the Products listing (after .listing-head), so it
   visually belongs to this surface rather than the global header. */
.cat-nav {
    margin: 0 0 40px;
}
.cat-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cat-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--color-border, #d8dce3);
    border-radius: 999px;
    color: var(--color-text-muted, #5b6470);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
    overflow-wrap: anywhere;
}
.cat-nav__link:hover {
    border-color: var(--color-accent, #2563eb);
    color: var(--color-accent, #2563eb);
    text-decoration: none;
}
.cat-nav__link:focus-visible {
    outline: 2px solid var(--ds-focus-ring, #2563eb);
    outline-offset: 2px;
}
.cat-nav__link[aria-current="page"] {
    background-color: var(--color-accent, #2563eb);
    border-color: var(--color-accent, #2563eb);
    color: #fff;
}

/* ── Google Maps (P-ITF-POST-S7-WAVE-3 / DEC-166 §H) ───────────
   One .gmap iframe container; visual height is presentation CSS
   (NOT a stored setting): ~360px desktop / ~240px mobile. Contact
   variant sits inside the normal public container; the homepage
   full_bleed variant uses the block break-out margin pattern (no
   100vw hack). compact centers a ~480px contained frame. */
.gmap {
    position: relative;
    width: 100%;
    height: 360px;
    border: 1px solid var(--color-border, #d8dce3);
    border-radius: var(--ds-radius, 8px);
    overflow: hidden;
    background: var(--color-surface-muted, #f2f4f7);
}
.gmap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Contact bottom integration: follows the page container measure. */
.gmap-contact {
    max-width: var(--measure-form, 1080px);
    margin: 0 auto 56px;
    padding: 0 24px;
    box-sizing: border-box;
}
.gmap-contact__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--color-text, #1f2733);
}
.gmap-contact .gmap { height: 360px; }
/* Homepage block variants. */
.block--gmap { margin-block: 0; }
.gmap-variant--compact .gmap {
    max-width: 480px;
    margin-inline: auto;
}
.gmap-variant--wide .gmap {
    max-width: 100%;
}
.gmap-variant--full_bleed .block__inner { padding-bottom: 8px; }
.gmap-variant--full_bleed .gmap {
    max-width: none;
    width: 100%;
    border-inline: 0;
    border-radius: 0;
}
@media (max-width: 768px) {
    .gmap,
    .gmap-contact .gmap { height: 240px; }
    .gmap-contact { padding: 0 16px; margin-bottom: 40px; }
}
@media (max-width: 480px) {
    .gmap-variant--compact .gmap { max-width: 100%; }
}