/* 關於延電：最新消息（news、news-*）、研發專利、認證與成就專用樣式 */

/* 消息清單：每則之間以分隔線隔開 */
.news-item + .news-item {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.news-item-title {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
}

.news-item-title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.news-item-title a:hover {
    color: var(--green-700);
}

.news-item-body {
    color: var(--bs-secondary-color);
    line-height: 1.8;
    /* 內文中的長網址在手機上換行，避免橫向捲動 */
    overflow-wrap: anywhere;
}

.news-item-body > :last-child {
    margin-bottom: 0;
}

/* 手機、平板（圖文上下排列時）一般消息的圖片統一裁成 16:9，避免正方形海報把頁面拉得很長；
   媒體露出的報導剪報不裁（會切掉文字） */
@media (max-width: 991.98px) {
    .news-item-media img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

/* 大手機橫式（576～767px）：圖片原檔多為 550px 寬，撐滿欄寬會放大而模糊，限制在 36rem（576px）內 */
@media (min-width: 576px) and (max-width: 767.98px) {
    .news-item-media {
        max-width: 36rem;
    }
}

/* 平板直式（768～991px）：圖在上時圖只有 576px 寬、靠左，右側空一塊，每則高約 900px（消息頁 3 萬多 px）；
   改為與知識庫列表相同的左圖右文（圖 5／文 7），圖不放大、清單長度約減半 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .news-item > .row > .news-item-media {
        width: 41.66666667%;
    }

    .news-item > .row > .news-item-media + * {
        width: 58.33333333%;
    }
}

/* 摘要：內文超過約 5 行（桌機 8 行）時先收合並淡出，按「閱讀全文」展開（site.js） */
.news-item-body.is-collapsed {
    max-height: calc(1.8em * 5);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

@media (min-width: 992px) {
    .news-item-body.is-collapsed {
        max-height: calc(1.8em * 8);
    }
}

.news-item-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--green-700);
    font-weight: 600;
}

.news-item-toggle[hidden] {
    display: none;
}

.news-item-toggle:hover {
    color: var(--green-800);
    text-decoration: underline;
}

.news-item-toggle .bi {
    transition: transform 0.2s ease;
}

.news-item-toggle[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

.news-item-toggle[aria-expanded="false"] .news-item-toggle-less,
.news-item-toggle[aria-expanded="true"] .news-item-toggle-more {
    display: none;
}

/* 日期與分類 */
.news-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 平板、手機的分類連結加高點擊區後，日期要和它們垂直置中對齊 */
    gap: 0.25rem 1.25rem;
    margin-top: 1.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.news-item-meta .bi {
    margin-right: 0.35rem;
    color: var(--accent);
}

.news-item-meta a {
    color: inherit;
    text-decoration: none;
}

.news-item-meta a:hover {
    color: var(--green-700);
}

/* 輪播指示點放在圖片下方，不遮住照片 */
.news-carousel {
    padding-bottom: 2rem;
}

.news-carousel .carousel-indicators {
    margin-bottom: 0;
}

/* 圓點 10px，透明邊框把點擊區撐到 24px（WCAG 2.5.8）；未選取用灰色、選取用深綠，不靠透明度區分（非文字對比 3:1） */
.news-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0 2px;
    border: 7px solid transparent;
    border-radius: 50%;
    background-color: var(--gray-400);
    opacity: 1;
}

.news-carousel .carousel-indicators .active {
    background-color: var(--green-700);
}

/* 指示點在圖片下方的白底上：焦點外框用深綠（輪播預設的白色外框在白底上看不見） */
.news-carousel .carousel-indicators {
    --focus-ring-color: var(--green-800);
}

.news-carousel .carousel-indicators [data-bs-target]:focus-visible {
    box-shadow: none;
}

.news-carousel .carousel-control-prev,
.news-carousel .carousel-control-next {
    bottom: 2rem;
}

/* 認證與成就：手風琴標題圖示 */
.certificate-accordion .accordion-button {
    font-weight: 700;
}

.certificate-accordion .accordion-button .bi {
    margin-right: 0.5rem;
    color: var(--accent);
}

/* 展開內容：內文框限寬 44em（和一般段落相同）；內文有多個段落時最後一段不留下邊距 */
.certificate-accordion .certificate-body {
    max-width: 44em;
}

.certificate-accordion .certificate-body > p:last-child {
    margin-bottom: 0;
}

/* 1200px 以上：證書圖靠左浮動時，內文自成一欄排在圖右側（flow-root）；否則限寬 44em 的框
   從圖的左緣起算，圖旁文字只剩約 330px、右側空一大塊。較窄時圖旁欄太窄，維持文字繞到圖下方 */
@media (min-width: 1200px) {
    .certificate-accordion .certificate-body {
        display: flow-root;
    }
}