/* ===================================
   MOBILE VIEWPORT FIX
   Prevents horizontal scrolling and text cutoff on mobile
   Only applies to mobile devices (max-width: 768px)
   =================================== */

/* Desktop constraints - maintain normal layout */
@media screen and (min-width: 769px) {
    /* Keep existing review page styles intact */
    .article-page .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    
    .article-page .content-wrapper {
        max-width: none !important;
        width: auto !important;
    }
    
    .article-page .primary-article {
        max-width: none !important;
        width: auto !important;
    }
    
    /* Reset any global width overrides on desktop */
    body,
    html {
        width: auto !important;
        max-width: none !important;
        overflow-x: visible !important;
    }
}

/* Mobile-specific fixes */
@media screen and (max-width: 768px) {
    /* Viewport constraints */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box !important;
    }

    /* Main content wrapper constraints */
    .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* Container constraints */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Content wrapper constraints */
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Primary article constraints */
    .primary-article {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* All direct children of body */
    body > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* All divs within content areas */
    .content-wrapper div,
    .main-content div,
    .primary-article div {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Paragraphs and text content */
    p, li, td, th, span, a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        max-width: 100% !important;
    }

    /* Headers with responsive text */
    h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    h2 {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    h3 {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Code blocks and preformatted text */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

    /* Lists */
    ul, ol {
        max-width: 100% !important;
        padding-left: 20px !important;
    }

    /* Tables - allow horizontal scroll only for tables */
    .comparison-table-wrapper {
        max-width: 100vw !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 0 !important;
    }

    table {
        min-width: 100% !important;
    }

    /* Review specific elements */
    .review-header,
    .review-content,
    .review-body,
    .review-footer {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* Prevent absolute positioned elements from causing overflow */
    * {
        position: static !important;
    }

    /* Keep some positions for critical elements */
    .header-wrapper,
    .sticky-header,
    .comparison-table-wrapper th.feature-col,
    .comparison-table-wrapper td.feature-name {
        position: sticky !important;
    }

    /* Fix for any flex containers */
    .flex-container,
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    /* Hidden horizontal scrollbar but allow scrolling for tables */
    .comparison-table-wrapper::-webkit-scrollbar {
        height: 6px;
    }

    .comparison-table-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .comparison-table-wrapper::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
}

/* Ultra-small devices */
@media screen and (max-width: 375px) {
    .main-content,
    .content-wrapper,
    .primary-article {
        padding: 0 10px !important;
    }

    h1 {
        font-size: 1.35rem !important;
    }

    h2 {
        font-size: 1.15rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    p, li {
        font-size: 0.95rem !important;
    }
}

/* Landscape orientation fixes */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .header-wrapper {
        position: relative !important;
    }

    .main-content {
        margin-top: 0 !important;
    }
}

/* Print styles */
@media print {
    * {
        overflow: visible !important;
        max-width: none !important;
    }
}