/* 共用容器（如果你第一頁已經有，就不用再宣告） */
.pch-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

/* === 區塊一：Hero === */

/* =========================================
   車款 Hero：背景滿版，沿用首頁 Hero 系統
   ========================================= */
.hero-title-main {
    font-size: 2.5rem;
    font-weight: 900;
}

.hero-title-sub {
    font-size: 3rem;
    font-weight: 900;
}

.vehicle-hero {
    height: 100vh; /* 與首頁一致 */
    padding-top: 60vh; /* 讓文字出現在視覺的下方 */
    position: relative;
}

    .vehicle-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../img/BANNER-CLIFF_640.webp"); /* ← 換成你的車款背景 */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
    }

    .vehicle-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        /*background: linear-gradient( to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15) );*/
        z-index: -1;
    }

/* === 區塊二：車輛規格 === */
/* ========================================= */
/* 1. 標題欄樣式 (還原圖片中的橙色背景) */
/* ========================================= */
.vehicle-specs-section {
    max-width: 1320px;
}

.vehicle-specs-header {
    /* 圖片中的橙色接近這個色碼，比 Bootstrap 預設的 Orange 稍淺 */
    background-color: #faaf3a;
    color: #fff; /* 標題文字顏色 */
    /*    padding: 1rem 0;*/
    margin-bottom: 2rem;
    /* 圓角邊框 (可選，圖片上不明顯) */
    /* border-radius: 0.25rem 0.25rem 0 0; */
    margin-top: 3rem;
}

.vehicle-specs-title {
    font-size: 22pt; /* 標題大小 */
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5rem;
}

.vehicle-specs-title-en {
    font-size: 18pt;
    font-weight: normal;
}

/* ========================================= */
/* 2. 規格單項樣式 (spec-item) */
/* ========================================= */
.spec-item {
    margin-bottom: 1.5rem; /* 每項規格間距 */
    max-width: 440px;
}

