/*
Theme Name: Hello Elementor Child 2026
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: A plain-vanilla & lightweight theme for Elementor page builder
Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 2.4.1.1776058964
Updated: 2026-04-13 13:42:44

*/


/* 推薦景點 */

/* 1. 強制圖片高度與裁切 */
.bdt-ep-carousel-thumbnail {
    height: 250px !important; /* 你可以根據需求調整這個高度 */
    overflow: hidden;
}

.bdt-ep-carousel-thumbnail img {
    width: 100%;
    height: 100% !important;
    object-fit: cover; /* 關鍵：強制圖片填滿並裁切，不會變形 */
}

/* 2. 卡片容器與橘色色塊邏輯 */
.bdt-carousel-item, 
.bdt-ep-carousel-item {
    position: relative; /* 為了讓底部色塊定位 */
    background-color: #fff; /* 預設白色 */
    border-radius: 30px 30px 50px 50px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* 3. Hover 時的橘色色塊 (取代陰影) */
/* 使用 ::after 偽元素來製作底部的弧形色塊 */
.bdt-carousel-item:hover::after,
.bdt-ep-carousel-item:hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px; /* 色塊的厚度 */
    background-color: #ff9d23; /* 橘色 */
    border-radius: 0 0 50px 50px; /* 配合卡片底部的弧度 */
    z-index: 10;
}

/* 4. Hover 時卡片整體微升並改變背景 */
.bdt-carousel-item:hover,
.bdt-ep-carousel-item:hover {
    transform: translateY(-5px);
    background-color: #fdf4c5; /* 只有 Hover 時變黃色 (視需求而定) */
}

/* 5. 修正內文區域，確保不會被底部色塊遮到字 */
.bdt-carousel-content,
.bdt-ep-carousel-content {
    padding: 20px 20px 35px 20px; /* 增加底部 padding 給色塊空間 */
}


/* 在地特色 */
/* 1. 恢復左右橫向排版 (Flexbox) */
.bdt-ep-fancy-slider-item {
    display: flex !important;
    flex-direction: row-reverse; /* 因為 HTML 中圖片在前，文字在後，所以用 reverse 讓文字到左邊 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between;
    background: transparent !important; /* 確保背景不會被外掛預設色干擾 */
}

/* 2. 調整文字區域 (左側) */
.bdt-ep-fancy-slider-content {
    flex: 1;
    padding-right: 50px; /* 文字與圖片間的距離 */
    text-align: left !important;
}

.bdt-ep-fancy-slider-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: #333; /* 視需求調整標題顏色 */
}

/* 3. 調整圖片區域 (右側) */
.bdt-ep-fancy-slider-image {
    flex: 1;
    width: 50% !important;
}

.bdt-ep-fancy-slider-img {
    border-radius: 30px; /* 恢復原本的圓角設定 */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 增加輕微陰影感 */
}

/* 4. 徹底移除討厭的橘色漸層遮罩 */
.bdt-ep-fancy-slider-img:after {
    content: none !important; /* 移除 DevTools 中看到的 ::after 內容 */
    display: none !important;
}

/* 5. 針對手機版的響應式調整 */
@media (max-width: 768px) {
    .bdt-ep-fancy-slider-item {
        flex-direction: column; /* 手機版回到上下排版 */
    }
    .bdt-ep-fancy-slider-content {
        padding-right: 0;
        margin-top: 20px;
    }
    .bdt-ep-fancy-slider-image {
        width: 100% !important;
    }
}