/* Public CSS: style for cards, tabs, carousel */
.ec-explore-wrap { max-width:1200px; margin:30px auto; padding:0 20px; font-family: Arial, sans-serif; }
.ec-title { font-size:22px; margin-bottom:12px; color:#111; font-weight:700; }
.ec-tabs { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.ec-tab { background:#fff; border:1px solid #e7e7e7; padding:8px 14px; border-radius:20px; cursor:pointer; }
.ec-tab.active { border-color:#001f4d; box-shadow:0 2px 6px rgba(0,31,77,0.06); }

.ec-panel { display:none; }
.ec-panel.active { display:block; }

.ec-row-wrap { position:relative; display:flex; align-items:center; gap:10px; }
.ec-row { display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; padding:8px 4px; }
.ec-row::-webkit-scrollbar { height:8px; }
.ec-row::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.ec-card { min-width:280px; max-width:320px; border:1px solid #eee; border-radius:8px; display:flex; background:#fff; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.03); }
.ec-card-left { flex:0 0 110px; display:flex; align-items:center; justify-content:center; background:#fafafa; }
.ec-card-left img { width:100%; height:100%; object-fit:cover; display:block; }
.ec-placeholder { width:100%; height:72px; display:flex; align-items:center; justify-content:center; color:#777; font-weight:600; }

.ec-card-right { padding:12px; flex:1; }
.ec-badge { display:inline-block; font-size:12px; background:#f5f5f5; padding:6px 8px; border-radius:6px; color:#555; margin-bottom:8px; }
.ec-course-title { margin:6px 0 8px; font-size:18px; color:#001f4d; font-weight:700; }
.ec-meta { font-size:13px; color:#444; display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.ec-meta div { display:flex; justify-content:space-between; }
.ec-overview-link { display:flex; justify-content:space-between; align-items:center; text-decoration:none; padding-top:8px; color:#111; font-weight:600; border-top:1px solid #f0f0f0; }

.ec-overview-link .ec-arrow { color:#001f4d; font-size:18px; margin-left:6px; }

/* scroll buttons */
.ec-scroll-left, .ec-scroll-right { background:#fff; border:1px solid #e6e6e6; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ec-scroll-left:hover, .ec-scroll-right:hover { background:#f5f8ff; }

/* Responsive */
@media (max-width:768px) {
    .ec-card { min-width:240px; }
    .ec-card-left { flex-basis:90px; }
}