/**
 * Lorikeet Security - Global Blog Mobile Responsive Stylesheet
 * Ensures clean rendering, legible typography, no horizontal scroll,
 * and adaptive layouts on all mobile viewports (<= 768px and <= 480px).
 */

/* 1. Global Viewport & Container Protections */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.blog-article,
.article-container,
.blog-content {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 2. Responsive Images & Media */
.blog-hero-image,
.blog-article img,
.blog-content img,
.platform-screenshot {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    box-sizing: border-box;
}

/* 3. Inline Code & Monospace Wrapping */
.blog-content code,
.blog-article code,
code:not(.code-block) {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Code Blocks & ASCII Diagrams */
.blog-content pre,
.blog-article pre,
pre code {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* 5. Comparison Tables */
.comparison-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    position: relative;
    border-radius: 8px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

/* Tablet & Mobile (< 768px) */
@media (max-width: 768px) {
    .blog-article {
        padding: 0 16px !important;
        margin: 0 auto !important;
    }

    .blog-back-link {
        margin-top: 24px !important;
        margin-bottom: 20px !important;
        font-size: 0.88rem !important;
    }

    .blog-header {
        margin-bottom: 32px !important;
    }

    .blog-header h1 {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
        letter-spacing: -0.3px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .blog-meta {
        gap: 10px 16px !important;
        font-size: 0.82rem !important;
    }

    .blog-meta span {
        gap: 5px !important;
    }

    .blog-hero-image {
        margin-bottom: 24px !important;
        border-radius: 8px !important;
    }

    .blog-content h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-top: 36px !important;
        margin-bottom: 14px !important;
        word-break: break-word !important;
    }

    .blog-content h3 {
        font-size: 1.18rem !important;
        line-height: 1.35 !important;
        margin-top: 26px !important;
        margin-bottom: 10px !important;
        word-break: break-word !important;
    }

    .blog-content h4 {
        font-size: 1.05rem !important;
        margin-top: 20px !important;
        margin-bottom: 8px !important;
    }

    .blog-content p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
        margin-bottom: 18px !important;
    }

    .blog-content ul,
    .blog-content ol {
        font-size: 1rem !important;
        line-height: 1.75 !important;
        padding-left: 20px !important;
        margin-bottom: 20px !important;
    }

    .blog-content li {
        margin-bottom: 6px !important;
    }

    .blog-content pre {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        padding: 14px 16px !important;
        margin: 16px 0 20px !important;
        border-radius: 8px !important;
    }

    .comparison-table {
        min-width: 500px !important;
    }

    .comparison-table thead th {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    .comparison-table tbody td {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
    }

    .blog-callout,
    .blog-warn {
        padding: 16px 18px !important;
        margin: 22px 0 !important;
        border-radius: 6px !important;
        border-left-width: 3px !important;
    }

    .blog-callout p,
    .blog-warn p {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }

    .ioc-block {
        padding: 14px 16px !important;
        margin: 18px 0 22px !important;
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
        border-radius: 8px !important;
    }

    .timeline-container {
        margin: 22px 0 26px 10px !important;
        padding-left: 18px !important;
        border-left-width: 2px !important;
    }

    .timeline-item {
        margin-bottom: 20px !important;
    }

    .timeline-item::before {
        left: -23px !important;
        top: 6px !important;
        width: 8px !important;
        height: 8px !important;
    }

    .timeline-time {
        font-size: 0.8rem !important;
    }

    .timeline-title {
        font-size: 0.98rem !important;
    }

    .timeline-desc {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }

    .blog-cta-box {
        padding: 30px 20px !important;
        margin: 40px 0 30px 0 !important;
        border-radius: 12px !important;
    }

    .blog-cta-box h2 {
        font-size: 1.38rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .blog-cta-box p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 22px !important;
    }

    .blog-cta-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 13px 20px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }

    .blog-divider {
        margin: 36px 0 !important;
        width: 48px !important;
        height: 2px !important;
    }
}

/* Small Mobile Screens (< 480px) */
@media (max-width: 480px) {
    .blog-article {
        padding: 0 14px !important;
    }

    .blog-header h1 {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
    }

    .blog-content h2 {
        font-size: 1.25rem !important;
        margin-top: 30px !important;
    }

    .blog-content h3 {
        font-size: 1.1rem !important;
    }

    .blog-content p,
    .blog-content ul,
    .blog-content ol {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    .blog-content pre {
        font-size: 0.75rem !important;
        padding: 12px !important;
    }

    .blog-cta-box {
        padding: 24px 16px !important;
    }

    .blog-cta-box h2 {
        font-size: 1.25rem !important;
    }
}