@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-experts-----------------------------*/

/* 背景 */
#page-experts .content::before{
    content: '';
    position: absolute;
    z-index: -1;
    left: -265px;
    top: 25%;
    width: 467px;
    height: 634px;
    background-image: url(../Images/experts/bg-experts-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
}
#page-experts .content::after{
    content: '';
    position: absolute;
    z-index: -1;
    right: 65px;
    bottom: -135px;
    width: 679px;
    height: 463px;
    background-image: url(../Images/experts/bg-experts-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
}

/* 網格容器 */
#page-experts .expert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一排四個 */
    gap: 70px 15px;
}

/* 卡片主體 */
#page-experts .expert-card {
    border: 1px solid var(--main-color-gray2);
    border-radius: 20px;
    background: var(--main-color-white);
    overflow: visible; /* 為了讓下方的 MORE 按鈕可以稍微凸出或置中 */
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    position: relative;
    transition: all 0.3s ease;
}
#page-experts .expert-card.green:hover {
    border: 1px solid var(--main-color-green);
    box-shadow: 0 0 0 4px var(--main-color-green);
}
#page-experts .expert-card.yellow:hover {
    border: 1px solid var(--main-color-yellow);
    box-shadow: 0 0 0 4px var(--main-color-yellow);
}
#page-experts .expert-card.orange:hover {
    border: 1px solid var(--main-color-orange);
    box-shadow: 0 0 0 4px var(--main-color-orange);
}
#page-experts .expert-card.blue:hover {
    border: 1px solid var(--main-color-blue);
    box-shadow: 0 0 0 4px var(--main-color-blue);
}

/* 標題與標籤 */
#page-experts .expert-card .card-header h3 {
    margin-bottom: 8px;
    color: var(--main-color-black);
}
#page-experts .expert-card .card-header .tag-group {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}
#page-experts .expert-card .card-header .tag {
    border: 1px solid var(--main-color-gray);
    padding: 0 12px;
    border-radius: 3px;
    color: #999;
    line-height: 1.5;
}

/*標題與標籤-不同顏色的tag*/
#page-experts .expert-card.green .card-header .tag {
    border: 1px solid var(--main-color-green);
    color: var(--main-color-green);
}
#page-experts .expert-card.yellow .card-header .tag {
    border: 1px solid var(--main-color-yellow);
    color: var(--main-color-gray2);
}
#page-experts .expert-card.orange .card-header .tag {
    border: 1px solid var(--main-color-orange);
    color: var(--main-color-orange);
}
#page-experts .expert-card.blue .card-header .tag {
    border: 1px solid var(--main-color-blue);
    color: var(--main-color-blue);
}


/* 圖片區域 */
#page-experts .expert-card .card-img {
    position: relative;
    width: 100%;
    height: 190px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}
#page-experts .expert-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 圖片上的行政區標籤 */
#page-experts .expert-card .card-img .location-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 12px;
    border-radius: 10px 0 10px 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* 不同行政區的顏色 */
#page-experts .expert-card.green .card-img .location-tag{
    background-color: rgba(140, 194, 128,0.9);
}
#page-experts .expert-card.yellow .card-img .location-tag{
    background-color: rgba(249, 226, 21,0.9);
    color: var(--main-color-black);
}
#page-experts .expert-card.orange .card-img .location-tag{
    background-color: rgba(240, 120, 0,0.9);
}
#page-experts .expert-card.blue .card-img .location-tag{
    background-color: rgba(15, 157, 204,0.9);
}

#page-experts .expert-card.yellow .card-img .location-tag .icon-location{
    background-color: var(--main-color-black);
}


/* 內文 */
#page-experts .expert-card .card-body p {
    font-size: 15px;
    color: #666;
    margin-bottom:10px; /* 留空間給絕對定位的按鈕 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.5;
}

/* 底部按鈕 */
#page-experts .expert-card .card-footer {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    text-align: center;
}

#page-experts .expert-card .card-footer .btn-more {
    display: inline-block; /* 讓 span 可以設定 padding 和寬度 */
    padding: 0 15px;
    color: var(--main-color-white);
    border-radius: 20px;
    text-align: center;
    font-weight: 800;
}
/* 按鈕顏色連動 */
#page-experts .expert-card.green .card-footer .btn-more  { 
    background-color: var(--main-color-green); 
}
#page-experts .expert-card.yellow .card-footer .btn-more  { 
    background-color: var(--main-color-yellow); 
    color: var(--main-color-black);
}
#page-experts .expert-card.orange .card-footer .btn-more  { 
    background-color: var(--main-color-orange); 
}
#page-experts .expert-card.blue .card-footer .btn-more  { 
    background-color: var(--main-color-blue); 
}




/*----------------行家推薦-詳細頁 #page-experts-detail----------------*/

