/**
 * MKM Bix - Responsive Mobile
 * Mobile breakpoint styles (max-width: 767px)
 * @package MKM_Bix
 */

@media screen and (max-width: 767px) {
    
    /* ==================== TYPOGRAPHY ==================== */
    h1, .h1 { font-size: var(--mkm-fs-3xl); }
    h2, .h2 { font-size: var(--mkm-fs-2xl); }
    h3, .h3 { font-size: var(--mkm-fs-xl); }
    h4, .h4 { font-size: var(--mkm-fs-lg); }
    
    /* ==================== CONTAINER ==================== */
    .mkm-container {
        padding-left: var(--mkm-space-4);
        padding-right: var(--mkm-space-4);
    }
    
    /* ==================== GRID ==================== */
    .mkm-posts-grid,
    .mkm-grid-cols-2,
    .mkm-grid-cols-3,
    .mkm-grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .mkm-related-grid {
        grid-template-columns: 1fr;
    }
    
    /* ==================== FOOTER ==================== */
    .mkm-footer-widgets-inner,
    .mkm-footer-cols-2,
    .mkm-footer-cols-3,
    .mkm-footer-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .mkm-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .mkm-footer-links {
        justify-content: center;
    }
    
    /* ==================== HERO ==================== */
    .mkm-hero {
        padding: var(--mkm-space-10) 0;
    }
    
    .mkm-hero-title {
        font-size: var(--mkm-fs-3xl);
    }
    
    .mkm-hero-subtitle {
        font-size: var(--mkm-fs-base);
    }
    
    .mkm-hero-text {
        font-size: var(--mkm-fs-base);
    }
    
    .mkm-hero-buttons {
        flex-direction: column;
    }
    
    .mkm-hero-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* ==================== SLIDER ==================== */
    .mkm-slide {
        aspect-ratio: 4 / 3;
    }
    
    .mkm-slide-content {
        padding: var(--mkm-space-4);
    }
    
    .mkm-slide-title {
        font-size: var(--mkm-fs-xl);
    }
    
    .mkm-slide-excerpt {
        display: none;
    }
    
    .mkm-slider-nav {
        width: 40px;
        height: 40px;
    }
    
    .mkm-slider-prev {
        left: var(--mkm-space-2);
    }
    
    .mkm-slider-next {
        right: var(--mkm-space-2);
    }
    
    /* ==================== SINGLE POST ==================== */
    .mkm-single-body,
    .mkm-full-article-body,
    .mkm-page-content,
    .mkm-page-header {
        padding: var(--mkm-space-5);
    }
    
    .mkm-single-title,
    .mkm-page-title {
        font-size: var(--mkm-fs-2xl);
    }
    
    .mkm-single-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mkm-space-3);
    }
    
    .mkm-single-thumbnail,
    .mkm-full-article-thumbnail {
        aspect-ratio: 16 / 9;
    }
    
    /* ==================== COMMENTS ==================== */
    .mkm-comments {
        padding: var(--mkm-space-5);
    }
    
    .mkm-comment-body {
        flex-direction: column;
    }
    
    .mkm-comment .children {
        margin-left: var(--mkm-space-4);
        padding-left: var(--mkm-space-4);
    }
    
    .mkm-comment-form .comment-form {
        grid-template-columns: 1fr;
    }
    
    /* ==================== SECTION ==================== */
    .mkm-section {
        padding: var(--mkm-space-8) 0;
    }
    
    .mkm-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* ==================== ARCHIVE HEADER ==================== */
    .mkm-archive-header,
    .mkm-search-header,
    .mkm-category-header {
        padding: var(--mkm-space-8) 0;
    }
    
    .mkm-archive-title,
    .mkm-category-title {
        font-size: var(--mkm-fs-3xl);
    }
    
    /* ==================== 404 ==================== */
    .mkm-404-code {
        font-size: 100px;
    }
    
    .mkm-404-title {
        font-size: var(--mkm-fs-2xl);
    }
    
    /* ==================== CARDS ==================== */
    .mkm-card-horizontal {
        grid-template-columns: 1fr;
    }
    
    .mkm-card-horizontal .mkm-card-thumbnail {
        aspect-ratio: 16 / 9;
        height: auto;
    }
    
    /* ==================== LIST LAYOUT ==================== */
    .mkm-list-layout .mkm-card {
        grid-template-columns: 1fr;
    }
    
    .mkm-list-layout .mkm-card-thumbnail {
        aspect-ratio: 16 / 9;
    }
    
    .mkm-list-layout .mkm-card-body {
        padding: var(--mkm-space-5);
    }
    
    /* ==================== FULL ARTICLE SIDE ==================== */
    .mkm-full-article-side {
        grid-template-columns: 1fr;
    }
    
    .mkm-full-article-side .mkm-full-article-thumbnail {
        aspect-ratio: 16 / 9;
        height: auto;
    }
    
    /* ==================== BACK TO TOP ==================== */
    .mkm-back-to-top {
        width: 44px;
        height: 44px;
        bottom: var(--mkm-space-4);
        right: var(--mkm-space-4);
    }
    
    /* ==================== SHARE BUTTONS ==================== */
    .mkm-share-buttons {
        justify-content: center;
    }
    
    /* ==================== PAGINATION ==================== */
    .mkm-pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        padding: 0 var(--mkm-space-2);
        font-size: var(--mkm-fs-sm);
    }
    
    /* ==================== WIDGET ==================== */
    .mkm-widget {
        padding: var(--mkm-space-5);
    }
    
    /* ==================== SEARCH FORM ==================== */
    .mkm-search-form-large form,
    .mkm-404-search form {
        flex-direction: column;
    }
    
    .mkm-search-form-large button,
    .mkm-404-search button {
        width: 100%;
    }
    
    /* ==================== FILTER ==================== */
    .mkm-archive-filter,
    .mkm-category-filter {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mkm-category-filter-actions {
        justify-content: space-between;
    }
    
    /* ==================== SUB CATEGORIES ==================== */
    .mkm-sub-categories {
        justify-content: flex-start;
    }
    
    /* ==================== ALL CATEGORIES ==================== */
    .mkm-all-categories {
        grid-template-columns: 1fr;
    }
    
    /* ==================== CHILD PAGES ==================== */
    .mkm-child-pages-list {
        grid-template-columns: 1fr;
    }
    
    /* ==================== NATIVE AD ==================== */
    .mkm-native-ad {
        flex-direction: column;
    }
    
    .mkm-native-ad-thumbnail {
        width: 100%;
        height: 150px;
    }
    
    /* ==================== AUTHOR BOX ==================== */
    .mkm-author-box-avatar img {
        width: 80px;
        height: 80px;
    }
    
    /* ==================== MASONRY ==================== */
    .mkm-masonry-grid {
        columns: 1;
    }
    
    /* ==================== HIDE ON MOBILE ==================== */
    .hide-mobile {
        display: none !important;
    }
    
    /* ==================== SHOW ON MOBILE ==================== */
    .show-mobile {
        display: block !important;
    }
}

