/* ==========================================
   Prompt Geni — Responsive Breakpoints
   ========================================== */

/* Desktop/Tablet (≥ 1025px) */
@media (min-width: 1025px) {
    /* Navbar is full width, no sidebar */
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .module-content {
        grid-template-columns: 1fr;
    }
}

/* Tablet small / Mobile Wide (≤ 768px) */
@media (max-width: 768px) {
    .page-container {
        padding: var(--space-md);
    }

    .module-hero {
        padding: var(--space-xl) var(--space-lg);
    }

    .module-hero h1 {
        font-size: var(--fs-2xl);
    }

    /* Landing Page Mobile Fixes */
    .hero-layout,
    .how-grid,
    .features-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .hero-text {
        text-align: center;
    }

    .hero-stats {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .cta-container {
        padding: var(--space-2xl) var(--space-lg);
    }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
    .page-container {
        padding: var(--space-sm);
    }

    .module-panel {
        padding: var(--space-md);
    }

    .module-hero h1 {
        font-size: var(--fs-xl);
    }

    .module-hero p {
        font-size: var(--fs-sm);
    }

    /* Touch targets optimization */
    .chip {
        padding: 10px 16px;
        font-size: var(--fs-sm);
        border-radius: var(--radius-full);
    }

    .chip-group {
        gap: 8px;
    }

    .btn,
    .btn-generate,
    .auth-submit,
    .auth-google {
        padding: 14px 20px;
        font-size: var(--fs-md);
    }

    /* Stack auth modal forms */
    .auth-modal-card {
        padding: var(--space-lg);
        width: 100%;
        margin: 0 var(--space-xs);
    }

    .auth-input {
        font-size: 16px;
        /* Prevents iOS auto-zoom */
    }

    /* Adjust module tab panels */
    .module-tabs {
        flex-wrap: wrap;
    }

    .module-tab {
        flex: 1 1 40%;
        text-align: center;
        font-size: var(--fs-sm);
    }

    .control-textarea {
        font-size: 16px;
    }

    /* Nav items */
    .nav-item {
        padding: 12px 16px;
        font-size: var(--fs-md);
    }

    .nav-icon {
        font-size: 1.3rem;
    }

    /* Ensure flex lists stack */
    .output-actions {
        flex-direction: column;
        width: 100%;
    }

    .output-actions .btn {
        width: 100%;
        justify-content: center;
    }
}