/**
 * @file
 * Course detail page styles.
 *
 * Loaded conditionally only on course node pages for performance.
 */

/* ── Hero Section ── */
.course-detail__hero {
  background: linear-gradient(180deg, var(--color-background-alt), var(--color-background));
  padding: 52px var(--page-gutter) 40px;
}

.course-detail__breadcrumb {
  font-size: 13.5px;
  color: var(--color-text-secondary);
}

.course-detail__breadcrumb a {
  color: var(--color-primary);
  cursor: pointer;
}

.course-detail__eyebrow {
  margin-top: 18px;
}

.course-detail__title {
  margin-top: 18px;
  font-size: var(--font-size-h1);
  line-height: 1.08;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h1);
}

.course-detail__subtitle {
  margin-top: 18px;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 640px;
}

/* ── Metadata Grid ── */
.course-detail__meta-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap-sm);
}

.course-detail__meta-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.course-detail__meta-label {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

.course-detail__meta-value {
  margin-top: var(--space-xs);
  font-size: 15.5px;
  font-weight: var(--font-weight-bold);
}

/* ── Cover Image ── */
.course-detail__cover {
  margin-top: var(--space-3xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 330px;
}

.course-detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Content Area ── */
.course-detail__content {
  padding-top: 20px;
  padding-bottom: 40px;
}

/* ── Content Sections ── */
.course-detail__section {
  margin-top: 46px;
}

.course-detail__section:first-child {
  margin-top: 0;
}

.course-detail__section-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
}

/* ── Target Audience ── */
.course-detail__audience-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ── Curriculum ── */
.course-detail__curriculum {
  margin-top: 22px;
}

/* ── Resources ── */
.course-detail__resources-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.course-detail__resource-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: var(--font-size-body);
}

/* ── Body Content ── */
.course-detail__body {
  margin-top: 46px;
}

/* ── Sidebar Placeholder ── */
.course-detail__sidebar-placeholder {
  /* Empty column to maintain grid alignment with hero pricing card */
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .course-detail__meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .course-detail__hero {
    padding: var(--space-xl) var(--page-gutter) var(--space-lg);
  }

  .course-detail__title {
    font-size: 28px;
    letter-spacing: -0.9px;
  }

  .course-detail__meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap-xs);
  }

  .course-detail__meta-item {
    padding: var(--space-base);
  }

  .course-detail__meta-label {
    font-size: 12px;
  }

  .course-detail__meta-value {
    font-size: 14.5px;
  }

  .course-detail__cover {
    height: 190px;
    border-radius: var(--radius-xl);
  }

  .course-detail__content {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  .course-detail__section {
    margin-top: 30px;
  }

  .course-detail__section-title {
    font-size: 22px;
    letter-spacing: -0.7px;
  }

  .course-detail__audience-list {
    font-size: var(--font-size-body);
  }
}