/* ============================================================
   2026 全國太魯閣運動會 — main stylesheet
   Color tokens aligned with landing mockup / 配色對齊視覺稿
   ============================================================ */

@font-face {
    font-family: 'AaMoYunXingShu';
    src: url('../fonts/AaMoYunXingShu-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-navy: #1a2840;
    --color-charcoal: #1a1a1a;
    --color-terracotta: #8b4513;
    --color-bg-cream: #f9f9f9;
    --color-bg-beige: #f2efe8;
    --color-white: #ffffff;
    --color-gold: #c9a227;
    --color-link-blue: #2a6fbb;
    --color-text-main: #1a1a1a;
    --color-text-muted: #5c5c5c;
    --color-tag-orange: #d97706;
    --color-tag-green: #2e7d4a;
    --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --font-display: "Ma Shan Zheng", "KaiTi", "DFKai-SB", serif;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-soft: 0 12px 40px rgba(26, 40, 64, 0.08);
    --focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-main);
    background: var(--color-bg-cream);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

svg {
    display: block;
}

a {
    color: inherit;
}

/* --- accessibility: keyboard focus --- */
*:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
label.nav-toggle-open:focus-visible,
.subscribe-submit:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

label.nav-toggle-open:focus-visible {
    border-radius: 4px;
}

/* screen reader only / 視覺隱藏、僅螢幕閱讀器 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--color-navy);
    color: var(--color-white);
    text-decoration: none;
    translate: -120%;
    transition: translate 0.2s ease;
}

.skip-link:focus {
    translate: 0;
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.container-wide {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-max {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-pad {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.section-bg-soft {
    background: var(--color-bg-beige);
}

/* ========== Buttons / 按鈕 ========== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 1.35rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-dark {
    background: var(--color-navy);
    color: var(--color-white);
}

.btn-dark:hover {
    background: var(--color-charcoal);
}

.btn-outline {
    background: var(--color-white);
    color: var(--color-navy);
    border: 2px solid var(--color-navy);
}

.btn-outline:hover {
    background: var(--color-bg-beige);
}

.btn-pill-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.45rem 1rem;
    background: var(--color-charcoal);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.btn-pill-dark:hover {
    background: var(--color-navy);
}

.btn-arrow {
    display: inline-block;
    margin-inline-start: 0.125rem;
}

.play-icon {
    margin-inline-start: 0.25rem;
}

.btn-white-cta {
    background: var(--color-white);
    color: var(--color-terracotta);
}

.btn-white-cta:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.btn-light-outline {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-light-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ========== Site header ========== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* position: relative 讓行動版抽屜 nav 能以此為基準 absolute 定位 */
    background: rgba(249, 249, 249, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(26, 40, 64, 0.08);
}

/* 行動版：header 作為 nav drawer 的 containing block */
@media (max-width: 992px) {
    .site-header {
        position: relative;
    }
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 72px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
}

.site-logo-img {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.site-logo-mark {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.site-logo-text {
    display: flex;
    flex-direction: column;
}

.site-logo-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-charcoal);
    line-height: 1.2;
}

.site-logo-sub {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.site-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.site-nav-list a {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-main);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav-list a:hover {
    border-bottom-color: var(--color-gold);
}

.site-header-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-charcoal);
    border-radius: 50%;
    cursor: pointer;
}

.icon-btn:hover {
    background: rgba(26, 40, 64, 0.06);
}

.svg-icon {
    width: 22px;
    height: 22px;
}

/* mobile nav / 行動版選單（checkbox + label） */

.nav-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* 漢堡 label：點擊觸發 checkbox */
.nav-toggle-label {
    cursor: pointer;
}

/* 漢堡圖示：三條橫線容器 */
.nav-toggle-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
}

/* 每一條橫線，加入動畫 transition */
.nav-toggle-bars span {
    display: block;
    height: 2px;
    background: var(--color-charcoal);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.22s ease,
                width     0.28s ease;
}

/* ── 桌機（≥993px）：導覽橫向展示，漢堡隱藏 ── */
@media (min-width: 993px) {
    .nav-toggle-open {
        display: none !important;
    }

    .site-nav {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}

/* ── 平板 & 手機（≤992px）：漢堡 + 抽屜式選單 ── */
@media (max-width: 992px) {
    /* 漢堡按鈕顯示 */
    .nav-toggle-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .nav-toggle-open:hover .nav-toggle-bars span {
        background: var(--color-navy);
    }

    .site-header-inner {
        flex-wrap: nowrap;
    }

    /* 選單抽屜：隱藏時高度收為 0 */
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 49;
        background: var(--color-white);
        border-top: 2px solid transparent;
        box-shadow: 0 8px 24px rgba(26, 40, 64, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.1s ease;
    }

    .site-nav-list {
        flex-direction: column;
        padding: 0.5rem 0 0.75rem;
        gap: 0;
    }

    .site-nav-list li:not(:last-child) a {
        border-bottom: 1px solid rgba(26, 40, 64, 0.07);
    }

    .site-nav-list a {
        display: block;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        border-bottom: none;
    }

    .site-nav-list a:hover {
        background: rgba(201, 162, 39, 0.08);
        border-bottom-color: transparent;
    }

    /* CMS 按鈕：平板縮小，手機更小 */
    .btn-pill-dark {
        display: inline-flex;
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }

    /* 選單展開：checkbox 被勾選時 */
    .nav-toggle-input:checked ~ .site-header-inner .site-nav {
        max-height: 520px;
        border-top-color: rgba(26, 40, 64, 0.08);
    }

    /* 漢堡 → X 動畫：第一條旋轉 +45° */
    .nav-toggle-input:checked ~ .site-header-inner .nav-toggle-bars span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    /* 漢堡 → X 動畫：中間條淡出消失 */
    .nav-toggle-input:checked ~ .site-header-inner .nav-toggle-bars span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    /* 漢堡 → X 動畫：第三條旋轉 -45° */
    .nav-toggle-input:checked ~ .site-header-inner .nav-toggle-bars span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ── 手機（≤767px）：CMS 按鈕完全隱藏 ── */
@media (max-width: 767px) {
    .btn-pill-dark {
        display: none;
    }
}

/* 遮罩背景：選單開啟時覆蓋頁面，點擊可關閉 */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* :has() 現代瀏覽器偵測 checkbox 狀態 */
body:has(#nav-toggle:checked) .nav-overlay {
    display: block;
    animation: navOverlayFadeIn 0.25s ease forwards;
}

@keyframes navOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ========== Hero ========== */

.hero {
    position: relative;
    /* padding-top: 0 → hero-stage 頂端貼齊 site-header 底部
       padding-bottom: 2.5rem → 與 #quick-nav 的 margin-top: -2.5rem 抵銷，
       使 hero-stage 底端精確對齊 quick-nav 上緣 */
    padding: 0 0 2.5rem;
    background-color: var(--color-bg-beige);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(42, 111, 187, 0.06), transparent 40%),
        linear-gradient(rgba(255, 252, 245, 0.72), rgba(255, 252, 245, 0.72));
}

/* hero-grid 現為 hero-stage 的外層容器，grid layout 移至 hero-stage */
.hero-grid {
    width: 100%;
}

/* hero-stage：整合 copy、visual 與背景圖的組合元件
   position: relative 作為 hero-bg 絕對定位的 containing block
   padding-top：上方呼吸空間；padding-bottom: 0 使 stage 底端 = quick-nav 上緣 */
.hero-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 1.05fr);
    gap: 2rem;
    align-items: end;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: 0;
}

