/* ============================================================
   newsroom_article_v2025.css
   Newsroom Article Page — 頁面專屬樣式
   Version: 2026040201
   ============================================================ */

/* ── Hero Mode B：補 nav 高度 ─────────────────────────────────── */
main#page_content {
    background-color: var(--black-100);
}

@media (min-width: 1181px) {
    main#page_content {
        padding-top: 56px;
    }   
}

/* ── 頁面主框架 ───────────────────────────────────────────────── */
#page_content section,
#page_content .article-toc-mobile {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* Fix: basic_v2025.css 可能對 article/aside HTML 元素套用底色或 margin */
#page_content article.article-content,
#page_content aside.article-toc {
    background: none;
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* Share / Subscribe 強制靠左，fill 欄寬 */
#page_content .article-share,
#page_content .article-subscribe {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* ============================================================
   Section 1 — Article Header
   ============================================================ */
#page_content .article-header {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 64px max(40px, calc((100% - 1440px) / 2)) 0;
}

/* 標題 + 標籤/日期區塊 */
#page_content .article-header__meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

#page_content .article-header__title {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--black-white);
    margin: 0;
}

#page_content .article-header__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

#page_content .article-header__label {
    display: inline-block;
    background-color: #0192DF;
    color: var(--black-white);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    padding: 6px 16px;
    border-radius: 0;
    margin-left: 0;
}

#page_content .article-header__date {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--black-40);
    margin-right: 0;
}

/* Hero 圖 */
#page_content .article-header__image {
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 20px;
    overflow: hidden;
}

#page_content .article-header__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Mobile TOC Trigger（只在 mobile 顯示）
   ============================================================ */
#page_content .article-toc-mobile {
    display: none;
    padding: 0 max(40px, calc((100% - 1440px) / 2));
    position: relative;
}

#page_content .article-toc-mobile__trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    height: 36px;
    padding: 8px 12px 8px 16px;
    background: transparent;
    border: 2px solid var(--black-white);
    border-radius: 100px;
    color: var(--black-white);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s;
}

#page_content .article-toc-mobile__trigger:hover {
    background-color: var(--black-white);
    border-color: transparent;
    color: var(--black-70);
}

#page_content .article-toc-mobile__trigger[data-open="true"] {
    background-color: #0192DF;
    border-color: transparent;
    color: var(--black-white);
}

#page_content .article-toc-mobile__label {
    flex: 1;
    text-align: left;
}

#page_content .article-toc-mobile__arrow {
    flex: 0 0 14px;
    transition: transform 0.2s ease;
}

#page_content .article-toc-mobile__trigger[data-open="true"] .article-toc-mobile__arrow {
    transform: rotate(180deg);
}

#page_content .article-toc-mobile__menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    width: 100%;
    max-width: calc(100% - 32px);
    background-color: var(--black-20);
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 8px;
    box-sizing: border-box;
    z-index: 100;
}

#page_content .article-toc-mobile__trigger[data-open="true"] + .article-toc-mobile__menu {
    display: flex;
}

#page_content .article-toc-mobile__item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--black-70);
    text-decoration: none;
    box-sizing: border-box;
    transition: color 0.15s;
}

#page_content .article-toc-mobile__item:hover {
    color: #0192DF;
}

#page_content .article-toc-mobile__item.active {
    background-color: #0192DF;
    color: var(--black-white);
}

/* ============================================================
   Section 2 — Article Body（左右兩欄）
   ============================================================ */
#page_content .article-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 64px max(40px, calc((100% - 1440px) / 2)) 0;
}

/* 左欄 */
#page_content .article-body__left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ── 文章正文 ─────────────────────────────────────────────────── */
#page_content .article-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

#page_content .article-block {
    margin: 0;
}

#page_content .article-block--paragraph {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#page_content .article-block--paragraph p {
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    line-height: 1.7;
    color: var(--black-white);
    margin: 0;
}

