/* MSP Custom Skin - Frontend Styles */

.msp-posts-grid { width: 100%; }
.msp-layout-grid { display: grid; }
.msp-layout-grid.msp-columns-1 { grid-template-columns: 1fr; }
.msp-layout-grid.msp-columns-2 { grid-template-columns: repeat(2, 1fr); }
.msp-layout-grid.msp-columns-3 { grid-template-columns: repeat(3, 1fr); }
.msp-layout-grid.msp-columns-4 { grid-template-columns: repeat(4, 1fr); }
.msp-layout-grid.msp-columns-5 { grid-template-columns: repeat(5, 1fr); }
.msp-layout-grid.msp-columns-6 { grid-template-columns: repeat(6, 1fr); }

.msp-layout-masonry { display: block; }
.msp-layout-masonry.msp-columns-2 { column-count: 2; }
.msp-layout-masonry.msp-columns-3 { column-count: 3; }
.msp-layout-masonry.msp-columns-4 { column-count: 4; }
.msp-layout-masonry.msp-columns-5 { column-count: 5; }
.msp-layout-masonry .msp-loop-item { break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; }

.msp-layout-list { display: grid; grid-template-columns: 1fr; }
.msp-layout-list .msp-loop-item { display: flex; flex-direction: row; gap: 20px; }
.msp-layout-list .msp-loop-item .msp-post-image { flex: 0 0 300px; max-width: 300px; }
.msp-layout-list .msp-loop-item .msp-post-image img { width: 100%; height: 200px; object-fit: cover; }
.msp-layout-list .msp-loop-item > .elementor { display: flex; flex-direction: row; width: 100%; }
.msp-layout-list .msp-loop-item > .elementor > .elementor-inner { display: flex; flex-direction: row; width: 100%; }

/* Item base - transition for hover animation */
.msp-loop-item { overflow: hidden; box-sizing: border-box; }

/* ===== EQUAL HEIGHT FIX ===== */
/* Only apply flex when class is present - NOT by default */
.msp-equal-height .msp-loop-item { display: flex; flex-direction: column; }
.msp-equal-height .msp-loop-item > .elementor { flex: 1; display: flex; flex-direction: column; }
.msp-equal-height .msp-loop-item > .elementor > .elementor-inner { flex: 1; display: flex; flex-direction: column; }
.msp-equal-height .msp-loop-item > .elementor > .elementor-inner > .elementor-section-wrap { flex: 1; }