/* 背景裝飾圖層：絕對定位覆蓋 hero-stage 全區，z-index: 0 置於最底
   pointer-events: none 不攔截互動；overflow: hidden 防止圖片溢出 */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* hero-copy 與 hero-visual 同層（z-index: 1），位於 hero-bg 之上 */
.hero-copy,
.hero-visual {
    position: relative;
    z-index: 1;
}

/* hero-copy：align-items: end 的 stage 中改為垂直居中對齊 */
.hero-copy {
    align-self: center;
}

/* hero-visual：align-self: end 使 frame 底端對齊 stage 底端（= quick-nav 上緣） */
.hero-visual {
    align-self: end;
}

.hero-heading {
    font-family: 'AaMoYunXingShu', var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    white-space: nowrap;
    font-weight: 400;
    line-height: 1.08;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
    color: var(--color-charcoal);
}

.hero-subheading {
    font-family: 'DFKai-SB', 'BiauKai', 'KaiTi', serif;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.5;
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
}

.hero-dates {
    margin: 0 0 0.75rem;
    font-weight: 600;
    color: var(--color-navy);
}

.hero-location {
    margin: 0 0 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.pin-icon-wrap .svg-icon-pin {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-terracotta);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-visual-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    width: 80%;
    margin: 0 auto;
}

.hero-visual-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 -40px 60px rgba(42, 111, 187, 0.15);
}

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 平板以下：hero 改單欄，圖片置於文字下方 */
@media (max-width: 992px) {
    .hero-stage {
        grid-template-columns: 1fr;
    }

    .hero-bg img {
        object-position: center top;
    }
}

/* 手機：hero 文字對齊置中 */
@media (max-width: 767px) {
    .hero-copy {
        text-align: center;
    }

    .hero-location {
        justify-content: center;
    }

    .hero-actions {
        justify-content: center;
    }
}

/* ========== Quick nav ========== */

.quick-nav-section {
    margin-top: -2.5rem;
    position: relative;
    z-index: 2;
    padding-bottom: 0;
}

/* 圖磚帶：絕對定位覆蓋 section 全區（inset: 0），z-index: 0 確保在白色卡片後方
   SVG 原始尺寸 1512 × 443
   background-size: auto calc(70% + 0.15px)
     - height = section 高度的 70%（+ 0.15px 讓寬度等比微幅放大，相鄰 tile 重疊消除渲染間隙）
     - width = auto，瀏覽器依 1512:443 比例自動計算，不受元素寬度影響 */
.quick-nav-tile {
    position: absolute;
    inset: 0;
    background-image: url('../images/truku/green_tile03.svg');
    background-repeat: repeat-x;
    background-size: auto calc(70% + 0.15px);
    background-position: left center;
    pointer-events: none;
    z-index: 0;
}

.quick-nav-bar {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1rem, 3vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem);
    position: relative;
    z-index: 1;
}

.quick-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.quick-nav-list > li + li {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.quick-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-charcoal);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
    border-radius: 12px;
    transition: background 0.2s;
}

.quick-nav-item:hover {
    background: rgba(201, 162, 39, 0.12);
}

.quick-nav-label-text {
    font-size: 20px;
    font-weight: 700;
}

.quick-nav-icon {
    width: 102px;
    height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    background: rgba(26, 40, 64, 0.06);
    border-radius: 12px;
}

.quick-nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quick-nav-icon svg {
    width: 33px;
    height: 33px;
}

.quick-nav-icon-pattern {
    background: repeating-linear-gradient(
            45deg,
            rgba(139, 69, 19, 0.12),
            rgba(139, 69, 19, 0.12) 4px,
            transparent 4px,
            transparent 8px
        ),
        rgba(201, 162, 39, 0.15);
}

/* 平板：quick-nav 3 欄 */
@media (max-width: 992px) {
    .quick-nav-list {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 3 欄時每列首個 li 無左邊框 */
    .quick-nav-list > li:nth-child(3n+1) {
        border-left: none;
    }
}

/* 手機：quick-nav 2 欄 */
@media (max-width: 767px) {
    .quick-nav-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2 欄時每列首個 li 無左邊框 */
    .quick-nav-list > li:nth-child(3n+1) {
        border-left: revert;
    }

    .quick-nav-list > li:nth-child(2n+1) {
        border-left: none;
    }
}

/* 小手機：quick-nav 縮排 */
@media (max-width: 479px) {
    .quick-nav-section {
        margin-top: -1.5rem;
    }
}

/* ========== Section headings + diamonds ========== */

.section-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-heading-diamonds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.section-heading-diamonds h2 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--color-charcoal);
}

