/*
 * mobile.css — Mobile responsiveness improvements for SaaS2Agent landing page
 * Targets: 360px, 375px, 390px, 414px, 430px common widths + 768px tablet
 * Does NOT alter desktop layout (min-width > 1024px is untouched).
 *
 * Sections covered:
 *  1. Global / body overflow fix
 *  2. Typography scale
 *  3. Header / navbar
 *  4. Hero section
 *  5. Why-SaaS2Agent (value cards)
 *  6. Services grid
 *  7. Stats section
 *  8. How It Works (process)
 *  9. Industry slider
 * 10. Case studies slider
 * 11. Tech stack grid
 * 12. Blog cards
 * 13. FAQ section
 * 14. Contact / form section
 * 15. Trust badges
 * 16. Footer
 * 17. Back-to-top & misc
 */

/* ============================================================
   1. GLOBAL — text size adjustment only
   NOTE: overflow-x:hidden is intentionally NOT set on sections/header/footer.
   Per the CSS spec, setting overflow-x:hidden without an explicit overflow-y
   implicitly sets overflow-y:auto, which clips the absolutely-positioned decorative
   pseudo-elements (::before/::after radial gradients, backgrounds) that extend
   vertically beyond section bounds, making sections appear blank. It also clips
   nav dropdown menus at the header boundary.
   body already has overflow-x:hidden in the inline critical <style> block.
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
}

/* ============================================================
   2. TYPOGRAPHY — improved scale for 360–768 px
   ============================================================ */

/* Between 769 – 1024 px (tablet landscape) the desktop style is fine.
   768 px and below we start scaling. */
@media (max-width: 768px) {
    h1 {
        font-size: 2.1rem;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.2rem;
        line-height: 1.35;
    }

    .section-header p {
        font-size: 1rem;
        line-height: 1.7;
    }

    p {
        line-height: 1.75;
    }
}

