/* ============================================================
   MJ Category Tabs
   ============================================================ */
.mjct-wrap { width: 100%; box-sizing: border-box; font-family: inherit; }

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

/* Tabs nav */
.mjct-tabs-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; }
.mjct-tab {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; color: #6b7280;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.mjct-tab:hover { color: #111827; }
.mjct-tab.mjct-active { background-color: #dc2626; color: #fff; border-radius: 6px 6px 0 0; border-color: #dc2626; }

/* Panels */
.mjct-panel { display: none; }
.mjct-panel.mjct-panel-active { display: block; }

/* Grid */
.mjct-grid { display: grid; gap: 14px; }
.mjct-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mjct-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mjct-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Card */
.mjct-card { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; transition: box-shadow 0.2s, transform 0.2s; }
.mjct-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-2px); }
.mjct-card-link { display: block; text-decoration: none; color: inherit; }

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

.mjct-badge {
    position: absolute; bottom: 8px; right: 8px;
    background-color: #dc2626; color: #fff;
    font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 4px; z-index: 2;
}

.mjct-body { padding: 10px; }
.mjct-title {
    margin: 0 0 6px; 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;
}
.mjct-card:hover .mjct-title { color: #dc2626; }
.mjct-date { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; }

/* Responsive */
@media (max-width: 900px) {
    .mjct-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .mjct-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .mjct-cols-4, .mjct-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .mjct-card-link { display: flex; flex-direction: column; }
    .mjct-image { width: 100%; flex-shrink: 0; }
    .mjct-body { width: 100%; }
}
@media (max-width: 500px) {
    .mjct-cols-4, .mjct-cols-3, .mjct-cols-2 { grid-template-columns: 1fr; }
    .mjct-tabs-nav { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .mjct-tab { padding: 6px 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
    .mjct-image { height: 110px; }
    .mjct-title { font-size: 12px; }
    .mjct-body { padding: 7px; }
}