.section-heading-diamonds::before,
.section-heading-diamonds::after {
    content: "";
    flex: 1;
    max-width: 120px;
    height: 8px;
    background: repeating-linear-gradient(
            90deg,
            var(--color-terracotta) 0 8px,
            transparent 8px 16px,
            var(--color-gold) 16px 24px,
            transparent 24px 32px
        );
    opacity: 0.7;
}

@media (max-width: 600px) {
    .section-heading-diamonds::before,
    .section-heading-diamonds::after {
        max-width: 48px;
    }
}

/* ========== Timeline ========== */

/* 深色底色：取自設計稿，整個 section 作為深色容器 */
.timeline-section {
    background-color: #1f2a28;
    color: var(--color-white);
    padding-block: 0; /* section 高度收縮至 .container-max 自身高度 */
}

/* 版面：左 70% 時間軸 / 右 30% 加油卡 */
.timeline-layout {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: start;
}

/* timeline-heading：靠左對齊，使用 dufault_icon_white.png 取代 CSS 裝飾線 */
.timeline-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    text-align: left;
    margin-bottom: 2rem;
    border-bottom: none;
    padding-bottom: 0;
}

.timeline-heading::before,
.timeline-heading::after {
    display: none;
    content: none;
}

.timeline-heading-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
}

.timeline-heading h2 {
    margin: 0;
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-white);
}

.timeline-track-wrap {
    position: relative;
    padding-bottom: 1rem;
    overflow-x: auto;
}

.timeline-track {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: min(620px, 100%);
}

.timeline-node {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0 0.35rem;
    min-width: 5rem;
}


/* tile02.svg 連接器：垂直對齊 dot 圖示中心（icon 100px，svg 24px）
   padding-top = (100px - 24px) / 2 = 38px 使連接線水平置中對齊圖示 */
.timeline-connector {
    list-style: none;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: calc((100px - 24px) / 2);
    display: flex;
    align-items: center;
}

.timeline-connector img {
    display: block;
}

/* timeline-dot：改為 PNG 圖示的容器，移除 CSS 菱形樣式 */
.timeline-dot {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.timeline-dot img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}


.timeline-label {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
    color: var(--color-white);
}

.timeline-date,
.timeline-date-range {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* promo-card-warrior：上下緣與 container-max 邊界保持距離，不緊貼版面 */
.promo-card-warrior {
    margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* promo-card：改用 banner_background03_size_s.png 作為卡片背景
   文字顏色由白改深色（卡片底色為奶油淺色） */
.promo-card {
    background-color: var(--color-bg-beige);
    background-image: url('../images/truku/banner_background03_size_s_no_bg.png');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    color: var(--color-charcoal);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* visual 區域：移除舊漸層，高度保留供山景圖像顯示 */
.promo-card-warrior .promo-card-visual {
    min-height: 140px;
    background: none;
}

/* warrior-placeholder：PNG 背景已提供視覺，不再需要 CSS 佔位圖案 */
.warrior-placeholder {
    display: none;
}

/* 卡片內按鈕：黑底白字，外框保留深色 */
.promo-card .btn-light-outline {
    background: #000;
    color: var(--color-white);
    border-color: var(--color-charcoal);
}

.promo-card .btn-light-outline:hover {
    background: rgba(0, 0, 0, 0.8);
}

.promo-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.promo-card-title {
    margin: 0 0 1rem;
    font-family: 'AaMoYunXingShu', var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}

.promo-card-btn {
    width: 30%;
    margin-right: auto;
    display: block;
}

/* 平板以下：timeline 改單欄 */
@media (max-width: 992px) {
    .timeline-layout {
        grid-template-columns: 1fr;
    }
}

/* ========== News ========== */

/* 裝飾條掛在 #news 上，獨立於 .container-max 之外，z-index 高於卡片不被覆蓋
   原圖橫式 1426×301px；STRIP_W = 12px（原 120px 的 1/10）
   旋轉策略：高度設為 STRIP_W，width 超大以涵蓋 section 高度，
   rotate(90deg)  + translateX( STRIP_W) → 左側直式條
   rotate(-90deg) + translateX(-STRIP_W) → 右側直式條
   位置對齊 .container-max 左右邊緣：max(0px, 50% - 640px)  */
#news {
    position: relative;
    overflow: hidden;
    padding-block: 0; /* section 高度收縮至 .container-max 自身高度 */
}

#news .container-max {
    position: relative;
    z-index: 1;
    padding-inline: 0.5rem;
}

/* 左右裝飾帶：位於 .container-max 內側左右兩端，不超出容器範圍
   固定寬度 72px；height 由 aspect-ratio（SVG 原始比例 120×720）自動計算；
   max-height: 92% 防止過高；垂直置中 */
#news .container-max::before,
#news .container-max::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    aspect-ratio: 120 / 720;
    max-height: 92%;
    background-image: url('../images/truku/vertical_pattern_final.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
}

/* 左側裝飾：貼齊 container-max 左緣內側 */
#news .container-max::before {
    left: 0;
}

/* 右側裝飾：貼齊 container-max 右緣內側 */
#news .container-max::after {
    right: 0;
}

.news-heading-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    /* 72px 裝飾帶寬度 + 1rem 間隙，避免與裝飾圖重疊 */
    padding-inline: calc(72px + 1rem);
}

.news-heading-row h2 {
    margin: 0 0.35rem;   /* 圖片與標題文字緊貼 */
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* 查看全部推至最右側，button 樣式由 .btn.btn-dark 提供 */
.news-heading-row .news-view-all {
    margin-left: auto;
}

.link-arrow {
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--color-link-blue);
    white-space: nowrap;
}

.link-arrow:hover {
    text-decoration: underline;
}