/* 背景 */
#page-experts-detail main::before{
    content: '';
    position: absolute;
    z-index: -1;
    left: -280px;
    bottom: -24%;
    width: 536px;
    height: 693px;
    background-image: url(../Images/experts-detail/bg-experts-detail-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
}
#page-experts-detail main::after{
    content: '';
    position: absolute;
    z-index: -1;
    right: -280px;
    top: 25%;
    width: 473px;
    height: 729px;
    background-image: url(../Images/experts-detail/bg-experts-detail-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* 防止圖片擋住卡片的點擊動作 */
}


/* 上方配置 */
#page-experts-detail .expert-top {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
}

#page-experts-detail .expert-gallery {
    flex: 1;         /* 讓它佔據剩餘空間 */
    min-width: 0;    /* 關鍵：Flex 項目預設 min-width 是 auto，改為 0 才能讓它真正縮小 */
    overflow: hidden; /* 確保內部的超寬 <ul> 不會撐開外殼 */
}


/*--- 圖片設置 ---*/
#page-experts-detail .main-img {
    position: relative;
    width: 100%;
    height: 640px;
    border-radius: 85px 0 0 0;
    overflow: hidden;
}

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

/* 輪播圖 bxslider */
#page-experts-detail .bx-wrapper{
    position: relative;
    box-shadow: none;
    border: none;   
    margin-bottom: 0; 
}

#page-experts-detail .main-img .bx-wrapper,
#page-experts-detail .main-img .bx-viewport,
#page-experts-detail .main-img ul.bxslider,
#page-experts-detail .main-img li {
    height: 100% !important; /* 強制 bxSlider 的容器吃滿父層高度 */
}





/* 右側資訊藍色卡片 */
#page-experts-detail .expert-top .expert-info-card {
    display: flex;
    flex-shrink: 0; /* 強制不准被壓縮 */
    flex-direction: column; 
    position: relative;
}

/* 上方的行政區標籤 */
#page-experts-detail .expert-top .expert-info-card .info-tag {
    position: absolute;
    top: -15px;
    left: 40px;
    color: var(--main-color-white);
    padding: 0 15px;
    border-radius: 50px 50px 50px 0;
    letter-spacing: 5px;
}
#page-experts-detail .expert-top .expert-info-card.green .info-tag {
    background: var(--main-color-green);
}
#page-experts-detail .expert-top .expert-info-card.yellow .info-tag {
    background: var(--main-color-yellow);
    color: var(--main-color-black);
}
#page-experts-detail .expert-top .expert-info-card.orange .info-tag {
    background: var(--main-color-orange);
}
#page-experts-detail .expert-top .expert-info-card.blue .info-tag {
    background: var(--main-color-white);
    color: var(--main-color-blue);
    border: 1px solid var(--main-color-blue);
}


/* 文字資訊 */
#page-experts-detail .expert-top .expert-info-card .info-text-area {
    flex: 0 0 auto; /* 內容多高就佔多高 */
    background-color: var(--main-color-blue);
    border-radius: 0 85px 0 0;
    overflow: hidden;
    height: 415px;
    color: var(--main-color-white);
    padding: 25px;
    box-sizing: border-box;
}

#page-experts-detail .expert-top .expert-info-card .info-text-area .tag-group .tag{
    color: var(--main-color-blue);
    background-color: var(--main-color-white);
    padding: 2px 10px;
    border-radius: 8px;
}

#page-experts-detail .expert-top .expert-info-card .info-text-area h2{
    font-size: 1.875rem;
    margin-top: 55px;
}

#page-experts-detail .expert-top .expert-info-card .info-text-area .info-list{
    margin-top: 30px;
}

/* 標題固定寬度，確保所有冒號垂直對齊 */
#page-experts-detail .expert-top .expert-info-card .info-text-area .info-list li{
    display: flex;         /* 關鍵：變左右兩欄 */
    align-items: flex-start; /* 頂部對齊 */  
}

#page-experts-detail .expert-top .expert-info-card .info-text-area .info-list span{
    flex: 0 0 85px;       /* 這裡固定標題寬度 */
    display: inline-block;
    white-space: nowrap;  /* 防止標題換行 */
}

/* 處理營業時間內的小字備註 */
#page-experts-detail .info-list li small {
    display: block;       /* 讓備註強制換行 */
}

/* 內容區塊自動填滿剩餘空間 */
#page-experts-detail .info-list li div {
    flex: 1;
}

#page-experts-detail .expert-top .expert-info-card .info-text-area .link-group{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;/* 如果未來連結變多，確保它會自動往下換行，不會爆出去 */
}

#page-experts-detail .expert-top .expert-info-card .info-text-area .info-list a{
    color: var(--main-color-white);
} 
#page-experts-detail .expert-top .expert-info-card .info-text-area .info-list a.link{
    text-decoration: underline;
} 


/* 地圖資訊 */
#page-experts-detail .expert-top .expert-info-card .info-map-area {
    margin-top: 20px; 
    flex: 1;         /* 如果你想讓地圖填滿剩下的空間 */
}
#page-experts-detail .expert-top .expert-info-card .map-preview {
    width: 100%;      
    height: 200px;    
}

#page-experts-detail .expert-top .expert-info-card .map-preview iframe {
    width: 100%;     
    height: 100%;     
}

