:root{
  --bg:#121518;
  --card:#1a2025cc;
  --glass:rgba(20,24,28,.58);
  --ink:#eaeff3;
  --muted:#b8c2cc;
  --accent:#c5a15b; /* طلایی ملایم */
  --shadow:0 20px 45px -20px rgba(0,0,0,.6);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0}

body.theme-dark{
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #0d1013 30%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #0e1619 15%, transparent 60%),
    linear-gradient(#0b0e11,#14181c 40%,#0e1216);
  min-height:100dvh;
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",Arial,sans-serif;
}

/* Hero */
.page-hero{padding:64px 20px 12px}
.page-hero .hero-inner{max-width:1200px;margin:0 auto;text-align:center}
.page-hero h1{
  letter-spacing:.5rem;
  font-weight:800;
  margin:0 0 10px;
  text-transform:uppercase;
}
.subtitle{color:var(--muted);margin:0 auto 18px;max-width:780px}
.divider{
  width:min(520px,80%);
  height:2px;
  background:linear-gradient(90deg,transparent, var(--accent), transparent);
  margin:14px auto 0;
  border-radius:999px;
}

/* Grid */
.container{max-width:1200px;margin:0 auto;padding:24px 16px 64px}
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:1024px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} }

/* Card */
.card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .35s ease, box-shadow .35s ease;
  cursor:pointer;
}
.card:before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 20%, transparent 35%, rgba(0,0,0,.45) 70%);
  z-index:1;
}
.card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -25px rgba(0,0,0,.75)}
.card__img{
  width:100%; height:240px; display:block; object-fit:cover;
  filter:contrast(1.05) saturate(.9) brightness(.9);
  transition:filter .35s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.card:hover .card__img{filter:contrast(1.1) saturate(1); transform:scale(1.03)}

.card__badge{
  position:absolute; inset:auto 14px 14px auto; z-index:2;
  background:linear-gradient(135deg, rgba(197,161,91,.9), rgba(117,88,42,.9));
  color:#161616; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.card__title{
  position:absolute; inset:auto 18px 18px 18px; z-index:2;
  font-weight:800; letter-spacing:.18rem; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* Modal */
.modal{position:fixed; inset:0; display:none}
.modal[aria-hidden="false"]{display:block}
.modal__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:saturate(1.1) blur(4px);
  animation:fade .22s ease;
}
@keyframes fade{from{opacity:0} to{opacity:1}}

.modal__dialog{
  position:relative;
  z-index:1;
  margin:6dvh auto;
  width:min(980px,92%);
  background:linear-gradient(180deg, rgba(22,26,30,.85), rgba(16,19,23,.9));
  border:1px solid rgba(255,255,255,.05);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.8);
  overflow:hidden;
  animation:pop .22s ease;

  /* ✅ اصلاحات برای موبایل */
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes pop{from{transform:translateY(10px);opacity:0} to{transform:none;opacity:1}}

.modal__close{
  position:absolute; top:10px; right:12px;
  width:42px;height:42px;border-radius:999px;border:none;
  background:rgba(0,0,0,.35); color:#fff; font-size:24px; cursor:pointer;
  backdrop-filter:blur(2px);
}
.modal__close:hover{background:rgba(0,0,0,.5)}

.modal__media img{width:100%; height:360px; object-fit:cover; display:block}
@media (max-width:640px){ .modal__media img{height:240px} }

.modal__content{padding:18px 18px 24px}
.modal__content h2{margin:4px 0 6px; letter-spacing:.08rem}
.lead{color:var(--muted); margin:0 0 12px}

.meta{
  display:grid; gap:10px; margin:10px 0 8px;
  grid-template-columns:repeat(2,1fr);
}
.meta__item{
  background:var(--glass);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.04)
}
@media (max-width:640px){ .meta{grid-template-columns:1fr} }

.more{margin-top:10px}
.more summary{cursor:pointer; color:var(--accent); font-weight:700}
.more ul{margin:10px 0 0 18px}