/* Post Image */
.msp-post-image { overflow: hidden; line-height: 0; }
.msp-post-image img { width: 100%; height: auto; display: block; transition: all 0.3s ease; }
.msp-post-image a { display: block; }
.msp-image-caption { line-height: 1.4; padding: 8px 0; font-size: 0.9em; color: #666; }

/* Post Title */
.msp-post-title { margin: 0; word-wrap: break-word; }
.msp-post-title a { text-decoration: none; color: inherit; transition: color 0.3s ease; }

/* Post Excerpt */
.msp-post-excerpt { word-wrap: break-word; }

/* Post Meta */
.msp-post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.msp-meta-item { display: inline-flex; align-items: center; gap: 4px; transition: color 0.3s ease; }
.msp-meta-icon { display: inline-flex; align-items: center; line-height: 1; transition: color 0.3s ease; }
.msp-meta-icon svg { width: 1em; height: 1em; fill: currentColor; }
.msp-meta-icon i { line-height: 1; }
.msp-meta-item a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
.msp-meta-separator { display: inline-flex; align-items: center; opacity: 0.6; }
.msp-meta-separator svg { width: 1em; height: 1em; fill: currentColor; }
.msp-meta-avatar img { border-radius: 50%; margin-right: 5px; }

/* Post Terms */
.msp-post-terms { display: flex; flex-wrap: wrap; align-items: center; }
.msp-post-terms a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
.msp-post-terms.msp-style-badges { display: flex; flex-wrap: wrap; }
.msp-term-badge { display: inline-flex; align-items: center; font-size: 0.85em; }
.msp-term-item { display: inline-flex; align-items: center; gap: 4px; transition: color 0.3s ease; }
.msp-term-icon { display: inline-flex; align-items: center; transition: color 0.3s ease; }
.msp-term-icon svg { width: 1em; height: 1em; fill: currentColor; }
.msp-terms-separator { display: inline-flex; align-items: center; opacity: 0.6; }
.msp-terms-separator svg { width: 1em; height: 1em; fill: currentColor; }
.msp-terms-prefix { margin-right: 5px; }

/* Read More */
.msp-readmore-btn { display: inline-flex; align-items: center; text-decoration: none; transition: all 0.3s ease; cursor: pointer; box-sizing: border-box; }
.msp-btn-icon { display: inline-flex; align-items: center; transition: all 0.3s ease; }
.msp-btn-icon svg { width: 1em; height: 1em; fill: currentColor; }
.msp-readmore-btn:hover .msp-btn-icon { transform: translateX(3px); }

/* ========================================
   PAGINATION - NUMBER
   ======================================== */
.msp-pagination { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Alignment via wrapper class */
.msp-pagination-wrap { width: 100%; }
.msp-pagination-wrap.msp-pag-align-left   { text-align: left;  display: flex; justify-content: flex-start; }
.msp-pagination-wrap.msp-pag-align-center { text-align: center; display: flex; justify-content: center; }
.msp-pagination-wrap.msp-pag-align-right  { text-align: right;  display: flex; justify-content: flex-end; }

.msp-pagination a,
.msp-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    margin: 0;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.msp-pagination a:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.msp-pagination span.current {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Prev / Next arrows */
.msp-pagination .prev.page-numbers,
.msp-pagination .next.page-numbers {
    font-size: 14px;
    font-weight: 700;
}

/* Dots */
.msp-pagination span.dots {
    border: none;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

/* ========================================
   LOAD MORE BUTTON
   ======================================== */
.msp-load-more-wrap {
    width: 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msp-load-more-wrap.msp-pag-align-left   { justify-content: flex-start; }
.msp-load-more-wrap.msp-pag-align-center { justify-content: center; }
.msp-load-more-wrap.msp-pag-align-right  { justify-content: flex-end; }

.msp-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    border: 2px solid #333;
    background: transparent;
    color: #333;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1;
    letter-spacing: 0.3px;
    outline: none;
    -webkit-appearance: none;
}
.msp-load-more-btn:hover {
    background: #333;
    color: #fff;
}
.msp-load-more-btn.msp-loading {
    opacity: 0.75;
    pointer-events: none;
    cursor: not-allowed;
}

/* Spinner inside Load More button */
.msp-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: msp-spin 0.65s linear infinite;
    flex-shrink: 0;
}
.msp-load-more-btn.msp-loading .msp-btn-spinner {
    display: inline-block;
}

/* ========================================
   INFINITE SCROLL LOADER
   ======================================== */
.msp-infinite-loader {
    width: 100%;
    margin-top: 30px;
    text-align: center;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.msp-infinite-loader.msp-done {
    display: none !important;
}

.msp-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: #333;
    border-radius: 50%;
    animation: msp-spin 0.75s linear infinite;
}
.msp-loader-text {
    font-size: 13px;
    color: #888;
    line-height: 1;
}

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

/* ========================================
   MISC
   ======================================== */
.msp-nothing-found { text-align: center; padding: 40px 20px; color: #999; }

.msp-editor-notice { text-align: center; padding: 40px 20px; background: #f8f9fa; border: 2px dashed #ccc; border-radius: 8px; }
.msp-editor-notice .eicon-posts-grid { font-size: 48px; color: #aaa; margin-bottom: 15px; display: block; }
.msp-editor-notice p { color: #666; margin-bottom: 15px; }
.msp-create-template-btn { display: inline-block; padding: 10px 20px; background: #93003f; color: #fff !important; text-decoration: none; border-radius: 4px; font-size: 13px; }

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .msp-layout-grid.msp-columns-tablet-1 { grid-template-columns: 1fr; }
    .msp-layout-grid.msp-columns-tablet-2 { grid-template-columns: repeat(2, 1fr); }
    .msp-layout-grid.msp-columns-tablet-3 { grid-template-columns: repeat(3, 1fr); }
    .msp-layout-masonry.msp-columns-tablet-1 { column-count: 1; }
    .msp-layout-masonry.msp-columns-tablet-2 { column-count: 2; }
    .msp-layout-masonry.msp-columns-tablet-3 { column-count: 3; }
    .msp-layout-list .msp-loop-item .msp-post-image { flex: 0 0 220px; max-width: 220px; }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .msp-layout-grid.msp-columns-mobile-1 { grid-template-columns: 1fr; }
    .msp-layout-grid.msp-columns-mobile-2 { grid-template-columns: repeat(2, 1fr); }
    .msp-layout-masonry.msp-columns-mobile-1 { column-count: 1; }
    .msp-layout-masonry.msp-columns-mobile-2 { column-count: 2; }
    .msp-layout-list .msp-loop-item { flex-direction: column; }
    .msp-layout-list .msp-loop-item .msp-post-image { flex: none; max-width: 100%; }
    .msp-layout-list .msp-loop-item .msp-post-image img { height: auto; }
    .msp-pagination { gap: 3px; }
    .msp-pagination a, .msp-pagination span.page-numbers { min-width: 32px; height: 32px; font-size: 13px; }
    .msp-tb-related-grid { grid-template-columns: 1fr !important; }
}
/* ========================================
   MSP THEME BUILDER STYLES
   ======================================== */
.msp-tb-header, .msp-tb-footer { width: 100%; }
.msp-tb-content { flex: 1; }
.msp-tb-site-title a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
.msp-tb-tagline { margin: 5px 0 0; opacity: 0.7; }
.msp-tb-logo img { max-width: 100%; height: auto; }
.msp-tb-post-nav { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid #eee; }
.msp-tb-nav-prev, .msp-tb-nav-next { display: flex; flex-direction: column; gap: 5px; }
.msp-tb-nav-next { text-align: right; margin-left: auto; }
.msp-tb-nav-label { font-size: 0.85em; opacity: 0.7; }
.msp-tb-nav-title a { text-decoration: none; color: inherit; }
.msp-tb-archive-card { overflow: hidden; transition: all 0.3s ease; }
.msp-tb-card-image img { width: 100%; height: auto; display: block; }
.msp-tb-card-title a { text-decoration: none; color: inherit; }
.msp-tb-card-meta { font-size: 0.85em; opacity: 0.7; margin: 8px 0; }
.msp-tb-card-readmore { display: inline-block; margin-top: 10px; text-decoration: none; font-weight: 600; }
.msp-tb-author-box { display: flex; gap: 20px; align-items: flex-start; }
.msp-tb-author-avatar img { border-radius: 50%; }
.msp-tb-author-info { flex: 1; }
.msp-tb-author-link { text-decoration: none; font-weight: 600; }
.msp-tb-related-item img { width: 100%; height: auto; border-radius: 4px; }
.msp-tb-related-img { overflow: hidden; line-height: 0; }
.msp-tb-related-img img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.msp-tb-related-img:hover img { transform: scale(1.05); }
.msp-tb-related-item-inner { padding: 12px 0; }
.msp-tb-related-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.msp-tb-related-terms a { display: inline-block; text-decoration: none; font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 3px; transition: all 0.3s ease; color: inherit; }
.msp-tb-related-title { margin: 0 0 6px; }
.msp-tb-related-title a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
.msp-tb-related-meta { font-size: 0.85em; opacity: 0.7; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.msp-tb-rm-sep { opacity: 0.5; }
.msp-tb-related-excerpt { font-size: 0.9em; margin: 8px 0; line-height: 1.6; }
.msp-tb-related-readmore { display: inline-block; margin-top: 10px; text-decoration: none; font-weight: 600; font-size: 0.9em; transition: all 0.3s ease; }
.msp-tb-related-title a { text-decoration: none; color: inherit; }
.msp-tb-related-date { font-size: 0.85em; opacity: 0.7; }
.msp-tb-search-form form { display: flex; }
.msp-tb-search-input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; font-size: 14px; outline: none; }
.msp-tb-search-btn { padding: 10px 20px; border: none; cursor: pointer; font-size: 14px; }
.msp-tb-breadcrumbs { font-size: 0.9em; }
.msp-tb-breadcrumbs a { text-decoration: none; }
.msp-tb-sep { margin: 0 8px; opacity: 0.5; }
.msp-tb-pagination { margin-top: 30px; }
.msp-tb-nothing-found { text-align: center; padding: 40px; color: #999; }
body.msp-tb-loading { opacity: 0; }
body.msp-tb-ready { opacity: 1; transition: opacity 0.2s ease; }
@media (max-width: 768px) {
    .msp-tb-post-nav { flex-direction: column; }
    .msp-tb-nav-next { text-align: left; margin-left: 0; }
    .msp-tb-author-box { flex-direction: column; align-items: center; text-align: center; }
}