/* ================== Responsive, RTL-safe, and Polished ==================
   نویسنده: شما + دستیار
   هدف: کاملًا ریسپانسیو، بدون اورفلو، با تایپوگرافی و گریدِ سیال
   نکته‌ها:
   - از clamp() و minmax() برای ابعاد سیال استفاده شده
   - تصاویر با aspect-ratio تمیز می‌مانند (بدون کشیدگی)
   - sticky در موبایل خاموش می‌شود تا اسکرول راحت باشد
   - انیمیشن‌ها برای کاربران "prefers-reduced-motion" کم می‌شود
======================================================================== */

/* ============ Design Tokens ============ */
:root {
  --green-950: #062b20;
  --green-900: #0a3a2a;
  --green-800: #0e4f3a;
  --green-700: #136e52;
  --green-600: #178464;
  --green-300: #cfe8dd;
  --green-200: #e8f4ef;
  --green-100: #f4fbf8;
  --gold: #c9a227;
  --ink: #121a27;
  --muted: #5f6b72;
  --line: #e6eaee;
  --card: #ffffff;
  --bg: #fbfffd;
  --radius: 16px;
  --shadow: 0 18px 40px rgba(0, 0, 0, .06);
  --trans: .35s cubic-bezier(.2, .7, .2, 1);
}

/* ============ Base ============ */
html { color-scheme: light; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Arabic", "Noto Naskh Arabic", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; }

:root { --step-1: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); }
.hero .text h1 { font-size: var(--step-1); }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* ظرف عمومی */
.wrap, .controls, .shell, .meta {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ============ Hero (موزاییک لطیف) ============ */
.hero { position: relative; }
.hero-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.hero img {
  width: 100%;
  height: clamp(220px, 38vw, 420px);
  object-fit: cover;
  object-position: center;
}

.hero .geo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .30;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><g fill="none" stroke="%23076B50" stroke-width="1"><path d="M70 0 140 70 70 140 0 70Z"/><circle cx="70" cy="70" r="18"/></g></svg>');
  background-size: 140px 140px;
  background-repeat: repeat;
}

.hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .72) 0%,
    rgba(0, 0, 0, .55) 22%,
    rgba(0, 0, 0, .28) 45%,
    rgba(0, 0, 0, 0) 68%);
}

.hero .text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  color: #fff;
  padding: 28px 18px 20px;
  background: transparent;
}

.hero .text p {
  margin: 0;
  color: #fff;
  opacity: .92;
}

/* موبایل: گرادیان پررنگ‌تر برای خوانایی */
@media (max-width: 560px) {
  .hero-wrap::after {
    background: linear-gradient(to top,
      rgba(0, 0, 0, .80) 0%,
      rgba(0, 0, 0, .60) 28%,
      rgba(0, 0, 0, .30) 52%,
      rgba(0, 0, 0, 0) 75%);
  }
}

/* Divider */
.divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(to left, transparent, #b9ccbf 30%, transparent); }

.kufic {
  display: inline-block;
  border: 1px solid #b9ccbf;
  border-radius: 6px;
  padding: 2px 8px;
  color: #2b564a;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
}

/* ============ گرید کارت‌ها با فیت بهتر ============ */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============ کارت‌ها و محتوا با فیت بهینه ============ */
.tile {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tile .pad {
  padding: 12px;
  flex: 1;
}

.tile .badge {
  font-size: .85rem;
}

.tile h4 {
  margin: 8px 0 6px;
  font-size: clamp(1rem, .95rem + .3vw, 1.06rem);
  line-height: 1.6;
}

.tile p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

/* متا ردیف */
.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: .9rem;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============ Controls (نوار فیلتر/جست‌وجو) ============ */
.controls .bar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
  display: grid;
  gap: 10px;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.controls .bar input,
.controls .bar select {
  border: 1px solid #d6dde3;
  background: #fff;
  color: #111;
  border-radius: 12px;
  padding: .65rem .8rem;
  outline: none;
  font: inherit;
  min-width: 230px;
  white-space: nowrap;
}

.controls .bar input:focus,
.controls .bar select:focus {
  box-shadow: 0 0 0 3px #90dac04f;
  border-color: #90dac0;
}

#q {
  direction: rtl;
  text-align: right;
  min-width: 320px;
}

@media (min-width: 901px) {
  #q {
    grid-column: span 2;
    min-width: 480px;
  }
}

@media (max-width: 900px) {
  #q {
    min-width: 230px;
    grid-column: span 1;
  }
}

/* ============ Main + Sidebar ============ */
.shell {
  display: grid;
  grid-template-columns: 1.9fr .9fr;
  gap: 16px;
  padding: 0 16px 40px;
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; padding-bottom: 28px; }
}

.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ============ Sidebar ============ */
.aside {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
}

.widget h5 { margin: 0 0 8px; font-size: 1.05rem; }

.list { display: grid; gap: 10px; }

.list a {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  transition: var(--trans);
}

.list a:hover { background: var(--green-100); }

.list img {
  width: 64px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* ============ Modal ============ */
.backdrop {
  position: fixed;
  inset: 0;
  background: #0008;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
}

.modal {
  width: min(720px, 94vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 50px 140px rgba(0, 0, 0, .5);
  position: relative;
}

.modal img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.modal .pad { padding: 16px; }

.modal h3 { margin: 6px 0; }

.modal p { color: var(--muted); line-height: 1.9; }

.modal .cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  background: var(--green-700);
  color: #fff;
  border: 1px solid var(--green-800);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  transition: var(--trans);
}

.modal .cta:hover { transform: translateY(-1px); }

/* ============ Skeleton ============ */
.skel {
  position: relative;
  overflow: hidden;
  background: #f3f7f5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: clamp(180px, 34vw, 260px);
}

.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}