#page_content .article-block--paragraph p a{ 
    color: var(--color-blue-for-dark);
    text-decoration: underline;
}

#page_content .article-block--heading {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--black-white);
    padding-top: 16px;
}

#page_content .article-block--figure {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#page_content .article-block--figure__img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

#page_content .article-block--figure__caption {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--black-40);
    margin: 0;
}

/* ── Share Section ───────────────────────────────────────────── */
#page_content .article-share {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#page_content .article-share__label {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--black-20);
    white-space: nowrap;
    margin: 0;
}

#page_content .article-share__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0;
}

/* Share 按鈕通用樣式 — 60px circle */
#page_content .article-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 100px;
    background-color: #232323;
    border: none;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    color: #FFFFFF;
    transition: color 0.2s, background-color 0.2s;
    text-decoration: none;
}

#page_content .article-share-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: 0 0 20px;
}

#page_content .article-share-btn:hover {
    color: #009FF4;
    background-color: #232323;
}

#page_content .article-share-btn:active {
    background-color: #383838;
    color: #009FF4;
}

/* TOC 欄的 Share 按鈕（與主要相同尺寸） */
#page_content .article-share-btn--sm {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
}

/* ── Subscribe Section ───────────────────────────────────────── */
#page_content .article-subscribe {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#page_content .article-subscribe__title {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--black-white);
    margin: 0;
}

#page_content .article-subscribe__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

#page_content .article-subscribe__row {
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

#page_content .article-subscribe__row--name {
    flex-wrap: nowrap;
}

#page_content .article-subscribe__input {
    flex: 1;
    padding: 8px 8px 8px 16px;
    border: 2px solid #009FF4;
    border-radius: 5px;
    background: var(--black-70);
    color: var(--black-white);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    min-width: 0;
}

#page_content .article-subscribe__input::placeholder {
    color: var(--black-40);
}

#page_content .article-subscribe__input:focus {
    outline: 2px solid rgba(0, 159, 244, 0.8);
}

#page_content .article-subscribe__input--email {
    width: 100%;
    margin-right: -46px;
    background-image: linear-gradient(
        to left,
        #009FF4 0,
        #009FF4 40px,
        transparent 40px,
        transparent 100%
    );
}

#page_content .article-subscribe__submit {
    color: var(--black-white);
    height: 40px;
    vertical-align: middle;
    cursor: pointer;
}

#page_content #article-subscribe-message {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
}

#page_content #article-subscribe-message.error   { color: var(--color-red-for-dark); }
#page_content #article-subscribe-message.success { color: var(--color-green-for-dark); }
#page_content #article-subscribe-message.success::before { content: "✓"; margin-right: 4px; }

/* 地區自訂 select（同 list page 樣式） */
#page_content .article-sub-select-wrapper {
    position: relative;
    width: 100%;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

#page_content .article-sub-select-wrapper span {
    margin-left: 0;
}

#page_content .article-sub-select {
    position: relative;
    cursor: pointer;
    color: var(--black-white);
}

#page_content .article-sub-select .select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    border: 2px solid #009FF4;
    border-radius: 5px;
    min-height: 38px;
    background: var(--black-70);
}

#page_content .article-sub-select .select-options {
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    border-radius: 8px;
    padding: 8px;
    background: var(--black-70);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

#page_content .article-sub-select.active .select-options  { display: block; }
#page_content .article-sub-select.active .select-display  { outline: 2px solid rgba(0, 159, 244, 0.8); }
#page_content .article-sub-select.active .select-arrow    { transform: rotate(180deg); }

#page_content .article-sub-select .continent-group     { border-bottom: 1px solid var(--black-30); }
#page_content .article-sub-select .continent-header    { padding: 8px 12px; font-weight: bold; background: var(--black-70); display: flex; align-items: center; justify-content: space-between; border-radius: 8px; cursor: pointer; }
#page_content .article-sub-select .continent-header:hover { background: var(--black-90); }
#page_content .article-sub-select .country-list        { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
#page_content .article-sub-select .continent-group.expanded .country-list { max-height: 3000px; }
#page_content .article-sub-select .country-option      { padding: 8px 24px; border-radius: 8px; font-size: 13px; cursor: pointer; }
#page_content .article-sub-select .country-option:hover { background: var(--color-blue-for-light); }