.news-grid {
    list-style: none;
    margin: 0;
    padding-block: 0;
    /* 與 news-heading-row 水平範圍一致，迴避裝飾帶 */
    padding-inline: calc(72px + 1rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.35rem);
}

.news-card {
    height: 100%;
    transform: scale(0.9);
    transform-origin: top center;
}

.news-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(26, 40, 64, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: inherit;
}

.news-card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(26, 40, 64, 0.12);
}

.news-card-link:focus-visible {
    outline-offset: 4px;
}

.news-card-image {
    aspect-ratio: 48 / 28;
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-body {
    position: relative;
    padding: 1rem 1.1rem 2.25rem;
    flex: 1;
}

.news-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.news-card-meta time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-white);
}

.tag-orange {
    background: var(--color-tag-orange);
}

.tag-green {
    background: var(--color-tag-green);
}

.news-card-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-main);
}

.news-card-summary {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 1.1rem;
    color: var(--color-gold);
}

/* 平板：news 2 欄 */
@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手機：news 1 欄 */
@media (max-width: 767px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-heading-row .news-view-all {
        margin-top: 0.75rem;
    }

    /* 手機裝飾帶：縮小至 40px 寬（高度 = 40 × 6 = 240px）；
       top / transform 由 JS 透過 CSS 自訂屬性控制，
       讓圖片隨使用者 scroll 浮動並夾緊在 .container-max 上下範圍內 */
    #news .container-max::before,
    #news .container-max::after {
        width: 40px;
        top: var(--news-strip-top, 50%);
        transform: var(--news-strip-transform, translateY(-50%));
        will-change: top;
    }

    /* 配合縮小後的 40px 裝飾帶，收窄左右 padding */
    .news-heading-row,
    .news-grid {
        padding-inline: calc(40px + 0.75rem);
    }
}

/* ========== CTA ========== */

.cta-section {
    position: relative;
    padding: 0;
    background: #693320;
    color: var(--color-white);
    overflow: hidden;
}

.cta-mountains {
    display: none;
}

/* 背景圖填滿 .container-max 區塊；高度比例對齊圖片原始尺寸 1441×253
   Grid：左欄文字（h2 + p），右欄按鈕垂直置中 */
.cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3rem);
    background-image: url('../images/truku/banner_background02_size_l.png');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    aspect-ratio: 1441 / 253;
    padding-inline: clamp(2rem, 5vw, 3.5rem);
    overflow: hidden;
}

.cta-inner .cta-title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}

.cta-inner .cta-desc {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-bottom: 0;
}

.cta-inner .btn-white-cta {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
}

.cta-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    text-align: left;
}

.cta-desc {
    margin: 0 0 1.75rem;
    font-size: 1.05rem;
    opacity: 0.95;
    text-align: left;
}

/* ========== Footer ========== */

.site-footer {
    background: var(--color-charcoal);
    color: rgba(255, 255, 255, 0.88);
    padding-top: 3rem;
}

.site-logo--footer .site-logo-title {
    color: var(--color-white);
}

.site-logo--footer .site-logo-sub {
    color: rgba(255, 255, 255, 0.55);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand .site-logo {
    margin-bottom: 1.25rem;
}

.social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.75rem;
}

.social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    transition: background 0.2s;
}

.social-list a:hover {
    background: rgba(201, 162, 39, 0.35);
}

.social-icon {
    width: 20px;
    height: 20px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.footer-heading {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-white);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col a {
    display: inline-block;
    padding: 0.2rem 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--color-gold);
}

.footer-subscribe-title {
    margin: 0 0 0.75rem;
    font-weight: 700;
    font-size: 0.9375rem;
}

.subscribe-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    overflow: hidden;
    max-width: 100%;
}

.subscribe-input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 0.65rem 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    background: transparent;
    color: var(--color-white);
}

.subscribe-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.subscribe-input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.subscribe-submit {
    flex-shrink: 0;
    width: 48px;
    border: none;
    background: var(--color-gold);
    color: var(--color-charcoal);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.subscribe-submit:hover {
    filter: brightness(1.05);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem 2rem;
    font-size: 0.75rem;
}

.footer-legal {
    display: flex;
    gap: 1.25rem;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--color-gold);
}

.footer-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
}

.footer-top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    text-decoration: none;
    font-size: 1rem;
}

.footer-top-btn:hover {
    background: var(--color-gold);
    color: var(--color-charcoal);
}

/* 平板以下：footer 改單欄，連結 2 欄 */
@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手機：footer 連結 1 欄 */
@media (max-width: 767px) {
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* 小手機：footer 連結維持兩欄，避免 footer 過高 */
@media (max-width: 479px) {
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Sub-page shared components / 子頁面共用組件
   ============================================================ */

/* ========== Page Banner / 子頁頂部橫幅 ========== */

.page-banner {
    background-color: #1f2a28;
    background-image:
        url('../images/truku/hero_bg_transparent.png'),
        linear-gradient(135deg, rgba(26, 40, 64, 0.85) 0%, rgba(31, 42, 40, 0.9) 100%);
    background-size: cover, auto;
    background-position: center, center;
    color: var(--color-white);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    position: relative;
    overflow: hidden;
}

.page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 40, 64, 0.6) 0%, rgba(31, 42, 40, 0.75) 100%);
    pointer-events: none;
}

.page-banner-inner {
    position: relative;
    z-index: 1;
}

/* 麵包屑導覽 breadcrumb navigation */
.breadcrumb {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--color-gold);
}

.breadcrumb li + li::before {
    content: '/';
    margin-right: 0.4rem;
    opacity: 0.5;
}

.page-banner-title {
    font-family: 'AaMoYunXingShu', var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
    color: var(--color-white);
}

/* 文章詳細頁標題：同字型但深色背景（白底） */
.news-detail-title {
    font-family: 'AaMoYunXingShu', var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
    color: var(--color-text-main);
}

