@charset "UTF-8";
/*----------------共用----------------*/
:root{
	--main-color-white:#ffffff;
	--main-color-black:#000000;
	--main-color-blue:#109DCD;
	--main-color-yellow:#F0EA30;
	--main-color-orange:#EE7800;
    --main-color-green:#8CC280;
	--main-color-gray:#CCCCCC;	
    --main-color-gray2:#707070;	
}


/*--------------瘋遊攻略 #page-travels-----------------------------*/

/* 背景 */
#page-travels .content::before{
    content: '';
    position: absolute;
    z-index: -1;
    left: 70px;
    bottom: 15%;
    width: 71px;
    height: 92px;
    background-image: url(../Images/icon-conch.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
    transform: rotate(-55deg);
}
#page-travels .content::after{
    content: '';
    position: absolute;
    z-index: -1;
    right:0;
    bottom: 40%;
    width: 200px;
    height: 180px;
    background-image: url(../Images/icon-flower-orange2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
}



/* --- 網格佈局 --- */
#page-travels .travels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 電腦版一排兩張卡片 */
    gap: 40px; 
}

/* --- 卡片設計 --- */
#page-travels .travels-card {
    display: flex;
    align-items: center; 
    gap: 25px;
}
#page-travels .travels-card:hover .card-img{
    box-shadow: 0 0 0 4px var(--main-color-blue);
}

#page-travels .travels-card:hover .title{
    color: var(--main-color-blue);
}

/* 圖片區塊 */
#page-travels .card-img {
    position: relative;
    flex: 0 0 300px; /* 鎖定圖片寬度 */
    aspect-ratio: 300 / 350; 
    border-radius: 40px; 
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 圖片上的行政區標籤 */
#page-travels .location-tag-box{
    position: absolute;
    left: 0;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
}
#page-travels .location-tag-box .location-tag{
    padding: 4px 12px;
    border-radius: 0 10px 10px 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 不同行政區的顏色 */
#page-travels .location-tag.green{
    background-color: rgba(140, 194, 128,0.9);
}
#page-travels .location-tag.yellow{
    background-color: rgba(249, 226, 21,0.9);
    color: var(--main-color-black);
}
#page-travels .location-tag.orange{
    background-color: rgba(240, 120, 0,0.9);
}
#page-travels .location-tag.blue{
    background-color: rgba(15, 157, 204,0.9);
}
#page-travels .location-tag.yellow .icon-location{
    background-color: var(--main-color-black);
}


#page-travels .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit; /* 繼承父層的圓角 */
}

/* --- 卡片內容區 --- */
#page-travels .card-content {
    flex: 1; /* 填滿剩餘空間 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

/* 分類標籤 (如：珍奇探險) */
#page-travels .category-tag {
    color: var(--main-color-white);
    padding: 0 14px;
    border-radius: 20px 20px 20px 0;
    letter-spacing: 3px;
    margin-bottom: 2px;
    background-color: var(--main-color-orange);
    transition: background-color 0.3s ease;
}
#page-travels .travels-card:hover .category-tag {
    background-color: var(--main-color-blue);
}

/* 標題 */
#page-travels .title {
    margin-bottom: 15px;
    transition: all 0.3s ease;
}


/* 特色標籤群組 (如：團體、巴士) */
#page-travels .feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}
#page-travels .feature-tags .tag {
    background-color: var(--main-color-gray);
    padding: 1px 10px;
    border-radius: 8px;
}
#page-travels .feature-tags .tag.green {
    background-color: rgba(140, 194, 128,0.3);
}
#page-travels .feature-tags .tag.yellow {
    background-color: rgba(239, 233, 46,0.5);
}

/* 內文 */
#page-travels .desc {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 限制顯示 4 行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 分隔線 --- */
#page-travels .separator-line {
    grid-column: 1 / -1; /* 關鍵：讓分隔線橫跨 Grid 左右兩欄 */
    width: 100%;
    height: 1px;
    background-color: var(--main-color-gray);
}



/*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/

/* ---------頂部主視覺輪播 bxslider--------- */
#page-travels-detail .main-section {
    position: relative;
    margin: 30px 0 40px 0;
}

#page-travels-detail .slider-wrapper {
    border-radius: 85px 85px 0 0;
    overflow: hidden;
    aspect-ratio: 35 / 16;
}

