/* ==========================================================================
   RealSpeak CSS Responsive Adjustments
   ========================================================================== */

/* 1. Large Screens & Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

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

    .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .step-card::after {
        display: none; /* Hide connector lines in 2x2 layout */
    }

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

    .why-card:nth-child(3n) {
        grid-column: span 2;
    }

    .carousel-slide {
        flex: 0 0 calc((100% - 4rem) / 3); /* Display 3 screenshots */
    }

    .safety-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .faq-directory-layout {
        grid-template-columns: 200px 1fr;
        gap: 2rem;
    }
}

/* 2. Tablets (max-width: 768px) */
@media (max-width: 768px) {
    .section-padding {
        padding: 5rem 0;
    }

    /* Mobile Nav Drawer Style */
    .menu-toggle {
        display: flex; /* Show Hamburger menu */
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--background);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6rem 2.5rem 3rem 2.5rem;
        gap: 2rem;
        transition: right var(--transition-normal);
        z-index: 1001;
        overflow-y: auto;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu .nav-link {
        font-size: 1.15rem;
        width: 100%;
    }

    .nav-actions {
        z-index: 1002;
    }

    /* Hero section adjustments */
    .hero {
        padding: 8rem 0 5rem 0;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-visual {
        order: -1; /* Display mockup above text on mobile for better visibility */
    }

    .mockup-container {
        width: 250px;
        height: 500px;
        border-width: 10px;
    }

    .carousel-slide {
        flex: 0 0 calc((100% - 2rem) / 2); /* Display 2 screenshots */
    }

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

    .contact-info-column {
        order: 1;
    }

    .contact-form-card {
        padding: 2rem;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .about-intro-grid .btn {
        margin: 0 auto;
    }

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

    .stats-card-about-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* FAQ page directory layout */
    .faq-directory-layout {
        grid-template-columns: 1fr;
    }

    .faq-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .faq-category-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
        scrollbar-width: thin;
    }

    .faq-category-btn {
        white-space: nowrap;
    }

    .legal-card {
        padding: 2rem;
    }
}

/* 3. Small Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    .section-title {
        font-size: 1.85rem;
    }

    .hero-title {
        font-size: 2.35rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-google-play {
        width: 100%;
        box-sizing: border-box;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .how-it-works-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .step-card {
        padding-top: 2rem;
    }

    .step-number {
        left: 1rem;
    }

    .carousel-slide {
        flex: 0 0 100%; /* Display 1 screenshot */
    }

    .screenshot-placeholder {
        width: 180px;
        height: 360px;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .why-card:nth-child(3n) {
        grid-column: span 1;
    }

    .safety-cards-grid {
        grid-template-columns: 1fr;
    }

    .safety-visual {
        padding: 2rem 1rem;
    }

    .cta-card {
        padding: 3rem 1.5rem;
        border-radius: 20px;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .cta-buttons .btn-google-play {
        width: 100%;
        box-sizing: border-box;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-legal-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .back-to-top {
        bottom: 5.5rem;
        right: 1.5rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* 4. Landscape / Extra Fine Adjustments */
@media (max-height: 480px) and (orientation: landscape) {
    .nav-menu {
        padding-top: 4rem;
        gap: 1rem;
    }

    .nav-menu .nav-link {
        font-size: 1rem;
    }

    .hero {
        padding: 6rem 0 3rem 0;
    }
}