/* ── 右欄：TOC ────────────────────────────────────────────────── */
#page_content .article-toc {
    flex: 0 0 288px;
    width: 288px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
    transition: transform 0.3s ease;
}

#page_content .article-toc::-webkit-scrollbar { display: none; }

/* TOC sticky 解除（抵達 S3 時） */
#page_content .article-toc.is-stopped {
    transform: translateY(calc(-100% - 80px));
}

#page_content .article-toc__header {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--black-50);
    margin: 0;
}

/* Fix: basic_v2025.css sets nav { position: fixed; top: 0 } — override here */
#page_content nav.article-toc__nav {
    position: static;
    width: auto;
    height: auto;
    min-height: auto;
    max-width: none;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    background: none;
}
#page_content nav.article-toc__nav::before { display: none; }

#page_content .article-toc__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* TOC item — text 靠左對齊 In this article，arrow 在右側 */
#page_content .article-toc__item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    text-decoration: none;
    color: var(--black-50);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    transition: color 0.15s;
    margin: 0;
}

#page_content .article-toc__item:hover {
    color: var(--black-white);
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

#page_content .article-toc__item.active {
    color: #009FF4;
    font-weight: var(--font-weight-bold);
}

#page_content .article-toc__item span, #page_content .article-toc__item svg {
    margin: 0;
    flex: 12;
}

#page_content .article-toc__item svg{ 
    align-self: flex-start;
    flex: 1;
    padding-top: 2px;
}

#page_content .article-toc__item-arrow {
    flex: 0 0 20px;
    opacity: 0.6;
    transition: opacity 0.15s;
    margin: 0;
}

#page_content .article-toc__item.active .article-toc__item-arrow {
    opacity: 1;
}

/* TOC Share */
#page_content .article-toc__share {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--black-70);
    margin-left: 0;
}

#page_content .article-toc__share-label {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--black-50);
    margin-left: 0;
}

#page_content .article-toc__share-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

/* ============================================================
   Section 3 — Related Posts
   ============================================================ */
#page_content .article-related {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px max(40px, calc((100% - 1440px) / 2)) 120px;
}

#page_content .article-related__header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
}

#page_content .article-related__title {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--black-white);
    margin: 0;
    padding-bottom: 4px;
}

/* See More — default 透明；hover 白色 pill；active 藍色 pill */
#page_content .article-related__see-more {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: #F2F2F2;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 100px;
    background-color: transparent;
    transition: background-color 0.2s, color 0.2s;
    margin: 0;
}

#page_content .article-related__see-more svg {
    flex: 0 0 20px;
}

#page_content .article-related__see-more svg path {
    fill: #F2F2F2;
}

#page_content .article-related__see-more:hover {
    color: var(--black-white);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

#page_content .article-related__see-more:hover svg path{
    fill: var(--black-white);
}

#page_content .article-related__see-more:active {
    color: #009FF4;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
#page_content .article-related__see-more:active svg path{
    fill: #009FF4;
}

/* Related Posts Grid：3欄 */
#page_content .article-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Related Card */
#page_content .article-related-card {
    display: flex;
    flex-direction: column;
    background-color: var(--black-90);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    min-width: 0;
    transition: box-shadow 0.35s ease;
}

#page_content .article-related-card:hover {
    box-shadow: 0px 3px 6px 0px rgba(255, 255, 255, 0.25);
}

#page_content .article-related-card:active {
    background-color: var(--black-80);
}

#page_content .article-related-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

#page_content .article-related-card__image-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#page_content .article-related-card:hover .article-related-card__image-bg {
    transform: scale(1.05);
}

