/* ASORIN — activities.css (activities.html only). Needs common.css first. */
/* ---------- ACTIVITIES (tabs) ---------- */
.tabs-wrap { overflow-x: auto; scrollbar-width: none; margin-bottom: 28px; }
.tabs-wrap::-webkit-scrollbar { display: none; }
.tabs { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.tab { position: relative; z-index: 1; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap; font-weight: 700; font-size: .93rem; color: var(--fg-2); transition: color .3s; }
.tab:hover { color: var(--fg); }
.tab.on { color: var(--on-gold); }
.tab-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--gold); transition: left .5s var(--ease), width .5s var(--ease); }
.panel { display: none; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px); align-items: start; padding-bottom: clamp(70px, 8vw, 110px); }
.panel.on { display: grid; }
.panel.on .panel-fig { animation: figIn .8s var(--ease) both; }
.panel.on .panel-text > * { animation: rise .7s var(--ease) both; }
.panel.on .panel-text > *:nth-child(2) { animation-delay: .08s; }
.panel.on .panel-text > *:nth-child(3) { animation-delay: .16s; }
.panel.on .panel-text > *:nth-child(4) { animation-delay: .24s; }
@keyframes figIn { from { opacity: .001; transform: scale(.96); } to { opacity: 1; transform: none; } }
.panel-fig { margin: 0; border-radius: 22px; overflow: hidden; background: var(--bg-3); box-shadow: 0 30px 60px -30px var(--shadow); }
.panel-fig img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 545; }
.panel-text { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; color: var(--gold); }
html[dir="rtl"] .panel-num { font-family: 'Vazirmatn', sans-serif; font-weight: 900; }
.panel-text h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.4; }
.panel-text > p { margin: 0; color: var(--fg-2); font-size: 1.04rem; line-height: 1.9; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 4px 14px; border-radius: 999px; background: var(--bg-3); font-size: .82rem; font-weight: 600; color: var(--fg-2); }
.points { display: flex; flex-direction: column; gap: 10px; }
.point { padding: 16px 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease); }
.point:hover { border-color: var(--line-2); transform: translateX(-4px); }
html[dir="ltr"] .point:hover { transform: translateX(4px); }
.point b { display: block; margin-bottom: 4px; font-size: .98rem; line-height: 1.5; }
.point span { display: block; font-size: .9rem; color: var(--fg-2); line-height: 1.8; }
.panel-nav { display: flex; gap: 10px; margin-top: 6px; }
html[dir="rtl"] .panel-nav svg { transform: scaleX(-1); }

@media (max-width: 960px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
}