/* ===========================================
   BLOG MOBILE STYLES
   Optimized for mobile devices (< 768px)
   =========================================== */

/* ===========================================
   MOBILE NAVIGATION
   =========================================== */

@media (max-width: 767px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .nav-glass {
        padding: 8px 0;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .nav-container {
        padding: 0 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .logo-modern {
        transform: none;
        margin-left: 0;
        max-width: calc(100vw - 80px);
        flex-shrink: 1;
    }

    /* Header tagline - hide on very small screens, smaller on mobile */
    .logo-modern span[style*="font-size: 12px"] {
        font-size: 9px !important;
        margin-top: -8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }

    /* Mobile Menu */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
    }

    .nav-menu .nav-link {
        font-size: 1.4rem;
        padding: 12px 24px;
    }

    .nav-menu .nav-auth {
        flex-direction: column;
        gap: 16px;
        margin-top: 20px;
    }

    .nav-menu .nav-cta {
        padding: 16px 40px;
        font-size: 1.1rem;
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .mobile-menu-btn span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: var(--gray-700);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

/* ===========================================
   MOBILE BLOG LIST PAGE
   =========================================== */

@media (max-width: 767px) {
    .blog-hero {
        padding: 80px 16px 20px;
        text-align: center;
    }

    .blog-hero h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .blog-hero .tagline {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 0 10px;
    }

    /* Blog Filter Section */
    .blog-filter-section {
        padding: 12px;
        margin: 0 -16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .blog-filter-section::-webkit-scrollbar {
        display: none;
    }

    .blog-category-filters {
        display: flex;
        gap: 8px;
        padding: 0 16px;
        min-width: max-content;
    }

    .category-filter-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        white-space: nowrap;
        border-radius: 20px;
        flex-shrink: 0;
    }

    /* Blog Grid */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }

    /* Blog Cards */
    .blog-card {
        border-radius: 16px;
        overflow: hidden;
    }

    .blog-card-thumbnail {
        height: 180px;
        aspect-ratio: 16 / 9;
    }

    .blog-card-thumbnail picture {
        width: 100%;
        height: 100%;
        display: block;
    }

    .blog-card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .blog-card-image {
        height: 180px;
    }

    .blog-card-content {
        padding: 16px;
    }

    .blog-card-title {
        font-size: 1.1rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .blog-card-excerpt {
        font-size: 0.9rem;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }

    .blog-card-meta {
        font-size: 0.8rem;
        margin-top: 12px;
    }

    .blog-card-category {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

/* ===========================================
   MOBILE BLOG POST PAGE - HEADER
   =========================================== */

@media (max-width: 767px) {
    /* Breadcrumbs - Hidden on mobile but kept in HTML for SEO */
    .breadcrumbs {
        display: none !important;
    }

    /* Blog Post Hero - Full width on mobile */
    .blog-post-hero {
        flex-direction: column;
        gap: 20px;
        padding: 16px;
        text-align: center;
        margin: 80px 16px 32px !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }

    .blog-hero-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 180px;
        max-height: 250px;
        aspect-ratio: 16 / 9;
    }

    .blog-hero-image picture {
        width: 100%;
        height: 100%;
        display: block;
    }

    .blog-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .blog-hero-content {
        width: 100%;
    }

    .blog-hero-content h1 {
        font-size: 1.5rem !important;
        line-height: 1.25;
        word-wrap: break-word;
    }

    .blog-hero-content .subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Post Header - Extra top padding since breadcrumbs are hidden */
    .blog-post-header {
        padding: 120px 16px 24px !important;
        text-align: left;
    }

    .blog-post-meta-line {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
    }

    .blog-post-meta-line .category-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }

    .blog-post-meta-line .meta-item {
        font-size: 0.8rem;
    }

    .blog-post-meta-line .meta-item svg {
        width: 14px;
        height: 14px;
    }

    .blog-post-header h1 {
        font-size: 1.75rem;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .blog-post-header .subtitle {
        font-size: 1rem;
        line-height: 1.5;
        color: var(--gray-600);
    }

    /* Reading Progress Bar */
    .reading-progress {
        height: 3px;
    }
}

/* ===========================================
   MOBILE BLOG ARTICLE CONTENT
   =========================================== */

@media (max-width: 767px) {
    .blog-article {
        padding: 20px 16px 40px;
        max-width: 100%;
    }

    /* Typography */
    .blog-article p {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .blog-article > p:first-of-type {
        font-size: 1.1rem;
        line-height: 1.6;
        font-weight: 500;
    }

    .blog-article h2 {
        font-size: 1.35rem;
        line-height: 1.3;
        margin: 32px 0 16px;
        padding-top: 16px;
    }

    .blog-article h3 {
        font-size: 1.15rem;
        line-height: 1.35;
        margin: 24px 0 12px;
    }

    .blog-article h4 {
        font-size: 1.05rem;
        margin: 20px 0 10px;
    }

    /* Lists */
    .blog-article ul,
    .blog-article ol {
        padding-left: 20px;
        margin: 16px 0;
    }

    .blog-article li {
        font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 10px;
        padding-left: 4px;
    }

    .blog-article li::marker {
        color: var(--primary-purple);
    }

    /* Links */
    .blog-article a {
        word-break: break-word;
    }

    /* Images */
    .blog-article img {
        border-radius: 12px;
        margin: 20px -16px;
        width: calc(100% + 32px);
        max-width: calc(100% + 32px);
    }

    /* Code blocks */
    .blog-article pre,
    .blog-article code {
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .blog-article pre {
        padding: 16px;
        margin: 16px -16px;
        border-radius: 0;
    }

    /* Blockquotes */
    .blog-article blockquote {
        margin: 20px 0;
        padding: 16px 20px;
        border-left-width: 3px;
        font-size: 1rem;
    }
}

/* ===========================================
   MOBILE INFO BOXES & CARDS
   =========================================== */

@media (max-width: 767px) {
    /* Info, Tip, Warning Boxes */
    .info-box,
    .tip-box,
    .warning-box {
        padding: 14px 16px;
        margin: 20px 0;
        border-radius: 12px;
        gap: 10px;
        flex-direction: row;
        align-items: flex-start;
    }

    .info-box .icon,
    .tip-box .icon,
    .warning-box .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .info-box p,
    .tip-box p,
    .warning-box p {
        font-size: 0.9rem;
        line-height: 1.55;
        margin: 0;
    }

    /* Key Points Box */
    .key-points {
        padding: 18px 16px;
        margin: 20px 0;
        border-radius: 12px;
    }

    .key-points h4 {
        font-size: 0.8rem;
        gap: 8px;
        margin-bottom: 12px;
    }

    .key-points h4 svg {
        width: 16px;
        height: 16px;
    }

    .key-points ul {
        padding-left: 16px;
        margin: 0;
    }

    .key-points li {
        font-size: 0.9rem;
        line-height: 1.55;
        margin-bottom: 8px;
    }

    /* Definition Cards */
    .definition-card {
        padding: 16px;
        margin: 16px 0;
        border-radius: 12px;
    }

    .definition-card .term {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .definition-card p {
        font-size: 0.9rem;
        line-height: 1.55;
        margin: 0;
    }
}

/* ===========================================
   MOBILE FAQ SECTION
   =========================================== */

@media (max-width: 767px) {
    .faq-section {
        margin: 32px 0;
    }

    .faq-section h2 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .faq-item {
        margin-bottom: 10px;
        border-radius: 12px;
    }

    .faq-question {
        padding: 14px 16px;
        font-size: 0.95rem;
        line-height: 1.4;
        gap: 12px;
    }

    .faq-question svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .faq-answer-inner {
        padding: 0 16px 14px;
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* ===========================================
   MOBILE CTA BOX
   =========================================== */

@media (max-width: 767px) {
    .blog-cta-box {
        padding: 24px 20px;
        margin: 32px -16px;
        border-radius: 0;
        text-align: center;
    }

    .blog-cta-box h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .blog-cta-box p {
        font-size: 0.9rem;
        margin-bottom: 16px;
    }

    .blog-cta-box .cta-button {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* ===========================================
   MOBILE RELATED POSTS
   =========================================== */

@media (max-width: 767px) {
    .related-posts {
        padding: 32px 16px;
    }

    .related-posts h3 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .related-post-card {
        border-radius: 12px;
        overflow: hidden;
    }

    .related-post-card .card-thumbnail {
        height: 60px;
        width: 60px;
        flex-shrink: 0;
    }

    .related-post-card .card-content {
        padding: 12px 16px;
    }

    .related-post-card .category {
        font-size: 0.7rem;
    }

    .related-post-card h4 {
        font-size: 0.95rem;
        line-height: 1.35;
        margin: 4px 0;
    }

    .related-post-card .excerpt {
        display: none;
    }
}

/* ===========================================
   MOBILE SOCIAL SHARE
   =========================================== */

@media (max-width: 767px) {
    .social-share {
        padding: 24px 16px;
        text-align: center;
    }

    .social-share h4 {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .share-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .share-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        border-radius: 8px;
        flex: 1;
        min-width: 100px;
        max-width: 140px;
        justify-content: center;
    }

    .share-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ===========================================
   MOBILE DEMO SLIDE CTA
   =========================================== */

@media (max-width: 767px) {
    /* Hide desktop slide-in CTA on mobile */
    .demo-slide-cta {
        display: none !important;
    }
}

/* ===========================================
   MOBILE FOOTER
   =========================================== */

@media (max-width: 767px) {
    .footer {
        padding: 40px 16px 40px;
        overflow-x: hidden;
    }

    .footer .container {
        max-width: 100%;
        padding: 0;
        overflow: hidden;
    }

    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px;
        grid-template-columns: none !important;
    }

    .footer-brand {
        text-align: center;
        max-width: 100%;
        width: 100%;
    }

    .footer-brand .logo-modern {
        justify-content: center;
        margin-bottom: 12px;
        max-width: 100%;
    }

    .footer-brand p {
        font-size: 0.9rem;
        padding: 0 16px;
    }

    .footer-links {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .footer-column {
        min-width: 0;
        overflow: hidden;
    }

    .footer-column h4 {
        font-size: 0.85rem;
        margin-bottom: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer-column a {
        font-size: 0.8rem;
        padding: 6px 0;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding-top: 24px;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }

    .social-links {
        justify-content: center;
    }
}

/* ===========================================
   MOBILE TOUCH INTERACTIONS
   =========================================== */

@media (max-width: 767px) {
    /* Larger touch targets */
    .blog-card,
    .faq-question,
    .share-btn,
    .category-filter-btn,
    .related-post-card {
        -webkit-tap-highlight-color: transparent;
    }

    /* Active states for touch */
    .blog-card:active {
        transform: scale(0.98);
    }

    .category-filter-btn:active {
        transform: scale(0.95);
    }

    .share-btn:active {
        transform: scale(0.95);
    }

    .faq-question:active {
        background: rgba(139, 92, 246, 0.08);
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ===========================================
   EXTRA SMALL SCREENS (< 360px)
   =========================================== */

@media (max-width: 359px) {
    /* Header logo tagline - hide on very small screens */
    .logo-modern span[style*="font-size: 12px"] {
        display: none !important;
    }

    .blog-post-header h1 {
        font-size: 1.5rem;
    }

    .blog-hero-content h1 {
        font-size: 1.3rem !important;
    }

    .blog-article p {
        font-size: 0.95rem;
    }

    .blog-article h2 {
        font-size: 1.25rem;
    }

    /* Footer - single column on very small screens */
    .footer-links {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

/* ===========================================
   LANDSCAPE MODE
   =========================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .blog-post-header {
        padding: 100px 24px 20px;
    }

    .blog-post-header h1 {
        font-size: 1.5rem;
    }

    .blog-article {
        padding: 16px 24px 40px;
    }
}

/* ===========================================
   SAFE AREA INSETS (for notched phones)
   =========================================== */

@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        .nav-glass {
            padding-top: max(8px, env(safe-area-inset-top));
        }

        .footer {
            padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
        }
    }
}