/* ==================== SMALL MOBILE (max-width: 480px) ==================== */
@media screen and (max-width: 480px) {
    
    :root {
        --mkm-fs-base: 0.9375rem;
    }
    
    .mkm-container {
        padding-left: var(--mkm-space-3);
        padding-right: var(--mkm-space-3);
    }
    
    /* Header */
    .mkm-logo img {
        max-height: 40px;
    }
    
    .mkm-logo-text {
        font-size: var(--mkm-fs-lg);
    }
    
    /* Cards */
    .mkm-card-body {
        padding: var(--mkm-space-4);
    }
    
    .mkm-card-title {
        font-size: var(--mkm-fs-base);
    }
    
    /* Single Post */
    .mkm-single-body,
    .mkm-page-content {
        padding: var(--mkm-space-4);
    }
    
    .mkm-single-title {
        font-size: var(--mkm-fs-xl);
    }
    
    /* Comments */
    .mkm-comments {
        padding: var(--mkm-space-4);
    }
    
    .mkm-comment-avatar img {
        width: 40px;
        height: 40px;
    }
    
    /* 404 */
    .mkm-404-code {
        font-size: 80px;
    }
    
    /* Hero */
    .mkm-hero-title {
        font-size: var(--mkm-fs-2xl);
    }
    
    /* Section */
    .mkm-section-title {
        font-size: var(--mkm-fs-xl);
    }
}