/* Courses directory — visually aligned with the modern homepage. */

.courses-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.courses-hero-media,
.courses-hero-media::after,
.courses-hero-overlay {
    position: absolute;
    inset: 0;
}

.courses-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.courses-hero-overlay {
    background:
        linear-gradient(90deg, rgba(25, 10, 55, .97) 0%, rgba(42, 15, 92, .91) 48%, rgba(42, 15, 92, .73) 100%),
        linear-gradient(135deg, rgba(61, 26, 120, .35), rgba(139, 21, 56, .18));
}

.courses-hero .container { position: relative; z-index: 2; }

.courses-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .72fr);
    gap: clamp(40px, 6vw, 86px);
    align-items: center;
    padding: 78px 0 112px;
}

.courses-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: .85rem;
    color: rgba(255,255,255,.72);
}

.courses-breadcrumb a { color: var(--gold-light); }
.courses-breadcrumb a:hover { color: #fff; }
.courses-breadcrumb i { font-size: .65rem; opacity: .65; }

.courses-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 7px 18px 7px 7px;
    border: 1px solid rgba(201,162,39,.45);
    border-radius: 999px;
    background: rgba(201,162,39,.16);
    color: var(--gold-light);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.courses-hero-badge .badge-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--primary-dark);
}

.courses-hero h1 {
    max-width: 760px;
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(2.65rem, 5vw, 4.35rem);
    line-height: 1.06;
}

.courses-hero-description {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.75;
}

.courses-hero-actions,
.courses-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.courses-hero .btn-outline-white,
.courses-closing-cta .btn-outline-white {
    border-color: rgba(255,255,255,.9);
    background: transparent;
    color: #fff;
}

.courses-hero .btn-outline-white:hover,
.courses-closing-cta .btn-outline-white:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--primary-dark);
}

.courses-stats-card {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    color: var(--primary-dark);
    box-shadow: 0 26px 70px rgba(10, 8, 24, .28);
    backdrop-filter: blur(12px);
}

.courses-stats-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ece8f1;
}

.courses-stats-head img { width: 52px; height: 52px; object-fit: contain; }
.courses-stats-head span { display: block; color: var(--gray); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.courses-stats-head strong { display: block; margin-top: 3px; font-family: var(--font-primary); font-size: 1.08rem; }
.courses-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

.courses-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 18px 0;
    border-bottom: 1px solid #f0edf4;
}

.courses-stat:nth-last-child(-n+2) { border-bottom: 0; }
.courses-stat-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: var(--gold); }
.courses-stat strong { display: block; color: var(--primary-dark); font-size: 1.35rem; line-height: 1; }
.courses-stat div > span { display: block; margin-top: 5px; color: var(--gray); font-size: .75rem; line-height: 1.25; }

.courses-hero-decoration { position: absolute; z-index: 1; border-radius: 50%; border: 38px solid var(--gold); opacity: .08; }
.courses-dec-one { width: 290px; height: 290px; right: -100px; top: -105px; }
.courses-dec-two { width: 210px; height: 210px; left: -90px; bottom: 45px; }
.courses-hero-wave { position: absolute; z-index: 3; right: 0; bottom: -1px; left: 0; height: 84px; color: var(--off-white); line-height: 0; }
.courses-hero-wave svg { width: 100%; height: 100%; }

.courses-section-shell {
    position: relative;
    padding-top: 58px;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 32%, var(--off-white) 100%);
}

.courses-directory-heading { margin-bottom: 30px; }
.section-header-modern { text-align: center; }
.section-header-modern h2 { margin: 0 0 12px; }
.section-header-modern p { max-width: 650px; margin: 0 auto; color: var(--gray); font-size: 1.05rem; }

.category-quick-links {
    display: flex;
    gap: 10px;
    margin: 0 0 34px;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid var(--light-gray);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
}

.category-quick-links a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border-radius: 11px;
    color: var(--dark-gray);
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
}

.category-quick-links a:hover { background: var(--off-white); color: var(--primary); }
.category-quick-links a.active { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; box-shadow: 0 8px 20px rgba(61,26,120,.2); }
.category-quick-links a i { color: var(--gold); }

