.Post--item {
    min-width:370px;
    max-width:470px;
    min-height:100%;
    display:flex;
    flex:1;
    flex-direction:column;
    overflow:hidden;
    border:var(--border);
    border-radius:var(--largeradius);
    background:var(--surface-color);
    box-shadow:var(--box-shadow-defult);
    cursor:pointer;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.-Po-Thumb {
    position:relative;
    height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:var(--largeradius) var(--largeradius) 0 0;
    background:var(--media-placeholder);
}

.-Po-Thumb img {
    max-width:100%;
    display:block;
    object-position:center;
    transition:transform .45s ease;
}

.-Po-Info {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px 26px;
}

.post-card-meta {
    width:100%;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 14px;
    margin-bottom:14px;
}

.post-meta-item {
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.city-initem {
    position:relative;
}

.city-initem::after {
    content:"";
    flex:0 0 1px;
    width:1px;
    height:14px;
    display:block;
    margin-inline-start:6px;
    background:var(--diver);
}

.post-meta-icon {
    width:18px;
    height:18px;
    display:inline-flex;
    flex:0 0 18px;
    align-items:center;
    justify-content:center;
    color:var(--secondarytext);
    font-size:14px;
}

.post-meta-value {
    min-width:0;
    color:var(--primary-text);
    font-size:14px;
    line-height:1.5;
    font-weight:600;
    text-decoration:none;
    overflow-wrap:anywhere;
}

.city-initem .post-meta-icon,
.city-initem .post-meta-value {
    color:var(--uicolor);
}

.post-date .post-meta-value {
    color:var(--secondarytext);
}

.sile-otm-con {
    width:100%;
    min-width:0;
    margin-bottom:9px;
}

.posts_title {
    margin:0;
    font-size:24px;
    line-height:1.6;
    overflow-wrap:anywhere;
}

.posts_title a {
    color:var(--primary-text);
    text-decoration:none;
    transition:color .3s ease;
}

.post-excerpt {
    width:100%;
    min-width:0;
    margin-bottom:16px;
    color:var(--secondarytext);
    font-size:16px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.posts_tit {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    color:var(--uicolor);
    font-size:16px;
    line-height:1.5;
    font-weight:600;
    text-decoration:none;
    transition:color .3s ease;
}

.posts_tit i {
    flex:0 0 auto;
    transition:transform .3s ease;
}

html[dir="ltr"] .posts_tit i {
    transform:scaleX(-1);
}

.Post--item a:focus-visible {
    outline:2px solid var(--uicolor);
    outline-offset:4px;
    border-radius:5px;
}

@media (hover:hover) and (pointer:fine) {
    .Post--item:hover {
        transform:translateY(-8px);
        border-color:var(--border-hover);
        box-shadow:var(--box-shadow-hover);
    }

    .Post--item:hover .-Po-Thumb img {
        transform:scale(1.05);
    }

    .Post--item:hover .posts_title a {
        color:var(--uicolor);
    }

    .Post--item:hover .posts_tit i {
        transform:translateX(-4px);
    }

    html[dir="ltr"] .Post--item:hover .posts_tit i {
        transform:translateX(4px) scaleX(-1);
    }
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:991px) {
    .Post--item {
        min-width:0;
        max-width:100%;
    }

    .-Po-Thumb img {
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .posts_title {
        font-size:22px;
    }

    .post-excerpt {
        font-size:15px;
        line-height:1.7;
    }
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
    .Post--item {
        width:100%;
        min-height:0;
        border-radius:22px;
        box-shadow:0 12px 28px color-mix(in srgb,var(--uicolor4) 7%,transparent);
    }

    .Post--item:not(.blog-box-card) {
        display:flex;
        flex-direction:row;
        align-items:stretch;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb {
        width:clamp(122px,32vw,150px);
        flex:0 0 clamp(122px,32vw,150px);
        height:auto;
        min-height:100%;
        border-start-start-radius:22px;
        border-end-start-radius:22px;
        border-start-end-radius:0;
        border-end-end-radius:0;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb img {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .Post--item:active {
        transform:scale(.99);
    }

    .-Po-Info {
        padding:18px;
    }

    .post-card-meta {
        gap:7px 9px;
        margin-bottom:10px;
    }

    .post-meta-item {
        gap:5px;
    }

    .city-initem::after {
        height:12px;
        margin-inline-start:2px;
    }

    .post-meta-icon {
        width:15px;
        height:15px;
        flex-basis:15px;
        font-size:12px;
    }

    .post-meta-value {
        font-size:12px;
        line-height:1.45;
    }

    .sile-otm-con {
        margin-bottom:6px;
    }

    .posts_title {
        font-size:18px;
        line-height:1.5;
    }

    .post-excerpt {
        margin-bottom:12px;
        font-size:13px;
        line-height:1.7;
    }

    .posts_tit {
        gap:6px;
        font-size:13px;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
    .Post--item:not(.blog-box-card) {
        display:flex;
        flex-direction:column;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb {
        width:100%;
        height:clamp(178px,54vw,205px);
        min-height:0;
        flex:0 0 auto;
        border-start-start-radius:22px;
        border-start-end-radius:22px;
        border-end-start-radius:0;
        border-end-end-radius:0;
    }

    .-Po-Info {
        padding:18px 17px 19px;
    }

    .posts_title {
        font-size:19px;
    }

    .post-excerpt {
        font-size:13.5px;
    }
}

@media only screen and (max-width:340px) {
    .Post--item {
        border-radius:19px;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb {
        height:172px;
        border-start-start-radius:19px;
        border-start-end-radius:19px;
    }

    .-Po-Info {
        padding:16px;
    }

    .post-card-meta {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .city-initem::after {
        display:none;
    }

    .posts_title {
        font-size:18px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .Post--item,
    .-Po-Thumb img,
    .posts_title a,
    .posts_tit,
    .posts_tit i,
    .blog-card-action i {
        transition:none;
    }
}

/* Editorial cards used by the articles slider. */
.articles-slider-track {
    display:flex;
    align-items:stretch;
    gap:18px;
    padding:8px 4px 22px;
    flex-direction: column;
}

.articles-slider-track::-webkit-scrollbar {
    display:none;
}

.articles-slider-track > .blog-box-card,
.articles-slider-track :where(.-inner-widbl-posts) > .blog-box-card {
    min-width:300px;
    max-width:360px;
    flex:0 0 330px;
    scroll-snap-align:start;
}

.articles-slider-track > .blog-box-card.is-featured,
.articles-slider-track :where(.-inner-widbl-posts) > .blog-box-card.is-featured {
    min-width:390px;
    flex-basis:390px;
}

.blog-box-card {
    min-height:440px;
    border:1px solid var(--diver);
    border-radius:var(--largeradius);
    background:var(--surface-color);
    box-shadow:var(--box-shadow-defult);
}

.blog-box-card .-Po-Thumb {
    height:220px;
    flex:none;
    border-radius:var(--largeradius) var(--largeradius) 0 0;
    background:linear-gradient(135deg,color-mix(in srgb,var(--uicolor) 12%,transparent),color-mix(in srgb,var(--uicolor2) 12%,transparent));
}

.blog-box-card.is-featured .-Po-Thumb {
    height:260px;
}

.blog-box-card .-Po-Thumb img,
.blog-box-card .blog-card-placeholder {
    width:100%;
    height:100%;
    object-fit:cover;
}

.blog-box-card .blog-card-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--uicolor);
    font-size:42px;
}

.blog-card-image-meta {
    position:absolute;
    inset-inline:14px;
    bottom:14px;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    min-width:0;
}

.blog-card-image-meta span,
.blog-card-image-meta time {
    max-width:100%;
    min-width:0;
    display:inline-flex;
    align-items:center;
    padding:6px 9px;
    border:1px solid color-mix(in srgb,var(--on-color) 22%,transparent);
    border-radius:999px;
    color:var(--on-color);
    background:color-mix(in srgb,var(--primary-text) 72%,transparent);
    font-size:13px;
    font-weight:800;
    line-height:1.35;
    overflow-wrap:anywhere;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.blog-card-image-meta time {
    font-family:var(--f-number);
    font-size: 13px;
}

.blog-box-card .-Po-Info {
    padding:22px 22px 20px;
}

.blog-box-card .post-card-meta {
    display:none;
}

.blog-box-card .sile-otm-con {
    margin:0;
}

.blog-box-card .posts_title {
    font-size:22px;
    line-height:1.45;
}

.blog-box-card .posts_title a {
    display:block;
    overflow-wrap:anywhere;
}

.blog-box-card:not(.is-featured) .post-excerpt {
    display:block;
    margin-block:11px 18px;
    color:var(--secondarytext);
    font-size:13px;
    line-height:1.8;
    overflow-wrap:anywhere;
}

.blog-box-card .blog-card-action {
    width:100%;
    justify-content:space-between;
    margin-block-start:auto;
    padding-block-start:15px;
    border-top:1px solid var(--diver);
    color:var(--uicolor2);
    font-size:12px;
    font-weight:900;
}

.blog-box-card .blog-card-action i {
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--on-color);
    background:var(--uicolor2);
}

@media (hover:hover) and (pointer:fine) {
    .blog-box-card:hover .blog-card-action i {
        transform:translateX(-3px);
    }

    html[dir="ltr"] .blog-box-card:hover .blog-card-action i {
        transform:translateX(3px) scaleX(-1);
    }
}

@media only screen and (max-width:767px) {
    .articles-slider-track {
        gap:12px;
        margin-inline:calc(var(--container-padding--value) * -1);
        padding-inline:var(--container-padding--value);
    }

    .articles-slider-track > .blog-box-card,
    .articles-slider-track > .blog-box-card.is-featured,
    .articles-slider-track :where(.-inner-widbl-posts) > .blog-box-card,
    .articles-slider-track :where(.-inner-widbl-posts) > .blog-box-card.is-featured {
        min-width:min(
            290px,
            calc(
                100vw -
                var(--container-padding--value) -
                var(--container-padding--value) -
                12px
            )
        );
        max-width:310px;
        flex-basis:min(
            290px,
            calc(
                100vw -
                var(--container-padding--value) -
                var(--container-padding--value) -
                12px
            )
        );
    }

    .blog-box-card,
    .blog-box-card.is-featured {
        min-height:410px;
    }

    .blog-box-card .-Po-Thumb,
    .blog-box-card.is-featured .-Po-Thumb {
        height:190px;
    }

    .blog-box-card .-Po-Info {
        padding:18px;
    }

    .blog-box-card .posts_title {
        font-size:19px;
    }

    .blog-card-image-meta {
        inset-inline:11px;
        bottom:11px;
        gap:6px;
    }

    .blog-card-image-meta span,
    .blog-card-image-meta time {
        padding:5px 8px;
        font-size:11px;
    }

    .blog-box-card:active {
        transform:scale(.985);
    }
}