/* Mobile-First Beautiful & Smooth Content View */

/* ============================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Compact body */
    body {
        line-height: 1.4 !important;
        font-size: 15px;
    }
    
    /* Reduce all spacing globally */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Ultra-compact padding */
    .py-5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-3 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
    .py-2 { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
    
    /* Ultra-compact margins */
    .mb-5 { margin-bottom: 0.75rem !important; }
    .mb-4 { margin-bottom: 0.6rem !important; }
    .mb-3 { margin-bottom: 0.5rem !important; }
    .mb-2 { margin-bottom: 0.4rem !important; }
    .mb-1 { margin-bottom: 0.3rem !important; }
    
    .mt-5 { margin-top: 0.75rem !important; }
    .mt-4 { margin-top: 0.6rem !important; }
    .mt-3 { margin-top: 0.5rem !important; }
    .mt-2 { margin-top: 0.4rem !important; }
    .mt-1 { margin-top: 0.3rem !important; }
    
    /* Compact gaps */
    .gap-4 { gap: 0.4rem !important; }
    .gap-3 { gap: 0.3rem !important; }
    .gap-2 { gap: 0.25rem !important; }
    
    /* Sections */
    section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Main content */
    main.pt-5 {
        padding-top: 0.75rem !important;
    }
    
    main.mt-3 {
        margin-top: 0.5rem !important;
    }
}

