/* posts-grid — 真值: dist/css/blocks/posts-grid/posts-grid.css + app-styles.css(e-post-*) (值原样) */

/* ------------------------------------------------------------------ *
 * c-posts-grid (区块骨架)
 * ------------------------------------------------------------------ */

.c-posts-grid {
    background-color: transparent !important;
    background-color: var(--block-color-background, transparent) !important;
}

.c-posts-grid .block_inner {
    display: flex;
    flex-direction: column;
    padding-top: max(60px, min(calc(60px + .06*(100vw - 440px)), 120px));
    padding-bottom: max(80px, min(calc(80px + .06*(100vw - 440px)), 140px));
}

.c-posts-grid .hgroup {
    display: flex;
    flex-direction: column;
    gap: 0 48px;
    margin-bottom: 60px;
    width: 100%;
}

@media (min-width: 1025px) {
    .c-posts-grid .hgroup {
        align-items: flex-end;
        flex-direction: row;
        justify-content: space-between;
    }
}

.c-posts-grid .hgroup .hgroup_heading {
    color: var(--block-color-heading, var(--base--text-color));
    font-size: max(3rem, min(calc(3rem + .042*(100vw - 27.5rem)), 5.625rem));
    letter-spacing: -.02em;
    line-height: 1em;
    text-wrap: balance;
}

.c-posts-grid .hgroup .hgroup_button {
    display: none;
}

@media (min-width: 1025px) {
    .c-posts-grid .hgroup .hgroup_button {
        display: inline-flex;
        justify-content: flex-end;
        text-align: right;
    }
}

.c-posts-grid .featured {
    margin-bottom: var(--gap);
    width: 100%;
}

@media (min-width: 1025px) {
    .c-posts-grid .featured {
        margin-bottom: 40px;
    }
}

.c-posts-grid .posts {
    display: grid;
    grid-gap: var(--gap);
    gap: var(--gap);
    grid-template-columns: 1fr;
    width: 100%;
}

