/* ==========================================================================
   single-course.css — LearnDash course singles (sfwd-courses CPT)

   ╔════════════════════════════════════════════════════════════════════════╗
   ║  OFF-LIMITS WITHOUT EXPLICIT PERMISSION — locked 2026-05-17            ║
   ║                                                                        ║
   ║  This stylesheet AND its companion template                            ║
   ║  (single-sfwd-courses.php) are the LIVE course-landing surface for     ║
   ║  the $249 WordPress 101 product. Christopher has reviewed the          ║
   ║  rendered output and signed off on it.                                 ║
   ║                                                                        ║
   ║  DO NOT edit either file without per-change authorization from         ║
   ║  Christopher — not for "improvements," not for refactors, not for      ║
   ║  drive-by minification, not as part of a larger sweep that touches     ║
   ║  other single-*.css files. The page converts paid traffic; surprise    ║
   ║  edits cost money.                                                     ║
   ║                                                                        ║
   ║  Bug fixes for visibly broken render are an exception, but flag        ║
   ║  them on the way through.                                              ║
   ║                                                                        ║
   ║  Cascade trap note: .site-shell is un-layered in main.css and beats    ║
   ║  any layered margin-bottom / padding-inline override on elements       ║
   ║  that carry both .site-shell and a course-detail__* class. The         ║
   ║  un-layered block at the bottom of this file is the escape — do not    ║
   ║  fold it back into @layer page-types or the rhythm will silently       ║
   ║  collapse to .site-shell defaults again.                               ║
   ║  See memory: reference_thisismyurl_site_shell_layer_trap               ║
   ║                                                                        ║
   ║  Memory: reference_thisismyurl_wp101_course_page_locked                ║
   ╚════════════════════════════════════════════════════════════════════════╝

   Loaded conditionally via inc/setup.php on `is_singular('sfwd-courses')`.
   Tokens + base are inherited through the main stylesheet (also enqueued).
   Built 2026-05-17 alongside single-sfwd-courses.php as the senior-rate
   course-landing surface. Replaces the interim main.css collapse that
   reused single-template-layout. Authored into the `page-types` layer to
   sit at the same cascade level as single-landing.css, single-training.css,
   and single-event.css.
   ========================================================================== */