@media (max-width: 430px) {
    h1 {
        font-size: 1.85rem;
    }

    h2 {
        font-size: 1.55rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    p {
        font-size: 0.95rem;
    }

    .section-header p {
        font-size: 0.95rem;
    }
}

@media (max-width: 375px) {
    h1 {
        font-size: 1.65rem;
    }

    h2 {
        font-size: 1.4rem;
    }
}

/* ============================================================
   3. HEADER / NAVBAR
   ============================================================ */
@media (max-width: 768px) {
    header {
        padding: 0.9rem 0;
    }

    .logo {
        font-size: 1.2rem;
    }

    .logo img {
        height: 2rem;
    }

    /* Ensure the hamburger has a large enough tap target */
    .mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile nav drawer */
    .nav-wrapper {
        padding-top: 5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links a {
        padding: 0.85rem 0;
        font-size: 1rem;
    }

    .cta-buttons {
        margin-top: 0.5rem;
        gap: 0.75rem;
    }

    .cta-buttons .btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        min-height: 48px;
    }
}

/* ============================================================
   4. HERO SECTION
   ============================================================ */
@media (max-width: 1024px) {
    .hero {
        padding: 7rem 0 3rem;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 5.5rem 0 2.5rem;
    }

    .hero .container {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content .badge {
        margin-bottom: 1rem;
    }

    .hero-cta {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 320px;
        min-height: 52px;
        font-size: 1rem;
    }

    .hero-image {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    .hero-image img {
        max-width: 100%;
        height: auto;
    }

    .hero-clients {
        margin-top: 1.5rem;
    }

    .client-logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* "Shield Your SaaS" CTA block inside hero */
    .why-cta {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .why-cta h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .why-cta p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .why-cta .btn {
        width: 100%;
        max-width: 280px;
        min-height: 48px;
    }
}

@media (max-width: 430px) {
    .hero {
        padding: 5rem 0 2rem;
    }

    /* Glitch "SaaS is Dead" text */
    .glitch-container {
        position: relative;
        top: auto;
        right: auto;
        margin: 0.75rem auto 0;
        text-align: center;
        z-index: 2;
        width: 100%;
    }

    .glitch-text {
        font-size: 1rem;
        letter-spacing: 0.06em;
    }
}

/* ============================================================
   5. WHY SAAS2AGENT — Value Cards
   ============================================================ */
@media (max-width: 768px) {
    .why-saas2agent {
        padding: 3rem 0;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .value-card {
        padding: 1.5rem;
        max-width: 100%;
    }

    .value-icon {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .value-benefits {
        margin-top: 0.75rem;
    }

    .value-benefits li {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
}

/* ============================================================
   6. SERVICES GRID
   ============================================================ */
@media (max-width: 768px) {
    .services {
        padding: 3rem 0;
    }

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

    .service-card {
        padding: 1.5rem;
    }

    .service-icon {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 430px) {
    .services-grid {
        gap: 1rem;
    }
}

/* ============================================================
   7. STATS SECTION
   ============================================================ */
@media (max-width: 768px) {
    .stats {
        padding: 2.5rem 0;
    }

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

@media (max-width: 430px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .stat-number {
        font-size: 2.25rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }
}

/* ============================================================
   8. HOW IT WORKS — Process Section
   ============================================================ */
@media (max-width: 768px) {
    .how-it-works {
        padding: 3rem 0;
    }

    .process-container {
        margin-top: 2rem;
    }

    .process-card {
        /* !important needed: existing .process-card has flex-direction set inline
           via JS-activated class, and styles-deferred.css sets direction per step */
        flex-direction: column !important;
        margin-bottom: 2rem;
    }

    .process-card-content {
        /* !important needed: styles-deferred.css sets explicit width and margin-left
           for the two-column timeline layout at 992px+ */
        width: 100% !important;
        margin-left: 0 !important;
        padding: 1.5rem;
    }

    .process-image {
        height: 160px;
        margin-top: 1rem;
    }

    .tech-tags {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .tech-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    /* Hide the decorative timeline on very narrow screens */
    .process-timeline {
        display: none;
    }
}

/* ============================================================
   9. INDUSTRY CAROUSEL / SLIDER
   ============================================================ */
@media (max-width: 768px) {
    .industry-carousel {
        padding: 3rem 0;
        overflow: hidden;
    }

    /* Make slides full-width */
    .industry-slide {
        padding: 0 8px;
    }

    .industry-card {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .industry-card h3 {
        font-size: 1.1rem;
    }

    .industry-subheading {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }

    .industry-label {
        font-size: 0.75rem;
    }

    .industry-workflows li {
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 0.35rem;
    }

    .industry-reference {
        margin-top: 1rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .industry-reference a {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    /* Navigation buttons - ensure they stay accessible */
    .industry-slider-prev,
    .industry-slider-next {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .industry-slider-prev {
        left: 4px;
    }

    .industry-slider-next {
        right: 4px;
    }

    /* Bottom CTA */
    .industry-bottom-cta {
        padding: 1.5rem;
        text-align: center;
    }

    .industry-bottom-cta h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .industry-bottom-cta .btn {
        width: 100%;
        max-width: 280px;
        min-height: 48px;
    }
}

@media (max-width: 430px) {
    .industry-slide {
        padding: 0 4px;
    }

    .industry-card {
        padding: 1rem;
    }

    .industry-card h3 {
        font-size: 1rem;
    }
}

/* ============================================================
  10. CASE STUDIES SLIDER
   ============================================================ */
@media (max-width: 768px) {
    .use-cases {
        padding: 3rem 0;
        overflow: hidden;
    }

    .cases-slider-container {
        overflow: hidden;
    }

    /* Note: .cases-slider width is controlled by JS (see js/script.js →
       createSliderDots / initCaseStudySlider). The track is set to
       (slidesCount * 100)% and each slide to (100 / slidesCount)%.
       Overriding these values here would break the slide calculations. */

    .case-card {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 4px;
    }

    .case-content {
        padding: 1.5rem;
    }

    .case-content h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .quote p {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .case-image {
        min-height: 180px;
        border-radius: 0 0 12px 12px;
    }

    .case-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Slider controls */
    .slider-controls {
        margin-top: 1.25rem;
        gap: 1rem;
    }

    .slider-controls button {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ============================================================
  11. TECH STACK GRID
   ============================================================ */
@media (max-width: 768px) {
    .tech-stack {
        padding: 3rem 0;
    }

    .tech-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .tech-card {
        padding: 1.5rem;
    }

    .tech-card h3 {
        font-size: 1.05rem;
        margin-bottom: 0.5rem;
    }

    .tech-card p {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .tech-stack-heading {
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .tech-stack-tags {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .tech-stack-tag {
        font-size: 0.78rem;
        padding: 0.25rem 0.6rem;
    }
}

/* Blog cards (reuse tech-grid at same breakpoints) */
@media (max-width: 768px) {
    .tech-card .btn-outline {
        width: 100%;
        text-align: center;
        min-height: 44px;
        margin-top: 0.5rem;
    }
}

/* ============================================================
  12. FAQ SECTION
   ============================================================ */
@media (max-width: 768px) {
    .faq {
        padding: 3rem 0;
    }

    .faq-grid {
        gap: 0.75rem;
    }

    .faq-item {
        border-radius: 10px;
    }

    .faq-question {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 1rem 0;
        min-height: 52px;
    }

    .faq-question i {
        flex-shrink: 0;
        font-size: 0.9rem;
    }

    /* Reduce oversized right padding on mobile */
    .faq-answer {
        padding-right: 1.5rem;
    }

    .faq-answer p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

/* ============================================================
  13. CONTACT / LEAD-FORM SECTION
   ============================================================ */
@media (max-width: 768px) {
    .contact {
        padding: 3rem 0;
    }

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

    .contact-info {
        text-align: center;
    }

    .contact-info h2 {
        font-size: 1.6rem;
        margin-bottom: 0.75rem;
    }

    .contact-info p {
        font-size: 0.95rem;
    }

    .contact-methods {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .contact-method {
        font-size: 0.9rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        /* iOS Safari auto-zooms on form inputs with font-size < 16px (1rem).
           Setting font-size: 1rem prevents the unwanted zoom on focus. */
        font-size: 1rem;
        padding: 0.75rem 1rem;
        min-height: 48px;
    }

    .form-group textarea {
        min-height: auto;
    }

    #signup-form .btn-primary {
        min-height: 52px;
        font-size: 1rem;
    }
}

@media (max-width: 430px) {
    .contact-form {
        padding: 1.25rem;
    }
}

/* ============================================================
  14. TRUST BADGES
   ============================================================ */
@media (max-width: 768px) {
    .trust-badges .container {
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .trust-badge {
        flex: 0 1 calc(50% - 0.75rem);
        min-width: 120px;
    }

    .trust-badge-logo {
        width: 90px;
        height: 36px;
    }
}

@media (max-width: 430px) {
    .trust-badges {
        padding: 2rem 0;
    }

    .trust-badges .container {
        gap: 1.25rem;
    }
}

/* ============================================================
  15. FOOTER
   ============================================================ */
@media (max-width: 768px) {
    footer {
        padding: 3rem 0 1.5rem;
    }

    .footer-newsletter {
        padding: 1.5rem;
        text-align: center;
    }

    .footer-newsletter h3 {
        font-size: 1.15rem;
    }

    .footer-newsletter p {
        font-size: 0.9rem;
    }

    .newsletter-form-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .newsletter-form-group input,
    .newsletter-form-group .btn {
        width: 100%;
        min-height: 48px;
        border-radius: 8px;
        /* iOS Safari auto-zooms on inputs with font-size < 16px — keep at 1rem */
        font-size: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        margin: 0 auto 1rem;
    }

    .social-links {
        justify-content: center;
    }

    .social-links a {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .footer-links-column {
        text-align: center;
    }

    .footer-links-column li {
        margin-bottom: 0.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .legal-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .legal-links a {
        font-size: 0.8rem;
    }
}

/* ============================================================
  16. SECTION SPACING — reduce xxl padding on mobile
   ============================================================ */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 2rem;
    }

    .section-header h2 {
        margin-bottom: 0.75rem;
    }

    /* Container side padding bump for narrow screens */
    .container {
        padding: 0 1.25rem;
    }
}

@media (max-width: 375px) {
    .container {
        padding: 0 1rem;
    }
}

/* ============================================================
  17. BACK-TO-TOP & MISC
   ============================================================ */
@media (max-width: 768px) {
    /* Back-to-top button — larger tap target */
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 1.5rem;
        right: 1.25rem;
    }

    /* Scroll indicator — hide on tiny screens to save space */
    .scroll-indicator {
        display: none;
    }

    /* Badge text slightly smaller */
    .badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
    }

    /* Section tags */
    .section-tag {
        font-size: 0.8rem;
    }
}

/* ============================================================
  18. GRIDS — explicit single-column safety net for very small
       screens where minmax() might still cause overflow.
       !important is intentional here: overrides auto-fill minmax()
       values (e.g. minmax(350px,1fr)) in styles-deferred.css that
       cannot be reset via selector specificity alone.
   ============================================================ */
@media (max-width: 480px) {
    .values-grid,
    .services-grid,
    .tech-grid {
        /* !important overrides auto-fill minmax(300-350px, 1fr) from
           styles-deferred.css which would still cause 1 oversized column
           and potential overflow at narrow viewport widths */
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
  19. CTA BUTTONS — accessible touch targets everywhere
   ============================================================ */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }

    .btn-large {
        min-height: 52px;
        padding: 0.9rem 1.5rem;
    }

    /* Prevent multiple CTAs side by side on narrow screens */
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    /* Industry and section-level CTA blocks */
    .industry-bottom-cta .btn,
    .why-cta .btn {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        text-align: center;
    }
}