/* 消除套件預設白邊與陰影 */
#page-travels-detail .bx-wrapper {
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    height: 100%;
}
#page-travels-detail .bx-viewport,
#page-travels-detail .main-bxslider,
#page-travels-detail .main-bxslider li {
    height: 100% !important;
}

#page-travels-detail .main-bxslider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ---右下側黑色半透明資訊框--- */
#page-travels-detail .main-overlay {
    position: absolute;
    right: 20px;
    bottom: 0;
    width: 370px;
    height: auto;
    border-radius: 60px 60px 0 0;
    z-index: 10;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    padding: 30px 40px;
    box-sizing: border-box;
}

/* 因為父層設定了 pointer-events: none，如果要讓裡面的文字未來可以被反白複製或點擊，要再把它打開 */
#page-travels-detail .overlay-inner {
    position: relative;
    color: var(--main-color-white);
    pointer-events: auto; 
}

#page-travels-detail .overlay-inner h2 {
    font-size: 1.875rem; /* 30px */
    line-height: 1.4;
}

#page-travels-detail .overlay-inner .deco-line {
    width: 64px;
    height: 1px;
    background-color: var(--main-color-gray);
    margin: 6px 0 15px 0;
}

#page-travels-detail .overlay-inner p {
    margin-bottom: 15px;
    line-height: 1.4;
}

/* 標籤樣式 */
#page-travels-detail .tag-orange {
    position: absolute;
    top: -43px;
    background: var(--main-color-orange);
    color: var(--main-color-white);
    padding: 0 15px;
    border-radius: 20px 20px 20px 0;
    display: inline-block;
}

#page-travels-detail .tags-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
}
#page-travels-detail .tag-gray {
    background: rgba(255, 255, 255, 0.5);
    padding: 0 12px;
    border-radius: 8px;
}



/* ---------行程網格區塊--------- */
#page-travels-detail .trip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 60px 40px;
    align-items: start;
}

/* 背景 */
#page-travels-detail .trip-section{
    position: relative;
}

#page-travels-detail .trip-section::after{
    content: '';
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 5px;
    width: 408px;
    height: 431px;
    background-image: url(../Images/travels-detail/bg-travels-detail-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
}


/* --- 單張卡片 --- */
#page-travels-detail .trip-card {
    display: flex;
    flex-direction: column;
}

#page-travels-detail .card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 44 / 25;
    margin-bottom: 20px;
    overflow: hidden;
}

#page-travels-detail .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 左下角橘色時間標籤 */
#page-travels-detail .time-tag {
    position: absolute;
    bottom: 20px;
    left: -5px;
    background: rgba(240, 120, 0,0.85);
    color: var(--main-color-white);
    padding: 10px 15px;
    font-size: 1.25rem; /*20px*/
    text-align: center;
    border-radius: 0 10px 10px 0;
    line-height: 1.3;
}

/* 內文區域 */
.card-text {
    border-left: 2px solid var(--main-color-orange);
    padding: 0 20px;
}

#page-travels-detail .card-text h3.page-title {
    margin-bottom: 0;
}

#page-travels-detail .card-text h4.sub-title {
    color: var(--main-color-blue); 
    font-size: 1.25rem; /*20px*/
    margin-top: 0;
    margin-bottom: 12px;
}
#page-travels-detail .card-text h4.sub-title::before {
    content: '\200B'; /* 插入一個零寬度的空白字元 */
}


#page-travels-detail .card-text p {
    line-height: 1.8;
    text-align: justify;
}
#page-travels-detail .card-text p .link {
    color: var(--main-color-black);
    text-decoration: underline;
}



/* ---------長形裝飾--------- */
#page-travels-detail .deco-rectangle{
    width: 100%;
    /* height: 70px; */
    padding: 30px;
    box-sizing: border-box;
    border-radius: 0 0 50px 50px;
    color: var(--main-color-black);
    background-color: #b6e1ef;
    text-align: center;
    margin-top: 60px;
}



/* ---------底部按鈕--------- */
#page-travels-detail .page-actions {
    justify-content: center;
    margin-top: 40px;
}




