/* Webinar Page — matches product-page content width, no inline body max-width */

/* Override the generic .blog-post max-width (800px) so webinar pages use the
   standard container width like product pages. */
.blog-post.webinar-post {
  max-width: none;
}

/* The shared blog JS injects a `publish-date` label from frontmatter; we don't
   want that on webinar pages since the hero + subtitle carry the framing. */
.webinar-post .blog-post__date-label {
  display: none !important;
}

.webinar-post__inner {
  max-width: none;
}

/* Hero subtitle (H2) — sits inside the hero under the H1, compact */
.faqs-page__hero h2.webinar-hero__subtitle,
.webinar-hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #955690 !important;
  margin: 0.75rem auto 0 !important;
  max-width: 44rem;
}

/* Legacy in-body subtitle (kept for any stragglers) — now matches hero style */
.webinar-post__subtitle {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: #955690 !important;
  margin: 0.5rem 0 2rem !important;
  max-width: 60rem;
}

/* Back-to-webinars link — light grey, top of body */
.webinar-post__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #6B7280 !important;
  font-size: 0.875rem;
  text-decoration: none !important;
  margin: 0 auto 1.5rem !important;
  padding-top: 2rem;
}

.webinar-post__back:hover {
  color: var(--vpm-purple-900, #341c4c) !important;
  text-decoration: none !important;
}

.webinar-post__back::before {
  content: "\2190";
  display: inline-block;
  margin-right: 0.125rem;
}

/* Center-align all content under the hero within a tidy max-width */
.webinar-post__content.block > .container {
  padding-top: 2.5rem;
}

/* Wistia responsive 16:9 embed — centered, with breathing room under hero */
.webinar-post__video {
  margin: 0 auto 2rem;
  max-width: 56rem;
}

.wistia_responsive_padding {
  padding: 56.25% 0 0 0;
  position: relative;
}

.wistia_responsive_wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.wistia_embed {
  height: 100%;
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Key learnings box — centered, matched width to quote card */
.webinar-post__learnings {
  background: #f7f3fa;
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
  margin: 2rem auto;
  max-width: 56rem;
}

.webinar-post__learnings h4 {
  margin-top: 0 !important;
}

/* Standard body column — centered paragraphs / headings / lists */
.webinar-post__content.block > .container > p,
.webinar-post__content.block > .container > h2,
.webinar-post__content.block > .container > h3,
.webinar-post__content.block > .container > h4,
.webinar-post__content.block > .container > ul,
.webinar-post__content.block > .container > ol,
.webinar-post__content.block > .container > blockquote,
.webinar-post__content.block > .container > .blog-post__social-share {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

/* Speaker quote — horizontal card, width matched to learnings box, centered */
.webinar-quote-card {
  background: #ffffff;
  border: 1px solid #e7e0ee;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(52, 28, 76, 0.04);
  padding: 2.5rem 2.75rem;
  margin: 3rem auto;
  max-width: 56rem;
}

/* Attribution (name + role) — sits BELOW the quote, uses eyebrow style */
.webinar-quote-card__cite {
  display: block;
  font-style: normal;
  margin-top: 1.25rem;
}

.webinar-quote-card__eyebrow {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vpm-lilac-500, #95569e) !important;
  margin: 0 !important;
}

.webinar-quote-card__body {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-style: normal !important;
}

.blog-post__content.block .webinar-quote-card__text,
.webinar-post__content.block .webinar-quote-card__text,
p.webinar-quote-card__text {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: var(--vpm-purple-900, #341c4c) !important;
  font-style: normal !important;
  margin: 0 0 1rem !important;
}

/* Role now inherits the eyebrow style — uppercase, lilac, tracked */
.webinar-quote-card__role {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vpm-lilac-500, #95569e) !important;
  font-style: normal !important;
  margin: 0 !important;
}

.webinar-quote-card__cite-sep {
  margin: 0 0.375rem;
  color: var(--vpm-lilac-500, #95569e);
}

/* Neutralise blog-post blockquote defaults when used inside the quote card */
.blog-post__content.block .webinar-quote-card__body,
.webinar-post__content.block .webinar-quote-card__body,
.blog-post__content.block blockquote.webinar-quote-card__body,
.webinar-post__content.block blockquote.webinar-quote-card__body {
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

@media (max-width: 720px) {
  .webinar-quote-card {
    padding: 1.75rem 1.5rem;
    margin: 2rem 0;
  }
}

/* Related webinars — date should be left-flush with the card copy above it */
.content-cards--related .content-card__footer {
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;
}

.content-cards--related .content-card__date {
  margin-left: 0;
  margin-right: 0;
}