/* Responsive System */

/* Tablet Layout */
@media (max-width: 1024px) {
    .split-layout {
        flex-direction: column;
        gap: var(--spacing-6);
        padding-top: var(--spacing-10);
    }

    .feature-card {
        grid-column: span 6;
    }
    
    .pill-container {
        flex-direction: column;
        gap: var(--spacing-4);
        padding: var(--spacing-6);
    }
}

/* Mobile Layout */
@media (max-width: 768px) {
    :root {
        --spacing-10: 60px; /* Reduce vertical rhythm */
    }

    .grid {
        display: flex;
        flex-direction: column;
    }

    .feature-card {
        margin-bottom: var(--spacing-4);
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }

    /* Reduce 3D complexity on mobile / lower shadows */
    .neumorphic-panel {
        box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #ffffff;
    }

    .clay-btn {
        width: 100%; /* Increase touch target */
        padding: var(--spacing-3);
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: block !important;
    }

    /* Make sure grid gap is enough for small screens */
    .grid {
        gap: var(--spacing-6);
    }
    
    /* Ensure padding for mobile navigation */
    nav.neumorphic-panel {
        padding: var(--spacing-3) var(--spacing-4) !important;
    }
}