/* ============================================================
   Responsive — Breakpoints, RTL, Print, Reduced motion, no-JS
   ============================================================ */

/* ===== BREAKPOINTS ===== */
/* Hero stacks to one column below 1100px (v3.0.1): at 901–1100px the
   two-column hero left a huge void beside the small orbit visual. */
@media (max-width: 1100px) {
    .hero-content { grid-template-columns: 1fr; gap: 32px; }
    .hero-visual { order: -1; min-height: 200px; }
    .hero-visual::before { width: 280px; height: 280px; }
    /* v3.0.3: stacked hero — the stats row is a centred group now.
       It was justify-content: flex-start, so on mobile the three stats
       hugged the left edge with dead space on the right (and each number,
       centred over its wider label, read as shoved to the side). Desktop
       two-column keeps flex-start, aligned with the text column. */
    .quick-stats { justify-content: center; }
}

@media (max-width: 900px) {
    .top-nav { display: none; }
}

@media (max-width: 768px) {
    .hero { padding: calc(var(--topbar-height) + 24px) 0 48px; }
    .quick-stats { gap: 32px; }
    .stat-number { font-size: 1.6rem; }
    .section { padding: 48px 0; }
    .project-card { padding: 0; }
    .project-body { padding: 22px; }
    .project-visual { padding: 20px 22px 16px; }
    .toolkit-grid { grid-template-columns: 1fr; }
    .tk-ai, .tk-span-5, .tk-span-6, .tk-span-12 {
        grid-column: span 1;
        grid-row: span 1;
    }
    /* v3.0.1 bands stack vertically on mobile */
    .tk-more { display: block; padding: 24px; }
    .tk-more .tk-icon { margin-bottom: 14px; }
    .tk-more .tk-title { margin-bottom: 10px; }
    .tk-more .tk-narrative { margin-bottom: 20px; }
    .tk-more .tk-tags { justify-content: flex-start; max-width: none; }
    .github-card { flex-direction: column; text-align: center; padding: 28px 24px; }
    .github-copy { text-align: center; }
    .back-to-top { bottom: 16px; inset-inline-end: 16px; width: 42px; height: 42px; }
}

@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .hero-cta .btn { flex: 1 1 auto; }
    .quick-stats { gap: 24px; }
    /* v3.1.2: give the topbar controls room on narrow phones — tighter
       gaps and paddings, but heights stay 44px (touch targets). */
    .topbar-inner { gap: 12px; }
    .topbar-logo { font-size: 14px; }
    .lang-btn { padding: 0 10px; font-size: 12.5px; }
}

/* ===== RTL FIXES ===== */
[dir="rtl"] .lang-info { text-align: right; }
[dir="rtl"] .hero h1 { letter-spacing: 0; font-weight: 800; }
/* Persian is cursive: any letter-spacing disconnects the joins and the
   text renders broken. Zero it on every Persian-bearing element. */
[dir="rtl"] .btn,
[dir="rtl"] .hero-status,
[dir="rtl"] .section-label,
[dir="rtl"] .section h2,
[dir="rtl"] .badge,
[dir="rtl"] .settings-title,
[dir="rtl"] .stat-label,
[dir="rtl"] .timeline-date,
[dir="rtl"] .tk-title,
[dir="rtl"] .contact-label { letter-spacing: 0; }

/* ===== NO-JS FALLBACK (BUG-02 fix) ===== */
/* Without JavaScript, reveal content is always visible.
   The .js class is added by main.js on init. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== REDUCED MOTION (A11Y-01 fix) ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .star, .nebula, .orbit-ring { animation: none !important; }
}

/* ===== MOTION OFF (v3.0 settings toggle — same behaviour as above) ===== */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .star,
html[data-motion="off"] .nebula,
html[data-motion="off"] .orbit-ring { animation: none !important; }

/* ===== DENSITY: compact (v3.0 settings toggle) ===== */
html[data-density="compact"] .section { padding: 64px 0; }
html[data-density="compact"] .project-body { padding: 20px 24px; }
html[data-density="compact"] .project-compact,
html[data-density="compact"] .edu-card,
html[data-density="compact"] .tk-card,
html[data-density="compact"] .contact-item { padding: 20px; }
html[data-density="compact"] .section-header,
html[data-density="compact"] .toolkit-header { margin-bottom: 32px; }

/* ===== PRINT STYLESHEET (CODE-03 fix) ===== */
@media print {
    .cosmic-bg,
    .grid-overlay,
    .topbar,
    .settings-panel,
    .lang-switch,
    .scroll-progress,
    .back-to-top,
    .hero-avatar,
    .hero-cta { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
        font-family: Georgia, serif !important;
    }

    .hero {
        min-height: auto !important;
        padding: 20px 0 !important;
        text-align: left !important;
    }
    .hero h1 {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
        font-size: 2rem !important;
    }
    .hero-tagline, .hero-desc { color: #333 !important; }

    .section { padding: 16px 0 !important; page-break-inside: avoid; }
    .section h2 { color: #000 !important; }

    .card,
    .edu-card,
    .work-card,
    .project-card,
    .project-compact,
    .tk-card,
    .github-card,
    .lang-card,
    .contact-item,
    .timeline-card {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        color: #000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .timeline::before, .timeline::after,
    .timeline-ring { display: none !important; }
    .timeline-orb {
        background: #999 !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important;
    }
    .timeline-item.visible .timeline-orb { transform: none !important; }
    .timeline-future .timeline-orb { background: #777 !important; }
    .timeline-future .timeline-title { color: #333 !important; }

    .stat-number, .stat-label,
    .project-title, .edu-title, .work-title,
    .github-title, .lang-name,
    .contact-value { color: #000 !important; }

    .project-desc, .edu-detail, .work-desc,
    .about-text, .section-desc { color: #333 !important; }

    .tag, .tag-mono, .tag-pill, .badge, .work-tag { color: #000 !important; border-color: #999 !important; }

    .footer { border-top: 1px solid #ccc !important; }
    .footer::before, .footer-glow { display: none !important; }
    .footer-text, .footer-link, .footer-version { color: #555 !important; }

    a { color: #000 !important; text-decoration: underline; }
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #555;
    }
    a[href^="#"]:after,
    a[href^="mailto:"]:after { content: ""; }

    .reveal { opacity: 1 !important; transform: none !important; }
}