/**
 * MKM Bix - Grid Section
 * Posts grid layout styles
 * @package MKM_Bix
 */

/* ==================== POSTS GRID ==================== */
.mkm-posts-grid {
    display: grid;
    gap: var(--mkm-space-6);
}

/* ==================== GRID COLUMNS ==================== */
.mkm-grid-cols-1 {
    grid-template-columns: 1fr;
}

.mkm-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mkm-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mkm-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mkm-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.mkm-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ==================== GRID GAP VARIANTS ==================== */
.mkm-grid-gap-sm {
    gap: var(--mkm-space-4);
}

.mkm-grid-gap-md {
    gap: var(--mkm-space-6);
}

.mkm-grid-gap-lg {
    gap: var(--mkm-space-8);
}

/* ==================== GRID ITEM ==================== */
.mkm-grid-item {
    min-width: 0; /* Prevents overflow */
}

/* ==================== MASONRY GRID ==================== */
.mkm-masonry-grid {
    columns: 3;
    column-gap: var(--mkm-space-6);
}

.mkm-masonry-grid .mkm-grid-item {
    break-inside: avoid;
    margin-bottom: var(--mkm-space-6);
}

/* ==================== FEATURED GRID ==================== */
.mkm-featured-grid {
    display: grid;
    gap: var(--mkm-space-6);
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}

.mkm-featured-grid .mkm-grid-item:first-child {
    grid-row: span 2;
}

/* ==================== LIST LAYOUT ==================== */
.mkm-list-layout {
    display: flex;
    flex-direction: column;
    gap: var(--mkm-space-6);
}

.mkm-list-layout .mkm-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--mkm-space-6);
}

.mkm-list-layout .mkm-card-thumbnail {
    aspect-ratio: 16 / 10;
}

.mkm-list-layout .mkm-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mkm-space-5) var(--mkm-space-5) var(--mkm-space-5) 0;
}

/* ==================== COMPACT GRID ==================== */
.mkm-compact-grid {
    gap: var(--mkm-space-3);
}

.mkm-compact-grid .mkm-card-body {
    padding: var(--mkm-space-4);
}

.mkm-compact-grid .mkm-card-title {
    font-size: var(--mkm-fs-base);
}

/* ==================== GRID WITH SIDEBAR ==================== */
.mkm-grid-with-sidebar {
    display: grid;
    grid-template-columns: 1fr var(--mkm-sidebar-width);
    gap: var(--mkm-space-8);
}

.mkm-grid-with-sidebar.sidebar-left {
    grid-template-columns: var(--mkm-sidebar-width) 1fr;
}

/* ==================== GRID SECTION ==================== */
.mkm-grid-section {
    padding: var(--mkm-space-12) 0;
}

.mkm-grid-section-title {
    font-size: var(--mkm-fs-2xl);
    font-weight: var(--mkm-fw-bold);
    margin-bottom: var(--mkm-space-6);
    position: relative;
    padding-bottom: var(--mkm-space-3);
}

.mkm-grid-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(135deg, var(--mkm-primary), var(--mkm-secondary));
    border-radius: var(--mkm-radius-full);
}

/* ==================== LOAD MORE ==================== */
.mkm-load-more-wrapper {
    text-align: center;
    margin-top: var(--mkm-space-10);
}

.mkm-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mkm-space-2);
    padding: var(--mkm-space-4) var(--mkm-space-8);
    background: var(--mkm-white);
    color: var(--mkm-gray-800);
    border: 2px solid var(--mkm-gray-200);
    border-radius: var(--mkm-radius-full);
    font-weight: var(--mkm-fw-semibold);
    cursor: pointer;
    transition: all var(--mkm-transition);
}

.mkm-load-more-btn:hover {
    border-color: var(--mkm-primary);
    color: var(--mkm-primary);
}

.mkm-load-more-btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.mkm-load-more-btn svg {
    width: 18px;
    height: 18px;
}

.mkm-load-more-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--mkm-gray-300);
    border-top-color: var(--mkm-primary);
    border-radius: 50%;
    animation: mkm-spin 0.8s linear infinite;
}

@keyframes mkm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== NO POSTS ==================== */
.mkm-no-posts {
    text-align: center;
    padding: var(--mkm-space-16) var(--mkm-space-8);
    background: var(--mkm-white);
    border-radius: var(--mkm-radius-lg);
}

.mkm-no-posts-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--mkm-space-6);
    color: var(--mkm-gray-400);
}

.mkm-no-posts-title {
    font-size: var(--mkm-fs-xl);
    font-weight: var(--mkm-fw-semibold);
    color: var(--mkm-gray-700);
    margin-bottom: var(--mkm-space-2);
}

.mkm-no-posts-text {
    color: var(--mkm-gray-500);
    margin-bottom: var(--mkm-space-6);
}