/* ═══════════════════════════════════════════════════════════
   Responsive Styles - التنسيقات المتجاوبة
   ═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --text-6xl: 2.5rem;
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --spacing-3xl: 4rem;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    section {
        padding: var(--spacing-2xl) 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --text-6xl: 2rem;
        --text-5xl: 1.75rem;
        --text-4xl: 1.5rem;
        --text-3xl: 1.25rem;
        --spacing-2xl: 2rem;
        --spacing-3xl: 3rem;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .section-header {
        text-align: center;
    }

    .text-center {
        text-align: center !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    :root {
        --text-6xl: 1.75rem;
        --text-5xl: 1.5rem;
        --text-4xl: 1.25rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
    }

    .btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--text-sm);
    }
}