/* ============================================
   ARTICLE PAGE MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Article container */
    article.py-5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Breadcrumb - minimal */
    .breadcrumb {
        font-size: 0.7rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.25rem 0 !important;
    }
    
    .breadcrumb-item {
        padding: 0.1rem 0.3rem;
    }
    
    /* Article badges - compact */
    .badge.fs-6 {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    /* Article title - beautiful and compact */
    article h1.display-5 {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
    }
    
    /* Article meta - compact inline on mobile */
    .article-meta {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.4rem 0.6rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        justify-content: flex-start !important;
    }
    
    .article-meta-item {
        font-size: 0.7rem !important;
        gap: 0.3rem !important;
        white-space: nowrap;
    }
    
    .article-meta-item i {
        font-size: 0.65rem;
    }
    
    /* Social share - compact horizontal */
    .social-share {
        margin-bottom: 0.5rem !important;
        gap: 0.3rem !important;
        justify-content: center !important;
    }
    
    .social-share .social-btn {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.7rem !important;
        border-radius: 0.4rem !important;
    }
    
    .social-share .social-btn i {
        margin-right: 0.2rem;
        font-size: 0.75rem;
    }
    
    /* HR separator */
    hr {
        margin: 0.5rem 0 !important;
        opacity: 0.3;
    }
    
    /* Featured image wrapper */
    .featured-image-wrapper {
        margin-bottom: 0.5rem !important;
        overflow: hidden;
        border-radius: 0.6rem;
        background: #f8f9fa;
        position: relative;
    }
    
    /* Featured image - beautiful and compact */
    .featured-image,
    article .featured-image-wrapper img {
        max-height: 200px !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 0 !important;
        border-radius: 0.6rem !important;
        object-fit: cover;
        display: block;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: transform 0.3s ease;
    }
    
    .featured-image:hover,
    article .featured-image-wrapper img:hover {
        transform: scale(1.01);
    }
    
    /* All images in article - general */
    article img.img-fluid:not(.featured-image) {
        max-height: 200px !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.6rem !important;
        object-fit: cover;
        display: block;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    article .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    /* Article content - beautiful typography */
    .article-content {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        padding: 0 !important;
        color: #2d3748;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Remove extra spacing from content wrapper */
    .article-content > *:first-child {
        margin-top: 0 !important;
    }
    
    .article-content > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Headings - compact and beautiful */
    .article-content h1,
    .article-content h2 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.4rem !important;
        font-weight: 700 !important;
        color: #1a202c;
        letter-spacing: -0.01em;
    }
    
    .article-content h3 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-top: 0.6rem !important;
        margin-bottom: 0.35rem !important;
        font-weight: 600 !important;
        color: #2d3748;
    }
    
    .article-content h4,
    .article-content h5,
    .article-content h6 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.3rem !important;
        font-weight: 600 !important;
    }
    
    /* Paragraphs - optimal reading */
    .article-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.6rem !important;
        margin-top: 0 !important;
        color: #4a5568;
    }
    
    /* Remove double spacing between paragraphs */
    .article-content p + p {
        margin-top: 0 !important;
    }
    
    /* Images in content - beautiful and responsive */
    .article-content img {
        margin: 0.6rem 0 !important;
        border-radius: 0.6rem !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        object-fit: contain;
    }
    
    /* Specific optimization for pilt12.jpeg and similar images */
    .article-content img[src*="pilt12"],
    .article-content img[src*=".jpeg"],
    .article-content img[src*=".jpg"],
    .article-content img[src*=".png"] {
        max-width: 100% !important;
        max-height: 400px !important;
        width: auto !important;
        height: auto !important;
        margin: 0.6rem auto !important;
        display: block;
        border-radius: 0.6rem !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
    }
    
    /* Image hover effect */
    .article-content img:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    }
    
    /* Center images */
    .article-content p img,
    .article-content img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Code blocks */
    .article-content pre {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.4rem;
        overflow-x: auto;
    }
    
    .article-content code {
        font-size: 0.85rem !important;
        padding: 0.15rem 0.3rem !important;
        line-height: 1.3 !important;
    }
    
    /* Blockquotes */
    .article-content blockquote {
        padding-left: 0.75rem;
        margin: 0.5rem 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        border-left-width: 3px;
    }
    
    /* Lists */
    .article-content ul,
    .article-content ol {
        padding-left: 1.2rem;
        margin: 0.4rem 0 !important;
    }
    
    .article-content li {
        margin-bottom: 0.25rem !important;
        line-height: 1.5 !important;
        font-size: 0.95rem;
    }
    
    /* Tables */
    .article-content table {
        font-size: 0.85rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .article-content table th,
    .article-content table td {
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Tags section */
    .mt-5.pt-4.border-top {
        margin-top: 0.75rem !important;
        padding-top: 0.5rem !important;
    }
    
    /* Like button section */
    .mt-5.pt-4.border-top .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    /* Sidebar - move below */
    .col-lg-4 {
        margin-top: 0.75rem;
    }
    
    /* Cards - compact */
    .card {
        margin-bottom: 0.75rem;
        border-radius: 0.5rem;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-header {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Comments section */
    section.py-5.bg-light {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* CTA section */
    section.py-5.bg-primary {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    section.py-5.bg-primary .btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   SMALL MOBILE (576px and below)
   ============================================ */

@media (max-width: 576px) {
    body {
        font-size: 14px;
        line-height: 1.35 !important;
    }
    
    .container {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
    
    /* Even more compact */
    .py-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-4 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
    .py-3 { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
    
    .mb-5 { margin-bottom: 0.6rem !important; }
    .mb-4 { margin-bottom: 0.5rem !important; }
    .mb-3 { margin-bottom: 0.4rem !important; }
    .mb-2 { margin-bottom: 0.3rem !important; }
    
    .mt-5 { margin-top: 0.6rem !important; }
    .mt-4 { margin-top: 0.5rem !important; }
    .mt-3 { margin-top: 0.4rem !important; }
    
    /* Article title */
    article h1.display-5 {
        font-size: 1.25rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    /* Article meta - smaller */
    .article-meta {
        font-size: 0.7rem !important;
        gap: 0.4rem 0.6rem !important;
    }
    
    .article-meta-item {
        font-size: 0.65rem !important;
    }
    
    /* Featured image - even more compact on small screens */
    article img.img-fluid {
        max-height: 180px !important;
        margin-bottom: 0.4rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Images in content - smaller on phones */
    .article-content img[src*="pilt12"],
    .article-content img[src*=".jpeg"],
    .article-content img[src*=".jpg"],
    .article-content img[src*=".png"] {
        max-height: 300px !important;
        margin: 0.5rem auto !important;
    }
    
    /* Article content */
    .article-content {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }
    
    .article-content h1,
    .article-content h2 {
        font-size: 1.15rem !important;
        margin-top: 0.6rem !important;
        margin-bottom: 0.35rem !important;
    }
    
    .article-content h3 {
        font-size: 1.05rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .article-content p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Social buttons - icon only */
    .social-share .social-btn {
        padding: 0.35rem 0.5rem !important;
        min-width: 2.5rem;
    }
    
    .social-share .social-btn span {
        display: none !important;
    }
    
    /* Cards */
    .card-body {
        padding: 0.6rem !important;
    }
    
    .card-header {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   ARTICLE LISTING - TWO PER ROW ON MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Force articles to display two per row on mobile */
    .row.g-4 > .col-lg-4,
    .row.g-4 > .col-md-4,
    .row.g-4 > .col-sm-4,
    .row.g-4 > [class*="col-"] {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        width: calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
    }
    
    /* Remove inline styles that force 3 columns - override any inline styles */
    .row.g-4 > div[style*="33.333333%"],
    .row.g-4 > div[style*="flex: 0 0 33"],
    .row.g-4 > div[style*="max-width: 33"] {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        width: calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
    }
    
    /* Article cards - two per row on mobile */
    .tutorial-card {
        width: 100% !important;
        margin-bottom: 1rem;
        display: block;
    }
    
    /* Optimize tutorial card content for smaller width */
    .tutorial-card .p-4 {
        padding: 0.75rem !important;
    }
    
    .tutorial-card h5 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .tutorial-card .text-muted {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    .tutorial-card .tutorial-image {
        min-height: 150px !important;
    }
    
    .tutorial-card .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Row spacing - allow wrapping */
    .row.g-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-wrap: wrap !important;
        display: flex !important;
        gap: 1rem !important;
    }
    
    .row.g-4 > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 1rem;
    }
    
    /* Ensure article wrapper takes proper width */
    section .container .row.g-4 > div {
        flex-basis: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

@media (max-width: 576px) {
    /* Two per row on small phones too */
    .row.g-4 > .col-lg-4,
    .row.g-4 > .col-md-4,
    .row.g-4 > .col-sm-4,
    .row.g-4 > [class*="col-"] {
        flex: 0 0 calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
        width: calc(50% - 0.4rem) !important;
    }
    
    .row.g-4 > div[style*="33.333333%"],
    .row.g-4 > div[style*="flex: 0 0 33"],
    .row.g-4 > div[style*="max-width: 33"] {
        flex: 0 0 calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
        width: calc(50% - 0.4rem) !important;
    }
    
    /* Even more compact on small phones */
    .row.g-4 {
        gap: 0.75rem !important;
    }
    
    .row.g-4 > div {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
        margin-bottom: 0.75rem;
    }
    
    .tutorial-card {
        margin-bottom: 0.75rem;
    }
    
    /* Even more compact cards on small phones */
    .tutorial-card .p-4 {
        padding: 0.6rem !important;
    }
    
    .tutorial-card h5 {
        font-size: 0.9rem !important;
    }
    
    .tutorial-card .text-muted {
        font-size: 0.75rem !important;
    }
    
    .tutorial-card .tutorial-image {
        min-height: 120px !important;
    }
    
    section .container .row.g-4 > div {
        flex-basis: calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
    }
}

/* ============================================
   SMOOTH TRANSITIONS & BEAUTIFUL EFFECTS
   ============================================ */

@media (max-width: 768px) {
    /* Smooth transitions */
    * {
        transition: all 0.2s ease;
    }
    
    /* Better focus states */
    a:focus,
    button:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Improved readability */
    .article-content {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Better touch targets */
    .btn,
    .social-btn,
    .badge {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}