.page-banner-sub {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ========== Filter Bar / 篩選列 ========== */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.1rem;
    border: 2px solid rgba(26, 40, 64, 0.18);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter-btn:hover {
    border-color: var(--color-navy);
    background: var(--color-bg-beige);
}

.filter-btn.active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

/* ========== Schedule Table / 賽程表格 ========== */

.date-tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    border-bottom: 2px solid rgba(26, 40, 64, 0.12);
    margin-bottom: 1.75rem;
}

.date-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1.1rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.date-tab:hover {
    color: var(--color-navy);
}

.date-tab.active {
    color: var(--color-navy);
    border-bottom-color: var(--color-gold);
}

.date-tab-day {
    font-size: 1.35rem;
    font-weight: 700;
    color: inherit;
    line-height: 1.1;
}

.schedule-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--color-white);
    min-width: 600px;
}

.schedule-table thead th {
    background: var(--color-navy);
    color: var(--color-white);
    text-align: left;
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.schedule-table thead th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.schedule-table thead th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.schedule-table tbody tr {
    border-bottom: 1px solid rgba(26, 40, 64, 0.07);
    transition: background 0.15s;
}

.schedule-table tbody tr:last-child {
    border-bottom: none;
}

.schedule-table tbody tr:hover {
    background: rgba(201, 162, 39, 0.06);
}

.schedule-table td {
    padding: 0.9rem 1.1rem;
    vertical-align: middle;
}

.schedule-sport-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(26, 40, 64, 0.08);
    color: var(--color-navy);
}

.schedule-time {
    font-weight: 700;
    color: var(--color-navy);
    white-space: nowrap;
}

.schedule-venue {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ========== Gallery Grid / 相片格線 ========== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.gallery-item {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: var(--color-bg-beige);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display: block;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 40, 64, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-overlay svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
}

.media-play-overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(26, 40, 64, 0.12), rgba(26, 40, 64, 0.58));
}

.media-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-navy);
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    transform: translateX(2px);
}

.media-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #263345, #9a5c2b);
    color: var(--color-white);
    text-align: center;
}

.media-video-placeholder span {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

.media-video-placeholder strong {
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

.gallery-card {
    min-width: 0;
}

.gallery-caption {
    padding: 0.65rem 0.1rem 0;
}

.gallery-caption h3 {
    margin: 0;
    color: var(--color-text-main);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.gallery-caption p {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.album-card {
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}

.album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(26, 40, 64, 0.13);
}

.album-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.album-card-cover {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-beige);
}

.album-card-cover img,
.album-card-cover .media-video-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.album-card:hover .album-card-cover img {
    transform: scale(1.05);
}

.album-card-body {
    padding: 0.95rem 1rem 1.05rem;
}

.album-card-body h2 {
    margin: 0;
    color: var(--color-text-main);
    font-size: 1.05rem;
    line-height: 1.45;
}

.album-card-body p {
    margin: 0.35rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.media-empty {
    padding: 2.5rem 1rem;
    border-radius: 8px;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    text-align: center;
    color: var(--color-text-muted);
}

.media-empty p {
    margin: 0;
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.86);
}

.media-lightbox.is-open {
    display: flex;
}

.media-lightbox-inner {
    max-width: min(1100px, 96vw);
    max-height: 92vh;
    text-align: center;
}

.media-lightbox-inner img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: #111;
}

.media-lightbox-video {
    display: none;
    width: min(1000px, 90vw);
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 82vh;
    border: 0;
    border-radius: 8px;
    background: #111;
}

.media-lightbox-inner p {
    margin: 0.75rem 0 0;
    color: var(--color-white);
    font-size: 0.95rem;
}

.media-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: var(--color-white);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.media-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .album-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .album-grid {
        grid-template-columns: 1fr;
    }

    .media-lightbox {
        padding: 1rem;
    }
}

/* ========== Video Grid / 影片格線 ========== */

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.video-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}

.media-video-grid .gallery-card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}

.media-video-grid .gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(26, 40, 64, 0.13);
}

.media-video-grid .gallery-item {
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.media-video-grid .gallery-caption {
    padding: 1rem 1.1rem 1.25rem;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(26, 40, 64, 0.13);
}

.video-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-charcoal);
}

.video-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
}

.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    font-size: 1.25rem;
    transition: transform 0.2s, background 0.2s;
}

.video-card:hover .video-play-icon {
    transform: scale(1.1);
    background: var(--color-gold);
}

.video-card-body {
    padding: 1rem 1.1rem 1.25rem;
}

.video-card-title {
    margin: 0 0 0.4rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

.video-card-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Venue Card / 場地資訊卡片 ========== */

.venue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.venue-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}

.venue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(26, 40, 64, 0.13);
}

.venue-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.venue-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.venue-card:hover .venue-card-image img {
    transform: scale(1.05);
}

.venue-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.venue-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.venue-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.venue-card-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.venue-card-sports {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ========== Venue Carousel / 場地圖片輪播 ========== */

.venue-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.venue-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.45s ease;
    will-change: transform;
}

.venue-carousel-track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.venue-card:hover .venue-carousel-track img {
    transform: none;
}

.venue-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.vc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.vc-dot--active,
.vc-dot:hover {
    background: #fff;
}

@media (max-width: 767px) {
    .venue-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Accordion / 折疊區塊 ========== */

.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.accordion-item {
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26, 40, 64, 0.06);
}

.accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9375rem;
    list-style: none;
    color: var(--color-charcoal);
    user-select: none;
    gap: 1rem;
}

.accordion-summary::-webkit-details-marker {
    display: none;
}

.accordion-summary::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-gold);
    flex-shrink: 0;
    transition: transform 0.25s ease;
    line-height: 1;
}

details[open] > .accordion-summary::after {
    transform: rotate(45deg);
}

.accordion-body {
    padding: 0 1.35rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}

.accordion-body ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.accordion-body li + li {
    margin-top: 0.4rem;
}

/* ========== Download List / 文件下載清單 ========== */

