/* ============================================================
   MJ Trending Carousel
   ============================================================ */

/* Section header */
.mjt-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mjt-section-title { margin: 0; font-size: 16px; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 8px; }
.mjt-section-line { display: inline-block; width: 4px; height: 20px; background-color: #dc2626; border-radius: 2px; flex-shrink: 0; }
.mjt-more { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #dc2626; text-decoration: none; }
.mjt-more:hover { opacity: 0.8; }

.mjt-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.mjt-rtl { direction: rtl; }

/* Arrows */
.mjt-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 12px;
}
.mjt-rtl .mjt-carousel-nav { justify-content: flex-start; }

.mjt-arrow {
    width: 36px; height: 36px;
    border: none; border-radius: 4px;
    background-color: #e74c3c; color: #fff;
    font-size: 22px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s; padding: 0;
}
.mjt-arrow:hover { opacity: 0.8; }
.mjt-arrow:disabled { opacity: 0.35; cursor: default; }

/* Track */
.mjt-track-wrap { overflow: hidden; width: 100%; }
.mjt-rtl .mjt-track-wrap { direction: ltr; }

.mjt-carousel-track {
    display: flex;
    flex-direction: row;
    gap: var(--mjt-gap, 16px);
    transition: transform 0.4s ease;
    will-change: transform;
    flex-wrap: nowrap !important;
}
.mjt-rtl .mjt-carousel-track { flex-direction: row-reverse; }

/* Card width via CSS variable */
.mjt-mode-carousel .mjt-card {
    flex: 0 0 calc((100% - (var(--mjt-visible, 4) - 1) * var(--mjt-gap, 16px)) / var(--mjt-visible, 4));
    min-width: 0;
}

/* Card */
.mjt-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}
.mjt-card.has-shadow { box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.mjt-card:hover { transform: translateY(-3px); }
.mjt-card.has-shadow:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.mjt-card-link { display: block; text-decoration: none; color: inherit; }

/* Image */
.mjt-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
.mjt-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.mjt-card:hover .mjt-image img { transform: scale(1.04); }
.mjt-no-image { width: 100%; height: 100%; background: linear-gradient(135deg, #ddd 0%, #bbb 100%); }

/* Badge */
.mjt-badge {
    position: absolute; bottom: 8px; left: 8px;
    background-color: #e74c3c; color: #fff;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: 3px; z-index: 2;
}
.mjt-rtl .mjt-badge { left: auto; right: 8px; }

/* Body */
.mjt-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mjt-title {
    margin: 0; font-size: 13px; font-weight: 700; color: #111827;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 0.2s;
}
.mjt-card:hover .mjt-title { color: #dc2626; }
.mjt-date { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; margin-top: auto; }

/* Responsive — always 2 cards */
@media (max-width: 900px) {
    .mjt-mode-carousel .mjt-card {
        flex: 0 0 calc((100% - var(--mjt-gap, 16px)) / 2) !important;
    }
}
@media (max-width: 600px) {
    .mjt-mode-carousel .mjt-card {
        flex: 0 0 calc((100% - var(--mjt-gap, 16px)) / 2) !important;
    }
}