/* ASORIN — about.css (about.html only). Needs common.css first. */
/* ---------- ABOUT ---------- */
.about-intro { font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important; color: var(--fg) !important; line-height: 1.7; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: clamp(56px, 7vw, 90px); }
.pillar { min-width: 0; padding: 28px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.pillar:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 50px -28px var(--shadow); }
.pillar-head { display: flex; align-items: center; gap: 14px; }
.pillar-head i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-family: 'Sora', 'Vazirmatn', sans-serif; font-weight: 800; background: var(--gold); color: var(--on-gold); }
.pillar h3 { margin: 0; font-size: 1.15rem; line-height: 1.45; }
.pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pillar li b { display: block; font-size: .96rem; margin-bottom: 2px; }
.pillar li span { font-size: .9rem; color: var(--fg-2); line-height: 1.8; }

.contact-sec { padding-bottom: clamp(70px, 8vw, 110px); }
.contact-sec h2 { margin: 8px 0 6px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.contact-sec > p { margin: 0 0 24px; color: var(--fg-2); }
.contact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.c-card { min-width: 0; padding: 22px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; transition: transform .5s var(--ease), border-color .3s; }
.c-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.c-card small { font-size: .84rem; color: var(--fg-3); font-weight: 600; }
.c-card a.num { align-self: flex-start; font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600; text-decoration: none; direction: ltr; unicode-bidi: isolate; user-select: all; overflow-wrap: anywhere; }
.c-card a.num:hover { color: var(--gold); }
.mini { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: transparent; color: var(--gold); font-size: .84rem; font-weight: 700; text-decoration: none; transition: background-color .25s, color .25s; }
.mini:hover { background: var(--gold); color: var(--on-gold); }
.mini.wa { border-color: rgba(37, 211, 102, .55); color: #22A954; }
.mini.wa:hover { background: #25D366; color: #06210F; }

@media (max-width: 960px) {
  .pillars, .contact-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pillar { padding: 22px; }
}