/* ——— Single-column IG-like feed ——— */
.afp-feed{max-width:720px;margin:64px auto; padding:0 12px;}
.afp-item{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;
          box-shadow:0 8px 22px rgba(0,0,0,.06); margin-bottom:20px;}
.afp-mediaWrap{position:relative; background:#000; overflow:hidden;}
/* دسکتاپ: نسبت 4:3 تا مدیا بزرگ باشه */
.afp-mediaWrap::before{content:"";display:block;padding-top:75%;}
.afp-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
/* موبایل: تقریباً تمام قد صفحه */
@media (max-width:900px){
  .afp-feed{max-width:100%;padding:0;}
  .afp-item{border-radius:0}
  .afp-mediaWrap::before{content:none; padding-top:0;}
  .afp-mediaWrap{min-height:75svh;}
  .afp-media{height:100%; object-fit:cover;}
  .afp2-meta{ font-size:32px; }
}
.afp-body{padding:12px 14px;}
.afp-title{font-size:18px;font-weight:800;line-height:1.7;color:#222;margin:0 0 6px;text-align:center}
.afp-actions{display:flex;gap:10px;justify-content:center;padding:10px}
.afp-desc{color:#556;font-size:14px;line-height:1.8;text-align:center;margin:0 10px 10px}
</style>


<style>
/* دسکتاپ: ارتفاع ناحیهٔ مدیا را بلندتر کن (از 16:9 → 4:3) */
html body .afp2-thumb::before{
  padding-top: 75% !important; /* 75% ~= نسبت 4:3. می‌خوای بزرگ‌تر: 100% (مربعی) */
}

/* موبایل: خودِ مدیا تقریباً تمام قد صفحه شود */
@media (max-width: 900px){
  html body .afp2-thumb{
    min-height: 70svh !important;   /* اگر بزرگ‌تر می‌خوای 80svh/85svh کن */
  }
  html body .afp2-thumb::before{
    content: none !important;       /* نسبت ثابت را بردار، ارتفاع واقعی بده */
    padding-top: 0 !important;
  }
  html body .afp2-thumb > video,
  html body .afp2-thumb > img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;   /* اگر می‌خوای «کامل» بدون برش دیده شه: contain بگذار */
  }

}

.afp-hero{max-width:760px;margin:12px auto 8px;padding:8px 12px 0}
.afp-h1{font-size:clamp(24px,3.4vw,34px);font-weight:900;text-align:center;color:#1f2a30;margin:10px 0 6px}
.afp-lead{text-align:center;color:#475569;max-width:680px;margin:0 auto 6px;line-height:1.9}
@media (max-width:900px){ .afp-hero{padding:8px 16px 0} }
@media (min-width:900px){ .afp-hero{margin-top : 50px} }