/* ============================================
   BLOG MOBILE OPTIMIZATIONS
   תיקוני מובייל לכל דפי הבלוג
============================================ */

/* Tablet - 768px to 900px */
@media (max-width: 900px) {
    /* Hero sections */
    .blog-post-hero,
    .comparison-hero {
        padding: 80px 0 50px;
        min-height: auto;
    }

    .blog-post-hero h1,
    .comparison-hero h1 {
        font-size: 2rem;
    }

    /* Grids - 2 columns on tablet */
    .factors-grid,
    .related-grid,
    .recommendation-cards,
    .scenarios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Tables - enable horizontal scroll */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .price-table,
    .comparison-table {
        min-width: 600px;
    }

    /* Content spacing */
    .blog-content,
    .comparison-content {
        padding: 50px 20px;
    }
}

/* Mobile - up to 768px */
@media (max-width: 768px) {
    /* Hero adjustments */
    .blog-hero,
    .blog-post-hero,
    .comparison-hero {
        padding: 70px 0 40px;
        min-height: auto;
    }

    .blog-hero h1 {
        font-size: 1.75rem;
        margin-bottom: 12px;
    }

    .blog-post-hero h1,
    .comparison-hero h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .blog-hero p,
    .blog-post-hero .lead,
    .comparison-hero .lead {
        font-size: 0.95rem;
    }

    .blog-post-meta {
        flex-wrap: wrap;
        gap: 12px;
        font-size: 0.85rem;
    }

    /* Content container */
    .blog-content,
    .comparison-content {
        padding: 40px 16px 60px;
    }

    /* TOC box */
    .toc-box {
        padding: 20px;
        margin-bottom: 32px;
    }

    .toc-box h3 {
        font-size: 1.1rem;
    }

    .toc-box ol {
        padding-right: 16px;
    }

    .toc-box li {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    /* Quick summary box */
    .quick-summary,
    .tldr-box {
        padding: 24px 20px;
        margin: 24px 0;
    }

    .quick-summary h2,
    .tldr-box h3 {
        font-size: 1.25rem;
        margin-bottom: 16px;
    }

    /* All grids - 1 column on mobile */
    .blog-grid,
    .factors-grid,
    .related-grid,
    .recommendation-cards,
    .scenarios-grid,
    .summary-cards,
    .pros-cons-section {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Tables - smaller on mobile */
    .price-table,
    .comparison-table {
        font-size: 0.8rem;
        min-width: 500px;
    }

    .price-table th,
    .price-table td {
        padding: 10px 8px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 10px;
    }

    /* Table wrapper - clear scroll indication */
    .table-wrapper {
        position: relative;
    }

    .table-wrapper::after {
        content: '← גלול לצדדים →';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 8px;
    }

    /* Typography */
    .blog-content h2,
    .comparison-content h2 {
        font-size: 1.5rem;
        margin: 40px 0 20px;
    }

    .blog-content h3,
    .comparison-content h3 {
        font-size: 1.2rem;
        margin: 28px 0 12px;
    }

    .blog-content p,
    .comparison-content p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Cards */
    .factor-card,
    .scenario-card,
    .recommendation-card,
    .summary-card {
        padding: 20px;
    }

    .factor-card h4,
    .scenario-card h4 {
        font-size: 1rem;
    }

    /* CTA sections */
    .blog-cta,
    .cta-section {
        padding: 32px 20px;
        border-radius: 12px;
    }

    .blog-cta h2,
    .cta-section h2 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .blog-cta p,
    .cta-section p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .cta-buttons .btn,
    .cta-buttons a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Author box */
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
    }

    .author-box .author-image img {
        width: 70px;
        height: 70px;
    }

    .author-keywords {
        justify-content: center;
    }

    /* FAQ items */
    .faq-item {
        margin-bottom: 12px;
    }

    .faq-question {
        padding: 16px;
        font-size: 1rem;
    }

    .faq-answer {
        padding: 0 16px 16px;
    }

    .faq-answer p {
        font-size: 0.95rem;
    }

    /* Scenarios section */
    .scenarios-section {
        padding: 32px 20px;
        border-radius: 16px;
    }

    .scenarios-section h2 {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    /* Tips box */
    .tips-box {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .tips-box h3 {
        font-size: 1.2rem;
    }

    .tips-box li {
        font-size: 0.95rem;
    }

    /* Warning box */
    .warning-box {
        padding: 16px 20px;
        border-radius: 10px;
    }

    .warning-box p {
        font-size: 0.95rem;
    }

    /* Related articles */
    .related-articles {
        margin-top: 40px;
        padding-top: 32px;
    }

    .related-articles h2 {
        margin-bottom: 24px;
    }

    .related-card {
        padding: 20px;
    }

    .related-card h3 {
        font-size: 1.05rem;
    }

    .related-card p {
        font-size: 0.9rem;
    }

    /* Tags */
    .article-tags {
        padding-block: 1.5rem;
    }

    .tags-list {
        gap: 8px;
    }

    .tag-link {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* Small mobile - up to 375px */
@media (max-width: 375px) {
    .blog-hero h1,
    .blog-post-hero h1,
    .comparison-hero h1 {
        font-size: 1.5rem;
    }

    .blog-content,
    .comparison-content {
        padding: 32px 12px 48px;
    }

    .quick-summary,
    .tldr-box,
    .tips-box,
    .blog-cta,
    .cta-section {
        padding: 20px 16px;
    }

    .price-table,
    .comparison-table {
        font-size: 0.75rem;
    }

    .price-table th,
    .price-table td {
        padding: 8px 6px;
    }

    .blog-content h2,
    .comparison-content h2 {
        font-size: 1.35rem;
    }

    .blog-content p,
    .comparison-content p {
        font-size: 0.95rem;
    }
}