/* Container */
.course-search-container{max-width:1200px;margin:auto;padding:30px 20px}

/* Search */
.search-bar-wrapper{margin-bottom:20px}
.search-form{display:flex;align-items:center;border:1px solid #ddd;border-radius:10px;background:#f5f7fa;padding:8px 12px}
.search-icon svg{width:20px;height:20px;fill:#9aa0a6;opacity:.9}
#course-search-input{flex:1;padding:10px 12px;border:0;background:transparent;outline:none;font-size:16px}
#clear-search{background:none;border:0;font-size:18px;cursor:pointer;color:#9aa0a6}
#clear-search:hover{opacity:.8}
#search-info{margin-top:10px;font-size:14px;color:#555}

/* Headings */
.popular-tags h3,.new-courses-header h3{margin:20px 0 10px;font-size:18px;font-weight:700}
.new-courses-header{display:flex;justify-content:space-between;align-items:center}
.new-courses-header .view-all{font-size:14px;color:#6a5acd;text-decoration:none}

/* Tags */
.tags-list{margin-bottom:20px}
.tag-btn{display:inline-block;border:1px solid #d9dde3;background:#fff;padding:8px 16px;margin:5px;border-radius:28px;font-size:14px;text-decoration:none;transition:.2s}
.tag-btn:hover{background:#6a5acd;color:#fff;border-color:#6a5acd}
.tag-btn.active{background:#6a5acd;color:#fff;border-color:#6a5acd}

/* Grid */
.course-results{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
@media (max-width:1200px){.course-results{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.course-results{grid-template-columns:repeat(2,1fr)}}

/* Card */
.course-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .2s ease;display:flex;flex-direction:column}
.course-card:hover{transform:translateY(-5px)}
.course-card h3{font-size:16px;font-weight:700;margin:8px 0 6px;line-height:1.4;text-align:left}
.course-card p{font-size:14px;color:#666;margin:8px 0 0;text-align:left}
.course-card img{width:100%;height:auto;border-radius:8px}
.course-card a{text-decoration:none;color:inherit}

/* Dummy fillers hidden but occupy space */
.course-card.dummy{visibility:hidden}

/* Clamp excerpt: 3 lines + ellipsis */
.course-card p{
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  max-height: calc(1.6em * 3);
  word-break: break-word;
}