:root{
  --red: #FF4655;
  --dark: #0E1822;
  --white: #ffffff;
  --muted: #6b7280;
  --container: 1100px;
}

/* Base */
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--dark);
  background:#fff;
  line-height:1.5;
}
.container{
  width:90%;
  max-width:var(--container);
  margin:0 auto;
  padding:1rem 0;
}

/* COURSE HERO */
.course-hero{
  display:flex;
  gap:1.25rem;
  align-items:center;
  margin:2rem 0;
  flex-wrap:wrap;
}

/* thumbnail */
.course-hero .img-wrap{
  flex:0 0 360px;
  max-width:360px;
}
.course-hero .img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

/* details */
.course-hero .details{
  flex:1 1 360px;
}
.course-hero .details h1{
  margin:0 0 .4rem 0;
  font-family:"Ropa Sans", sans-serif;
  font-size:2rem;
}
.course-hero .details p.lead{
  margin:0 0 1rem 0;
  color:var(--muted);
  max-width:780px;
}

/* info boxes */
.info-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:1rem;
  margin:1rem 0 1.6rem 0;
}
.info-box{
  background:#fafafa;
  padding:0.85rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.04);
}
.info-box h4{ margin:0 0 .4rem 0; font-size:0.95rem; }
.info-box p{ margin:0; color:var(--muted); font-size:0.95rem; }

/* syllabus */
.syllabus{
  margin:1rem 0 2rem 0;
}
.syllabus ul{ padding-left:1.25rem; color:var(--dark); }

/* actions buttons (Enroll / Other courses) */
.actions{
  display:flex;
  gap:0.8rem;
  margin-top:1rem;
}
.actions .primary-button{
  text-decoration:none;
  display:inline-block;
  padding:0.7rem 1.6rem;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04rem;
  border-radius:8px;
  color: var(--white);
  background-color: var(--dark);
  border:1px solid var(--dark);
  transition:0.32s ease-in-out;
}
.actions .primary-button:hover{
  background-color: var(--red);
  border-color: var(--red);
  transform: translateY(-3px);
}

.actions .secondary{
  display:inline-block;
  padding:0.7rem 1.6rem;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04rem;
  border-radius:8px;
  color: var(--dark);
  background-color:#fff;
  border:1px solid rgba(0,0,0,0.08);
  text-decoration:none;
  transition:0.32s ease-in-out;
}
.actions .secondary:hover{
  background-color:#f3f3f3;
  transform:translateY(-3px);
}

/* Top back buttons - unique class to avoid conflicts */
.top-back-btn{
  display:inline-block;
  padding:0.7rem 1.6rem;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04rem;
  border-radius:8px;
  text-decoration:none;
  color: var(--white);
  background-color: var(--dark);
  border:1px solid var(--dark);
  transition:0.32s ease-in-out;
  margin-bottom:1rem;
}
.top-back-btn:hover{
  background-color: var(--red);
  border-color: var(--red);
  transform:translateY(-3px);
}

/* Responsive */
@media (max-width:720px){
  .course-hero{ flex-direction:column; }
  .course-hero .img-wrap{ width:100%; max-width:100%; }
}