@layer page-types {

  .course-detail {
    margin-top: 1.5rem;
    /* Reserve room at the bottom so the fixed mobile CTA bar never covers
       the footer. Desktop ignores this because the bar is display:none. */
  }
  @media (max-width: 860px) {
    .course-detail {
      padding-bottom: 5.5rem;
    }
  }

  /* ---- Hero ----
     Two columns at 880px: text/CTA left, sticky offer card right with
     feature image as the visual anchor. Flat navy background, no mesh.    */
  .course-detail__hero {
    background: var(--color-accent-strong);
    color: #ffffff;
    /* Symmetric padding so the left rail matches the top/bottom breathing
       room — the visible-edge inset should read as a single uniform gutter,
       not a wide top with a tighter side. */
    padding: clamp(2rem, 1rem + 4vw, 4rem);
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    border-radius: var(--radius-card);
  }
  @media (min-width: 880px) {
    .course-detail__hero {
      grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
      gap: 3rem;
    }
  }

  .course-detail__hero-text {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
  }

  .course-detail__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold);
  }

  .course-detail__title {
    margin: 0;
    font-size: clamp(2.3rem, 1.45rem + 4.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.022em;
    font-weight: 700;
    color: #ffffff;
  }

  .course-detail__lede {
    margin: 0;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
  }

  .course-detail__value-props {
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
  }
  @media (min-width: 540px) {
    .course-detail__value-props {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  .course-detail__value-prop {
    position: relative;
    padding-left: 1.6rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: max(0.9375rem, 15px);
    line-height: 1.45;
  }
  .course-detail__value-prop::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.7rem;
    height: 0.4rem;
    border-left: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    transform: rotate(-45deg);
  }

  .course-detail__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  .course-detail__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.85rem 1.4rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 140ms var(--ease-standard), color 140ms var(--ease-standard), border-color 140ms var(--ease-standard);
  }
  .course-detail__cta--primary {
    background: var(--color-gold);
    color: var(--color-accent-strong);
    border: 2px solid var(--color-gold);
  }
  .course-detail__cta--primary:hover,
  .course-detail__cta--primary:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-accent-strong);
  }
  .course-detail__cta--secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.6);
  }
  .course-detail__cta--secondary:hover,
  .course-detail__cta--secondary:focus-visible {
    border-color: var(--color-gold);
    color: var(--color-gold);
  }

  .course-detail__signin-note {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
  }
  .course-detail__signin-link {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .course-detail__signin-link:hover,
  .course-detail__signin-link:focus-visible {
    color: #ffffff;
  }

  /* ---- Offer card (hero right column / sticky on desktop) ---- */
  .course-detail__offer-card {
    background: #ffffff;
    color: var(--color-text);
    border-radius: var(--radius-card);
    border-top: 3px solid var(--color-gold);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 880px) {
    .course-detail__offer-card {
      position: sticky;
      top: var(--scroll-margin-anchor, 112px);
    }
  }

  .course-detail__offer-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-alt);
  }
  .course-detail__offer-card-media .course-detail__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .course-detail__offer-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .course-detail__offer-card-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold-text);
  }
  .course-detail__offer-card-eyebrow--success {
    color: var(--color-success, #1a7f37);
  }

  .course-detail__offer-card-status {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
  }

  .course-detail__offer-card-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1;
  }
  .course-detail__offer-card-price-amount {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-strong);
    letter-spacing: -0.015em;
  }
  .course-detail__offer-card-price-unit {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .course-detail__offer-card-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.85rem;
  }
  .course-detail__offer-card-meta li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .course-detail__offer-card-meta-label {
    color: var(--color-muted);
    flex-shrink: 0;
  }
  .course-detail__offer-card-meta-value {
    color: var(--color-text-strong);
    font-weight: 600;
    text-align: right;
  }

  .course-detail__progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .course-detail__progress-bar {
    background: var(--color-border);
    border-radius: 999px;
    height: 0.5rem;
    overflow: hidden;
  }
  .course-detail__progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--color-gold), var(--color-accent));
    border-radius: 999px;
    transition: width 200ms var(--ease-standard);
  }
  .course-detail__progress-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 600;
  }

  .course-detail__offer-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.1rem;
    background: var(--color-accent-strong);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-accent-strong);
    margin-top: 0.2rem;
    transition: background-color 140ms var(--ease-standard), border-color 140ms var(--ease-standard);
  }
  .course-detail__offer-card-cta:hover,
  .course-detail__offer-card-cta:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
  }

  .course-detail__offer-card-signin {
    margin: 0;
    font-size: 0.85rem;
    text-align: center;
    color: var(--color-muted);
  }
  .course-detail__offer-card-signin a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- Trust strip ---- */
  .course-detail__trust {
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
  }
  .course-detail__trust-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: max(0.8125rem, 14px);
    line-height: 1.45;
    color: var(--color-text-medium);
  }
  .course-detail__trust-item {
    position: relative;
  }
  .course-detail__trust-item + .course-detail__trust-item::before {
    content: "·";
    position: absolute;
    left: -0.85rem;
    color: var(--color-gold);
    font-weight: 700;
  }

  /* ---- Section header (shared) ---- */
  .course-detail__section-header {
    margin: 0 0 1.5rem;
  }
  .course-detail__section-header h2 {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text-strong);
    font-weight: 700;
  }
  .course-detail__section-header--inverted h2 {
    color: #ffffff;
  }
  .course-detail__section-lede {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-medium);
    max-width: 70ch;
  }

  /* ---- Outcomes ---- */
  .course-detail__outcomes {
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
  }
  .course-detail__outcomes-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 1.75rem;
  }
  @media (min-width: 640px) {
    .course-detail__outcomes-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .course-detail__outcome-cell {
    background: var(--color-surface-alt);
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius-card);
    border-left: 3px solid var(--color-gold);
  }
  .course-detail__outcome-label {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-strong);
    line-height: 1.3;
  }
  .course-detail__outcome-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
  }

  /* ---- Curriculum: module accordions ---- */
  .course-detail__curriculum {
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
    scroll-margin-top: var(--scroll-margin-anchor, 112px);
  }
  .course-detail__modules {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .course-detail__module {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color 140ms var(--ease-standard), box-shadow 140ms var(--ease-standard);
  }
  .course-detail__module[open] {
    border-color: var(--color-gold);
    box-shadow: 0 1px 0 rgba(226, 176, 74, 0.12);
  }
  .course-detail__module-summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
  }
  .course-detail__module-summary::-webkit-details-marker {
    display: none;
  }
  .course-detail__module-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
  .course-detail__module-summary-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .course-detail__module-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-strong);
    line-height: 1.3;
  }
  .course-detail__module-count {
    font-size: 0.8rem;
    color: var(--color-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .course-detail__module-summary-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    position: relative;
    transition: transform 140ms var(--ease-standard);
  }
  .course-detail__module-summary-icon::before,
  .course-detail__module-summary-icon::after {
    content: "";
    position: absolute;
    background: var(--color-accent);
    border-radius: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .course-detail__module-summary-icon::before {
    width: 14px;
    height: 2px;
  }
  .course-detail__module-summary-icon::after {
    width: 2px;
    height: 14px;
    transition: opacity 140ms var(--ease-standard);
  }
  .course-detail__module[open] .course-detail__module-summary-icon::after {
    opacity: 0;
  }
  .course-detail__module-summary-copy {
    margin: 0 1.25rem 0.6rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-medium);
  }
  .course-detail__module-lessons {
    margin: 0;
    padding: 0 0.5rem 0.75rem;
    list-style: none;
    counter-reset: course-lesson;
  }
  .course-detail__module-lesson {
    counter-increment: course-lesson;
  }
  .course-detail__module-lesson-link,
  .course-detail__module-lesson-locked {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    min-height: 44px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .course-detail__module-lesson-link {
    transition: background-color 120ms var(--ease-standard), color 120ms var(--ease-standard);
  }
  .course-detail__module-lesson-link:hover,
  .course-detail__module-lesson-link:focus-visible {
    background: rgba(226, 176, 74, 0.14);
    color: var(--color-text-strong);
  }
  .course-detail__module-lesson-locked {
    color: var(--color-muted);
  }
  .course-detail__module-lesson-title {
    flex: 1;
  }
  .course-detail__module-lesson-tag {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-accent-strong);
    background: var(--color-gold);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .course-detail__module-lesson-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }
  /* Knowledge-check / evidence-upload rows render as quiet children
     beneath their lesson. Smaller scale + indent + muted colour signals
     "this is part of the lesson above, not a peer." Counter is suppressed
     so the lesson numbering reads cleanly down the module list. */
  .course-detail__module-lesson--quiz {
    counter-increment: none;
  }
  .course-detail__module-lesson--quiz .course-detail__module-lesson-link,
  .course-detail__module-lesson--quiz .course-detail__module-lesson-locked {
    padding-block: 0.45rem;
    padding-inline-start: 2rem;
    min-height: 36px;
    font-size: 0.85rem;
    color: var(--color-text-medium);
  }
  .course-detail__module-lesson--quiz .course-detail__module-lesson-link::before,
  .course-detail__module-lesson--quiz .course-detail__module-lesson-locked::before {
    content: "↳";
    color: var(--color-muted);
    margin-inline-end: 0.35rem;
    flex-shrink: 0;
    line-height: 1;
  }

  /* ---- Instructor card (navy band) ---- */
  .course-detail__instructor {
    background: var(--color-accent-strong);
    color: #ffffff;
    padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0;
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
    border-radius: var(--radius-card);
  }
  .course-detail__instructor-inner {
    padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
    max-width: 70ch;
    margin-inline: auto;
  }
  .course-detail__instructor-eyebrow {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold);
  }
  .course-detail__instructor-body {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.6;
  }
  .course-detail__instructor-body p {
    margin: 0 0 1rem;
  }
  .course-detail__instructor-body p:last-child {
    margin-bottom: 0;
  }

  /* ---- Refund + access statement (inline) ---- */
  .course-detail__refund {
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
    padding: 1.5rem 1.75rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-card);
    border-left: 3px solid var(--color-accent);
  }
  .course-detail__refund-copy {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    max-width: 72ch;
  }

  /* ---- "Current through WordPress X.Y" chip ----
     Small surface above the FAQ that signals course currency. Renders only
     when the `_course_current_through` postmeta is set (no default
     fallback in the template). The pattern is reusable across every major
     WordPress release — only the postmeta value changes.                  */
  .course-detail__currency {
    margin: 0 0 2rem;
    padding: 0 1.25rem;
    text-align: center;
  }
  .course-detail__currency-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--color-gold-soft, rgba(226, 176, 74, 0.16));
    color: var(--color-gold-text, #8B6914);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid var(--color-gold);
  }
  .course-detail__currency-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success, #1a7f37);
    box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.16);
    flex-shrink: 0;
  }

  /* ---- FAQ section (renders through shared faq-section partial) ----
     Inherits its base look from archive-gateway-faq in main.css; this
     scope only adjusts the surrounding rhythm so it sits inside the
     course-detail flow at the same outer spacing as outcomes /
     curriculum / refund.                                                  */
  .course-detail__faq {
    margin: 0 0 clamp(3rem, 2rem + 2vw, 5rem);
    padding-block: clamp(1.5rem, 1rem + 1vw, 2.5rem);
  }

  /* ---- Mobile sticky CTA bar (anonymous + not-enrolled only) ---- */
  .course-detail__sticky-cta {
    display: none;
  }
  @media (max-width: 860px) {
    .course-detail__sticky-cta {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 90;
      background: #ffffff;
      border-top: 1px solid var(--color-border);
      padding: 0.65rem 1rem;
      padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -8px 24px rgba(10, 34, 64, 0.10);
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-height: 56px;
    }
    .course-detail__sticky-cta-text {
      display: flex;
      flex-direction: column;
      gap: 0.05rem;
      min-width: 0;
      flex: 1;
    }
    .course-detail__sticky-cta-price {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--color-text-strong);
      line-height: 1.1;
    }
    .course-detail__sticky-cta-meta {
      font-size: 0.75rem;
      color: var(--color-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .course-detail__sticky-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0.65rem 1.1rem;
      background: var(--color-accent-strong);
      color: #ffffff;
      text-decoration: none;
      font-weight: 600;
      border-radius: var(--radius-sm);
      border: 2px solid var(--color-accent-strong);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .course-detail__sticky-cta-button:hover,
    .course-detail__sticky-cta-button:focus-visible {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: #ffffff;
    }
  }

  /* ---- Reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .course-detail__cta,
    .course-detail__offer-card-cta,
    .course-detail__module,
    .course-detail__module-summary-icon,
    .course-detail__module-summary-icon::after,
    .course-detail__module-lesson-link,
    .course-detail__progress-fill {
      transition: none;
    }
  }

}

/* ==========================================================================
   Un-layered section-rhythm overrides

   `.site-shell` is declared un-layered in main.css with `margin: 0 auto`.
   Cascade-layer rules — including everything inside `@layer page-types`
   above — always lose to un-layered rules of equal specificity, so the
   `margin-bottom` declarations on .course-detail__hero / __trust /
   __outcomes / __curriculum / __refund / __faq inside the layer were being
   overridden to 0 by `.site-shell { margin: 0 auto }` on every section that
   shares both class hooks (which is most of them).

   The fix is to escape the layer for the inter-section rhythm rules only.
   The rest of the file (colour, layout, padding, type) stays cleanly
   inside @layer page-types; only the bottom-margin tokens leak out to
   compete on the same un-layered plane as `.site-shell`. The instructor
   block keeps its layered margin because its outer element doesn't carry
   .site-shell — but it's listed here too so all section spacing comes
   from one place if anyone hunts for it later.
   ========================================================================== */

.course-detail__hero,
.course-detail__trust,
.course-detail__outcomes,
.course-detail__curriculum,
.course-detail__instructor,
.course-detail__refund,
.course-detail__faq {
  margin-bottom: clamp(3rem, 2rem + 2vw, 5rem);
}

/* Inset-card inline padding — same un-layered escape as above.
   `.site-shell { padding-inline: 1.125rem }` is un-layered, so the layered
   `padding: clamp(...)` declarations inside @layer page-types were keeping
   their vertical components (padding-block) but losing the horizontal
   components (padding-inline) to .site-shell's 18px. The visible bug:
   hero box read as 4rem top / 4rem bottom / 1.125rem left / 1.125rem
   right, so the title sat flush against the navy edge while the
   eyebrow had a wide top inset above it. These two surfaces are inset
   cards (a navy hero box and a navy instructor band's inner column);
   they need wider inline padding than the page-edge gutter .site-shell
   provides on a flush-to-viewport section. */
.course-detail__hero {
  padding-inline: clamp(2rem, 1rem + 4vw, 4rem);
}

.course-detail__instructor-inner {
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}