.spec-icon {
    /* 保持圖標固定大小 */
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================= */
/* 3. 垂直對齊關鍵 CSS (spec-label-fixed) */
/* ========================================= */
.spec-label-fixed {
    /* 左欄最大標籤寬度：120px，用於對齊 '|' */
    width: 100px;
    text-align: left;
    /*margin-right: 0.5rem;*/
    flex-shrink: 0;
    line-height: 1.4; /* 確保行高一致 */
    font-size: 15pt !important;
    font-weight: 900 !important;
    color: #000;
}

.spec-label-fixed2 {
    font-size: 15pt !important;
    font-weight: 900 !important;
    color: #000;
}
/* 規格內容樣式 */
.spec-main {
    line-height: 1.4;
    font-size: 15pt !important;
    font-weight: 900 !important;
    color: #000;
    display: flex;
}

/* 次要規格樣式 (清水箱、臥鋪子項目) */
.spec-sub {
    font-size: 0.95rem;
    line-height: 1.3;
    color: #333; /* 圖片中文字顏色較深 */
    /* 次要資訊對齊主規格的「值」 */
    padding-left: calc(120px + 0.5rem);
}

.spec-col-div {
    padding: 0;
}
/* 中欄和右欄不需要等寬對齊，因此讓它們的標籤自然顯示 */
.spec-col:nth-child(2) .spec-main,
.spec-col:nth-child(3) .spec-main {
    display: block; /* 移除 Flex，讓文字自然流動 */
}
/* 特別處理中欄和右欄的圖標與文字間距 */
.spec-col:nth-child(2) .spec-text,
.spec-col:nth-child(3) .spec-text {
    /* 讓文字緊跟在圖標後面 */
    margin-top: 0.2rem;
}

/* ========================================= */
/* 4. Adventure Now 區塊細節 */
/* ========================================= */
.adventure-box {
    /* 確保這個盒子在欄位中處於較低的位置，並確保h-100生效 */
    min-height: 150px;
}

.adventure-text {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    /* 圖片中文字顏色是淺灰色 */
    color: #ccc !important;
}

.adventure-icon {
    /* 圖片中卡車圖標顏色也是淺灰色 */
    /*    opacity: 0.2;
*/
}


/* === 區塊三：車上設備 === */

/* ========================================= */
/* 1. 標題欄樣式 (與規格區塊保持一致) */
/* ========================================= */
.equipment-section {
    max-width: 1320px;
}

.equipment-header {
    /* 圖片中的橙色背景 */
    background-color: #faaf3a;
    color: #fff;
    /*padding: 1rem 0;*/
    margin: 3rem 0;
    text-align: center;
}

.equipment-title {
    font-size: 22pt; /* 標題大小 */
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5rem;
}

.equipment-title-en {
    font-size: 18pt;
    font-weight: normal;
}

/* ========================================= */
/* 2. 設備項目樣式 */
/* ========================================= */
.equipment-item {
    /* 使用 Flexbox 讓圖標和文字水平對齊 */
    display: flex;
    align-items: center; /* 垂直居中對齊 (符合上一個問題的修正) */
    margin-bottom: 1.5rem; /* 設備之間的垂直間距 */
}

.equipment-icon {
    /* 固定圖片大小 */
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    margin-right: 0.75rem; /* 圖標與文字間距 */
}

.equipment-text {
    /* 設備名稱的字體大小和粗細 */
    font-size: 15pt;
    color: #333;
    font-weight: bold;
}

/* 確保四欄佈局在手機上能堆疊 */
.equipment-grid {
    /* 確保單個項目在小螢幕時能左對齊 */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* === 區塊四：隨車設備 === */
/* ========================================= */
/* 1. 標題欄樣式 (與前兩個區塊保持一致) */
/* ========================================= */
.accessories-header {
    /* 圖片中的橙色接近這個色碼，比 Bootstrap 預設的 Orange 稍淺 */
    background-color: #faaf3a;
    color: #fff; /* 標題文字顏色 */
    /*    padding: 1rem 0;*/
    margin-bottom: 3rem;
    /* 圓角邊框 (可選，圖片上不明顯) */
    /* border-radius: 0.25rem 0.25rem 0 0; */
    margin-top: 3rem;
    text-align: center;
}

.accessories-section {
    max-width: 1320px;
}

.accessories-title {
    font-size: 22pt; /* 標題大小 */
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5rem;
}

.accessories-title-en {
    font-size: 18pt;
    font-weight: normal;
}

/* ========================================= */
/* 2. 隨車配備項目樣式 */
/* ========================================= */
.accessories-item {
    /* Flexbox 讓圖標和文字水平、垂直居中對齊 */
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.accessories-icon {
    /* 固定圖片大小 */
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    margin-right: 0.75rem;
}

.accessories-text {
    font-size: 15pt;
    color: #333;
    font-weight: bold;
}

/* 確保四欄佈局在手機上能堆疊 */
.accessories-grid {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* === 區塊五：車內實景照片（大圖 + 縮圖牆） === */
/* ========================================= */
/* 1. 標題欄樣式 (與前幾個區塊保持一致) */
/* ========================================= */
.floorplan-header {
    background-color: #FFC35C;
    color: #333;
    padding: 1rem 0;
    margin-bottom: 2rem;
    text-align: center;
}

.floorplan-title {
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5rem;
}

    .floorplan-title .en {
        font-size: 1.2rem;
        font-weight: normal;
    }

/* ========================================= */
/* 2. 圖片樣式 */
/* ========================================= */
.floorplan-img {
    /* 確保圖片是響應式的，不會溢出容器 */
    max-width: 100%;
    height: auto;
    /* 讓圖片在容器內塊級居中 */
    display: block;
    margin: 0 auto;
    background-color: #f1f1f1;
}

.floorplan-section {
    background-color: #f1f1f1;
}

.floorplan-header div {
    background-color: #f1f1f1;
}

/* === 區塊六：影片 === */
/* ========================================= */
/* 1. Tab 選項卡樣式 */
/* ========================================= */
.gallery-tabs {
    margin-bottom: 1.5rem;
    /* 自訂 Tab 顏色，使其更貼近圖片中的風格 */
}

    .gallery-tabs .nav-link {
        color: #000; /* 預設文字顏色 */
        border: none;
        font-size: 22pt;
        font-weight: bold;
        padding: 0.5rem 1rem;
        margin: 0 0.5rem;
    }

        .gallery-tabs .nav-link.active {
            color: #333; /* 選中文字顏色 */
            border-bottom: 3px solid #FFC35C; /* 橙色底線 */
            background-color: transparent;
        }

/* ========================================= */
/* 2. 主圖和縮圖樣式 */
/* ========================================= */
.main-image {
    width: 100%;
    height: auto;
    max-height: 900px; /* 限制主圖高度 */
    object-fit: cover; /* 確保圖片不變形 */
    cursor: pointer; /* 讓使用者知道可以點擊 */
}

.thumb-grid .thumb-img {
    width: 100%;
    height: 120px; /* 統一縮圖高度 */
    object-fit: cover;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border 0.2s;
    border: 2px solid transparent;
}

    .thumb-grid .thumb-img:hover {
        opacity: 1;
    }

    .thumb-grid .thumb-img.active {
        opacity: 1;
        border-color: #FFC35C; /* 選中縮圖帶有橙色邊框 */
    }

/* === 區塊七：影片 === */
/* ========================================= */
/* 1. 區塊標題樣式 */
/* ========================================= */
.video-title-container {
    margin-bottom: 2rem;
    text-align: center;
}

.video-title {
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    color: #333;
}

.youtube-logo {
    color: #FF0000; /* YouTube 品牌紅色 */
    font-size: 1.5rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ========================================= */
/* 2. 影片項目樣式 */
/* ========================================= */
.video-item-row {
    display: flex;
    justify-content: space-evenly;
}

.video-item {
    display: block; /* 讓整個卡片可點擊 */
    text-decoration: none;
    padding: 1.5rem;
    min-height: 200px; /* 設置最小高度以符合圖片比例 */
    /* 模擬圖片中的灰色背景 */
    background-color: #cbcbcb;
    color: #333;
    /* 居中內容 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    gap: 1rem; /* 讓文字和圖標之間有 1rem 的間距 */
    transition: background-color 0.2s, box-shadow 0.2s;
}

.video-item-div {
    width: 29.333333% !important;
    padding: 0% 0% 2% 0% !important;
}

.video-item:hover {
    background-color: #dee2e6; /* 懸停效果 */
    color: #333;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.video-play-icon {
    color: #FF0000; /* 播放按鈕顏色 */
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.video-text {
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    letter-spacing: 6pt;
    color: #fff;
}

.video-section {
    border-top: 1px #dcdcdc solid;
    border-bottom: 1px #dcdcdc solid;
}
/* === 區塊八：FAQ === */
/* ========================================= */
/* 1. 區塊樣式和標題 */
/* ========================================= */
.faq-section {
    background-color: #fff; /* 輕微的背景色以區分 */
    padding: 3rem 0;
}

.faq-title {
    font-size: 16pt;
    font-weight: 500;
    margin-bottom: 2rem;
    color: #333;
}

/* 限制 FAQ 區塊的最大寬度，使其看起來更集中 */
.faq-container {
    max-width: 1320px;
}

/* ========================================= */
/* 2. Accordion 樣式調整 (還原範例圖) */
/* ========================================= */

.accordion-item {
    border: none;
    /* 讓項目之間有輕微的分隔效果 */
    border-bottom: 1px solid #dee2e6;
    background-color: transparent;
}

.accordion-button {
    background-color: transparent !important;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    padding: 1rem 0; /* 調整垂直間距 */
    /* 移除 Bootstrap 預設的焦點陰影 */
    box-shadow: none !important;
}

    /* 調整 Accordion 按鈕的箭頭圖標 */
    .accordion-button:not(.collapsed)::after {
        /* 讓箭頭在展開時向上旋轉 (範例圖的風格) */
        transform: rotate(-180deg);
    }

    .accordion-button::after {
        /* 調整箭頭圖標的大小和位置 */
        margin-right: 0.5rem;
        font-size: 1.25rem;
    }

/* 移除最底部的邊框，符合範例圖的乾淨視覺 */
.accordion-item:last-of-type {
    border-bottom: none;
}

.accordion-body {
    /* 答案內容的樣式 */
    padding-top: 0;
    padding-bottom: 1.5rem;
    font-size: 1rem;
    color: #6c757d;
}

/* === 區塊九：評價 === */
/* ========================================= */
/* 1. 區塊樣式和標題 */
/* ========================================= */
.testimonials-section {
    background-color: #ffffff;
    padding: 4rem 0;
    max-width: 1320px;
    margin: auto;
}

.testimonials-title {
    font-size: 2rem;
    font-weight: bold; /* 範例圖中標題較粗 */
    margin-bottom: 2.5rem;
    color: #333;
}

/* 限制容器寬度 */
.testimonials-container {
    max-width: 1320px;
}

/* ========================================= */
/* 2. 評價卡片樣式 - 最終精確版 CSS */
/* ========================================= */

.testimonial-card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    height: 100%;
    border-radius: 0.5rem;
}

    .testimonial-card .card-body {
        padding: 1.5rem !important;
        /* 移除垂直 Flexbox 屬性，讓其回到標準 Block 模式 */
        /* display: block; */
        /* 讓 card-body 佔滿所有空間 */
        height: 100%;
    }

/* 頂部內容區 - 必須是 Flex 容器 */
.testimonial-top-content {
    height: 100%; /* 關鍵：讓它佔滿 card-body 的所有垂直空間 */
    display: flex;
}

.testimonial-left-col {
    /* 固定頭像區寬度 */
    width: 60px;
    flex-shrink: 0;
}

.testimonial-avatar {
    /* 頭像本身尺寸 */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* 右側內容區 - 啟用垂直 Flexbox */
.testimonial-right-col {
    /* d-flex flex-column flex-grow-1 已在 HTML 中設定 */
    /* 關鍵：利用 justify-content: space-between 將內容推到頂部和底部 */
    justify-content: space-between;
}

/* 評價/車型/文字區塊 (佔滿剩餘垂直空間) */
.testimonial-review-content {
    /* flex-grow-1 已在 HTML 中設定 */
}

/* 底部作者/日期 (對齊左側) */
.testimonial-meta-row {
    /* text-start 已在 HTML 中設定 */
    /* 確保與上方內容有間距 */
    margin-top: 1rem !important;
}

.testimonial-meta {
    font-size: 0.9rem;
    color: #333;
}
/* ... (其他樣式如 rating/model 保持不變) ... */
i.fas.fa-star {
    color: #fb973a;
}

.testimonial-model {
    color: #fb973a;
}
/* ========================================= */
/* 3. 輪播控制項樣式 - 修正版 */
/* ========================================= */
.carousel-control-prev,
.carousel-control-next {
    /* 增加箭頭區的寬度，讓點擊區域更大 */
    width: 7%;
    /* 確保箭頭圖標在所有情況下都是深色可見 */
    filter: invert(0); /* 移除可能影響顏色的 filter */
    opacity: 1; /* 確保不透明度是 1 */
}

/* 針對 Bootstrap 預設的箭頭圖標本身進行修正 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* 這是最關鍵的一步：覆寫 Bootstrap 預設的白色背景圖 (SVG) */
    /* 將預設的白色 SVG 替換為黑色的 SVG 數據 (Base64 編碼) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    /* 放大箭頭尺寸，讓它更突出 */
    width: 2rem;
    height: 2rem;
}

.carousel-control-prev {
    left: 3%;
}

.carousel-control-next {
    right: 3%;
}
/* 修正右箭頭 SVG 的方向 */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carouselcol {
    width: 27.333333% !important;
}
/* RWD 調整 */
@media (max-width: 992px) {
    .vd-quick-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vd-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vd-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vd-review-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .vd-hero-bg {
        height: 280px;
    }

    .vd-hero-title {
        font-size: 26px;
    }

    .vd-quick-info-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .vd-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}