/* =========================================================
   CEA – Modern Content Styling for Course Pages
   Scope: course detail area only (safe selectors)
   Won't change inputs/forms or the REFINE dropdown.
   ========================================================= */

/* ---------- Design tokens (tweak freely) ---------- */
:root {
  --cea-content-max: 980px;

  --cea-bg: #0b0c10;                 /* page backdrop (used for shadows contrast only) */
  --cea-surface: #ffffff;            /* content cards (light surface is more readable) */
  --cea-text: #1a1d29;               /* main text */
  --cea-text-dim: #5b6070;           /* secondary text */
  --cea-border: #e7e9f0;

  --cea-accent: #0ab0ff;             /* electric blue */
  --cea-accent-2: #5a7bff;           /* gradient partner */

  --cea-radius-sm: 10px;
  --cea-radius-md: 14px;
  --cea-radius-lg: 18px;

  --cea-shadow-1: 0 8px 24px rgba(16, 21, 40, 0.08);
  --cea-shadow-2: 0 14px 40px rgba(16, 21, 40, 0.12);

  --cea-space-1: .45rem;
  --cea-space-2: .8rem;
  --cea-space-3: 1.2rem;
  --cea-space-4: 1.8rem;
  --cea-space-5: 2.6rem;
  --cea-space-6: 3.6rem;

  --cea-fs-lead: clamp(1.02rem, .35vw + .98rem, 1.15rem);
  --cea-fs-h1: clamp(1.9rem, 2.6vw, 2.8rem);
  --cea-fs-h2: clamp(1.35rem, 1.4vw, 1.8rem);
  --cea-fs-h3: clamp(1.05rem, .6vw, 1.25rem);
  --cea-lh: 1.6;
  --cea-lh-tight: 1.2;
}

/* ---------- Scope wrappers ---------- */
.ic-Layout-contentMain .user_content,
.ic-Layout-contentMain .show-content,
.product-details,
.product-show,
.course-details,
#content .user_content {
  color: var(--cea-text);
  line-height: var(--cea-lh);
  max-width: var(--cea-content-max);
  margin: 0 auto;
  padding: 0 var(--cea-space-3);
}

/* ---------- Hero band (image + info row) ---------- */
.product-details .product-hero,
.product-show .product-hero,
.ic-Layout-contentMain .user_content .cea-hero-block {
  display: grid;
  grid-template-columns: minmax(260px, 40%) 1fr;
  gap: var(--cea-space-4);
  align-items: center;
  background: linear-gradient(180deg, #fff, #fff) padding-box,
              radial-gradient(1200px 600px at -10% 0%, rgba(10,176,255,.16), transparent 60%),
              radial-gradient(900px 500px at 120% 10%, rgba(90,123,255,.12), transparent 60%);
  border: 1px solid var(--cea-border);
  padding: var(--cea-space-5) var(--cea-space-4);
  box-shadow: var(--cea-shadow-1);
  margin-bottom: var(--cea-space-5);

  /* full-width breakout */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}

.product-hero img, .product-hero .media img,
.cea-hero-block img {
  width: 100%;
  height: auto;
  border-radius: var(--cea-radius-md);
  display: block;
  object-fit: cover;
  box-shadow: var(--cea-shadow-1);
}

.product-hero h1, .cea-hero-block h1 {
  font-size: var(--cea-fs-h1);
  line-height: var(--cea-lh-tight);
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 var(--cea-space-2) 0;
}
.product-hero .meta, .cea-hero-block .meta {
  color: var(--cea-text-dim);
  font-size: .96rem;
}

/* ---------- Section headings ---------- */
.user_content h2, .show-content h2,
.product-details h2, .product-show h2 {
  font-size: var(--cea-fs-h2);
  line-height: var(--cea-lh-tight);
  font-weight: 850;
  letter-spacing: -0.01em;
  margin: var(--cea-space-5) 0 var(--cea-space-2);
  position: relative;
}
.user_content h3, .show-content h3,
.product-details h3, .product-show h3 {
  font-size: var(--cea-fs-h3);
  font-weight: 800;
  margin: var(--cea-space-4) 0 var(--cea-space-2);
  color: var(--cea-text);
}

/* Accent underline */
.user_content h2::after, .show-content h2::after,
.product-details h2::after, .product-show h2::after {
  content: "";
  display: block;
  height: 3px;
  width: 64px;
  margin-top: .55rem;
  border-radius: 3px;
  background-image: linear-gradient(90deg, var(--cea-accent), var(--cea-accent-2));
}

/* Duration badge */
.user_content h2 em, .user_content h2 strong,
.product-details h2 em, .product-details h2 strong {
  display: inline-block;
  margin-left: .6rem;
  font-size: .8rem;
  font-weight: 800;
  color: #0e2340;
  background-image: linear-gradient(135deg, #eaf6ff, #dfe8ff);
  padding: .2rem .55rem;
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------- Lead paragraph ---------- */
.user_content h2 + p, .product-details h2 + p {
  font-size: var(--cea-fs-lead);
  color: var(--cea-text);
}

/* ---------- Info block ---------- */
.user_content p strong:first-child,
.product-details p strong:first-child {
  display: inline-block;
  min-width: 86px;
  font-weight: 900;
  color: #0f2542;
  background: #eef5ff;
  border: 1px solid #d8e8ff;
  padding: .15rem .5rem;
  border-radius: 8px;
  margin-right: .55rem;
}

/* ---------- Lists ---------- */
.user_content ul, .product-details ul {
  padding-left: 1.2rem;
  margin: var(--cea-space-2) 0 var(--cea-space-3);
}
.user_content ul li, .product-details ul li {
  margin: .3rem 0;
}
.user_content ul li::marker, .product-details ul li::marker {
  color: var(--cea-accent);
  font-weight: 900;
}

/* ---------- Content cards ---------- */
.user_content .cea-card,
.product-details .cea-card {
  background: var(--cea-surface);
  border: 1px solid var(--cea-border);
  border-radius: var(--cea-radius-lg);
  padding: var(--cea-space-4);
  box-shadow: var(--cea-shadow-1);
  margin: var(--cea-space-4) 0;
}

/* ---------- Callouts ---------- */
.user_content blockquote, .product-details blockquote {
  margin: var(--cea-space-4) 0;
  padding: var(--cea-space-3) var(--cea-space-4);
  background: linear-gradient(180deg, #fbfdff, #f7faff);
  border-left: 4px solid var(--cea-accent);
  border-radius: var(--cea-radius-md);
  color: #0f2542;
  box-shadow: var(--cea-shadow-1);
}

/* ---------- Divider ---------- */
.user_content .cea-divider, .product-details .cea-divider {
  height: 1px;
  margin: var(--cea-space-5) 0;
  background: linear-gradient(90deg, transparent, var(--cea-border), transparent);
  border: 0;
}

/* ---------- Media ---------- */
.user_content img, .product-details img {
  border-radius: var(--cea-radius-md);
  box-shadow: var(--cea-shadow-1);
}

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .product-details .product-hero,
  .product-show .product-hero,
  .ic-Layout-contentMain .user_content .cea-hero-block {
    grid-template-columns: 1fr;
    padding: var(--cea-space-4) var(--cea-space-3);
  }
}