.download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-white);
    border-radius: 10px;
    padding: 0.9rem 1.25rem;
    box-shadow: 0 2px 12px rgba(26, 40, 64, 0.06);
    text-decoration: none;
    color: var(--color-charcoal);
    transition: box-shadow 0.2s, transform 0.2s;
}

.download-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(26, 40, 64, 0.1);
}

.download-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(201, 162, 39, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-terracotta);
    flex-shrink: 0;
    font-size: 1.1rem;
}

.download-item-info {
    flex: 1;
    min-width: 0;
}

.download-item-title {
    font-weight: 700;
    font-size: 0.9375rem;
    margin: 0 0 0.2rem;
}

.download-item-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.download-item-arrow {
    color: var(--color-gold);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========== Contact Grid / 聯絡資訊 ========== */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.contact-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.contact-card--photo {
    position: relative;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 霧面遮罩 */
.contact-card--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}

.contact-card--photo > * {
    position: relative;
    z-index: 1;
}

.contact-card--photo .contact-card-icon {
    background: rgba(201, 162, 39, 0.2);
    color: var(--color-gold);
}

.contact-card--photo .contact-card-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.06em;
}

.contact-card--photo .contact-card-text {
    color: #f5e29a;
    font-size: 0.95rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.contact-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(26, 40, 64, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--color-navy);
}

.contact-card-icon svg {
    width: 26px;
    height: 26px;
}

.contact-card-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.contact-card-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.contact-card-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--color-link-blue);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}

.contact-card-link:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Sport Category Cards / 競賽種類卡片 ========== */

.sport-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.sport-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: var(--color-charcoal);
    display: block;
}

.sport-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(26, 40, 64, 0.12);
}

.sport-card-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.85rem;
    background: rgba(26, 40, 64, 0.06);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sport-card-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.sport-card-name {
    font-weight: 700;
    font-size: 0.9375rem;
    margin: 0 0 0.3rem;
}

.sport-card-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

@media (max-width: 992px) {
    .sport-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .sport-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Service Cards / 服務資訊卡片 ========== */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(26, 40, 64, 0.12);
}

.service-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.service-card:hover .service-card-image img {
    transform: scale(1.05);
}

.service-card-body {
    padding: 1.25rem 1.35rem 1.5rem;
}

.service-card-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.service-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.service-card-text {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

@media (max-width: 992px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Organizer Grid / 主辦單位 ========== */

.organizer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.organizer-item {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.organizer-logo-wrap {
    width: 80px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.organizer-logo-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.organizer-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
}

.organizer-role {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

@media (max-width: 992px) {
    .organizer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .organizer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Org Wall / 層級式單位牆 ========== */

.org-wall {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding: 0.5rem 0 1rem;
}

.org-wall__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.org-wall__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.55;
    margin: 0;
}

.org-wall__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    justify-content: center;
}

/* ── Chip base ── */
.org-chip {
    display: inline-block;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: 1.4;
    cursor: default;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* 指導單位 */
.org-chip--guide {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-navy);
    background: rgba(26, 40, 64, 0.06);
    border: 1px solid rgba(26, 40, 64, 0.1);
    padding: 0.45rem 1.35rem;
}

.org-chip--guide:hover {
    background: rgba(26, 40, 64, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 40, 64, 0.1);
}

/* 主辦單位 */
.org-chip--host {
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--color-terracotta);
    background: rgba(139, 69, 19, 0.07);
    border: 1px solid rgba(139, 69, 19, 0.15);
    padding: 0.4rem 1.25rem;
}

.org-chip--host:hover {
    background: rgba(139, 69, 19, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.1);
}

/* 協辦單位 */
.org-chip--cohost {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted);
    background: var(--color-bg-cream);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.3rem 0.85rem;
}

.org-chip--cohost:hover {
    color: var(--color-navy);
    background: rgba(26, 40, 64, 0.06);
    border-color: rgba(26, 40, 64, 0.2);
    transform: scale(1.04);
}

/* 贊助單位 */
.org-chip--sponsor {
    font-size: 1rem;
    font-weight: 600;
    color: #7a5c00;
    background: rgba(201, 162, 39, 0.1);
    border: 1.5px solid rgba(201, 162, 39, 0.45);
    padding: 0.35rem 1rem;
}

.org-chip--sponsor:hover {
    background: rgba(201, 162, 39, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.15);
}

/* ── Marquee / ticker ── */
.org-wall__marquee-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* fade out edges */
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.org-marquee {
    overflow: hidden;
    width: 100%;
}

.org-marquee__track {
    display: inline-flex;
    gap: 0.6rem;
    padding: 0.25rem 0;
    width: max-content;
    will-change: transform;
}

/* Row 1: scroll left, 70s */
.org-marquee--r1 .org-marquee__track {
    animation: org-marquee-fwd 70s linear infinite;
    animation-delay: -12s;
}

/* Row 2: scroll right, 90s */
.org-marquee--r2 .org-marquee__track {
    animation: org-marquee-rev 90s linear infinite;
    animation-delay: -35s;
}

/* Row 3: scroll left, 58s */
.org-marquee--r3 .org-marquee__track {
    animation: org-marquee-fwd 58s linear infinite;
    animation-delay: -22s;
}

/* pause entire row on hover + highlight hovered chip */
.org-marquee:hover .org-marquee__track {
    animation-play-state: paused;
}

@keyframes org-marquee-fwd {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes org-marquee-rev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ── Mobile: keep animation, remove edge fade (mask-image causes rendering issues on some WebKit) ── */
@media (max-width: 767px) {
    .org-wall__marquee-wrap {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* ── prefers-reduced-motion: static wrapping list ── */
@media (prefers-reduced-motion: reduce) {
    .org-wall__marquee-wrap {
        mask-image: none;
        -webkit-mask-image: none;
        gap: 0.5rem;
    }

    .org-marquee {
        overflow: visible;
    }

    .org-marquee__track {
        animation: none !important;
        display: flex;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
        padding: 0;
    }

    .org-marquee__dup {
        display: none;
    }
}

/* ========== Section Title Row / 區塊標題列 ========== */

.section-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.section-title-row h2 {
    margin: 0;
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-charcoal);
    white-space: nowrap;
}

.section-title-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, rgba(26, 40, 64, 0.18), transparent);
    border-radius: 2px;
}

/* ========== Info Banner / 提示橫幅 ========== */

.info-banner {
    background: rgba(26, 40, 64, 0.06);
    border-left: 4px solid var(--color-gold);
    border-radius: 0 10px 10px 0;
    padding: 0.9rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
    line-height: 1.65;
}

/* ========== Pagination / 分頁 ========== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 2.5rem;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.5rem;
    border: 2px solid rgba(26, 40, 64, 0.15);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.page-btn:hover {
    border-color: var(--color-navy);
    background: var(--color-bg-beige);
}

.page-btn.active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

/* ========== Press Release List / 新聞紀錄清單 ========== */

.press-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.press-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-white);
    border-bottom: 1px solid rgba(26, 40, 64, 0.07);
    text-decoration: none;
    color: var(--color-charcoal);
    transition: background 0.15s;
}

