/* ==============================================================
 *  Courses Shop – unified, equal-height, white cards
 * ============================================================== */

/* ---------- Wrapper & heading ---------- */
.courses-page-wrapper{
    max-width:1320px;
    margin:0 auto;
    padding:40px 20px;
    font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.shop-title{
    font-size:2.8rem;
    color:#0e74bc;
    text-align:left;
    margin:0 0 32px;
}

/* ---------- Grid ---------- */
.course-card-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:32px;
}

/* ---------- Card shell ---------- */
.course-card{
    display:flex;                 /* flex-column for equal height */
    flex-direction:column;
    background:#fff;
    border-radius:16px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    overflow:hidden;
    transition:transform .25s,box-shadow .25s;
}
.course-card:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.course-card a{
    color:inherit;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

/* ---------- Thumbnail ---------- */
.course-card-img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:contain;
    background:#fafafa;
}

/* ---------- Body ---------- */
.course-card-content{
    flex:1 1 auto;                /* fill remaining space */
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:22px 24px;
}
.course-card-title{
    font-size:1.3rem;
    font-weight:600;
    line-height:1.35;
    color:#0e0e0e;
    margin:0;
}
.course-card-description{
    font-size:.95rem;
    color:#555;
}
.course-card-details{
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
    font-size:.85rem;
    color:#5e5e5e;
}

/* ---------- CTA button row ---------- */
.course-btn,
.course-card a > .course-btn{     /* ensure selector catches nested span & link */
    background:#0073aa;
    color:#fff;
    padding:10px 20px;
    border-radius:8px;
    font-weight:600;
    display:inline-block;
    margin-top:auto;              /* pushes button to bottom */
    transition:background .25s;
    align-self:flex-start;
}
.course-btn:hover{ background:#005983; }

/* ---------- Read-more button ---------- */
.read-more-btn {
    background-color: #0073aa;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    border: none;
    transition: background-color 0.3s;
    font-size: 0.85rem;
    margin-top: 8px;
  }
  
  .read-more-btn:hover {
    background-color: #005983;
    text-decoration: none;
  }
  /* ---------- Responsive tweaks ---------- */
@media(max-width:900px){
    .course-card-wrapper{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}
@media(max-width:576px){
    .shop-title{ font-size:2.2rem; text-align:center; }
    .courses-page-wrapper{ padding:30px 14px; }
}
.course-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
  }