/**
 * Responsive Styles
 * 3 breakpoints: 1024px (tablet), 768px (mobile nav), 480px (small mobile)
 * @package MohammedAli
 */

/* ═══ Tablet (1024px) ═══ */
@media (max-width: 1024px) {
    :root {
        --container-padding: 1.25rem;
    }

    h1 {
        font-size: var(--font-size-4xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    .section-header .section-title {
        font-size: var(--font-size-3xl);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .widget-hero .hero-content h1 {
        font-size: var(--font-size-4xl);
    }

    /* Steps: 2 columns on tablet */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══ Mobile Nav Breakpoint (768px) ═══ */
@media (max-width: 768px) {
    .top-header {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .main-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .main-header .container {
        min-height: 60px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }

    /* Hero mobile adjustments */
    .widget-hero {
        min-height: 70vh;
    }

    .widget-hero .hero-content h1 {
        font-size: var(--font-size-3xl);
    }

    .widget-hero .hero-stats {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: flex-start;
    }

    /* Steps: 2 columns on mobile landscape */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    /* CTA adjustments */
    .widget-cta h2 {
        font-size: var(--font-size-2xl);
    }

    .widget-cta .btn-secondary {
        font-size: var(--font-size-base);
        padding: 0.875rem 2rem;
    }

    /* Section padding reduction */
    .section-padding {
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-3xl);
    }

    .page-header {
        padding: var(--spacing-2xl) 0;
    }

    .page-header h1 {
        font-size: var(--font-size-2xl);
    }

    .error-404 .error-code {
        font-size: 5rem;
    }

    .post-navigation {
        flex-direction: column;
    }

    /* Service cards: touch-friendly padding */
    .service-card {
        padding: var(--spacing-xl);
    }

    /* Feature cards: touch-friendly */
    .feature-card {
        padding: var(--spacing-lg);
    }

    /* Testimonial cards: adjusted spacing */
    .testimonial-card {
        padding: var(--spacing-xl);
    }

    /* FAQ: touch-friendly hit area */
    .faq-question {
        min-height: 52px;
    }
}

/* ═══ Small Mobile (480px) ═══ */
@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
    }

    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    .section-header .section-title {
        font-size: var(--font-size-2xl);
    }

    .widget-hero .hero-content h1 {
        font-size: var(--font-size-2xl);
    }

    .widget-hero .hero-buttons {
        flex-direction: column;
    }

    .widget-hero .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .btn {
        padding: 0.65rem 1.5rem;
        font-size: var(--font-size-sm);
        min-height: 44px;
    }

    /* Single column grids on small screens */
    .steps-grid,
    .related-posts-grid {
        grid-template-columns: 1fr;
    }

    .step-card {
        padding: var(--spacing-md);
    }

    /* FAQ: reduced padding */
    .faq-question {
        padding: var(--spacing-md);
    }

    .faq-answer-inner {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }

    /* CTA: full width button */
    .widget-cta .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Feature card: stack icon/text on tiny screens */
    .feature-card {
        flex-direction: column;
        text-align: center;
    }

    .feature-card .feature-icon {
        margin: 0 auto;
    }
}

/* ═══ Touch & Tap Improvements ═══ */
@media (hover: none) and (pointer: coarse) {

    .service-card:hover,
    .feature-card:hover,
    .testimonial-card:hover,
    .step-card:hover .step-number {
        transform: none;
        box-shadow: none;
    }

    .service-card:active {
        transform: scale(0.98);
    }

    .faq-question:active {
        background: var(--color-gray-100);
    }
}