/* --------------------------------------------------------------------------
   輪播欄位（P10）帶狀輪播
   容器沿 float 佈局橫跨三欄總寬；slide 卡片樣式沿用 imgList 家族（clone 自 #albumSample），
   本檔只管帶本身的佈局與暫停/播放控制鍵（結構照 common_carouselControls.css 的連結區塊模式）
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 0) {

    /* 雙 class 提高特異度：各板的 .imgList_odd 常帶固定寬度，帶狀輪播要壓過它撐滿三欄總寬 */
    .carouselZone_odd.imgList_odd {
        float: left;
        width: 100%;
        position: relative;
    }

    /* 標題與卡片之間留呼吸空間（區塊標題的底線貼死卡片很擠） */
    .carouselZone_odd .fake {
        margin-top: 0.75em;
    }

    /* 頁面沒載 owl 基底 css（只有 cus 主題），補上必要子集，否則 stage 由內容撐開整排裸奔溢出容器 */
    .carouselZone_odd .owl-carousel {
        display: block;
        position: relative;
        width: 100%;
        z-index: 1;
    }

    .carouselZone_odd .owl-stage-outer {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .carouselZone_odd .owl-stage {
        position: relative;
    }

    .carouselZone_odd .owl-item {
        float: left;
        position: relative;
        min-height: 1px;
    }


    .carouselZone_odd .owl-nav.disabled,
    .carouselZone_odd .owl-dots.disabled {
        display: none;
    }

    /* 上/下一則的視覺交給 lib 的系統標準規則（main div.owl-nav .owl-prev/next span＝深色小方塊＋PNG 箭頭），
       前提是 navText 用 span（carouselZone.js），這裡不自訂樣式；只補按鈕本體的無樣式化 */
    /* 按鈕本體 flex 置中：殺掉 inline 基線讓箭頭方塊在按鈕內絕對置中，
       配合 nav 列的 align-items:center，方塊與暫停鈕的中心線數學上重合 */
    .carouselZone_odd .owl-prev,
    .carouselZone_odd .owl-next {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 「左箭頭、暫停置中、右箭頭」佈局（比照側邊欄位）：暫停鈕由 JS 塞進 nav 列，
       space-between＝三件左中右分佈、align-items＝垂直置中，全程零量測 */
    .carouselZone_odd [data-carousel-zone-stage] .owl-nav:not(.disabled) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0.5em;
    }

    /* RSS／閱讀更多尾列靠右 */
    .carouselZone_odd .carouselZoneMore_odd {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        float: left;
        width: 100%;
    }

    /* 控制器在 nav flex 列內排版（JS 插入），這裡只管顯隱機制 */
    .carouselZonePlayControler {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .carouselZone_odd:focus-within .carouselZonePlayControler {
        opacity: 1;
        pointer-events: auto;
    }

    /* 後台開關：輪播欄位暫停鍵常駐顯示 */
    .carouselZone_odd.carouselzone-pause-always .carouselZonePlayControler {
        opacity: 1;
        pointer-events: auto;
    }

    .carouselZonePlayPause {
        font-size: 0.85em;
        line-height: 1.2;
        background: rgba(60, 60, 80, 0.75);
        color: white;
        padding: 0.125em 0.3125em;
        border: none;
        border-radius: 0.1875em;
        cursor: pointer;
        white-space: nowrap;
    }

    .carouselZone_odd.carouselzone-pause-text-hidden .carouselZonePlayPause .carouselZonePlayPauseBtn-label {
        display: none;
    }

    .carouselZonePlayPause:focus {
        outline: 2px solid #0066cc;
        outline-offset: 2px;
        background: rgba(45, 45, 65, 0.75);
    }
}