/* ============================================
   VISORIA BLOG - MOBILE STYLES
   URL: visoria.app/blogs
   All classes use blog- prefix.
   ============================================ */

@media (max-width: 968px) {
    /* ============================================
       HEADER - MOBILE
       ============================================ */
    .blog-nav {
        padding: 0.75rem 1rem;
    }

    .blog-logo-image {
        max-height: 44px;
    }

    .blog-nav-links {
        gap: 1.25rem;
    }

    .blog-nav-links a {
        font-size: 0.95rem;
    }

    /* ============================================
       BLOG LISTING - MOBILE
       ============================================ */
    .blog-listing-main {
        padding: 100px 1rem 60px;
    }

    .blog-container {
        padding: 0 16px;
    }

    .blog-listing-title {
        font-size: 1.85rem;
        margin-bottom: 0.35rem;
    }

    .blog-listing-subtitle {
        font-size: 1.05rem;
        margin-bottom: 1.75rem;
    }

    .blog-articles {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-card-image-wrap {
        aspect-ratio: 16 / 9;
        border-radius: 20px 20px 0 0;
    }

    .blog-card-body {
        padding: 1.25rem 1.25rem;
    }

    .blog-card-meta {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .blog-card-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .blog-card-excerpt {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-card-cta {
        font-size: 0.9rem;
    }

    /* ============================================
       BLOG POST - MOBILE
       ============================================ */
    .blog-post-main {
        padding: 90px 0 60px;
    }

    .blog-post-container {
        padding: 0 16px;
    }

    .blog-post-header {
        margin-bottom: 1.5rem;
    }

    .blog-post-meta {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .blog-post-title {
        font-size: 1.65rem;
        line-height: 1.3;
    }

    .blog-post-cover {
        margin-bottom: 1.75rem;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        max-width: none;
    }

    .blog-post-cover-image {
        max-height: 240px;
    }

    .blog-post-content {
        font-size: 1rem;
        line-height: 1.65;
    }

    .blog-post-content p {
        margin-bottom: 1rem;
    }

    .blog-post-h2 {
        font-size: 1.3rem;
        margin: 2rem 0 0.75rem;
    }

    .blog-post-list {
        margin-bottom: 1.25rem;
        padding-left: 1.25rem;
    }

    .blog-post-list li {
        margin-bottom: 0.6rem;
        font-size: 0.98rem;
    }

    .blog-post-figure {
        margin: 1.5rem 0;
    }

    .blog-post-inline-image {
        border-radius: 12px;
    }

    .blog-post-figure figcaption {
        font-size: 0.85rem;
    }

    .blog-post-cta {
        padding: 1.5rem 1.25rem;
        margin-top: 2rem;
    }

    .blog-post-cta-text {
        font-size: 1rem;
        margin-bottom: 0.85rem;
    }

    .blog-post-cta-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
}