/* ===================================================================
   شکل‌های پس‌زمینه (bg_svg) — همان الگوی صفحه آرشیو
   =================================================================== */

.post-featured .pfg-row-1{
    position: relative;
    padding-left: var(--pfg-gap);
}
.post-featured .bg_svg .shape-unit {
    filter: url(#smooth-join2);
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    min-height: 600px;
    z-index: -1;
    height: 100%;
    transform: translateY(-36px);
}
.post-featured .bg_svg .rect {
    position: absolute;
    background: var(--gray_color);
}
.post-featured .bg_svg .rect1 {
    width: 65%;
    max-width: 85%;
    height: 475px;
    right: 0;
    top: 16px;
    border-radius: 0;
}
.post-featured .bg_svg .rect2 {
    width: 100%;
    height: calc(100% - 475px);
    border-radius: 0;
    right: 0;
    top: 470px;
}
.post-featured-grid .pfg-row-2{
    padding: var(--pfg-gap);
    background: var(--gray_color);
    border-radius: 24px;
}

/* ===================================================================
   گرید ترکیبی مقالات (۶ کارت)
   =================================================================== */

.post-featured-grid {
    --pfg-gap: 16px;
    --pfg-row1-left-width: 53%;
    --pfg-row1-height: 420px;

    display: flex;
    flex-direction: column;
    gap: var(--pfg-gap);

    padding: 16px 0;
    overflow: hidden;
    border-radius: 32px;
}

/* ---------- ردیف اول: ستون چپ (۲ کارت روی هم) + کارت بزرگ ---------- */
.post-featured-grid .pfg-row-1 {
    display: flex;
    gap: var(--pfg-gap);
    height: var(--pfg-row1-height);
}

.post-featured-grid .pfg-col-stack {
    width: var(--pfg-row1-left-width);
    display: flex;
    flex-direction: column;
    gap: var(--pfg-gap);
}

.post-featured-grid .pfg-col-stack .pfg-slot {
    flex: 1 1 0;
    min-height: 0; /* برای جلوگیری از سرریز داخل flex */
}

.post-featured-grid .pfg-col-feature {
    flex: 1 1 0;
    min-width: 0;
}

.post-featured-grid .pfg-col-feature .pfg-slot {
    height: 100%;
}

/* ---------- ردیف دوم: ۳ کارت مساوی ---------- */
.post-featured-grid .pfg-row-2 {
    display: flex;
    gap: var(--pfg-gap);
}

.post-featured-grid .pfg-row-2 .pfg-slot {
    flex: 1 1 0;
    min-width: 0;
}

/* ===================================================================
   مارک‌آپ واقعی WS_Post_Card_Renderer (بر اساس orientation):

   حالت vertical:
     .main-post-box-wrapper.vertical
       .main-post-box     (عکس + عنوان + خلاصه با هم)
         a.post-img > img
         h3.post-name
         .summary
       .info              (تاریخ + دکمه)

   حالت horizontal:
     .main-post-box-wrapper.horizontal
       a.post-img > img            (فرزند اول -> در RTL سمت راست)
       .post-content-col           (فرزند دوم -> در RTL سمت چپ)
         .main-post-box
           h3.post-name
           .summary
         .info
   =================================================================== */

.post-featured-grid .pfg-slot,
.post-featured-grid .pfg-slot .main-post-box-wrapper {
    height: 100%;
}

/* پایه مشترک هر دو جهت */
.post-featured-grid .pfg-slot .main-post-box-wrapper {
    display: flex;
}
.post-featured-grid .pfg-row-2 .pfg-slot .main-post-box-wrapper{
    flex-direction: column;
    z-index: 1;
}
/* ---------- حالت عمودی (ردیف دوم و کارت بزرگ ردیف اول) ---------- */
.post-featured-grid .main-post-box-wrapper.vertical {
    flex-direction: column;
}

.post-featured-grid .main-post-box-wrapper.vertical .post-img {
    display: block;
    width: 100%;
}

.post-featured-grid .main-post-box-wrapper.vertical .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* کارت بزرگ (اسلات ۳): عکس کل فضای باقی‌مانده رو پر کنه */
.post-featured-grid .pfg-slot-3 .main-post-box-wrapper.vertical .main-post-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.post-featured-grid .pfg-slot-3 .main-post-box-wrapper.vertical .post-img {
    flex: 1;
    min-height: 0;
}

/* ---------- حالت افقی (۲ کارت کوچک ردیف اول): عکس و متن کنار هم ---------- */
.post-featured-grid .pfg-row-1 .main-post-box-wrapper{
    background: var(--white_color);
    padding: 8px;
    border: 1px solid var(--black-10);
}
.post-featured-grid .pfg-row-1 .main-post-box-wrapper
.post-featured-grid .main-post-box-wrapper.horizontal {
    flex-direction: row; /* سایت RTL: فرزند اول (تصویر) سمت راست می‌شینه */
    align-items: stretch;
    overflow: hidden;
}

.post-featured-grid .main-post-box-wrapper.horizontal .post-img {
    flex: 0 0 53%;
    display: block;
    height: 100%;
}

.post-featured-grid .main-post-box-wrapper.horizontal .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.post-featured-grid .main-post-box-wrapper.horizontal .post-content-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 16px 6px 0;
}

