/* ===== News (Exact Figma layout → responsive via percentage on 1512x982 canvas) ===== */

.news-page{
  --canvas-w: 1512;
  --canvas-h: 982;
  position:relative;
  width:100%;
  min-height:100vh;
  background:#000;
  color:#fff;
  overflow-x:hidden;   /* افقی رو ببند، عمودی آزاد باشه */
  overflow-y:auto;     /* اجازه اسکرول عمودی برای وقتی محتوا بلندتر از ویوپورت میشه */
  font-family: unixel, system-ui, -apple-system, Segoe UI, sans-serif;
}

/* بوم با نسبت فیگما؛ داخلش همه پوزیشن‌ها درصدی از 1512x982 */
.news__canvas{
  position:relative;
  width:100%;
  /* نسبت ثابت؛ در اسکرین‌های قدبلند، ارتفاع کم میاد و صفحه اسکرول می‌خوره */
  aspect-ratio: 1512 / 982;
  min-height: 100vh;           /* اجازه اسکرول عمودی وقتی ویوپورت کوتاهه */
  overflow: hidden;
}

/* بک‌گراند: عکس + گرادیان لطیف */
.news__bg{
  position:absolute; inset:0;
  background:
    var(--bg-url) center/cover no-repeat,
    radial-gradient(900px 600px at 85% 20%, rgba(65,182,71,.12), rgba(65,182,71,0) 70%),
    linear-gradient(#020202,#070707);
  filter: saturate(1.05) contrast(1.02);
}

/* ====== تیترهای شبح‌دار ====== */
.news__stack .ghost{
  position:absolute;
  /* تبدیل مقادیر px فیگما به % داخل بوم */
  /* left: 1179px  => 1179/1512 * 100 = ~77.96% */
  left: 77.96%;
  transform: translateX(-50%);
  width: max-content;
  font-family: Raqami, monospace;
  font-weight: 400;
  /* font-size: 128px; با ریسپانسیو نزدیک به نسبت */
  font-size: clamp(56px, 8.45vw, 128px);
  line-height: .9;
  text-align:center;
  user-select:none;
}
.news__stack .ghost::before{ content: attr(data-text); }
.news__stack .ghost{ top: calc(var(--top) / 982 * 100%); }
.g80{ color: #41B647; }            /* Main Title (top=32px) */
.g60{ color: rgba(65,182,71,.80); }
.g40{ color: rgba(65,182,71,.60); }
.g20{ color: rgba(65,182,71,.40); }
.g10{ color: rgba(65,182,71,.20); }
.g05{ color: rgba(65,182,71,.10); }

/* تاریخ چرخیده: left:1145, top:182 */
.news__date{
  position:absolute;
  left: calc(1145 / 1512 * 100%);
  top:  calc(182  / 982  * 100%);
  transform: rotate(-90deg);
  transform-origin: top left;
  font-family: Arapix-Regular, monospace;
  font-size: clamp(12px, 1.6vw, 24px);
  color:#fff;
  text-align:right;
  white-space:nowrap;
}

/* برگشت: (0,0) 120px → ریسپانسیو */
.news__back{
  position:absolute; left:0; top:0;
  width:clamp(72px, 8vw, 120px);
  height:clamp(72px, 8vw, 120px);
  padding:0; border:0; background:transparent; cursor:pointer; z-index:3;
}
.news__back img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ====== لیست خبرها (container) ======
   فیگما: x=354, y=242, w=804, h=674  */
.news__list{
  position:absolute;
  left:  calc(354 / 1512 * 100%);
  top:   calc(242 / 982  * 100%);
  width: calc(804 / 1512 * 100%);
  height:calc(674 / 982  * 100%);
  display:flex; flex-direction:column; gap: clamp(16px, 2.6vh, 24px);
  overflow:auto;
  padding-right: 2px; /* اسکرول‌بار جا نخوره */
}

/* کارت خبر مطابق استایل فیگما (مشکی ساده) */
.news-card{
  background:#000;
  border:1px solid rgba(255,255,255,.08);
  padding:12px 24px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.news-card__title{
  font-family: unixel, monospace;
  color:#fff; font-size: clamp(20px, 2.6vw, 40px); line-height:1.1; text-align:right;
}
.news-card__date{
  font-family: unixel, monospace;
  color:#fff; font-size: clamp(12px, 1.2vw, 15px); opacity:.95; text-align:right;
}
.news-card__desc{
  color:#fff; font-family: unixel, monospace;
  font-size: clamp(13px, 1.8vw, 20px);
  line-height: 1.2;
  text-align:right;
}
.news-card__media{
  width:100%; height:auto; aspect-ratio: 756/240; overflow:hidden;
}
.news-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Decorative flowers — edge-emerge (responsive) ===== */
.flower{ 
  position:absolute; 
  display:block; 
  pointer-events:none; 
  z-index:2; 
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* A — bottom-left, بخشی بیرون قاب */
.flower.A{
  width: clamp(170px, 24vw, 360px);
  left: clamp(-84px, -7vw, -36px);   /* همیشه کمی بیرون از چپ */
  bottom: clamp(-18px, -2.5vh, -8px);/* کمی از پایین بیرون */
}

/* B — چپِ میانه (رو به بالا)، از لبه چپ بیرون */
.flower.B{
  width: clamp(150px, 22vw, 320px);
  left: clamp(-68px, -6vw, -28px);
  top:  clamp(22vh, 32vh, 44vh);
  transform: rotate(32deg);
  transform-origin: top left;
}

/* C — راستِ میانه پایین، از لبه راست بیرون */
.flower.C{
  width: clamp(180px, 26vw, 380px);
  right: clamp(-80px, -7vw, -32px);
  bottom: clamp(14vh, 22vh, 300px);
  transform: rotate(-12deg);
  transform-origin: top left;
}

/* D — بالا-چپ، کمی بیرون از هر دو لبه */
.flower.D{
  width: clamp(150px, 20vw, 300px);
  left: clamp(-56px, -5vw, -24px);
  top:  clamp(-28px, -3vh, -10px);
}

/* E — پایین-راست (گوشه)، از هر دو لبه بیرون‌تر برای تعادل بصری */
.flower.E{
  width: clamp(190px, 25vw, 390px);
  right: clamp(-96px, -8vw, -40px);
  bottom: clamp(-24px, -3vh, -8px);
  transform: rotate(-34deg);
  transform-origin: top left;
}

/* —— Tablet tuning —— */
@media (max-width: 960px){
  .flower{ filter: drop-shadow(0 1px 5px rgba(0,0,0,.22)); }
  .flower.A{ width: clamp(150px, 26vw, 320px); left: clamp(-72px, -7vw, -28px); bottom: clamp(-16px, -2.2vh, -8px); }
  .flower.B{ width: clamp(130px, 23vw, 280px); left: clamp(-60px, -6vw, -24px); top: clamp(24vh, 34vh, 46vh); }
  .flower.C{ width: clamp(160px, 24vw, 340px); right: clamp(-68px, -6.5vw, -28px); bottom: clamp(12vh, 20vh, 260px); }
  .flower.D{ width: clamp(130px, 19vw, 260px); left: clamp(-48px, -4.5vw, -20px); top: clamp(-24px, -2.6vh, -8px); }
  .flower.E{ width: clamp(170px, 24vw, 340px); right: clamp(-84px, -7.5vw, -36px); bottom: clamp(-20px, -2.6vh, -6px); }
}

/* —— Mobile tuning —— */
@media (max-width: 640px){
  .flower{ opacity:.85; filter: drop-shadow(0 1px 4px rgba(0,0,0,.2)); }
  .flower.A{ width: clamp(130px, 34vw, 260px); left: clamp(-56px, -9vw, -20px); bottom: clamp(-12px, -2vh, -4px); }
  .flower.B{ width: clamp(120px, 30vw, 230px); left: clamp(-48px, -8vw, -18px); top: clamp(26vh, 36vh, 48vh); }
  .flower.C{ width: clamp(140px, 34vw, 260px); right: clamp(-56px, -9vw, -20px); bottom: clamp(10vh, 18vh, 200px); }
  .flower.D{ width: clamp(120px, 28vw, 220px); left: clamp(-44px, -7.5vw, -16px); top: clamp(-18px, -2vh, -6px); }
  .flower.E{ width: clamp(130px, 32vw, 240px); right: clamp(-64px, -10vw, -24px); bottom: clamp(-16px, -2.2vh, -6px); }
}
@media (max-width: 960px){
  .news__list{
    left: 6%;
    width: 88%;
  }
  .news-card__title{ font-size: clamp(18px, 4.8vw, 28px); }
}
@media (max-width: 640px){
  .news__date{ font-size: 12px; }
  .flower{ opacity:.7; filter:blur(.3px); }
}