@media (min-width: 1025px) {
    .c-posts-grid .posts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 递进底色: 卡2 deep-sea-green / 卡3 ink */
.c-posts-grid .posts .e-post-thumb:nth-child(2) {
    --post-background-color: var(--color--9);
    --post-text-color: #fff;
    --post-category-background-color: rgba(255, 255, 255, .1);
}

.c-posts-grid .posts .e-post-thumb:nth-child(2) .btn_el {
    --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
}

.c-posts-grid .posts .e-post-thumb:nth-child(3) {
    --post-background-color: var(--color--7);
    --post-text-color: #fff;
    --post-category-background-color: rgba(255, 255, 255, .1);
}

.c-posts-grid .posts .e-post-thumb:nth-child(3) .btn_el {
    --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * e-post-thumb (3 卡, 纯文字 + 右下角按钮异形衬底)
 * ------------------------------------------------------------------ */

.e-post-thumb {
    --post-background-color: #fff;
    --post-border-radius: 12px;
    --post-text-color: var(--base--text-color);
    --post-category-background-color: var(--color--6);
    --post-category-text-color: var(--post-text-color);
    --post-min-height: 240px;
    align-items: stretch;
    color: #222f30;
    color: var(--post-text-color);
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 240px;
    min-height: var(--post-min-height);
    opacity: 1;
    overflow: hidden;
    padding: 16px;
    position: relative;
    row-gap: 20px;
    width: 100%;
    height: auto;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
}

@media (min-width: 1025px) {
    .e-post-thumb {
        --post-border-radius: 20px;
        --post-min-height: 300px;
        padding: 26px 32px;
        row-gap: 24px;
    }
}

.e-post-thumb.swiper-slide {
    display: inline-flex !important;
    height: auto !important;
}

.e-post-thumb .item_meta {
    align-items: center;
    -moz-column-gap: 10px;
    column-gap: 10px;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 1;
}

.e-post-thumb .meta_type {
    --background-color: var(--post-category-background-color);
    --color: var(--post-category-text-color);
}

.e-post-thumb .meta_date {
    color: var(--post-text-color);
    font-family: Roboto Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-family: var(--family--2);
    font-size: max(.8125rem, min(calc(.8125rem + .002*(100vw - 27.5rem)), .9375rem));
    letter-spacing: -.02em;
    line-height: 1em;
    opacity: .5;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e-post-thumb .item_title {
    flex: 1 1 auto;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.3em;
    position: relative;
    text-transform: none;
    z-index: 1;
}

/* 下划线动画: 直接做在元素上, background-size 0%→100% 过渡 */
.e-post-thumb .title_el {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition-property: background-size;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
    transition-timing-function: var(--transition-ease--1);
}

.e-post-thumb .item_foot {
    align-items: flex-end;
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 1;
}

.e-post-thumb .foot_label {
    align-items: flex-end;
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    font-family: Roboto Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-family: var(--family--2);
    font-size: .8125rem;
    justify-content: flex-start;
    gap: 4px;
    letter-spacing: -.02em;
    line-height: 1em;
    padding-bottom: 4px;
    text-transform: uppercase;
}

@media (min-width: 1025px) {
    .e-post-thumb .foot_label {
        padding-bottom: 0;
    }
}

/* 切角背景: 右下 75×75 缺角为 item_btn 让位 */
.e-post-thumb .item_background {
    background-color: var(--post-background-color);
    border-radius: var(--post-border-radius) var(--post-border-radius) 0 var(--post-border-radius);
    clip-path: polygon(100% 0, 100% calc(100% - 75px), calc(100% - 75px) calc(100% - 75px), calc(100% - 75px) 100%, 0 100%, 0 0);
    margin: 0;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.e-post-thumb .item_btn,
.e-post-thumb .btn_el,
.e-post-thumb .btn_bg {
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.e-post-thumb .item_btn {
    width: 87px;
    height: 90px;
}

.e-post-thumb .btn_el {
    --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
    pointer-events: none;
    width: 51px;
    height: 48px;
}

.e-post-thumb .btn_bg {
    width: 100%;
    height: 100%;
}

.e-post-thumb .btn_bg path {
    fill: var(--post-background-color);
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-thumb:hover, .e-post-thumb:focus-visible) .title_el {
        background-size: 100% 1px;
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-thumb:hover, .e-post-thumb:focus-visible) .item_btn .btn_icon {
        transform: scale(var(--button-blob-scale));
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-thumb:hover, .e-post-thumb:focus-visible) .item_btn .btn_icon:before {
        background-position: var(--button-blob-icon-position-hover);
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-thumb:hover, .e-post-thumb:focus-visible) .item_btn .btn_icon svg path {
        fill: var(--post-background-color);
    }
}

/* ------------------------------------------------------------------ *
 * e-post-feature (featured 卡, 图文双列)
 * ------------------------------------------------------------------ */

.e-post-feature {
    --post-background-color: #fff;
    --post-border-radius: 12px;
    --post-text-color: var(--base--text-color);
    --post-category-background-color: var(--color--6);
    --post-category-text-color: var(--post-text-color);
    --post-min-height: 240px;
    --post-title-underline-size: 1px;
    align-items: stretch;
    color: #222f30;
    color: var(--post-text-color);
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 240px;
    min-height: var(--post-min-height);
    opacity: 1;
    overflow: hidden;
    padding: 16px;
    position: relative;
    row-gap: 20px;
    width: 100%;
    height: auto;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
}

@media (min-width: 1025px) {
    .e-post-feature {
        --post-border-radius: 20px;
        --post-min-height: 300px;
        --post-title-underline-size: 2px;
        display: grid;
        grid-gap: 48px;
        gap: 48px;
        grid-template-columns: repeat(2, 1fr);
        padding: 26px 32px;
        grid-row-gap: 24px;
        row-gap: 24px;
    }
}

.e-post-feature .item_image {
    aspect-ratio: 750 / 530;
    border-radius: var(--post-border-radius);
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (min-width: 1025px) {
    .e-post-feature .item_image {
        border-radius: 16px;
    }
}

@media (min-width: 1025px) and (max-width: 1100px) {
    .e-post-feature .item_image {
        aspect-ratio: unset;
    }
}

.e-post-feature .image_el {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
    transition-timing-function: var(--transition-ease--1);
    transform: scale(1);
}

.e-post-feature .item_content {
    align-items: stretch;
    color: var(--post-text-color);
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    z-index: 1;
}

.e-post-feature .content_inner {
    align-items: stretch;
    display: inline-flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
    min-height: var(--post-min-height);
    row-gap: max(20px, min(calc(20px + .04*(100vw - 440px)), 60px));
    width: 100%;
}

@media (min-width: 1025px) {
    .e-post-feature .content_inner {
        justify-content: flex-start;
        max-width: 494px;
        min-height: var(--post-min-height);
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

.e-post-feature .item_meta {
    align-items: center;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 1;
}

.e-post-feature .meta_type {
    --background-color: var(--post-category-background-color);
    --color: var(--post-category-text-color);
}

.e-post-feature .meta_date {
    color: var(--post-text-color);
    font-family: Roboto Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-family: var(--family--2);
    font-size: max(.8125rem, min(calc(.8125rem + .002*(100vw - 27.5rem)), .9375rem));
    letter-spacing: -.02em;
    line-height: 1em;
    opacity: .5;
    text-transform: uppercase;
}

.e-post-feature .item_hgroup {
    align-items: flex-start;
    flex: 1 1 auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    row-gap: 20px;
    z-index: 1;
}

.e-post-feature .hgroup_title {
    font-size: max(1.375rem, min(calc(1.375rem + .014*(100vw - 27.5rem)), 2.25rem));
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.3em;
}

/* 下划线动画: 直接做在元素上, background-size 0%→100% 过渡 (feature 线宽 2px≥1025) */
.e-post-feature .title_el {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--post-title-underline-size);
    -webkit-text-decoration: none;
    text-decoration: none;
    transition-property: background-size;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
    transition-timing-function: var(--transition-ease--1);
}

.e-post-feature .hgroup_excerpt {
    color: #222f30;
    color: var(--block-color-text, var(--base--text-color));
    font-size: max(.875rem, min(calc(.875rem + .005*(100vw - 27.5rem)), 1.1875rem));
    letter-spacing: -.02em;
    line-height: 1.3em;
    opacity: .8;
    text-wrap: pretty;
    width: 100%;
}

.e-post-feature .item_foot {
    align-items: flex-end;
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 1;
}

.e-post-feature .foot_label {
    align-items: flex-end;
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    font-family: Roboto Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-family: var(--family--2);
    font-size: .8125rem;
    justify-content: flex-start;
    gap: 4px;
    letter-spacing: -.02em;
    line-height: 1em;
    padding-bottom: 4px;
    text-transform: uppercase;
}

@media (min-width: 1025px) {
    .e-post-feature .foot_label {
        padding-bottom: 0;
    }
}

/* 切角背景: 移动 75px, ≥1025px 102/107px (为放大的 item_btn 让位) */
.e-post-feature .item_background {
    background-color: var(--post-background-color);
    border-radius: var(--post-border-radius) var(--post-border-radius) 0 var(--post-border-radius);
    clip-path: polygon(100% 0, 100% calc(100% - 75px), calc(100% - 75px) calc(100% - 75px), calc(100% - 75px) 100%, 0 100%, 0 0);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

@media (min-width: 1025px) {
    .e-post-feature .item_background {
        clip-path: polygon(100% 0, 100% calc(100% - 102px), calc(100% - 102px) calc(100% - 107px), calc(100% - 107px) 100%, 0 100%, 0 0);
    }
}

.e-post-feature .item_btn,
.e-post-feature .btn_el,
.e-post-feature .btn_bg {
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.e-post-feature .item_btn {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87' height='90' fill='none' viewBox='0 0 87 90'%3E%3Cpath fill='%23fff' d='M35.43 45.104 23.71 81.57A12.146 12.146 0 0 1 12.145 90C5.438 90 0 84.562 0 77.854V16C0 7.163 7.163 0 16 0h55c8.837 0 16 7.163 16 16v2c0 8.837-7.163 16-16 16H50.663a16 16 0 0 0-15.232 11.104Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 87px;
    height: 90px;
}

@media (min-width: 1025px) {
    .e-post-feature .item_btn {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='127' height='122' fill='none' viewBox='0 0 127 122'%3E%3Cpath fill='%23fff' d='m61.06 62.363-14.62 48.274A16 16 0 0 1 31.129 122H16c-8.837 0-16-7.163-16-16V16C0 7.163 7.163 0 16 0h95c8.837 0 16 7.163 16 16v19c0 8.837-7.163 16-16 16H76.372A16 16 0 0 0 61.06 62.363Z'/%3E%3C/svg%3E");
        width: 127px;
        height: 122px;
    }
}

.e-post-feature .btn_el {
    pointer-events: none;
    width: 51px;
    height: 48px;
}

@media (min-width: 1025px) {
    .e-post-feature .btn_el {
        --button-blob-icon-position: center left calc((100% + 30px)*-1) , center left calc(0% + 30px) ;
        --button-blob-icon-position-hover: center left calc(0% + 30px) , center left calc(100% + 30px) ;
        --button-blob-icon-size: 12px 12px;
        width: 65px;
        height: 61px;
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-feature:hover, .e-post-feature:focus-visible) .image_el {
        transform: scale(1.05);
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-feature:hover, .e-post-feature:focus-visible) .title_el {
        background-size: 100% var(--post-title-underline-size);
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-feature:hover, .e-post-feature:focus-visible) .item_btn .btn_icon {
        transform: scale(var(--button-blob-scale));
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-feature:hover, .e-post-feature:focus-visible) .item_btn .btn_icon:before {
        background-position: var(--button-blob-icon-position-hover);
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-post-feature:hover, .e-post-feature:focus-visible) .item_btn .btn_icon svg path {
        fill: #222f30;
        fill: var(--color--7);
    }
}