.press-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.press-item:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.press-item:hover {
    background: rgba(201, 162, 39, 0.06);
}

.press-item-date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    padding-top: 0.1rem;
}

.press-item-body {
    flex: 1;
    min-width: 0;
}

.press-item-title {
    font-weight: 700;
    font-size: 0.9375rem;
    margin: 0 0 0.2rem;
}

.press-item-source {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.press-item-arrow {
    color: var(--color-gold);
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 0.1rem;
}

/* ========== About / 主旨段落 ========== */

.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.about-intro-text h2 {
    font-family: 'AaMoYunXingShu', var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    margin: 0 0 1rem;
    color: var(--color-charcoal);
    line-height: 1.3;
}

.about-intro-text p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin: 0 0 1rem;
}

.about-intro-text p:last-child {
    margin-bottom: 0;
}

.about-intro-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4 / 3;
}

.about-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .about-intro {
        grid-template-columns: 1fr;
    }
}

/* ========== Nav active state for sub-pages ========== */

.site-nav-list a.nav-active {
    border-bottom-color: var(--color-gold);
    color: var(--color-navy);
    font-weight: 700;
}

/* ============================================================
   RWD 基礎修正 — 覆寫補充段
   ============================================================ */

/* A. CTA section 手機版：移除 aspect-ratio，改用 padding，單欄置中排版
      aspect-ratio: 1441/253 在 320px 寬度時高度僅約 56px，加上
      overflow: hidden 會將所有文字截斷。 */
@media (max-width: 767px) {
    .cta-inner {
        aspect-ratio: unset;
        padding-block: clamp(2.25rem, 7vw, 3rem);
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        text-align: center;
        gap: 0.75rem;
    }

    .cta-inner .cta-title {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        text-align: center;
    }

    .cta-inner .cta-desc {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .cta-inner .btn-white-cta {
        grid-column: 1;
        grid-row: auto;
        margin: 0 auto;
    }
}

/* B. news-grid 3-col 修飾類：讓 news.html 使用 CSS class 取代 inline style
      992px 以下自動繼承原有 2-col（992px）與 1-col（767px）斷點。 */
@media (min-width: 993px) {
    .news-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* C. Quick-nav 小螢幕（≤479px）縮放：
      102px icon 在 320px 2-col 佈局（約 114px 可用）下過緊。 */
@media (max-width: 479px) {
    .quick-nav-icon {
        width: 72px;
        height: 72px;
    }

    .quick-nav-label-text {
        font-size: 0.9375rem;
    }

    .quick-nav-item {
        padding: 0.35rem 0.25rem;
        gap: 0.3rem;
    }

    .quick-nav-detail-text {
        font-size: 0.7rem;
    }
}

/* D. about-intro 中間斷點：原本只在 767px 換單欄，
      768–992px 兩欄過窄，提前在 992px 改為單欄。 */
@media (max-width: 992px) {
    .about-intro {
        grid-template-columns: 1fr;
    }
}

/* E. news-card 手機取消縮放：
      1-col 佈局下 scale(0.9) 會在卡片左右產生視覺間隙。 */
@media (max-width: 767px) {
    .news-card {
        transform: none;
    }
}

/* F. promo-card-btn 手機寬度：
      width: 30% 在手機上過窄，改為自適應。 */
@media (max-width: 767px) {
    .promo-card-btn {
        width: auto;
        display: inline-flex;
    }
}

/* G. Timeline 手機版縮小節點 icon 與連接線
   計算依據：track 最小寬度 = 4 × node_min-width + 3 × connector_width
   ─ ≤767px (375px+ 手機)：4×56 + 3×28 = 308px ≤ 375px可用327px ✓
   ─ ≤479px (320px 手機)：4×48 + 3×20 = 252px ≤ 320px可用272px ✓
   connector padding-top 公式：(dot_size - 24px) / 2，使連接線對齊 dot 中心 */

@media (max-width: 767px) {
    .timeline-dot img {
        width: 72px;
        height: 72px;
    }

    .timeline-connector {
        padding-top: 24px; /* (72 - 24) / 2 */
    }

    .timeline-connector img {
        width: 28px;
    }

    .timeline-node {
        min-width: 3.5rem; /* 56px */
    }
}

@media (max-width: 479px) {
    .timeline-dot img {
        width: 48px;
        height: 48px;
    }

    .timeline-dot {
        margin-bottom: 0.5rem;
    }

    .timeline-connector {
        padding-top: 12px; /* (48 - 24) / 2 */
    }

    .timeline-connector img {
        width: 20px;
    }

    .timeline-node {
        min-width: 3rem; /* 48px */
        padding: 0 0.15rem;
    }

    .timeline-label {
        font-size: 0.8125rem;
    }

    .timeline-date,
    .timeline-date-range {
        font-size: 0.6875rem;
    }
}

/* ========== Homestay Full-Width Card / 旅宿業者名單滿版卡片 ========== */

.service-card--full {
    margin-top: 1.5rem;
    overflow: visible; /* allow table to grow beyond card height */
}

/* 手機：圖片在上，上方兩角補圓角 */
.service-card--full .service-card-image {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    overflow: hidden;
}

.service-card-full-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .service-card--full {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* 讓 table panel 換行後佔滿全寬 */
    }

    /* 桌機：圖片在左，左側兩角補圓角，右側移除 */
    .service-card--full .service-card-image {
        flex: 0 0 300px;
        aspect-ratio: unset;
        min-height: 220px;
        align-self: flex-start;
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg);
        border-top-right-radius: 0;
    }

    .service-card--full .service-card-full-right {
        flex: 1;
    }

    .service-card--full .homestay-table-panel {
        flex: 0 0 100%; /* 換行後佔滿整張卡片寬度 */
    }
}

