/* ==========================================================================
   Course promotion components - The Private Practice Playbook
   --------------------------------------------------------------------------
   Loaded ONLY by the pages that sell the course: the eight physio-audience
   blog posts, /course/, and the join pages. Kept out of css/main.css on
   purpose, so adding it does not force a sitewide asset-version bump and a
   full re-upload (main.css is cached for a year - see CLAUDE.md).

   Three placements, because a sidebar alone converts nobody on a phone:
     .pb-rail    sticky right-hand rail, 1024px and up only
     .pb-inline  compact mid-article card, below 1024px only
     .pb-offer   the full offer block at the end of the article, all widths
   ========================================================================== */

/* --- Article + rail layout ------------------------------------------------ */
.blog-split > .pb-rail-col {
  display: none;
}

@media (min-width: 1024px) {
  .blog-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-2xl);
    /* No align-items here on purpose. The column must stretch to the full row
       height, otherwise the sticky rail inside it has no room to travel and
       simply scrolls away with the page. */
  }

  .blog-split > .pb-rail-col {
    display: block;
  }

  .pb-rail {
    position: sticky;
    top: 5rem;
    /* Safety net only: the content is written to fit a 768px-tall laptop, so
       this should not normally engage. */
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- Shared pieces -------------------------------------------------------- */
.pb-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-rich);
  margin-bottom: var(--space-xs);
}

.pb-check {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}

.pb-check li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.pb-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--color-primary-rich);
  border-bottom: 2px solid var(--color-primary-rich);
  transform: rotate(-45deg);
}

/* --- The sticky rail ------------------------------------------------------ */
.pb-rail {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.pb-rail__media {
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
  padding: var(--space-md) var(--space-md) 0;
  text-align: center;
}

.pb-rail__media img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  margin: 0 auto;
}

.pb-rail__body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.pb-rail__body h2 {
  font-size: var(--text-lg);
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
}

.pb-rail__body p {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.pb-price {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

.pb-price strong {
  color: var(--color-primary-rich);
}

.pb-rail .button,
.pb-inline .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.pb-note {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}

.pb-note a {
  color: var(--color-primary-rich);
}

/* --- The mid-article card (phones and tablets) ---------------------------- */
.pb-inline {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary-rich);
  border-radius: var(--radius);
}

.pb-inline img {
  width: 84px;
  height: auto;
  display: block;
}

.pb-inline p {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .pb-inline {
    display: none;
  }
}

/* --- The offer block at the end of the article ---------------------------- */
.pb-offer {
  margin: var(--space-2xl) 0 var(--space-xl);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1a202c 0%, #0f2f36 55%, #0F766E 100%);
  color: #f9fafb;
}

.pb-offer__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 720px) {
  .pb-offer__grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.pb-offer__media {
  background: #ffffff;
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.pb-offer__media img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

.pb-offer .pb-eyebrow {
  color: var(--color-primary-light);
}

.pb-offer h2 {
  color: #ffffff;
  font-size: var(--text-xl);
  line-height: 1.25;
  margin: 0 0 var(--space-md);
}

.pb-offer p {
  color: rgba(249, 250, 251, 0.92);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.pb-offer .pb-check li {
  color: rgba(249, 250, 251, 0.92);
}

.pb-offer .pb-check li::before {
  border-color: var(--color-primary-light);
}

.pb-offer .pb-check strong {
  color: #ffffff;
}

.pb-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pb-offer__actions .button {
  background: #ffffff;
  color: var(--color-primary-rich);
  border: 2px solid #ffffff;
}

.pb-offer__actions .button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #0f2f36;
}

.pb-offer__actions .button-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.pb-offer__actions .button-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.pb-offer__terms {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: rgba(249, 250, 251, 0.75);
  margin: 0;
}

/* --- Phones: let both CTAs run to the edge of the article card -------------
   .card and .blog-post both use var(--space-2xl) padding at every width, and
   .card is overflow:hidden with rounded corners, so pulling the CTA out by
   exactly that amount lands it flush against the card edge and gets it ~96px
   of width back on a phone. Without this the offer is squeezed into about
   196px and the button wraps. */
@media (max-width: 720px) {
  .pb-inline,
  .pb-offer {
    margin-left: calc(var(--space-2xl) * -1);
    margin-right: calc(var(--space-2xl) * -1);
    border-radius: 0;
  }

  .pb-inline {
    padding: var(--space-md) var(--space-lg);
  }

  .pb-offer {
    padding: var(--space-lg);
  }
}

/* --- The join-page and course-page card ----------------------------------- */
.pb-join {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 600px) {
  .pb-join {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

.pb-join img {
  display: block;
  width: 130px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.pb-join p:last-of-type {
  margin-bottom: 0;
}

/* --- The promo banner on /course/ ----------------------------------------- */
.pb-banner {
  margin: 0 0 var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}

.pb-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Respect users who ask for less motion: nothing here animates, but the
   sticky rail is the one thing that moves, so pin it for them. */
@media (prefers-reduced-motion: reduce) {
  .pb-rail {
    position: static;
    max-height: none;
  }
}