/* ===============================================
   MOBILE & TABLET RESPONSIVENESS FIXES
   =============================================== */

/* Tablet breakpoint (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

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

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

    .hero p {
        font-size: 1.1rem;
    }
}

/* Mobile breakpoint (up to 768px) */
@media (max-width: 768px) {

    /* Force single column for all grids */
    .service-grid,
    .feature-grid,
    .stats-grid,
    .frequency-grid,
    .included-grid,
    .why-grid,
    .renovation-services,
    .row {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Typography scaling */
    .hero h1,
    h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 1.2;
    }

    .hero h2,
    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    h3 {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .hero p,
    p {
        font-size: clamp(0.95rem, 4vw, 1.05rem);
        line-height: 1.6;
    }

    /* Hero section */
    .hero-inner {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
    }

    .hero-copy,
    .hero-image {
        max-width: 100%;
    }

    /* Service cards */
    .service-card,
    .feature-card,
    .stat-card,
    .frequency-card,
    .renovation-card {
        padding: 1.5rem;
        margin-bottom: 0;
    }

    .service-card h3,
    .feature-card h3 {
        font-size: 1.25rem;
    }

    /* Buttons */
    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    /* CTA sections */
    .cta-content {
        padding: 2rem 1rem;
    }

    .cta-content h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .cta-content p {
        margin-bottom: 1.5rem;
    }

    .cta-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Stats section */
    .stats-section {
        padding: 3rem 0;
    }

    /* About section */
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Contact form */
    .contact-form {
        padding: 1.5rem;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    /* Footer buttons spacing */
    .footer-contact-grid a {
        margin: 0.5rem 0;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    .hero-image img {
        border-radius: 12px;
    }

    /* Spacing adjustments */
    section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    /* Pill buttons */
    .pill {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* Extra small mobile (up to 480px) */
@media (max-width: 480px) {

    .hero h1,
    h1 {
        font-size: 1.75rem;
    }

    .hero h2,
    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .service-card,
    .feature-card,
    .renovation-card {
        padding: 1.25rem;
    }

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }

    section {
        padding: 2rem 0;
    }
}

/* Fix specific problem areas from audit */

/* Hemstadning page - included items grid */
@media (max-width: 768px) {
    .included-items {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .included-item {
        width: 100%;
        padding: 0.875rem;
    }
}

/* Renovering page - service cards */
@media (max-width: 768px) {
    .renovation-services {
        display: flex;
        flex-direction: column;
    }

    .renovation-card {
        width: 100%;
    }

    .renovation-card h3 {
        font-size: 1.25rem;
    }

    .renovation-card p {
        font-size: 0.95rem;
    }
}

/* Chat widget mobile adjustments */
@media (max-width: 768px) {
    #chat-widget {
        bottom: 16px;
        right: 16px;
    }

    #chat-toggle {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    #chat-box {
        width: calc(100vw - 32px);
        max-width: 400px;
        right: 16px;
        bottom: 80px;
    }
}

/* reCAPTCHA badge mobile position */
@media (max-width: 768px) {
    .grecaptcha-badge {
        bottom: 80px !important;
    }
}