/* 下方內文框 */
#page-experts-detail .expert-content-box {
    border: 2px solid var(--main-color-blue);
    background-color: #e9f5fa;
    border-radius: 0 0 75px 75px;
    padding: 60px 50px;
    margin-bottom: 40px;
}

#page-experts-detail .expert-content-box .content-header{
    margin-bottom: 40px;
}

#page-experts-detail .content-header h3 {
    font-size: 30px;
    color: var(--main-color-black);
    margin: 0;
}
#page-experts-detail .content-body {
    font-size: 1.25rem;/*20px*/
}

/* 裝飾線條 */
#page-experts-detail .content-header h3.deco-line{
    position: relative;
    margin-top: 10px;
}
#page-experts-detail .content-header h3.deco-line::after {
    content: "";
    display: inline-block;
    width: 250px;
    height: 2px;
    background: var(--main-color-blue);
    vertical-align: middle;
    margin-left: 25px;
}

/* 底部按鈕 */
#page-experts-detail .page-actions {
    width: 90%;
}






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

    /*--------------行家推薦 #page-experts-----------------------------*/

    /* 網格容器 */
    #page-experts .expert-grid {
        grid-template-columns: repeat(3, 1fr); 
    }




    /*----------------行家推薦-詳細頁 #page-experts-detail----------------*/

    /* 下方內文框 */
    #page-experts-detail .content-header h3 {
        font-size: 26px;
    }


    /* 裝飾線條 */
    #page-experts-detail .content-header h3.deco-line::after {
        width: 100px;
    }    
        


}



/*螢幕尺寸【小於】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-experts-----------------------------*/

    /* 網格容器 */
    #page-experts .expert-grid {
        grid-template-columns: repeat(2, 1fr); 
    }



    /*----------------行家推薦-詳細頁 #page-experts-detail----------------*/
    /* 上方配置 */
    #page-experts-detail .expert-top {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
    }




    /* 文字資訊 */
    #page-experts-detail .expert-top .expert-info-card .info-text-area {
        height: auto;
        padding: 30px 40px;
        border-radius: 0;
    }

    #page-experts-detail .expert-top .expert-info-card .info-text-area h2{
        margin-top: 0;
    }


    /* 地圖資訊 */
    #page-experts-detail .expert-top .expert-info-card .info-map-area {
        margin-top: 40px; 
    }

    /* 下方內文框 */
    #page-experts-detail .expert-content-box {
        border-radius: 0 0 20px 20px;
        padding: 30px 40px;
    }

    #page-experts-detail .expert-content-box .content-header {
        margin-bottom: 25px;
    }
    #page-experts-detail .expert-content-box .content-header h3:first-child{
        margin-bottom: 10px;
    }
    #page-experts-detail .expert-content-box .content-header h3{
        border-bottom: 1px dashed var(--main-color-gray);
        padding-bottom: 10px;
    }

    /* 裝飾線條 */
    #page-experts-detail .content-header h3.deco-line::after {
        display: none;
    }    


    /* 輪播圖 bxslider */
    /* 讓輪播圖保持等比例縮放 */
    #page-experts-detail .main-img {
        height: auto; /* 關鍵1：取消原本寫死的 400px 高度 */
        
        /* 關鍵2：設定你要的長寬比 (寬度 / 高度) */
        /* 假設你在 1920 螢幕下，該區塊寬度約為 850px，高度為 640px */
        aspect-ratio: 1051 / 640; 
        
        /* 手機版圓角建議再微調小一點，視覺比較平衡 */
        border-radius: 20px 20px 0 0; 
    }


    /* 輪播圖 bxslider-dot */
    #page-experts-detail .main-img .bx-pager {
        bottom: 15px;      
    }

}


/*螢幕尺寸【小於】769時頁面顯示---平板*/
@media (max-width: 768px) {
    /*--------------行家推薦 #page-experts-----------------------------*/
    /* 網格容器 */
    #page-experts .expert-grid {
        gap: 50px 15px;
    }
    
    /* 文字資訊 */
    #page-experts-detail .expert-top .expert-info-card .info-text-area h2 {
        margin-bottom: 5px;
    }


    /* 下方內文框 */
    #page-experts-detail .content-header h3 {
        font-size: 22px;
    }




    /* 底部按鈕 */
    #page-experts .expert-card .card-footer .btn-more {
        padding: 2px 15px;
    }   


}



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

    /*--------------行家推薦 #page-experts-----------------------------*/

    /* 網格容器 */
    #page-experts .expert-grid {
        grid-template-columns: repeat(1, 1fr); 
    } 




    /*----------------行家推薦-詳細頁 #page-experts-detail----------------*/
    /* 文字資訊 */
    #page-experts-detail .expert-top .expert-info-card .info-text-area {
        padding: 20px 30px;
    }

    /* 下方內文框 */
    #page-experts-detail .expert-content-box {
        padding: 20px 30px;
    }


}



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

    /*----------------行家推薦-詳細頁 #page-experts-detail----------------*/
    /* 底部按鈕 */
    #page-experts-detail .page-actions {
        width: 100%;
    }


}