/* Mobile Full Width Containers
   Make containers full width on mobile for better UX
   ===================================================== */

/* Mobile-first: Full width containers on smaller screens */
@media (width <= 768px) {
    /* Make all garden containers full width on mobile */
    .garden-container {
        max-width: 100% !important;
        padding-left: var(--space-4) !important; /* Reduce padding for mobile */
        padding-right: var(--space-4) !important;
    }

    /* Blog post specific adjustments */
    .blog-post-page .garden-container,
    .blog-index-page .garden-container {
        max-width: 100% !important;
        padding-left: var(--space-3) !important; /* Even less padding for blog content */
        padding-right: var(--space-3) !important;
    }

    /* Blog article wrapper adjustments */
    .blog-article-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important; /* Remove border radius on mobile for full edge-to-edge */
    }

    /* Blog panels full width */
    .blog-article-wrapper .garden-panel,
    .blog-post-page .garden-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }

    /* FAQ and other pages */
    .faq-page .garden-container,
    .about-page .garden-container,
    .contact-page .garden-container,
    .onboarding-page .garden-container {
        max-width: 100% !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Home page specific adjustments */
    .home-page .garden-container {
        max-width: 100% !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Strategy pages */
    .strategy-page .garden-container {
        max-width: 100% !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Remove any nested container constraints */
    .garden-container .garden-container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Article content within containers */
    .blog-article {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Panel content adjustments */
    .garden-panel__content {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Ensure form containers are also full width */
    .form-container,
    .contact-form-container,
    .onboarding-form-container {
        max-width: 100% !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Media query for extra small devices */
    @media (width <= 480px) {
        /* Even more compact on very small screens */
        .garden-container,
        .blog-post-page .garden-container,
        .blog-index-page .garden-container {
            padding-left: var(--space-2) !important;
            padding-right: var(--space-2) !important;
        }

        .blog-article,
        .garden-panel__content {
            padding-left: var(--space-3) !important;
            padding-right: var(--space-3) !important;
        }
    }
}

/* Tablet adjustments (between mobile and desktop) */
@media (width >= 769px) and (width <= 1024px) {
    /* Slightly wider containers on tablets but still more mobile-friendly */
    .garden-container {
        max-width: 95% !important;
        padding-left: var(--space-5) !important;
        padding-right: var(--space-5) !important;
    }

    .blog-post-page .garden-container,
    .blog-index-page .garden-container {
        max-width: 100% !important;
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }
}

/* Ensure content flows properly within full-width containers */
@media (width <= 768px) {
    /* Text content should have reasonable line lengths even in full-width containers */
    .blog-article p,
    .blog-article li,
    .article-content p,
    .article-content li {
        max-width: none; /* Remove any text-specific max-widths on mobile */
    }

    /* Images should be responsive within full-width containers */
    .garden-container img,
    .blog-article img,
    .article-content img {
        max-width: 100%;
        height: auto;
    }

    /* Tables should be scrollable on mobile */
    .garden-container table,
    .blog-article table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
}