/* =====================================================
HT COURSES SYSTEM
===================================================== */

.single-ht_course .main-content,
.single-ht_course .media-main-content{
width:100%!important;
max-width:100%!important;
flex:0 0 100%!important;
}

.single-ht_course .vc_sidebar{
display:none!important;
}

.single-ht_course .container,
.single-ht_course .content-area{
max-width:1320px;
width:100%;
margin:0 auto;
}

/* =====================================================
COURSES ARCHIVE / INDEX
===================================================== */

.ht-courses-page{
margin:0 0 30px;
padding-top:20px;
}

.ht-courses-page-title{
font-size:28px;
font-weight:700;
margin:0 0 20px 0;
line-height:1.2;
}

.ht-courses-filters-wrap{
margin:0 0 34px;
}

/* each row */
.ht-courses-filters{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 12px;
align-items:center;
}

.ht-courses-filters:last-child{
margin-bottom:0;
}

/* visual hierarchy between rows without changing HTML */
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(2),
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(3){
padding-top:12px;
margin-top:12px;
border-top:1px solid #e6e6e6;
}

.ht-courses-filter-label{
font-size:12px;
font-weight:700;
color:#777;
margin-right:2px;
min-width:54px;
}

/* base pill */
.ht-courses-filters a{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border-radius:999px;
border:1px solid #dddddd;
transition:all .2s ease;
white-space:nowrap;
}

/* row 1 = primary filters */
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(1) a{
padding:10px 16px;
min-height:38px;
background:#eef4fb;
border-color:#d7e2f0;
color:#2456a4;
font-size:13px;
font-weight:700;
box-shadow:0 1px 2px rgba(0,0,0,0.03);
}

.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(1) a:hover,
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(1) a.active{
background:#1d4f91;
border-color:#1d4f91;
color:#fff;
}

/* row 2 = providers */
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(2) a{
padding:8px 13px;
min-height:32px;
background:#f5f5f5;
border-color:#dddddd;
color:#555;
font-size:12px;
font-weight:600;
}

.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(2) a:hover,
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(2) a.active{
background:#e5edf8;
border-color:#cad8eb;
color:#2456a4;
}

/* row 3 = topics */
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(3) a{
padding:6px 11px;
min-height:26px;
background:#fafafa;
border-color:#e6e6e6;
color:#666;
font-size:11px;
font-weight:600;
}

.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(3) a:hover,
.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(3) a.active{
background:#eef2f7;
border-color:#d8e1ec;
color:#456382;
}

.ht-courses-section{
margin:0 0 40px;
}

.ht-courses-section-head{
margin:0 0 18px;
}

.ht-courses-section-head h3{
font-size:24px;
font-weight:700;
line-height:1.2;
color:#111;
margin:0 0 8px;
}

.ht-courses-section-head p{
margin:0;
font-size:15px;
line-height:1.7;
color:#555;
max-width:900px;
}

/* course grids */
.ht-courses-grid,
.ht-on-demand-courses-grid,
.ht-upcoming-courses-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
gap:22px;
margin-top:16px;
}

.ht-course-card{
background:#f7f7f7;
border:1px solid #e2e2e2;
border-radius:12px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.03);
display:flex;
flex-direction:column;
height:100%;
transition:all .2s ease;
}

.ht-course-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.ht-course-card-link{
display:block;
text-decoration:none;
color:inherit;
}

.ht-course-card-image{
background:#f7f7f7;
border-bottom:1px solid #e2e2e2;
}

.ht-course-card-image img{
width:100%;
height:200px;
object-fit:cover;
display:block;
}

.ht-course-card-content{
padding:14px 14px 12px;
}

.ht-course-card-topline{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:0 0 10px;
}

.ht-course-badge{
display:inline-flex;
align-items:center;
padding:5px 9px;
border-radius:20px;
background:#eef4fb;
color:#1d4f91;
font-size:11px;
font-weight:700;
line-height:1.2;
}

.ht-course-badge-status{
background:#111;
color:#fff;
}

.ht-course-card-title{
font-size:16px;
font-weight:700;
line-height:1.35;
color:#111;
margin:0 0 8px;
}