.courses-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 34px; align-items: start; }
.courses-sidebar { position: sticky; top: 92px; }
.filter-form,
.courses-sidebar-note {
    border: 1px solid var(--light-gray);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.filter-form { padding: 24px; }
.filter-group { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--light-gray); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group h4 { margin: 0 0 14px; font-size: 1.05rem; }
.search-box { display: flex; overflow: hidden; border: 1px solid var(--light-gray); border-radius: 11px; background: var(--off-white); transition: .2s ease; }
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61,26,120,.1); }
.search-box input { width: 100%; min-width: 0; padding: 12px 13px; border: 0; outline: 0; background: transparent; color: var(--dark-gray); font: inherit; }
.search-box button { width: 46px; flex: 0 0 46px; border: 0; background: var(--primary); color: #fff; cursor: pointer; }
.search-box button:hover { background: var(--gold); color: var(--primary-dark); }
.filter-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.filter-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--dark-gray); font-size: .88rem; }
.filter-list a:hover,
.filter-list a.active { background: rgba(61,26,120,.08); color: var(--primary); }
.filter-list a.active { font-weight: 700; }
.filter-list a span { min-width: 28px; padding: 3px 7px; border-radius: 7px; background: var(--off-white); color: var(--gray); text-align: center; font-size: .73rem; }
.filter-checkbox { display: flex; align-items: center; gap: 10px; padding: 8px 3px; color: var(--dark-gray); cursor: pointer; font-size: .88rem; }
.filter-checkbox input { accent-color: var(--primary); }
.filter-form > .btn { justify-content: center; }
.filter-form > .btn-primary { color: #fff; }
.courses-sidebar-note { margin-top: 16px; padding: 22px; background: linear-gradient(145deg,var(--primary-dark),var(--primary)); color: #fff; }
.sidebar-note-title { display: block; margin-bottom: 9px; color: var(--gold-light); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.courses-sidebar-note p { margin: 0 0 10px; color: rgba(255,255,255,.76); font-size: .82rem; line-height: 1.55; }
.courses-sidebar-note p:last-child { margin-bottom: 0; }
.mobile-filter-toggle { display: none; }

.courses-main { min-width: 0; }
.active-filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.active-filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(61,26,120,.12); border-radius: 999px; background: rgba(61,26,120,.07); color: var(--primary); font-size: .8rem; font-weight: 600; }
.active-filter-chip:hover { background: var(--primary); color: #fff; }

.semester-courses-section { display: grid; gap: 18px; margin-bottom: 38px; }
.semester-programmes-intro,
.individual-courses-intro {
    position: relative;
    overflow: hidden;
    padding: 24px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg,var(--primary-dark),#243b6b 68%,#56364a);
    color: #fff;
}
.semester-programmes-intro::after,
.individual-courses-intro::after { content:""; position:absolute; width:150px; height:150px; right:-65px; top:-80px; border:25px solid var(--gold); border-radius:50%; opacity:.12; }
.semester-programmes-intro h2,
.individual-courses-intro h2 { position:relative; z-index:1; margin:0 0 5px; color:#fff; font-size:1.55rem; }
.semester-programmes-intro h2 i,
.individual-courses-intro h2 i { color:var(--gold); }
.semester-programmes-intro p,
.individual-courses-intro p { position:relative; z-index:1; margin:0; color:rgba(255,255,255,.72); }
.individual-courses-intro { margin: 10px 0 18px; }

.semester-programme-card { padding: 26px; border: 1px solid var(--light-gray); border-left: 4px solid var(--gold); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-md); }
.semester-programme-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.semester-programme-title { margin: 0; font-size: 1.4rem; }
.semester-programme-badges { margin: 8px 0; }
.semester-status-badge { display:inline-flex; padding:5px 10px; border-radius:999px; background:#e8f7ed; color:#198844; font-size:.69rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.semester-status-badge.hold { background:#fff4db; color:#9a6500; }
.semester-status-badge.open { background:#eaf2ff; color:#2863b2; }
.semester-programme-meta { display:flex; flex-wrap:wrap; gap:9px 17px; color:var(--gray); font-size:.79rem; }
.semester-programme-meta i { color:var(--gold-dark); }
.semester-programme-cta { display:flex; flex:0 0 auto; align-items:center; gap:14px; }
.semester-programme-price { color:var(--primary-dark); font-size:1.3rem; font-weight:800; }
.semester-programme-button { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border-radius:11px; background:var(--primary); color:#fff; font-size:.83rem; font-weight:700; }
.semester-programme-button:hover { background:var(--gold); color:var(--primary-dark); }
.semester-programme-button.enrolled { background:#e8f7ed; color:#198844; }
.semester-programme-button.hold { background:#fff4db; color:#9a6500; }
.semester-programme-note { margin-top:16px; padding:10px 12px; border-radius:9px; background:#fff8e6; color:#8b6400; font-size:.82rem; }
.semester-programme-courses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.semester-programme-course-item { display:flex; align-items:center; gap:11px; min-width:0; padding:10px; border-radius:13px; background:var(--off-white); }
.semester-programme-course-item img { width:64px; height:64px; flex:0 0 64px; border-radius:10px; object-fit:cover; }
.semester-programme-course-copy { min-width:0; }
.semester-programme-course-copy h5 { margin:0 0 4px; overflow:hidden; font-size:.87rem; text-overflow:ellipsis; white-space:nowrap; }
.semester-programme-course-copy h5 a { color:var(--primary-dark); }
.semester-programme-course-copy div { overflow:hidden; color:var(--gray); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }

.sort-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; padding:13px 16px; border:1px solid var(--light-gray); border-radius:13px; background:var(--white); }
.sort-info { color:var(--gray); font-size:.86rem; }
.sort-options { display:flex; align-items:center; gap:9px; color:var(--dark-gray); font-size:.84rem; }
.sort-form select { min-width:155px; padding:9px 34px 9px 11px; border:1px solid var(--light-gray); border-radius:9px; background-color:var(--off-white); color:var(--dark-gray); }

.courses-main > .grid.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.course-directory-card { min-width:0; border:1px solid var(--light-gray); border-radius:16px; background:var(--white); box-shadow:0 5px 20px rgba(34,20,61,.07); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; }
.course-directory-card:hover { transform:translateY(-7px); border-color:rgba(201,162,39,.55); box-shadow:0 18px 42px rgba(34,20,61,.14); }
.course-directory-card .course-card-image { height:190px; padding:0; }
.course-directory-card .course-card-image img { position:static; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.course-directory-card:hover .course-card-image img { transform:scale(1.07); }
.course-directory-card .course-card-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(42,15,92,.78); opacity:0; transition:opacity .3s ease; }
.course-directory-card:hover .course-card-overlay { opacity:1; }
.course-directory-card .preview-btn { padding:10px 17px; border-radius:999px; background:var(--gold); color:var(--primary-dark); font-size:.79rem; font-weight:700; transform:translateY(8px); transition:transform .3s ease; }
.course-directory-card:hover .preview-btn { transform:translateY(0); }
.course-directory-card .course-card-badge { border-radius:999px; }
.course-directory-card .course-card-content { padding:18px 18px 16px; }
.course-directory-card .course-card-category { color:var(--gold-dark); }
.course-directory-card .course-card-title { min-height:3.05em; margin-bottom:8px; font-size:1.05rem; }
.course-directory-card .course-card-excerpt { display:-webkit-box; min-height:3.9em; margin:0 0 14px; overflow:hidden; color:var(--gray); font-size:.82rem; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.course-directory-card .course-card-instructor { margin-bottom:14px; }
.course-directory-card .course-card-instructor img { width:30px; height:30px; }
.course-directory-card .course-card-meta { gap:10px; padding-top:12px; font-size:.73rem; }
.course-directory-card .course-card-meta span { white-space:nowrap; }
.course-directory-card .course-card-footer { gap:12px; padding:13px 18px; background:var(--off-white); }
.course-card-footer-left { min-width:0; }
.course-directory-card .course-card-price { font-size:1.05rem; }
.course-directory-card .course-card-price .original { display:block; margin-left:0; font-size:.7rem; }
.course-card-rating { display:flex; align-items:center; gap:5px; margin-top:3px; color:var(--gray); font-size:.7rem; }
.course-card-rating .star-rating { display:flex; gap:1px; color:var(--gold); }
.course-card-rating.new { color:var(--success); }
.course-view-link { display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; color:var(--primary); font-size:.78rem; font-weight:800; }
.course-view-link:hover { color:var(--gold-dark); }

.no-results { padding:64px 28px; border:1px dashed var(--light-gray); border-radius:18px; background:var(--white); text-align:center; }
.no-results > i { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:rgba(61,26,120,.08); color:var(--primary); font-size:1.6rem; }
.no-results p { color:var(--gray); }

.courses-pagination { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:34px; }
.courses-pagination a,
.courses-pagination .dots { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--light-gray); border-radius:10px; background:var(--white); color:var(--dark-gray); font-size:.84rem; }
.courses-pagination a:hover,
.courses-pagination a.active { border-color:var(--primary); background:var(--primary); color:#fff; }

.courses-closing-cta { padding:30px 0 80px; background:var(--off-white); }
.courses-cta-card { position:relative; min-height:410px; display:flex; align-items:center; overflow:hidden; border-radius:24px; box-shadow:0 24px 60px rgba(28,16,55,.18); }
.courses-cta-media,
.courses-cta-overlay { position:absolute; inset:0; }
.courses-cta-media img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.courses-cta-overlay { background:linear-gradient(90deg,rgba(31,12,68,.97) 0%,rgba(42,15,92,.91) 48%,rgba(42,15,92,.35) 100%); }
.courses-cta-content { position:relative; z-index:1; max-width:700px; padding:clamp(34px,6vw,76px); color:#fff; }
.courses-cta-content h2 { margin:0 0 15px; color:#fff; font-size:clamp(2rem,4vw,3rem); }
.courses-cta-content p { max-width:580px; margin:0; color:rgba(255,255,255,.8); font-size:1.05rem; }

html[data-theme="dark"] .courses-stats-card { background:rgba(23,27,37,.96); border-color:rgba(255,255,255,.12); color:var(--theme-text); }
html[data-theme="dark"] .courses-stats-head { border-color:var(--theme-border); }
html[data-theme="dark"] .courses-stats-head strong,
html[data-theme="dark"] .courses-stat strong { color:var(--theme-text); }
html[data-theme="dark"] .courses-stat { border-color:var(--theme-border); }
html[data-theme="dark"] .courses-hero-wave { color:var(--surface-0); }
html[data-theme="dark"] .courses-section-shell { background:linear-gradient(180deg,var(--surface-0),var(--surface-1) 32%,var(--surface-0)); }
html[data-theme="dark"] .category-quick-links,
html[data-theme="dark"] .filter-form,
html[data-theme="dark"] .semester-programme-card,
html[data-theme="dark"] .sort-bar,
html[data-theme="dark"] .course-directory-card,
html[data-theme="dark"] .no-results { background:var(--surface-1); border-color:var(--theme-border); }
html[data-theme="dark"] .semester-programme-course-item,
html[data-theme="dark"] .course-directory-card .course-card-footer,
html[data-theme="dark"] .search-box { background:var(--surface-2); }
html[data-theme="dark"] .category-quick-links a { color:var(--theme-text); }
html[data-theme="dark"] .semester-programme-title,
html[data-theme="dark"] .semester-programme-price,
html[data-theme="dark"] .semester-programme-course-copy h5 a { color:var(--theme-text); }
html[data-theme="dark"] .course-directory-card .course-card-title a,
html[data-theme="dark"] .course-directory-card .course-card-price { color:var(--theme-text); }
html[data-theme="dark"] .course-directory-card .course-view-link { color:var(--gold-light); }
html[data-theme="dark"] .course-directory-card .course-card-meta { border-color:var(--theme-border); }
html[data-theme="dark"] .filter-form > .btn-primary { color:#fff; }
html[data-theme="dark"] .courses-closing-cta { background:var(--surface-0); }

@media (max-width: 1120px) {
    .courses-hero-grid { grid-template-columns: minmax(0,1fr) 330px; gap:38px; }
    .courses-main > .grid.grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .semester-programme-courses { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
    .courses-hero { min-height:auto; }
    .courses-hero-grid { grid-template-columns:1fr; padding:64px 0 110px; }
    .courses-stats-card { max-width:600px; }
    .courses-layout { grid-template-columns:1fr; }
    .mobile-filter-toggle { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:18px; padding:13px; border:1px solid var(--light-gray); border-radius:12px; background:var(--white); color:var(--primary); font-weight:700; cursor:pointer; }
    .courses-sidebar { position:static; display:none; }
    .courses-sidebar.is-open { display:block; }
    .filter-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
    .filter-group { margin:0; }
    .filter-form > .btn { align-self:end; }
    .courses-sidebar-note { display:none; }
}

@media (max-width: 680px) {
    .courses-hero h1 { font-size:2.55rem; }
    .courses-hero-grid { padding-top:48px; }
    .courses-stats-grid { grid-template-columns:1fr; }
    .courses-stat:nth-last-child(-n+2) { border-bottom:1px solid #f0edf4; }
    .courses-stat:last-child { border-bottom:0; }
    .courses-hero-actions,
    .courses-cta-actions { flex-direction:column; align-items:stretch; }
    .courses-hero-actions .btn,
    .courses-cta-actions .btn { width:100%; justify-content:center; }
    .filter-form { grid-template-columns:1fr; }
    .sort-bar,
    .semester-programme-head,
    .semester-programme-cta { flex-direction:column; align-items:flex-start; }
    .sort-options { width:100%; justify-content:space-between; }
    .courses-main > .grid.grid-3,
    .semester-programme-courses { grid-template-columns:1fr; }
    .courses-cta-card { min-height:460px; }
    .courses-cta-overlay { background:rgba(42,15,92,.88); }
}