.post-featured-grid .main-post-box-wrapper.horizontal .main-post-box {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    padding: 0;
}

.post-featured-grid .main-post-box-wrapper.horizontal .post-name {
    margin: 0;
}

.post-featured-grid .main-post-box-wrapper.horizontal .summary {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* در کارت‌های افقی کوچک، ردیف تاریخ/دکمه باید جمع‌وجورتر باشه */
.post-featured-grid .main-post-box-wrapper.horizontal .info {
    padding: 0;
    border-radius: 0;
    margin: 0;
    flex-wrap: wrap;
}
.post-featured-grid .main-post-box-wrapper.horizontal .info .btn{
    min-width: 56px;
}
.post-featured-grid .main-post-box-wrapper.horizontal .info .date .text span,
.post-featured-grid .main-post-box-wrapper.horizontal .info .btn span{
    display: none;
}
.post-featured-grid .main-post-box-wrapper.horizontal .info .date .text span{

}
.post-featured-grid .main-post-box-wrapper.horizontal .info .date .icon{
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
}
.post-featured-grid .main-post-box-wrapper.horizontal .info .date{
    border-radius: 32px;
    border: 1px solid var(--black-10);
    padding: 0 16px;
}

/* ---------- ریسپانسیو: زیر ۹۹۲px همه‌چیز زیر هم ---------- */
@media (max-width: 991px) {
    .post-featured .bg_svg .shape-unit{
        min-height: 850px;
        transform: translateY(-16px);
    }
    .post-featured-grid .pfg-row-1 {
        flex-direction: column;
        height: auto;
        padding: 0 var(--pfg-gap);
    }

    .post-featured-grid .pfg-col-stack {
        width: 100%;
    }

    .post-featured-grid .pfg-col-stack .pfg-slot {
        flex: none;
        height: auto;
    }

    .post-featured-grid .pfg-col-feature .pfg-slot {
        height: auto;
    }

    .post-featured-grid .pfg-row-2 {
        flex-direction: column;
    }

    .post-featured-grid .main-post-box-wrapper.vertical .post-img img,
    .post-featured-grid .main-post-box-wrapper.horizontal .post-img img{
        object-fit: contain;
    }
}
@media (max-width: 767px) {
    .post-featured .bg_svg .shape-unit{
        min-height: 1800px;
    }
    .post-featured-grid .main-post-box-wrapper.horizontal{
        flex-direction: column;
    }
    .post-featured-grid .main-post-box-wrapper.horizontal .post-content-col{
        padding: 16px 0 0 0;
    }
}