.course-hero{
  padding-block:calc(72px + var(--space-xl)) var(--space-lg);
  position:relative;
}
/*
 * A themed entity tints its hero from the course palette's surface token.
 * The selector is now descendant-of-scope rather than [data-palette] on the
 * hero itself, because the palette lives on <main> — see variables.css.
 */
[data-course-theme] .course-hero{
  background:linear-gradient(180deg, var(--course-primary-surface) 0%, transparent 88%);
  border-radius:var(--radius-lg);
}
[data-course-theme] .course-hero__media{
  border-color:var(--course-primary-border);
}

.breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  font-size:var(--fs-small);
  font-family:var(--font-interface-en);
  font-weight:var(--font-interface-en-weight);
  letter-spacing:var(--font-interface-en-tracking);
  color:var(--color-text-muted);
  margin-bottom:var(--space-lg);
  transition:color var(--dur-fast) var(--ease-soft);
}
html[lang="ar"] .breadcrumb{
  font-family:var(--font-interface-ar);
  font-weight:var(--font-interface-ar-weight);
  letter-spacing:var(--font-interface-ar-tracking);
}
.breadcrumb:hover{
  color:var(--color-accent-strong);
}
.breadcrumb svg{
  width:16px;
  height:16px;
}
html[dir="rtl"] .breadcrumb svg{
  transform:scaleX(-1);
}

.course-hero__grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--space-2xl);
  align-items:center;
}

.course-hero__media{
  position:relative;
  aspect-ratio:16 / 11;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
}
.course-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.course-hero__badges{
  display:flex;
  gap:var(--space-2xs);
  flex-wrap:wrap;
  margin-bottom:var(--space-sm);
}

.course-hero__title{
  font-size:var(--fs-h1);
  margin-bottom:var(--space-sm);
}
.field-icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  height:1.15em;
  margin-inline-end:0.35em;
  border-radius:var(--radius-xs);
  background:var(--course-primary-soft, var(--color-accent-soft));
  color:var(--course-accent-text, var(--color-accent-strong));
  vertical-align:middle;
  transform:translateY(-0.08em);
}
.field-icon-badge__svg{
  width:62%;
  height:62%;
}

.course-hero__desc{
  font-size:var(--fs-lead);
  color:var(--color-text-soft);
  margin-bottom:var(--space-lg);
}

.course-hero__actions{
  display:flex;
  gap:var(--space-xs);
  flex-wrap:wrap;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:var(--space-sm);
  padding-block:var(--space-2xl);
}

.info-card{
  padding:var(--space-md);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  gap:var(--space-2xs);
  transition:transform var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-premium);
}
.info-card:hover{
  transform:translateY(-2px);
  border-color:var(--color-border-strong);
  box-shadow:var(--shadow-sm);
}

.info-card__icon{
  width:38px;
  height:38px;
  border-radius:var(--radius-md);
  background:var(--color-blue-soft);
  color:var(--color-blue-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--space-2xs);
  transition:background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.info-card:hover .info-card__icon{
  background:var(--color-accent-soft);
  color:var(--color-accent-strong);
}
.info-card__icon svg{
  width:18px;
  height:18px;
}

.info-card__label{
  font-size:var(--fs-xs);
  font-family:var(--font-interface-en);
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
html[lang="ar"] .info-card__label{
  font-family:var(--font-interface-ar);
}

.info-card__value{
  font-size:var(--fs-body);
  font-family:var(--font-interface-en);
  font-weight:600;
  color:var(--color-text);
}
html[lang="ar"] .info-card__value{
  font-family:var(--font-interface-ar);
}
.about-section{
  padding-block:var(--space-2xl);
  display:grid;
  grid-template-columns:1fr 340px;
  gap:var(--space-2xl);
  align-items:start;
}

.about-section h2{
  font-size:var(--fs-h2);
  margin-bottom:var(--space-sm);
}

.about-body{
  font-size:var(--fs-body);
  color:var(--color-text-soft);
  line-height:1.9;
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs);
  margin-top:var(--space-md);
}
.join-panel{
  position:sticky;
  top:calc(72px + var(--space-md));
  padding:var(--space-lg);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  overflow:hidden;
}

.join-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--gradient-accent);
}

.join-panel h3{
  font-size:var(--fs-h3);
}

.join-panel p{
  font-size:var(--fs-small);
  color:var(--color-text-muted);
}

.join-panel__actions{
  display:flex;
  flex-direction:column;
  gap:var(--space-2xs);
  margin-top:var(--space-2xs);
}
.related-section{
  padding-block:var(--space-2xl);
}
.related-section__footer{
  display:flex;
  justify-content:center;
  margin-top:var(--space-lg);
}
.state-screen{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-sm);
  padding:var(--space-lg);
}

.state-screen__icon{
  width:64px;
  height:64px;
  color:var(--color-accent);
  opacity:0.8;
}

/*
 * Section rhythm on the course page.
 *
 * These sections are .container elements (max-width + auto margins), so a
 * plain background would paint an inset floating strip rather than a band.
 * The pseudo-element below breaks out to the full viewport width; body has
 * overflow-x:hidden, so the 100vw overhang never creates a scrollbar.
 *
 * The surfaces deliberately ALTERNATE — tinted hero, neutral reviews band,
 * softly tinted metadata band, white content — so a themed course reads as
 * a rhythm of layers instead of one continuous sheet of the accent colour.
 */
.course-info-section{
  position:relative;
}
.course-info-section::before,
.course-reviews-section::after{
  content:"";
  position:absolute;
  inset-block:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  z-index:-1;
  border-block:1px solid var(--color-border);
}
.course-info-section::before{
  background:var(--color-surface-blue);
}
[data-course-theme] .course-info-section::before{
  background:var(--course-surface-soft);
}

.state-screen h1,
.state-screen h2{
  font-size:var(--fs-h2);
}

.state-screen p{
  max-width:420px;
  color:var(--color-text-soft);
}

.course-skeleton{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--space-2xl);
  align-items:center;
  padding-block:calc(72px + var(--space-xl)) var(--space-lg);
}
.course-skeleton .skeleton-media{ aspect-ratio:16/11; }
.course-skeleton .skeleton-line{ height:1em; margin-bottom:0.6em; }