/**
 * Metro Posts Block Styles
 * 桌機版 >= 768px / 手機版 < 768px
 * 完全隔離樣式，不受主題影響
 */

/* Reset & Base - 完全隔離 */
.metro-posts-block,
.metro-posts-block *,
.metro-posts-block *::before,
.metro-posts-block *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

/* 連結樣式 - 強制無底線 */
.metro-posts-block a,
.metro-posts-block a:link,
.metro-posts-block a:visited,
.metro-posts-block a:hover,
.metro-posts-block a:active,
.metro-posts-block a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}

/* 圖片重置 */
.metro-posts-block img {
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 無文章提示 */
.metro-posts-block .mpb-no-posts {
    text-align: center !important;
    padding: 40px !important;
    color: #666666 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* =====================================================
   桌機版 (>= 768px)
   ===================================================== */
.metro-posts-block .mpb-desktop {
    display: none !important;
}

@media (min-width: 768px) {
    .metro-posts-block .mpb-desktop {
        display: block !important;
    }
    
    .metro-posts-block .mpb-mobile {
        display: none !important;
    }
}

.metro-posts-block .mpb-desktop-wrapper {
    width: 1187px !important;
    max-width: 100% !important;
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 60px !important;
}

.metro-posts-block .mpb-desktop-column {
    width: 560px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

/* 文章項目 */
.metro-posts-block .mpb-article-header {
    align-self: stretch !important;
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 30px !important;
}

.metro-posts-block .mpb-article-image-link {
    display: block !important;
    flex-shrink: 0 !important;
}

.metro-posts-block .mpb-article-image {
    width: 210px !important;
    height: 140px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
}

.metro-posts-block .mpb-article-details {
    flex: 1 1 0 !important;
    padding-right: 48px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 15px !important;
}

.metro-posts-block .mpb-article-meta {
    align-self: stretch !important;
    display: inline-flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.metro-posts-block .mpb-article-date {
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
    color: rgba(51, 51, 51, 0.50) !important;
    font-size: 12px !important;
    font-weight: 350 !important;
    line-height: 20px !important;
    letter-spacing: 0.60px !important;
}

/* 分類標籤 */
.metro-posts-block .mpb-category-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: flex-end !important;
}

.metro-posts-block .mpb-category-pill,
.metro-posts-block .mpb-category-pill:link,
.metro-posts-block .mpb-category-pill:visited,
.metro-posts-block .mpb-category-pill:hover,
.metro-posts-block .mpb-category-pill:active,
.metro-posts-block .mpb-category-pill:focus {
    padding: 2.23px 6.70px !important;
    background: #1DC5B4 !important;
    border-radius: 9.50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 19.20px !important;
    letter-spacing: 0.60px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.metro-posts-block .mpb-category-pill:hover {
    background: #17a89a !important;
    color: white !important;
}

/* 文章內容區 */
.metro-posts-block .mpb-article-content {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 15px !important;
}

.metro-posts-block .mpb-article-title-link,
.metro-posts-block .mpb-article-excerpt-link {
    display: block !important;
    align-self: stretch !important;
    text-decoration: none !important;
}

.metro-posts-block .mpb-article-title-link:hover,
.metro-posts-block .mpb-article-excerpt-link:hover {
    text-decoration: none !important;
}

.metro-posts-block .mpb-article-title {
    align-self: stretch !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #484848 !important;
    font-size: 17px !important;
    font-weight: 350 !important;
    line-height: 25px !important;
    letter-spacing: 0.85px !important;
    text-decoration: none !important;
}

.metro-posts-block .mpb-article-title-link:hover .mpb-article-title {
    color: #04BEB2 !important;
    text-decoration: none !important;
}

.metro-posts-block .mpb-article-excerpt {
    align-self: stretch !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(85, 85, 85, 0.80) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0.75px !important;
    text-decoration: none !important;
}

/* 分隔線 */
.metro-posts-block .mpb-line {
    align-self: stretch !important;
    height: 0px !important;
    outline: 1px rgba(58, 76, 58, 0.10) solid !important;
    outline-offset: -0.50px !important;
}

/* =====================================================
   手機版 (< 768px)
   ===================================================== */
.metro-posts-block .mpb-mobile {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .metro-posts-block .mpb-mobile {
        display: none !important;
    }
}

/* 手機版大圖區 */
.metro-posts-block .mpb-mobile-featured {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-featured-link,
.metro-posts-block .mpb-mobile-featured-link:link,
.metro-posts-block .mpb-mobile-featured-link:visited,
.metro-posts-block .mpb-mobile-featured-link:hover,
.metro-posts-block .mpb-mobile-featured-link:active {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-featured-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 350 / 234 !important;
    border-radius: 10.90px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-featured-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 25%, rgba(0, 0, 0, 0.80) 100%) !important;
    border-radius: 10.90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 16px !important;
    margin: 0 !important;
}

.metro-posts-block .mpb-mobile-featured-details {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-featured-meta {
    align-self: stretch !important;
    display: inline-flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-featured-date {
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 350 !important;
    line-height: 20px !important;
    letter-spacing: 0.60px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-featured .mpb-category-pills {
    justify-content: flex-end !important;
}

.metro-posts-block .mpb-mobile-featured .mpb-category-pill {
    height: 20px !important;
    color: white !important;
}

.metro-posts-block .mpb-mobile-featured-title {
    align-self: stretch !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.80px !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 手機版列表區 */
.metro-posts-block .mpb-mobile-list {
    align-self: stretch !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item {
    align-self: stretch !important;
    width: 100% !important;
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-image-link,
.metro-posts-block .mpb-mobile-item-image-link:link,
.metro-posts-block .mpb-mobile-item-image-link:visited,
.metro-posts-block .mpb-mobile-item-image-link:hover,
.metro-posts-block .mpb-mobile-item-image-link:active {
    display: block !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-image {
    width: 114px !important;
    height: 76px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-details {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-meta {
    align-self: stretch !important;
    display: inline-flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-date {
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
    color: rgba(0, 0, 0, 0.43) !important;
    font-size: 12px !important;
    font-weight: 350 !important;
    line-height: 20px !important;
    letter-spacing: 0.60px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item .mpb-category-pill {
    height: 20px !important;
    color: white !important;
}

.metro-posts-block .mpb-mobile-item-title-link,
.metro-posts-block .mpb-mobile-item-title-link:link,
.metro-posts-block .mpb-mobile-item-title-link:visited,
.metro-posts-block .mpb-mobile-item-title-link:hover,
.metro-posts-block .mpb-mobile-item-title-link:active {
    display: block !important;
    align-self: stretch !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-title {
    align-self: stretch !important;
    height: 50px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #484848 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.80px !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metro-posts-block .mpb-mobile-item-title-link:hover .mpb-mobile-item-title {
    color: #04BEB2 !important;
    text-decoration: none !important;
}

/* =====================================================
   響應式調整
   ===================================================== */
@media (max-width: 1200px) and (min-width: 768px) {
    .metro-posts-block .mpb-desktop-wrapper {
        width: 100% !important;
        gap: 30px !important;
        flex-wrap: wrap !important;
    }
    
    .metro-posts-block .mpb-desktop-column {
        width: calc(50% - 15px) !important;
        min-width: 400px !important;
    }
    
    .metro-posts-block .mpb-article-details {
        padding-right: 20px !important;
    }
}

@media (max-width: 900px) and (min-width: 768px) {
    .metro-posts-block .mpb-desktop-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .metro-posts-block .mpb-desktop-column {
        width: 100% !important;
        min-width: auto !important;
    }
}

@media (max-width: 767px) {
    .metro-posts-block .mpb-mobile-item {
        gap: 12px !important;
    }
}

@media (max-width: 400px) {
    .metro-posts-block .mpb-mobile-item-image {
        width: 100px !important;
        height: 67px !important;
    }
    
    .metro-posts-block .mpb-mobile-item-title {
        font-size: 14px !important;
        line-height: 22px !important;
    }
}