.homestay-toggle-btn .homestay-toggle-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    margin-left: 0.3rem;
}

.homestay-toggle-btn[aria-expanded="true"] .homestay-toggle-arrow {
    transform: rotate(180deg);
}

/* expandable panel */
.homestay-table-panel {
    border-top: 1px solid rgba(26, 40, 64, 0.08);
}

.homestay-table-panel[hidden] {
    display: none;
}

.homestay-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.homestay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.125rem; /* 18px */
}

.homestay-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-beige);
    font-weight: 700;
    color: var(--color-navy);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid rgba(26, 40, 64, 0.12);
    white-space: nowrap;
}

.homestay-table tbody td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(26, 40, 64, 0.06);
    vertical-align: middle;
    color: var(--color-text-main);
    line-height: 1.5;
}

.homestay-table tbody tr:last-child td {
    border-bottom: none;
}

.homestay-table tbody tr:hover td {
    background: rgba(201, 162, 39, 0.05);
}

.homestay-table .col-no {
    width: 3rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.homestay-table .col-name {
    width: 12rem;
    font-weight: 600;
}

.homestay-table .col-addr {
    min-width: 16rem;
}

.homestay-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    color: var(--color-terracotta);
    vertical-align: middle;
    border-radius: 4px;
    transition: color 0.15s, transform 0.15s;
    text-decoration: none;
}

.homestay-map-link:hover {
    color: var(--color-navy);
    transform: translateY(-1px);
}

.homestay-map-link svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ========== Activity Timeline / 特色活動時程 ========== */

.activity-timeline-section {
    background: var(--color-bg-beige);
}

/* mobile-first: single-side left axis */
.activity-timeline {
    position: relative;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 1.25rem; /* center of 2.5rem axis column */
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-gold) 0%, rgba(26, 40, 64, 0.2) 100%);
    border-radius: 2px;
    pointer-events: none;
}

.activity-timeline-node {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.activity-timeline-node:last-child {
    margin-bottom: 0;
}

.atl-spacer {
    display: none;
}

.activity-timeline-axis {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
}

.activity-timeline-marker {
    width: 16px;
    height: 16px;
    background: var(--color-gold);
    border-radius: 50%;
    border: 3px solid var(--color-bg-beige);
    box-shadow: 0 0 0 2px var(--color-gold);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.activity-timeline-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s;
}

.activity-timeline-card:hover {
    box-shadow: 0 16px 48px rgba(26, 40, 64, 0.12);
}

.atl-card-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.atl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.activity-timeline-card:hover .atl-card-img img {
    transform: scale(1.04);
}

.atl-card-body {
    padding: 1.125rem 1.375rem 1.25rem;
}

.atl-datetime {
    margin: 0 0 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.02em;
}

.atl-title {
    margin: 0 0 0.4rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.4;
}

.atl-location {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.atl-location-pin {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--color-terracotta);
}

.atl-toggle-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.atl-toggle-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    font-style: normal;
    margin-left: 0.2rem;
}

.atl-toggle-btn[aria-expanded="true"] .atl-toggle-arrow {
    transform: rotate(180deg);
}

/* detail panel */
.activity-detail-panel {
    border-top: 1px solid rgba(26, 40, 64, 0.08);
}

.activity-detail-panel[hidden] {
    display: none;
}

.atl-content-text {
    padding: 1.25rem 1.375rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-text-main);
    white-space: pre-line;
}

.atl-map-wrap {
    padding: 0.5rem 1.375rem 1.375rem;
}

.atl-map-wrap iframe {
    width: 100%;
    height: 240px;
    border: 0;
    border-radius: 10px;
    display: block;
}

@media (min-width: 768px) {
    .atl-map-wrap iframe {
        height: 300px;
    }
}

/* Desktop: alternating left / right timeline */
@media (min-width: 992px) {
    .activity-timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .activity-timeline-node {
        grid-template-columns: 1fr 3rem 1fr;
        gap: 1.5rem;
        align-items: start;
    }

    .activity-timeline-axis {
        grid-column: 2;
        grid-row: 1;
    }

    /* odd nodes: card left, spacer right */
    .activity-timeline-node:nth-child(odd) .activity-timeline-card {
        grid-column: 1;
        grid-row: 1;
    }

    .activity-timeline-node:nth-child(odd) .atl-spacer {
        grid-column: 3;
        grid-row: 1;
    }

    /* even nodes: spacer left, card right */
    .activity-timeline-node:nth-child(even) .atl-spacer {
        grid-column: 1;
        grid-row: 1;
    }

    .activity-timeline-node:nth-child(even) .activity-timeline-card {
        grid-column: 3;
        grid-row: 1;
    }

    .atl-spacer {
        display: block;
    }

    .atl-map-wrap iframe {
        height: 320px;
    }
}

@media (max-width: 479px) {
    .activity-timeline::before {
        left: 1rem;
    }

    .activity-timeline-node {
        grid-template-columns: 2rem 1fr;
        gap: 0.75rem;
    }

    .activity-timeline-marker {
        width: 14px;
        height: 14px;
    }
}