/**
 * LP YouTube Carousel - Widget Styles
 */

/* 小工具容器 */
.lp-ytc-widget {
    margin-bottom: 20px;
}

.lp-ytc-widget .widget-title {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

/* 小工具內的輪播調整 */
.lp-ytc-widget .lp-ytc-carousel-wrapper {
    padding: 30px 20px;
    background: #1a1a1a;
    border-radius: 12px;
}

/* 側邊欄寬度調整 */
.widget-area .lp-ytc-widget .lp-ytc-video-item,
.sidebar .lp-ytc-widget .lp-ytc-video-item {
    flex: 0 0 100% !important;
}

.widget-area .lp-ytc-widget .lp-ytc-carousel-track,
.sidebar .lp-ytc-widget .lp-ytc-carousel-track {
    gap: 15px;
}

/* 小工具內的影片標題調整 */
.lp-ytc-widget .lp-ytc-video-title h3 {
    font-size: 14px;
}

/* 小工具內的導航按鈕調整 */
.lp-ytc-widget .lp-ytc-nav {
    width: 40px;
    height: 40px;
}

.lp-ytc-widget .lp-ytc-nav svg {
    width: 20px;
    height: 20px;
}

/* 小工具內的分頁指示器調整 */
.lp-ytc-widget .lp-ytc-dots {
    margin-top: 15px;
}

.lp-ytc-widget .lp-ytc-dot {
    width: 8px;
    height: 8px;
}

.lp-ytc-widget .lp-ytc-dot.active {
    width: 20px;
}

/* 窄側邊欄優化 */
@media (max-width: 1200px) {
    .widget-area .lp-ytc-widget .lp-ytc-carousel,
    .sidebar .lp-ytc-widget .lp-ytc-carousel {
        gap: 10px;
    }
    
    .widget-area .lp-ytc-widget .lp-ytc-nav,
    .sidebar .lp-ytc-widget .lp-ytc-nav {
        width: 36px;
        height: 36px;
    }
}

/* 手機版調整 */
@media (max-width: 768px) {
    .lp-ytc-widget .lp-ytc-video-title h3 {
        font-size: 13px;
    }
}

/* 首頁全寬小工具區域 */
.home .content-area .lp-ytc-widget .lp-ytc-video-item,
.home .site-content .lp-ytc-widget .lp-ytc-video-item {
    flex: 0 0 calc(33.333% - 14px);
}

@media (max-width: 1024px) {
    .home .content-area .lp-ytc-widget .lp-ytc-video-item,
    .home .site-content .lp-ytc-widget .lp-ytc-video-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .home .content-area .lp-ytc-widget .lp-ytc-video-item,
    .home .site-content .lp-ytc-widget .lp-ytc-video-item {
        flex: 0 0 100%;
    }
}

/* 區塊編輯器（Gutenberg）小工具 */
.wp-block-widget .lp-ytc-widget {
    margin: 0;
}

/* 小工具空狀態 */
.lp-ytc-widget .lp-ytc-carousel-empty {
    padding: 20px;
    font-size: 14px;
}