#page_content .article-related-card__label {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: rgba(1, 146, 223, 0.85);
    color: var(--black-white);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    padding: 4px 12px;
    border-radius: 0;
}

#page_content .article-related-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 24px;
}

#page_content .article-related-card__date {
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    color: var(--black-40);
    margin: 0;
}

#page_content .article-related-card__title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    color: var(--black-20);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

#page_content .article-related-card:hover .article-related-card__title {
    color: var(--black-white);
}

/* ============================================================
   Responsive — Tablet（≤ 1180px）
   ============================================================ */
@media (max-width: 1180px) {
    /* S1 */
    #page_content .article-header {
        gap: 32px;
        padding: 48px max(24px, calc((100% - 1440px) / 2)) 0;
    }

    #page_content .article-header__title { font-size: 32px; }
    #page_content .article-header__label { font-size: 20px; }

    /* S2 */
    #page_content .article-body {
        gap: 24px;
        padding: 32px max(24px, calc((100% - 1440px) / 2)) 0;
    }

    /* TOC 欄縮窄 */
    #page_content .article-toc {
        flex: 0 0 241px;
        width: 241px;
    }

    /* S3 */
    #page_content .article-related {
        padding: 64px max(24px, calc((100% - 1440px) / 2)) 80px;
    }

    /* Related Posts：tablet 改為橫式清單 */
    #page_content .article-related__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #page_content .article-related-card {
        flex-direction: row;
        height: 171px;
        width: 100%;
    }

    #page_content .article-related-card__image {
        width: 285px;
        height: 171px;
        margin: 0;
    }

    #page_content .article-related-card__body {
        justify-content: center;
        margin: 0;
        flex: 1;
    }

    #page_content nav.article-toc__nav {
        background-color: transparent !important;
    }

    #page_content .article-share-btn--sm{
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }
}

/* ============================================================
   Responsive — Mobile（≤ 768px）
   ============================================================ */
@media (max-width: 768px) {
    /* S1 */
    #page_content .article-header {
        gap: 24px;
        padding: 32px 16px 0;
    }

    #page_content .article-header__title { font-size: 24px; }
    #page_content .article-header__label { font-size: 16px; }
    #page_content .article-header__date  { font-size: 18px; }

    /* Mobile TOC Trigger 顯示 */
    #page_content .article-toc-mobile {
        display: block;
        padding: 0 16px;
        margin-top: 32px;
    }

    /* S2：隱藏右側 TOC，改用 mobile trigger */
    #page_content .article-body {
        flex-direction: column;
        padding: 24px 16px 0;
        gap: 48px;
    }

    #page_content .article-toc {
        display: none;
    }

    #page_content .article-body__left {
        gap: 48px;
    }

    #page_content .article-block--paragraph p { font-size: 16px; }
    #page_content .article-block--heading      { font-size: 24px; }
    #page_content .article-block--figure__caption { font-size: 14px; }

    #page_content .article-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #page_content .article-share__label { 
        font-size: 18px;
        margin-left: 0;
    }

    #page_content .article-share__buttons {
        margin-left: 0;
    }

    #page_content .article-subscribe__title { font-size: 24px; }

    #page_content .article-subscribe__row--name {
        flex-wrap: wrap;
    }

    #page_content .article-subscribe__row--name .article-subscribe__input {
        flex: 0 0 100%;
    }

    /* S3 */
    #page_content .article-related {
        padding: 32px 16px 64px;
        gap: 24px;
    }

    #page_content .article-related__header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    #page_content .article-related__title    { font-size: 24px; }
    #page_content .article-related__see-more { font-size: 16px; padding: 6px 12px; background-color: transparent; }

    #page_content .article-related__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #page_content .article-related-card {
        flex-direction: column;
        height: auto;
    }

    #page_content .article-related-card__image {
        flex: none;
        width: 100%;
        aspect-ratio: 5 / 3;
        height: auto;
    }
}