/* =========================================
   探書櫃檯首頁
   基準：舊版 discover.html / style.css
========================================= */


/* =========================================
   整體頁面
========================================= */

.discover-page {
    background-color: var(--bg-lightbrown);
    color: var(--text-darkbrown);

    padding-bottom: 60px;
}


/* =========================================
   季刊選擇列
========================================= */

.season-nav {
    padding-top: 14px;
    padding-bottom: 14px;
}


.season-nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    color: var(--text-darkbrown);

    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.08em;

    white-space: nowrap;
}


.season-nav-title {
    color: var(--title-darkbrown);

    font-weight: 500;
}


.season-separator {
    margin: 0 8px;

    color: rgba(70, 63, 55, 0.42);
}


.season-option {
    appearance: none;

    margin: 0;
    padding: 4px 3px 6px;

    background-color: transparent;

    border: none;
    border-bottom: 1px solid transparent;

    color: var(--text-darkbrown);

    font: inherit;
    letter-spacing: inherit;

    cursor: pointer;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.season-option:hover {
    color: var(--selected-darkgreen);
}


.season-option.is-active {
    color: var(--selected-darkgreen);

    border-bottom-color:
        var(--selected-darkgreen);
}


/* =========================================
   報紙刊頭
========================================= */

.newspaper-issue-header {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding:
        7px
        clamp(14px, 2vw, 20px);

    background-color:
        var(--bg-darkbrown);
}


.issue-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px 1.5em;

    margin: 0;

    color: var(--text-lightbrown);

    font-size: 0.74rem;
    line-height: 1.5;
    letter-spacing: 0.08em;

    font-weight: 400;
}


.issue-topic {
    margin-left: 4px;

    font-size:
        clamp(0.9rem, 1.3vw, 1.08rem);

    line-height: 1.4;
    letter-spacing: 0.08em;

    font-weight: 500;
}


/* =========================================
   報紙本體
========================================= */

.newspaper-page {
    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================
   報紙 Grid
========================================= */

.newspaper-grid {
    display: grid;

    grid-template-columns:
        1.45fr
        0.85fr;

    grid-template-areas:
        "main side-a"
        "main side-b"
        "wide wide";

    gap: 0;

    border-top:
        1px solid rgba(58, 51, 43, 0.42);

    border-left:
        1px solid rgba(58, 51, 43, 0.42);
}


/* =========================================
   報導共通卡片
========================================= */

.report-card {
    min-width: 0;

    background-color:
        rgba(250, 248, 243, 0.72);

    border-right:
        1px solid rgba(58, 51, 43, 0.42);

    border-bottom:
        1px solid rgba(58, 51, 43, 0.42);

    color: var(--text-darkbrown);
}


.report-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    padding:
        clamp(18px, 3vw, 30px);

    color: inherit;
}


/* =========================================
   四個 Grid 區域
========================================= */

.report-card-main {
    grid-area: main;
}


.report-card-side-a {
    grid-area: side-a;
}


.report-card-side-b {
    grid-area: side-b;
}


.report-card-wide {
    grid-area: wide;
}


/* =========================================
   深棕報導
========================================= */

.report-card-dark {
    background-color:
        var(--bg-darkbrown);

    color:
        var(--text-lightbrown);
}


.report-card-dark .report-kicker,
.report-card-dark .report-tags span {
    color:
        var(--text-lightbrown);
}


/* =========================================
   報導分類
========================================= */

.report-kicker {
    margin: 0 0 14px;

    color:
        var(--selected-darkgreen);

    font-size: 0.75rem;
    letter-spacing: 0.2em;
}


/* =========================================
   今日頭條圖片
========================================= */

.report-image {
    margin-bottom: 22px;

    overflow: hidden;

    border:
        1px solid rgba(58, 51, 43, 0.28);
}


.report-image img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    filter:
        grayscale(0.12)
        contrast(1.04);
}


/* =========================================
   文字
========================================= */

.report-text {
    display: flex;
    flex-direction: column;
}


.report-card h2 {
    margin: 0;

    color: inherit;

    font-size:
        clamp(1.2rem, 2.4vw, 2rem);

    line-height: 1.45;
    letter-spacing: 0.04em;

    font-weight: 700;
}


.report-card-side h2 {
    font-size:
        clamp(1.1rem, 1.8vw, 1.45rem);
}


.report-card-wide h2 {
    font-size:
        clamp(1.3rem, 2.6vw, 2.1rem);
}


.report-card p {
    margin: 14px 0 0;

    font-size: 0.95rem;
    line-height: 1.9;
    letter-spacing: 0.03em;
}


/* =========================================
   標籤
========================================= */

.report-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}


.report-tags span {
    color:
        var(--selected-darkgreen);

    font-size: 0.78rem;
    letter-spacing: 0.08em;
}


.report-tags span::before {
    content: "#";
}


/* =========================================
   850px 以下
========================================= */

@media (max-width: 850px) {

    /*
       舊版在這裡直接取消報紙雙欄，
       四篇文章改成上下排列。
    */

    .newspaper-grid {
        display: block;

        border-left:
            1px solid rgba(58, 51, 43, 0.42);
    }


    .report-link {
        padding: 22px 18px;
    }


    .report-card h2,
    .report-card-side h2,
    .report-card-wide h2 {
        font-size:
            clamp(1.25rem, 6vw, 1.65rem);

        line-height: 1.5;
    }


    .report-card p {
        font-size: 0.92rem;

        line-height: 1.85;
    }


    .report-image img {
        aspect-ratio: 16 / 10;
    }


    /* 季刊選擇列 */

    .season-nav {
        padding-top: 10px;
        padding-bottom: 10px;
    }


    .season-nav-inner {
        min-height: 30px;

        font-size: 0.82rem;
        letter-spacing: 0.04em;
    }


    .season-separator {
        margin: 0 5px;
    }


    .season-option {
        padding-left: 2px;
        padding-right: 2px;
    }


    /* 報紙刊頭 */

    .newspaper-issue-header {
        min-height: 44px;

        padding: 7px 12px;
    }


    .issue-meta {
        gap: 2px 0.9em;

        font-size: 0.68rem;
        letter-spacing: 0.05em;
    }


    .issue-topic {
        font-size: 0.88rem;
    }

}


/* =========================================
   桌機 Hover
========================================= */

@media (hover: hover) and (pointer: fine) {

    .report-card {
        transition:
            background-color 0.35s ease,
            color 0.35s ease;
    }


    .report-card img {
        transition:
            filter 0.35s ease,
            transform 0.35s ease;
    }


    .report-card:hover {
        background-color:
            rgba(250, 248, 243, 0.95);
    }


    .report-card-dark:hover {
        background-color:
            #46382F;
    }


    .report-card:hover img {
        filter:
            grayscale(0)
            contrast(1.08)
            brightness(1.03);

        transform:
            scale(1.015);
    }


    .report-card:hover h2 {
        color:
            var(--selected-darkgreen);
    }


    .report-card-dark:hover h2 {
        color:
            var(--text-lightbrown);
    }

}