.ht-course-card-meta,
.ht-course-meta{
display:flex;
flex-wrap:wrap;
gap:6px 12px;
font-size:12px;
line-height:1.35;
color:#666;
margin:0 0 8px;
}

.ht-course-card-meta span,
.ht-course-meta span{
display:inline-flex;
align-items:center;
}

.ht-course-card-date-line,
.ht-course-card-location{
font-size:13px;
line-height:1.45;
color:#333;
margin:0 0 6px;
}

.ht-course-card-excerpt{
font-size:13px;
line-height:1.55;
color:#555;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
}

.ht-course-card-actions{
display:flex;
gap:8px;
padding:0 14px 14px;
margin-top:auto;
}

.ht-course-primary-link,
.ht-course-secondary-link{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border-radius:8px;
padding:10px 14px;
font-size:13px;
font-weight:700;
transition:all .2s ease;
}

.ht-course-primary-link{
background:#1d4f91;
color:#fff;
flex:1 1 auto;
}

.ht-course-primary-link:hover{
background:#163c6e;
color:#fff;
}

.ht-course-secondary-link{
background:#fff;
color:#1d4f91;
border:1px solid #d8e2f0;
width: 100%;
}

.ht-course-secondary-link:hover{
background:#eef4fb;
color:#1d4f91;
}

.ht-courses-empty{
font-size:15px;
color:#666;
}

.ht-featured-courses{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:18px;
}

.ht-course-logo{
display:flex;
align-items:center;
justify-content:center;
min-height:110px;
padding:18px;
background:#f7f7f7;
border:1px solid #e2e2e2;
border-radius:12px;
}

.ht-course-logo img{
max-height:74px;
width:auto;
display:block;
margin:0 auto;
}

.ht-course-logo-text{
font-size:14px;
font-weight:700;
color:#1d4f91;
text-align:center;
}

/* =====================================================
COURSE SINGLE PAGE
===================================================== */

.ht-course-single-wrap{
margin:0 auto 40px auto;
max-width:1280px;
padding:20px;
box-sizing:border-box;
}

.ht-course-single{
width:100%;
max-width:none;
}

.ht-course-breadcrumbs{
font-size:13px;
line-height:1.5;
color:#666;
margin:0 0 18px;
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
}

.ht-course-breadcrumbs a{
color:#1d4f91;
text-decoration:none;
}

.ht-course-breadcrumbs a:hover{
text-decoration:underline;
}

.ht-course-header{
display:grid;
grid-template-columns:2.45fr 0.85fr;
gap:18px;
margin:0 0 30px;
align-items:start;
}

.ht-course-header-main{
display:block;
padding:16px;
background:#f7f7f7;
border:1px solid #e2e2e2;
border-radius:12px;
min-width:0;
}

.ht-course-brand{
width:100%;
min-width:0;
margin:0 0 14px;
}

.ht-course-brand img{
width:100%;
height:auto;
max-height:260px;
object-fit:cover;
display:block;
border-radius:10px;
}

.ht-course-header-text{
min-width:0;
}

.ht-course-header-badges{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 12px;
}

.ht-course-name{
font-size:34px;
line-height:1.15;
font-weight:700;
color:#111;
margin:0 0 10px;
}

.ht-course-header-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:18px 0 0;
}

.ht-course-header-sponsor{
display:flex;
height:100%;
}

.ht-course-sponsor-link{
display:block;
width:100%;
height:100%;
text-decoration:none;
color:inherit;
}

.ht-course-sponsor-card{
background:#f7f7f7;
border:1px solid #e0e0e0;
border-radius:12px;
padding:14px;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,0.04);
height:100%;
min-height:0;
}

.ht-course-sponsor-image{
margin:0;
}

.ht-course-sponsor-image img{
width:100%;
max-width:220px;
max-height:150px;
height:auto;
object-fit:contain;
display:block;
margin:0 auto;
border-radius:0;
aspect-ratio:auto;
}

.ht-course-sponsor-name{
font-size:16px;
font-weight:700;
line-height:1.3;
color:#111;
margin:10px 0 6px;
}

.ht-course-sponsor-message{
font-size:13px;
line-height:1.5;
color:#555;
}

.ht-course-summary,
.ht-course-facts,
.ht-course-related,
.ht-course-strategy{
margin:0 0 34px;
}

