/* ====================================
   媒體中心 · 列表與詳情補充樣式
   （media.css / media-study.css 之外的細節）
   ==================================== */

/* ---------- 列表：日期與排版 ---------- */
.media-list-item a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0;
}

.media-list-item .media-text {
    flex: 1 1 auto;
    min-width: 0;
}

.media-list-item .media-date {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: #98a2b3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 分頁：與站點風格對齊 ---------- */
.media-pagination .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0;
}

.media-pagination .page-item .page-link {
    border-radius: 8px;
    border-color: #e3e8ef;
    color: #4b5563;
    min-width: 40px;
    text-align: center;
}

.media-pagination .page-item.active .page-link {
    background: linear-gradient(45deg, var(--primary-color, #007bff), #0056b3);
    border-color: transparent;
    color: #fff;
}

.media-pagination .page-item.disabled .page-link {
    color: #c3cbd6;
    background: #f7f9fc;
}

/* ---------- 詳情頁：meta 資訊 ---------- */
.media-detail-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.media-badge {
    background: linear-gradient(45deg, var(--primary-color, #007bff), #0056b3);
    color: #fff;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.media-detail-date {
    font-size: 0.9rem;
    color: #8b95a5;
    font-variant-numeric: tabular-nums;
}

.media-detail-cover img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.media-detail-attach .btn {
    border-radius: 25px;
    padding: 0.6rem 1.8rem;
}

/* 正文里的图片不要溢出 */
.media-study-text img {
    max-width: 100%;
    height: auto;
}

/* ---------- 移動端 ---------- */
@media (max-width: 991.98px) {
    .media-list-item a {
        flex-wrap: wrap;
        gap: 0.15rem 0.5rem;
    }

    .media-list-item .media-text {
        flex: 1 1 100%;
        font-size: 15px;
        line-height: 1.6;
    }

    .media-list-item .media-date {
        font-size: 0.8rem;
    }

    .media-detail-cover img {
        border-radius: 10px;
    }

    .media-pagination .page-item .page-link {
        min-width: 36px;
        padding: 0.35rem 0.6rem;
        font-size: 0.9rem;
    }
}