@charset "utf-8";
/* ===== 水質保護電子報列表 ===== */
#Content {
    padding-bottom: 0;
}

.BreadcrumbArea {
    margin-bottom: 0;
}

main {
    background-image: url(../../../../images/newsletter/letter_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.newsletter {
    background-image: url(../../../../images/newsletter/letter_bgTop.png), url(../../../../images/newsletter/letter_bgBottom.jpg);
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    min-height: 700px;
    padding: 60px 0 90px;
}

/* ---------- 標題區 ---------- */
.newsletter .wrapper {
    --title-icon: 70px;
    --title-indent: 90px;
    --title-offset: 7%;
    position: relative;
}

    .newsletter h3 {
        position: relative;
        display: table;
        max-width: 100%;
        box-sizing: border-box;
        color: #1b2f6b;
        font-size: 2.75rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: .06rem;
        background-image: url(../../../../images/newsletter/titledrop.png);
        background-position: left top 5px;
        background-repeat: no-repeat;
        background-size: var(--title-icon);
        padding-left: var(--title-indent);
        padding-top: 10px;
        padding-bottom: 20px;
        margin-left: var(--title-offset);
    }

        /* 標題下方分隔線（與 h3 同寬） */
        .newsletter h3::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: var(--title-indent);
            right: 0;
            height: 2px;
            background: linear-gradient(to right, #4958ea, #cbd0f2 30%, #c2cbf0 70%, rgba(194,203,240,0));
            pointer-events: none;
        }

        /* 分隔線中央水滴圖示 */
        .newsletter h3::after {
            content: "";
            position: absolute;
            bottom: -12px;
            left: calc(50% + (var(--title-indent) / 3));
            width: 26px;
            height: 26px;
            margin-left: -13px;
            background-color: #f2f3f7;
            background-image: url(../../../../images/newsletter/letter_titleIcon.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: auto 18px;
            pointer-events: none;
        }

.newsletter > .wrapper > p {
    display: table;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: var(--title-indent);
    margin: 20px 0 0 var(--title-offset);
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: .35em;
    color: #2b3f7d;
}

/* ---------- 卡片列表 ---------- */
.newsletter .letterlist {
    --cols: 3;
    --col-gap: 30px;
    --badge-bleed: 20px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 50px var(--col-gap);
    margin-top: 56px;
    /* 左側預留圓章向外溢出的寬度，避免被容器邊界裁切 */
    padding-left: var(--badge-bleed);
    padding-right: var(--badge-bleed);
}

    .newsletter .letterBox {
        --card-pad-t: 80px;
        --card-pad-x: 30px;
        --card-pad-b: 22px;
        --card-radius: 18px;
        position: relative;
        display: block;
        width: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
        box-sizing: border-box;
        padding: var(--card-pad-t) var(--card-pad-x) var(--card-pad-b);
        border-radius: var(--card-radius);
        box-shadow: 0 10px 26px rgba(38, 58, 120, .13), inset 0 1px 0 rgba(255,255,255,.9);
        text-decoration: none;
        color: #1b2f6b;
        transition: transform .3s ease, box-shadow .3s ease;
        background-color: #fff;
        background-image: url(../../../../images/newsletter/letter_cardbg.png);
        background-position: top 10px center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* 卡片右上水滴 */
        .newsletter .letterBox::after {
            content: "";
            position: absolute;
            top: 12px;
            right: 16px;
            width: 20px;
            height: 20px;
            background-image: url(../../../../images/newsletter/letter_cardIcon.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: auto 16px;
            pointer-events: none;
        }

/* ---------- 日期圓章 ---------- */
.newsletter .date {
    --date-badge-size: 100px;
    --date-badge-ink: #526fc5;
    --date-badge-line: #c7d5fb;
    position: absolute;
    z-index: 2;
    top: -30px;
    left: -20px;
    display: block;
    box-sizing: border-box;
    width: var(--date-badge-size);
    height: var(--date-badge-size);
    border: 1px solid var(--date-badge-line);
    border-radius: 50%;
    color: var(--date-badge-ink);
    background: radial-gradient( circle at 45% 40%, rgba(255, 255, 255, 0.98) 0 50%, rgba(241, 245, 255, 0.82) 76%, rgba(255, 255, 255, 0.98) 100% );
    box-shadow: inset calc(var(--date-badge-size) * 0.03) calc(var(--date-badge-size) * 0.025) calc(var(--date-badge-size) * 0.09) rgba(154, 190, 245, 0.22), 0 calc(var(--date-badge-size) * 0.025) calc(var(--date-badge-size) * 0.045) rgba(88, 113, 174, 0.08), calc(var(--date-badge-size) * 0.055) calc(var(--date-badge-size) * 0.075) calc(var(--date-badge-size) * 0.11) calc(var(--date-badge-size) * 0.008) rgba(167, 202, 255, 0.3);
    line-height: 1;
}

    /* 中央斜線：尾端逐漸淡出 */
    .newsletter .date::after {
        content: "";
        position: absolute;
        top: 19%;
        left: 67%;
        width: 1px;
        height: 38%;
        background: linear-gradient( to bottom, rgba(169, 191, 255, 0.96) 0%, rgba(169, 191, 255, 0.72) 58%, rgba(169, 191, 255, 0.18) 88%, rgba(169, 191, 255, 0) 100% );
        transform: rotate(39deg);
        transform-origin: top center;
        pointer-events: none;
    }

    .newsletter .date .year,
    .newsletter .date .month,
    .newsletter .date .day {
        color: #3f59d9;
        position: absolute;
        display: block;
        line-height: 1;
        font-weight: 400;
        font-variant-numeric: lining-nums tabular-nums;
    }

    .newsletter .date .year {
        top: 19%;
        left: 21%;
        font-size: calc(var(--date-badge-size) * 0.145);
        letter-spacing: 0.015em;
    }

    .newsletter .date .month {
        top: 42%;
        left: 17%;
        padding-top: calc(var(--date-badge-size) * 0.025);
        padding-bottom: calc(var(--date-badge-size) * 0.025);
        border-top: 1px solid rgba(82, 111, 197, 0.42);
        border-bottom: 1px solid rgba(82, 111, 197, 0.42);
        font-size: calc(var(--date-badge-size) * 0.175);
    }

    .newsletter .date .day {
        right: 18%;
        bottom: 20%;
        font-size: calc(var(--date-badge-size) * 0.355);
        letter-spacing: -0.045em;
        font-weight: 700;
    }

/* ---------- 卡片內容 ---------- */
.newsletter .letterinfo {
    position: relative;
}

    /* 邊框流光：沿卡片邊緣由左上流向右下 */
    .newsletter .letterinfo::before {
        content: "";
        position: absolute;
        top: calc(var(--card-pad-t) * -1);
        left: calc(var(--card-pad-x) * -1);
        right: calc(var(--card-pad-x) * -1);
        bottom: calc(var(--card-pad-b) * -1);
        border: 2px solid transparent;
        border-radius: var(--card-radius);
        background-image: linear-gradient( 135deg, rgba(199, 213, 251, 0) 0%, rgba(199, 213, 251, 0) 14%, rgba(199, 213, 251, .75) 26%, rgba(82, 111, 197, .95) 38%, rgba(63, 89, 217, 1) 48%, rgba(82, 111, 197, .95) 58%, rgba(199, 213, 251, .75) 70%, rgba(199, 213, 251, 0) 82%, rgba(199, 213, 251, 0) 100% );
        background-repeat: no-repeat;
        background-size: 260% 260%;
        background-position: 100% 100%;
        background-origin: border-box;
        background-clip: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        pointer-events: none;
        transition: opacity .6s ease-out, background-position .85s cubic-bezier(.22, .61, .36, 1);
    }

    .newsletter .letterinfo > p {
        margin: 0 0 14px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(120, 145, 210, .4);
        font-size: 21px;
        font-weight: bold;
        line-height: 1.5;
        color: #101c46;
    }

.newsletter .letterlink {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 15px;
    color: #2b3f7d;
}

    .newsletter .letterlink span {
        color: #34488d;
    }

    .newsletter .letterlink i {
        font-size: 20px;
        color: #3a4f96;
        transition: transform .3s ease;
    }

/* ---------- 互動 / 焦點 ---------- */
.newsletter .letterBox:hover,
.newsletter .letterBox:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(38, 58, 120, .22);
}

.newsletter .letterBox:focus-visible {
    outline: 3px solid #2e2ee1;
    outline-offset: 3px;
    text-decoration: underline;
}

    .newsletter .letterBox:hover .letterlink i,
    .newsletter .letterBox:focus-visible .letterlink i {
        transform: translateX(4px);
    }

    .newsletter .letterBox:hover .letterlink,
    .newsletter .letterBox:focus-visible .letterlink {
        color: #16255a;
    }

/* 邊框流光：左上流向右下 */
.newsletter .letterBox:hover .letterinfo::before,
.newsletter .letterBox:focus-visible .letterinfo::before {
    opacity: 1;
    background-position: 0 0;
}

/* ---------- RWD ---------- */
/* 小筆電 / 大平板：維持三欄，縮小間距與內距 */
@media screen and (max-width: 1280px) {
    .newsletter {
        padding: 50px 0 70px;
    }

    .newsletter .wrapper {
        --title-icon: 60px;
        --title-indent: 76px;
        --title-offset: 4%;
    }

    .newsletter h3 {
        font-size: 2.375rem;
    }

    .newsletter > .wrapper > p {
        font-size: 17px;
        letter-spacing: .3em;
    }

    .newsletter .letterlist {
        --col-gap: 24px;
        gap: 46px var(--col-gap);
        margin-top: 48px;
    }

    .newsletter .letterBox {
        --card-pad-t: 74px;
        --card-pad-x: 24px;
        --card-pad-b: 20px;
    }

        .newsletter .letterinfo > p {
            font-size: 20px;
        }
}

/* 平板：改為兩欄 */
@media screen and (max-width: 1024px) {
    .newsletter .wrapper {
        --title-icon: 52px;
        --title-indent: 66px;
        --title-offset: 0;
    }

    .newsletter h3 {
        font-size: 2rem;
    }

    .newsletter > .wrapper > p {
        font-size: 16px;
        letter-spacing: .26em;
    }

    .newsletter .letterlist {
        --cols: 2;
        --col-gap: 22px;
    }

    .newsletter .date {
        --date-badge-size: 92px;
        top: -26px;
        left: -16px;
    }

    .newsletter .letterBox {
        --card-pad-t: 68px;
        --card-pad-x: 22px;
        --card-pad-b: 20px;
    }

        .newsletter .letterinfo > p {
            font-size: 19px;
        }
}

/* 小平板 / 大手機：單欄 */
@media screen and (max-width: 767px) {
    .newsletter {
        padding: 40px 0 60px;
    }

    .newsletter .wrapper {
        --title-icon: 44px;
        --title-indent: 56px;
        --title-offset: 0;
    }

    .newsletter h3 {
        padding-bottom: 18px;
        font-size: 1.625rem;
    }

        .newsletter h3::after {
            width: 22px;
            height: 22px;
            margin-left: -11px;
            bottom: -10px;
            background-size: auto 15px;
        }

    .newsletter > .wrapper > p {
        margin-top: 18px;
        font-size: 15px;
        letter-spacing: .18em;
    }

    .newsletter .letterlist {
        --cols: 1;
        --badge-bleed: 16px;
        gap: 34px 0;
        margin-top: 40px;
    }

    .newsletter .date {
        --date-badge-size: 86px;
        top: -24px;
        left: -14px;
    }

    .newsletter .letterBox {
        --card-pad-t: 62px;
        --card-pad-x: 20px;
        --card-pad-b: 18px;
    }

        .newsletter .letterinfo > p {
            font-size: 18px;
        }
}

/* 小尺寸手機：圓章不再向左溢出，避免裁切與橫向捲軸 */
@media screen and (max-width: 480px) {
    .newsletter .wrapper {
        --title-icon: 34px;
        --title-indent: 44px;
    }

    .newsletter h3 {
        font-size: 1.375rem;
        letter-spacing: .02em;
        padding-top: 4px;
        padding-bottom: 16px;
    }

        .newsletter h3::after {
            width: 20px;
            height: 20px;
            margin-left: -10px;
            bottom: -9px;
            background-size: auto 13px;
        }

    .newsletter > .wrapper > p {
        font-size: 14px;
        letter-spacing: .08em;
    }

    .newsletter .letterlist {
        --badge-bleed: 6px;
    }

    .newsletter .date {
        --date-badge-size: 78px;
        top: -20px;
        left: -6px;
    }

    .newsletter .letterBox {
        --card-pad-t: 56px;
        --card-pad-x: 16px;
        --card-pad-b: 16px;
    }

        .newsletter .letterinfo > p {
            font-size: 17px;
        }

    .newsletter .letterBox::after {
        right: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .newsletter .letterBox,
    .newsletter .letterinfo::before,
    .newsletter .letterlink i {
        transition: none;
    }

        .newsletter .letterBox:hover,
        .newsletter .letterBox:focus-visible {
            transform: none;
        }

            .newsletter .letterBox:hover .letterlink i,
            .newsletter .letterBox:focus-visible .letterlink i {
                transform: none;
            }

    /* 停用流動，僅保留靜態的邊緣光暈提示 */
    .newsletter .letterBox:hover .letterinfo::before,
    .newsletter .letterBox:focus-visible .letterinfo::before {
        opacity: 1;
        background-image: none;
        border-color: rgba(63, 89, 217, .9);
    }
}