/* assets/css/about.css */

/* صفحهٔ About روی زمینه روشن نمایش داده شود */
body.about-page { background:#fff; color:#222; }
body.about-page main { background:#fff; }

/* Hero */
.about-hero{
  position:relative;
  min-height: clamp(360px, 42vw, 520px);
  display:flex; align-items:center;
  background: center/cover no-repeat var(--bg);
}
.about-hero__overlay{
  position:absolute; inset:0;
  background: radial-gradient(80% 80% at 20% 30%, rgba(10,20,30,.55), rgba(10,20,30,.85));
}
.about-hero .container{
  position:relative; z-index:1;
  max-width: 1100px; width:100%; margin:0 auto; padding: 48px 24px;
  color:#fff;
}
.about-hero h1{ font-size: clamp(32px, 5vw, 54px); margin:0 0 8px; font-weight:800; }
.about-hero .subtitle{ font-size: clamp(16px, 2.2vw, 22px); opacity:.95; }

/* Intro */
.about-intro .container{
  max-width: 920px; margin: 40px auto; padding: 0 24px;
}
.about-intro .prose{ line-height:1.7; font-size: 17px; color:#333; }
.about-intro .prose p{ margin: 0 0 14px; }
.about-intro .prose a { color: var(--blue-accent); text-decoration: none; }
.about-intro .prose a:hover { text-decoration: underline; }

/* Cards */
.about-cards{ padding: 24px 0 56px; }
.about-cards .container{ max-width: 1100px; margin:0 auto; padding:0 24px; }
.about-cards .grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .about-cards .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .about-cards .grid{ grid-template-columns: 1fr; } }

.about-cards .card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.about-cards .card:hover{ transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.16); }

/* Eyebrow (heading کوچک بالای عنوان) */
.about-cards .card-body .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.2px;
  color:#6b7280; margin-bottom:6px;
}

/* دسترسی‌پذیری و Hover بهتر */
.about-cards .card:focus-visible{
  outline: 3px solid var(--blue-accent); outline-offset: 3px;
}

/* وقتی تصویر نداشتیم، بک‌گراند پیش‌فرض */
.about-cards .card.no-img .card-body{ padding-top:18px; }
.about-cards .card.no-img{
  background: linear-gradient(135deg,#f5f7fb 0%,#eef2f7 100%);
}

/* تصویر: لبه‌های نرم‌تر در رندرهای بعضی مرورگرها */
.about-cards .card img{
  width:100%;
  height: clamp(180px, 22vw, 240px);
  object-fit: cover;
}

.about-cards .card-body{ padding:16px 18px; }
.about-cards h3{ margin:0 0 6px; font-size:18px; color:#111; }
.about-cards p{ margin:0; color:#444; font-size:14px; }

/* CTA */
.about-cta{
  background: #0f2538;
  color:#fff;
  padding: 40px 0;
}
.about-cta .container{ max-width: 980px; margin:0 auto; padding: 0 24px; text-align:center; }
.about-cta h3{ margin:0 0 8px; font-size: 24px; }
.about-cta p{ margin:0 0 18px; opacity:.9; }
.about-cta .btn{
  display:inline-block; padding:10px 18px; border-radius:8px;
  background:var(--blue-accent); color:#fff; text-decoration:none; font-weight:600;
}
.about-cta .btn:hover{ filter: brightness(1.05); }

@media (max-width: 640px){
  .about-hero .container { padding: 36px 16px; }
  .about-intro .container { margin: 28px auto; padding: 0 16px; }
  .about-cta .container { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce){
  .about-cards .card{ transition: none; }
}

@media (prefers-color-scheme: dark){
  body.about-page { color:#e5e7eb; }
  .about-intro .prose{ color:#000000; }
  .about-cards .card{ background:#0f172a; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
  .about-cards h3{ color:#f8fafc; } .about-cards p{ color:#cbd5e1; }
}
/* Boost eyebrow contrast */
.about-cards .card-body .eyebrow{
  color: #e2e8f0;      /* روشن‌تر روی پس‌زمینه تیره */
  font-weight: 700;    /* ضخیم‌تر */
  font-size: 13px;     /* کمی بزرگ‌تر */
  letter-spacing: .25px;
  opacity: 1;          /* مطمئن شو شفافیت کم نشده */
}

.about-cards .card-body .eyebrow{ color:#fff !important; }

/* اگر در دارک‌مود تیره‌تر شد، باز هم خوانا بماند */
@media (prefers-color-scheme: dark){
  .about-cards .card-body .eyebrow{ color:#f1f5f9; }
}
/* Force eyebrow to be brighter */
.about-cards .card .card-body .eyebrow,
.about-cards .card .eyebrow{
  color:#ffffff !important;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.25px;
  opacity:1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25); /* اختیاری: خوانایی بیشتر */
}