.ht-course-summary{
font-size:15px;
line-height:1.8;
color:#333;
}

.ht-course-summary p{
margin:0 0 16px;
}

.ht-course-facts h2,
.ht-course-related h2{
font-size:24px;
font-weight:700;
line-height:1.2;
color:#111;
margin:0 0 16px;
}

.ht-course-facts-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:20px;
align-items:start;
margin:0 0 12px;
}

.ht-course-facts-topline{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:flex-end;
align-items:center;
}

.ht-course-facts-topline span{
display:inline-flex;
align-items:center;
padding:8px 12px;
background:#f7f7f7;
border:1px solid #e2e2e2;
border-radius:999px;
font-size:13px;
line-height:1.3;
color:#444;
box-shadow:none;
}

.ht-course-facts-topline strong{
color:#111;
margin-right:4px;
}

.ht-course-facts-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.ht-course-fact-card{
background:#f7f7f7;
border:1px solid #e2e2e2;
border-radius:10px;
padding:10px 14px;
min-height:64px;
box-shadow:none;
}

.ht-course-fact-label{
display:block;
font-size:10px;
font-weight:700;
line-height:1.2;
color:#666;
margin:0 0 4px;
text-transform:uppercase;
}

.ht-course-fact-value{
display:block;
font-size:15px;
font-weight:700;
line-height:1.2;
color:#111;
word-break:break-word;
}

.ht-course-strategy-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.ht-course-strategy-card{
background:#f7f7f7;
border:1px solid #e2e2e2;
border-radius:10px;
padding:12px 14px;
box-shadow:none;
}

.ht-course-strategy-card h3{
font-size:16px;
font-weight:700;
line-height:1.2;
color:#111;
margin:0 0 6px;
}

.ht-course-strategy-text{
font-size:14px;
line-height:1.5;
color:#333;
}

.ht-course-strategy-text p{
margin:0;
}

.ht-course-related .ht-courses-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
}

.ht-course-related .ht-course-card{
background:#fff;
}

.ht-course-related .ht-course-card-content{
padding:14px 14px 12px;
}

.ht-course-related .ht-course-primary-link{
display:none!important;
}

/* Remove Start Learning button on course listings */
.ht-courses-grid .ht-course-primary-link,
.ht-on-demand-courses-grid .ht-course-primary-link,
.ht-upcoming-courses-grid .ht-course-primary-link {
    display: none !important;
}

.ht-course-badge-affiliate {
    background: #fff6df;
    color: #8a6400;
    border: 1px solid #f0dfab;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 1200px){
.ht-course-related .ht-courses-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}

@media (max-width: 1100px){
.ht-course-header{
grid-template-columns:1fr;
}

.ht-course-facts-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.ht-courses-grid,
.ht-on-demand-courses-grid,
.ht-upcoming-courses-grid{
grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
gap:20px;
}
}

@media (max-width: 900px){
.ht-course-related .ht-courses-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width: 782px){
.ht-course-single-wrap{
padding:16px;
}

.ht-course-name{
font-size:28px;
}

.ht-course-facts-head{
grid-template-columns:1fr;
}

.ht-course-facts-topline{
justify-content:flex-start;
}

.ht-course-facts-grid,
.ht-course-strategy-grid{
grid-template-columns:1fr;
}

.ht-course-card-actions{
flex-direction:column;
}

.ht-courses-filters-wrap .ht-courses-filters{
gap:8px;
}

.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(1) a{
padding:9px 14px;
min-height:36px;
font-size:12px;
}

.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(2) a{
padding:7px 11px;
min-height:30px;
font-size:12px;
}

.ht-courses-filters-wrap .ht-courses-filters:nth-of-type(3) a{
padding:6px 10px;
min-height:24px;
font-size:11px;
}
}

@media (max-width: 640px){
.ht-courses-grid,
.ht-on-demand-courses-grid,
.ht-upcoming-courses-grid,
.ht-course-related .ht-courses-grid{
grid-template-columns:1fr;
}

.ht-course-sponsor-card{
padding:12px;
}

.ht-course-sponsor-image img{
max-width:180px;
max-height:120px;
}
}