/* ===========================================================================
   Product (Course) detail page — ported from the ceshive "ProductPage" prototype
   (cesdesigns/ceshive: pages.jsx ProductPage + Block + buybox, components.jsx).

   Standalone, page-scoped stylesheet linked only by Views/Website/ProductCourse.cshtml
   so the PDP look ships without touching any theme bundle. References the theme's
   design tokens with literal fallbacks so it degrades gracefully elsewhere.

   Layout contract (per design):
     - .pdp__hero      — FIXED top banner with the product name (dark, full-bleed)
     - .pdp__buybox    — FIXED price card on the right (sticky)
     - .pdp__main      — the configurable page-builder sections
   =========================================================================== */

.pdp { background: var(--c-surface, #fff); }

/* Two-column grid. The hero spans BOTH columns on row 1 (so its background can break
   out to the full viewport width, centered correctly); the body sits on row 1 col 1,
   and the sticky price card spans both rows on col 2, floating over the hero's right. */
.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 40px;
  align-items: start;
  padding-bottom: 48px;
}
.pdp__grid > .pdp__hero,
.pdp__grid > .ws-course-hero { grid-column: 1 / -1; grid-row: 1; }
.pdp__main { grid-column: 1; grid-row: 2; }
/* Span both rows and STRETCH so the sticky card has travel room down the page.
   The top margin drops the card a little below the hero top (per the design). */
.pdp__buybox-float { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-width: 0; z-index: 2; margin-top: 32px; }

/* ----- FIXED hero (dark band) -----
   Applies to both the model-based fallback (.pdp__hero) and the configurable
   CourseHero section wrapper (.ws-course-hero). The background lives on a child
   .course-hero__bg layer so the admin can override it (image/color) inline. */
.pdp__hero,
.pdp .ws-course-hero {
  position: relative; z-index: 0; color: #e6e8ee; padding: 36px 0 48px;
}
.course-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--c-dark, #191919);
  background-image:
    radial-gradient(700px 300px at 90% 0%, rgba(182, 28, 27, 0.35), transparent 60%),
    radial-gradient(500px 220px at 0% 100%, rgba(244, 191, 58, 0.14), transparent 60%),
    var(--c-dark, #191919);
}
/* full-bleed: hero spans the whole content width and is centered, so 100vw centers too. */
.course-hero__bg--full { left: calc(50% - 50vw); right: auto; width: 100vw; }

/* Hero content stays clear of the floating price card lane on the right (360 + 40 gap). */
.pdp__hero-main { min-width: 0; padding-right: 400px; }
.pdp__eyebrow {
  font-family: var(--font-mono, sans-serif); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: #f0c970; font-weight: 600;
}
.pdp__stats {
  display: flex; gap: 36px; margin-top: 22px; flex-wrap: wrap; width: fit-content;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 20px; border-radius: var(--r-3, 10px);
}
.pdp__stat-v { font-size: var(--fs-24, 24px); font-weight: 800; color: #fff; line-height: 1.1; }
.pdp__stat-l { display: flex; flex-direction: column; font-size: 12px; color: #9da2ad; gap: 2px; margin-top: 2px; }
.pdp__stat-l .rating__stars { display: inline-flex; gap: 1px; color: var(--c-accent, #f4bf3a); font-size: 13px; line-height: 1; }
.pdp__hero .bcrumbs { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #9da2ad; flex-wrap: wrap; }
.pdp__hero .bcrumbs a { color: #f0c970; font-weight: 600; text-decoration: none; }
.pdp__hero .bcrumbs a:hover { text-decoration: underline; }
.pdp__hero .bcrumbs i { color: #6a6d75; font-size: 15px; line-height: 1; }
.pdp__title {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; margin: 14px 0 12px; color: #fff;
}
.pdp__sub { font-size: var(--fs-18, 18px); color: #c9ccd4; margin: 0 0 16px; line-height: 1.5; max-width: 70ch; }
.pdp__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.pdp__by { margin: 14px 0 6px; color: #c9ccd4; font-size: var(--fs-14, 14px); }
.pdp__link { color: #f0c970; text-decoration: underline; }
.pdp__meta { display: flex; gap: 20px; flex-wrap: wrap; color: #9da2ad; font-size: var(--fs-13, 13px); margin-top: 8px; }
.pdp__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pdp__meta i { font-size: 14px; line-height: 1; }

/* ----- main content (page-builder sections) ----- */
.pdp__main { display: flex; flex-direction: column; gap: 28px; padding: 32px 0 0; min-width: 0; }
/* Each section is framed as a card (prototype "Block"). The card carries the border,
   radius, surface and a comfortable inner padding; the section's own configured padding
   is neutralised so text never sits against the border. */
.pdp__block {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, #e5e5e5);
  border-radius: var(--r-3, 10px);
  padding: 24px 26px;
  overflow: hidden;
}
.pdp__block > section { padding: 0 !important; }
/* Sections authored for full-width pages wrap their content in .wrap (max-width + side
   padding). Inside a PDP card that would over-indent, so neutralise it. */
.pdp__block .wrap { max-width: none; padding: 0; margin: 0; width: 100%; }
.pdp__empty {
  background: var(--c-surface, #fff); border: 1px dashed var(--c-line, #e5e5e5);
  border-radius: var(--r-3, 10px); padding: 40px; text-align: center; color: var(--c-muted, #666);
}

/* ----- "What you'll learn" (LearningObjectives) -----
   The section ships its own card chrome (.learn__inner border/bg/padding) for full-width
   pages; inside the PDP .pdp__block card that double-frames it, so strip it back. */
.pdp .pdp__block .learn__inner { border: 0; background: transparent; border-radius: 0; padding: 0; box-shadow: none; }
.pdp__block .learn__title { color: var(--c-text, #1c1d1a); }

/* ===========================================================================
   Curriculum / "Course content" — prototype .cc accordion.
   Restyles the existing _CourseCurriculum markup; the redundant details-card
   column is hidden on the PDP (the sticky price card already covers it).
   =========================================================================== */
.pdp .ws-curriculum-card { display: none; }
.pdp .ws-curriculum-content { display: block; }
/* alignment utilities (the storefront theme doesn't ship them) — used by section headings */
.pdp .text-left { text-align: left; }
.pdp .text-center { text-align: center; }
.pdp .text-right { text-align: right; }

.pdp .ws-curriculum-heading { margin: 0 0 4px; font-size: var(--fs-20, 20px); font-weight: 800; letter-spacing: -0.01em; color: var(--c-text, #1c1d1a); }
.pdp .ws-curriculum-subheading,
.pdp .ws-curriculum-meta { margin: 0 0 16px; color: var(--c-muted, #666); font-size: var(--fs-13, 13px); font-family: var(--font-mono, sans-serif); }

.pdp .ws-curriculum-list { border: 1px solid var(--c-line, #e5e5e5); border-radius: var(--r-3, 10px); overflow: hidden; }
.pdp .ws-curriculum-chapter:not(:first-child) { border-top: 1px solid var(--c-line, #e5e5e5); }
.pdp .ws-curriculum-chapter-header,
.pdp .ws-curriculum-chapter-header-static {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--c-surface-alt, #fff9f1); cursor: pointer;
}
.pdp .ws-curriculum-chapter-header:hover { background: var(--c-line-2, #f0f0f0); }
.pdp .ws-curriculum-chapter-header:not(.collapsed) { background: var(--c-surface, #fff); }
.pdp .ws-curriculum-arrow { color: #5a6071; font-size: 18px; line-height: 1; transition: transform .15s; flex: none; }
.pdp .ws-curriculum-chapter-header:not(.collapsed) .ws-curriculum-arrow { transform: rotate(180deg); }
.pdp .ws-curriculum-chapter-title { margin: 0; font-size: var(--fs-15, 15px); font-weight: 700; color: var(--c-text, #1c1d1a); flex: 1; }
.pdp .ws-curriculum-chapter-meta { font-size: 12px; color: var(--c-muted, #666); font-family: var(--font-mono, sans-serif); flex: none; }

.pdp .ws-curriculum-lessons { background: var(--c-surface, #fff); }
.pdp .ws-curriculum-lesson-list { list-style: none; margin: 0; padding: 6px 0 10px; }
.pdp .ws-curriculum-lesson-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 44px; font-size: var(--fs-14, 14px);
  border-top: 1px solid var(--c-line-2, #f0f0f0); color: var(--c-text, #1c1d1a);
}
.pdp .ws-curriculum-lesson-item > i { color: #5a6071; font-size: 15px; line-height: 1; flex: none; }
.pdp .ws-curriculum-lesson-name { flex: 1; }

/* ===========================================================================
   FIXED buybox / price card  (restyles the existing _PurchaseSidebar markup:
   .cp-sidebar / .cp-buy-card / .cp-pricing / .cp-actions / .cp-trust / upsell)
   =========================================================================== */
.pdp .cp-sidebar {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: calc(var(--header-h, 68px) + 16px); z-index: 2;
}
.pdp .cp-buy-card {
  background: var(--c-surface, #fff); border: 1px solid var(--c-line, #e5e5e5);
  border-radius: var(--r-4, 14px); box-shadow: var(--sh-3, 0 16px 48px rgba(20,22,26,.14));
  overflow: hidden;
}
.pdp .cp-buy-image { aspect-ratio: 16 / 9; background: var(--c-dark, #191919); }
.pdp .cp-buy-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp .cp-buy-image iframe,
.pdp .cp-buy-image video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.pdp .cp-pricing { padding: 18px 20px 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdp .cp-price { font-size: 28px; font-weight: 800; color: var(--c-text, #1c1d1a); }
.pdp .cp-price--free { color: var(--c-success, #00a550); }
.pdp .cp-original-price { color: var(--c-muted, #666); text-decoration: line-through; font-size: var(--fs-14, 14px); }
.pdp .cp-discount-badge { color: var(--c-danger, #b61c1b); font-weight: 700; font-size: var(--fs-14, 14px); }
.pdp .cp-sub-label { width: 100%; font-size: 12px; color: var(--c-muted, #666); font-family: var(--font-mono, sans-serif); }

.pdp .cp-actions { padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.pdp .cp-action { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pdp .cp-action i { font-size: 18px; line-height: 1; }
/* secondary CTA uses the outline look from the prototype */
.pdp .cp-action--secondary {
  background: var(--c-surface, #fff); border: 1px solid var(--c-primary, #b61c1b); color: var(--c-primary, #b61c1b);
}
.pdp .cp-action--secondary:hover { background: var(--c-primary-50, #fdeeee); }

.pdp .cp-trust {
  list-style: none; padding: 8px 20px 16px; margin: 0;
  border-top: 1px solid var(--c-line-2, #f0f0f0); display: flex; flex-direction: column; gap: 12px;
}
.pdp .cp-trust li { display: flex; align-items: flex-start; gap: 10px; }
.pdp .cp-trust i { font-size: 18px; color: var(--c-muted, #666); margin-top: 1px; }
.pdp .cp-trust strong { display: block; font-size: var(--fs-13, 13px); color: var(--c-text, #1c1d1a); }
.pdp .cp-trust span { font-size: 12px; color: var(--c-muted, #666); }

/* upsell card in the sidebar */
.pdp .cp-upsell-card {
  background: var(--c-surface, #fff); border: 1px solid var(--c-line, #e5e5e5);
  border-radius: var(--r-4, 14px); box-shadow: var(--sh-2, 0 4px 16px rgba(20,22,26,.08)); overflow: hidden;
}
.pdp .cp-upsell-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pdp .cp-upsell-body { padding: 14px 16px 16px; }
.pdp .cp-upsell-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--c-accent, #f4bf3a); color: #2a1e00; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px;
}
.pdp .cp-upsell-title { margin: 0 0 8px; font-size: var(--fs-16, 16px); font-weight: 800; line-height: 1.25; }
.pdp .cp-upsell-title a { color: var(--c-text, #1c1d1a); text-decoration: none; }
.pdp .cp-upsell-title a:hover { color: var(--c-primary, #b61c1b); }
.pdp .cp-upsell-pricing { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pdp .cp-upsell-price { font-size: 20px; font-weight: 800; color: var(--c-primary, #b61c1b); }
.pdp .cp-upsell-original-price { color: var(--c-muted, #666); text-decoration: line-through; font-size: var(--fs-13, 13px); }
.pdp .cp-upsell-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pdp .cp-upsell-details-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: var(--fs-13, 13px); font-weight: 600; color: var(--c-primary, #b61c1b); text-decoration: none;
}
.pdp .cp-upsell-details-link:hover { text-decoration: underline; }

/* ===========================================================================
   MOBILE sticky action bar
   =========================================================================== */
.cp-mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--c-surface, #fff); border-top: 1px solid var(--c-line, #e5e5e5);
  box-shadow: 0 -4px 16px rgba(20, 22, 26, 0.08);
  padding: 10px 16px; align-items: center; gap: 14px;
}
.cp-mobile-bar-price { display: flex; flex-direction: column; line-height: 1.2; }
.cp-mobile-bar-amount { font-size: var(--fs-18, 18px); font-weight: 800; color: var(--c-text, #1c1d1a); }
.cp-mobile-bar-original { font-size: 12px; color: var(--c-muted, #666); text-decoration: line-through; }
.cp-mobile-bar-actions { margin-left: auto; }
.cp-mobile-bar-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 980px) {
  .pdp__grid { grid-template-columns: 1fr; row-gap: 24px; padding-bottom: 32px; }
  .pdp__grid > .pdp__hero,
  .pdp__grid > .ws-course-hero { grid-column: 1; grid-row: auto; order: 1; padding: 32px 0 36px; }
  .pdp__buybox-float { grid-column: 1; grid-row: auto; order: 2; align-self: start; }
  .pdp__main { grid-column: 1; grid-row: auto; order: 3; padding-top: 0; }
  .pdp__hero-main { padding-right: 0; }
  .pdp .cp-sidebar { position: static; }
}
@media (max-width: 720px) {
  .cp-mobile-bar { display: flex; }
  .pdp { padding-bottom: 76px; } /* room for the fixed mobile bar */
}