/*螢幕尺寸【小於】1281時頁面顯示---桌電*/
@media (max-width: 1280px) {

    /*--------------瘋遊攻略 #page-travels-----------------------------*/

    /* --- 卡片設計 --- */
    /* 圖片區塊 */
    #page-travels .card-img {
        flex: 0 0 240px; /* 鎖定圖片寬度 */
    
    }


    /* --- 卡片內容區 --- */

    /* 分類標籤 (如：珍奇探險) */
    #page-travels .feature-tags {
        margin-bottom: 15px;
    }

    /* 內文 */
    #page-travels .desc {
        -webkit-line-clamp: 3; /* 限制顯示 3 行 */
    }



    /*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/


        


}






/*螢幕尺寸【小於】1201時頁面顯示---桌電*/
@media (max-width: 1200px) {

    /*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/
    /* ---------行程網格區塊--------- */
    #page-travels-detail .trip-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 60px 40px;
    }

}







/*螢幕尺寸【小於】1025時頁面顯示---桌電*/
@media (max-width: 1024px) {
    /* 背景 */
    #page-experts-detail main::before{
        left: -258px;
        bottom: -12%;
        width: 400px;
        height: 518px;
    }
    #page-experts .content::after{
        right: -155px;
    }

    /*--------------瘋遊攻略 #page-travels-----------------------------*/

    /* --- 網格佈局 --- */
    #page-travels .travels-grid {
        grid-template-columns: 1fr;
    }

    /* --- 卡片設計 --- */
    #page-travels .travels-card:nth-child(3n+1) {
        border-bottom: 1px solid var(--main-color-gray);
        padding-bottom: 40px;
    }

    /* --- 卡片內容區 --- */
    #page-travels .card-content {     
    }

    /* 特色標籤群組 (如：團體、巴士) */
    #page-travels .feature-tags {

    }


    /*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/

    /* ---------頂部主視覺輪播 bxslider--------- */
    #page-travels-detail .slider-wrapper {
        border-radius: 20px 20px 0 0;
        margin-bottom: 40px;
    }

    /* ---右下側黑色半透明資訊框--- */
    #page-travels-detail .main-overlay {
        position: relative;
        width: 100%;
        border-radius: 0;
        right: auto;
        background-color: var(--main-color-blue);
    }


    #page-travels-detail .overlay-inner .deco-line {
        margin: 6px 0 20px 0;
    }    
    #page-travels-detail .overlay-inner p {
        margin-bottom: 15px;
    }    
    #page-travels-detail .tag-gray {
        background: var(--main-color-white);
        color: var(--main-color-blue);
    }

}


/*螢幕尺寸【小於】769時頁面顯示---平板*/
@media (max-width: 768px) {

    /*--------------瘋遊攻略 #page-travels-----------------------------*/

    /* 分類標籤 (如：珍奇探險) */
    #page-travels .category-tag {
        padding: 3px 10px;
    }


    /*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/
    /* ---------行程網格區塊--------- */   
    #page-travels-detail .trip-grid {
        grid-template-columns: repeat(1, 1fr); 
        gap: 40px;
    }

    /* 背景 */
    #page-travels-detail .trip-section::after{
        display: none;
    }       



    /* ---------長形裝飾--------- */
    #page-travels-detail .deco-rectangle{
        border-radius: 0 0 20px 20px;
        margin-top: 40px;
    }

}



/*螢幕尺寸【小於】601時頁面顯示---平板*/
@media (max-width: 600px) {

    /*--------------瘋遊攻略 #page-travels-----------------------------*/

    /* --- 網格佈局 --- */
    #page-travels .travels-grid {
        gap: 30px;
    }

    /* --- 卡片設計 --- */
    #page-travels .travels-card {
        flex-direction: column; /* 圖片在上，文字在下 */
        text-align: center;
        gap: 15px;
    }
    #page-travels .travels-card:nth-child(3n+1) {
        padding-bottom: 30px;
    }

    /* --- 卡片內容區 --- */
    #page-travels .card-content {    
        align-items: center; 
    }
    /* 分類標籤 (如：珍奇探險) */
    #page-travels .category-tag {
        margin-bottom: 5px;
    }
    /* 特色標籤群組 (如：團體、巴士) */
    #page-travels .feature-tags {
        justify-content: center;
    }

    /* 內文 */
    #page-travels .desc {
        text-align: left;
    }





    /*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/


}



/*螢幕尺寸【小於】481時頁面顯示---手機*/
@media (max-width: 480px) {

    /*--------------瘋遊攻略 #page-travels-----------------------------*/




    /*----------------瘋遊攻略-詳細頁 #page-travels-detail----------------*/


}