/* =========================================================
   Webina widget — append to AutoCareMain
   Series / Sub-series / Webinar hierarchy
   Includes title-block_accent hero + page-content-accent-swoosh
   Includes webinar page template: .wb-hero + .wb-page-content_light
   (layout classes documented at the end of this file)
   ========================================================= */

.wb-widget {
  --wb-ink: #1a242c;
  --wb-charcoal: #2B3942;
  --wb-muted: #5b6b75;
  --wb-line: #e5eaee;
  --wb-orange: #e87722;
  --wb-orange-deep: #c45f12;
  --wb-teal: #0e7c6b;
  --wb-surface: #f5f7f8;
  --wb-white: #fff;
  --wb-radius: 0;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  padding: 0 0 2rem;
  box-sizing: border-box;
  width: 100%;
  color: var(--wb-ink);
}

.content > .wb-widget,
.content .wb-widget {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (min-width: 960px) {
  .content > .wb-widget,
  .content .wb-widget {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.wb-widget *,
.wb-widget *::before,
.wb-widget *::after {
  box-sizing: border-box;
}

.wb-widget button {
  font-family: inherit;
}

/* Override AutoCareMain global: h1–h6 { text-transform: lowercase; } */
.wb-widget h1,
.wb-widget h2,
.wb-widget h3,
.wb-widget h4,
.wb-widget h5,
.wb-widget h6,
.wb-detail h1,
.wb-detail h2,
.wb-detail h3,
.wb-detail h4,
.wb-detail h5,
.wb-detail h6 {
  text-transform: none !important;
}

.wb-widget .wb-sr-only,
.wb-detail .wb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wb-widget .wb-icon {
  margin-right: 0.35rem;
}

.wb-widget .wb-section-title .wb-icon {
  color: var(--wb-orange);
}

.wb-section-title {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--wb-charcoal);
}

.wb-section-title--sm {
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* ----- Series spotlight ----- */
.wb-series-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.wb-series-head .wb-section-title {
  margin: 0;
}

/* ----- Listing layout ----- */
.wb-listing {
  margin-bottom: 2rem;
}

.wb-series-section {
  margin-top: 0;
}

.wb-series-stack:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0;
}

#wbWidgetRoot .wb-series-stack[hidden],
.wb-series-stack[hidden] {
  display: none !important;
}

.wb-slash-block {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  flex: 0 0 calc(50% - 0.5rem);
  width: calc(50% - 0.5rem);
  max-width: calc(50% - 0.5rem);
  min-width: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(232, 119, 34, 0.16);
  --wb-card-mid: rgba(232, 119, 34, 0.3);
  --wb-card-accent: rgba(232, 119, 34, 0.46);
  --wb-card-kicker: var(--wb-orange);
  --wb-card-meta-icon: var(--wb-orange);
  --wb-card-title-hover: var(--wb-orange-deep);
  --wb-card-cta-bg: var(--wb-orange);
  --wb-card-cta-border: var(--wb-orange);
  --wb-card-cta-hover: var(--wb-orange-deep);
  --wb-card-link-border: var(--wb-orange);
  --wb-card-link-color: var(--wb-orange-deep);
  --wb-card-link-hover-bg: var(--wb-orange);
  --wb-card-active-border: var(--wb-orange);
  --wb-card-active-glow: rgba(232, 119, 34, 0.14);
}

.wb-slash-block--has-logo,
.wb-slash-block--featured {
  overflow: visible;
}

.wb-slash-block__feature-tag {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto;
  z-index: 4;
  transform: translate(0.4rem, -55%);
  display: inline-block;
  max-width: min(78%, 20rem);
  padding: 0.4rem 0.8rem;
  background: var(--wb-card-kicker);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(26, 36, 44, 0.12);
  pointer-events: none;
}

.wb-list > .wb-slash-block--featured {
  margin-top: 0.85rem;
}

.wb-theme-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--wb-card-base);
}

.wb-theme-bg__shape {
  position: absolute;
  top: -10%;
  bottom: -10%;
  pointer-events: none;
}

.wb-theme-bg__shape--navy {
  right: -3%;
  left: auto;
  width: 30%;
  background: var(--wb-card-navy);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.wb-theme-bg__shape--mid {
  right: 10%;
  left: auto;
  width: 24%;
  background: var(--wb-card-mid);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

.wb-theme-bg__shape--accent {
  right: 20%;
  left: auto;
  width: 42%;
  background: var(--wb-card-accent);
  transform: skewX(14deg);
  transform-origin: right center;
}

.wb-slash-block:hover,
.wb-slash-block:focus-within {
  border-color: #c5ced3;
  box-shadow: 0 2px 8px rgba(26, 36, 44, 0.06);
}

.wb-slash-block.is-active {
  border-color: var(--wb-card-active-border);
  box-shadow: 0 0 0 1px var(--wb-card-active-border), 0 4px 14px var(--wb-card-active-glow);
}

.wb-slash-block--sub {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.wb-slash-block__slash {
  display: none !important;
}

/* ----- Series card themes: one brand color per series, opacity variants for slash layers ----- */

.wb-theme--yang {
  --wb-theme-rgb: 122, 152, 171;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #7A98AB;
  --wb-card-meta-icon: #7A98AB;
  --wb-card-title-hover: #5f7d90;
  --wb-card-cta-bg: #7A98AB;
  --wb-card-cta-border: #7A98AB;
  --wb-card-cta-hover: #5f7d90;
  --wb-card-link-border: #7A98AB;
  --wb-card-link-color: #5f7d90;
  --wb-card-link-hover-bg: #7A98AB;
  --wb-card-active-border: #7A98AB;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.18);
}

.wb-theme--cc,
.wb-theme--ehh {
  --wb-theme-rgb: 162, 48, 88;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #a23058;
  --wb-card-meta-icon: #a23058;
  --wb-card-title-hover: #7f2747;
  --wb-card-cta-bg: #a23058;
  --wb-card-cta-border: #a23058;
  --wb-card-cta-hover: #7f2747;
  --wb-card-link-border: #a23058;
  --wb-card-link-color: #7f2747;
  --wb-card-link-hover-bg: #a23058;
  --wb-card-active-border: #a23058;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.2);
}

.wb-theme--epr {
  --wb-theme-rgb: 0, 125, 104;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #007d68;
  --wb-card-meta-icon: #007d68;
  --wb-card-title-hover: #005a4a;
  --wb-card-cta-bg: #007d68;
  --wb-card-cta-border: #007d68;
  --wb-card-cta-hover: #005a4a;
  --wb-card-link-border: #007d68;
  --wb-card-link-color: #005a4a;
  --wb-card-link-hover-bg: #007d68;
  --wb-card-active-border: #007d68;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.18);
}

.wb-theme--ga {
  --wb-theme-rgb: 186, 36, 51;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #BA2433;
  --wb-card-meta-icon: #BA2433;
  --wb-card-title-hover: #8f1c28;
  --wb-card-cta-bg: #BA2433;
  --wb-card-cta-border: #BA2433;
  --wb-card-cta-hover: #8f1c28;
  --wb-card-link-border: #BA2433;
  --wb-card-link-color: #8f1c28;
  --wb-card-link-hover-bg: #BA2433;
  --wb-card-active-border: #BA2433;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.16);
}

.wb-theme--acc {
  --wb-theme-rgb: 61, 110, 139;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #3D6E8B;
  --wb-card-meta-icon: #3D6E8B;
  --wb-card-title-hover: #2f5670;
  --wb-card-cta-bg: #3D6E8B;
  --wb-card-cta-border: #3D6E8B;
  --wb-card-cta-hover: #2f5670;
  --wb-card-link-border: #3D6E8B;
  --wb-card-link-color: #2f5670;
  --wb-card-link-hover-bg: #3D6E8B;
  --wb-card-active-border: #3D6E8B;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.2);
}

.wb-theme--acpn {
  --wb-theme-rgb: 118, 183, 42;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #76b72a;
  --wb-card-meta-icon: #76b72a;
  --wb-card-title-hover: #5a8f22;
  --wb-card-cta-bg: #76b72a;
  --wb-card-cta-border: #76b72a;
  --wb-card-cta-hover: #5a8f22;
  --wb-card-link-border: #76b72a;
  --wb-card-link-color: #5a8f22;
  --wb-card-link-hover-bg: #76b72a;
  --wb-card-active-border: #76b72a;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.2);
}

.wb-theme--tloh {
  --wb-theme-rgb: 243, 144, 29;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #f3901d;
  --wb-card-meta-icon: #f3901d;
  --wb-card-title-hover: #c45f12;
  --wb-card-cta-bg: #f3901d;
  --wb-card-cta-border: #f3901d;
  --wb-card-cta-hover: #e37f0d;
  --wb-card-link-border: #f3901d;
  --wb-card-link-color: #c45f12;
  --wb-card-link-hover-bg: #f3901d;
  --wb-card-active-border: #f3901d;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.18);
}

.wb-theme--cat {
  --wb-theme-rgb: 232, 119, 34;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #e87722;
  --wb-card-meta-icon: #e87722;
  --wb-card-title-hover: #a04d0f;
  --wb-card-cta-bg: #e87722;
  --wb-card-cta-border: #e87722;
  --wb-card-cta-hover: #c45f12;
  --wb-card-link-border: #e87722;
  --wb-card-link-color: #c45f12;
  --wb-card-link-hover-bg: #e87722;
  --wb-card-active-border: #e87722;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.16);
}

.wb-theme--vip {
  --wb-theme-rgb: 217, 83, 30;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #d9531e;
  --wb-card-meta-icon: #d9531e;
  --wb-card-title-hover: #c45f12;
  --wb-card-cta-bg: #d9531e;
  --wb-card-cta-border: #d9531e;
  --wb-card-cta-hover: #b84318;
  --wb-card-link-border: #d9531e;
  --wb-card-link-color: #c45f12;
  --wb-card-link-hover-bg: #d9531e;
  --wb-card-active-border: #d9531e;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.16);
}

.wb-theme--bow {
  --wb-theme-rgb: 43, 57, 66;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #2b3942;
  --wb-card-meta-icon: #2b3942;
  --wb-card-title-hover: #1a242c;
  --wb-card-cta-bg: #2b3942;
  --wb-card-cta-border: #2b3942;
  --wb-card-cta-hover: #1a242c;
  --wb-card-link-border: #2b3942;
  --wb-card-link-color: #2b3942;
  --wb-card-link-hover-bg: #2b3942;
  --wb-card-active-border: #2b3942;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.12);
}

.wb-theme--fb {
  --wb-theme-rgb: 14, 124, 107;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #0e7c6b;
  --wb-card-meta-icon: #0e7c6b;
  --wb-card-title-hover: #0a5c50;
  --wb-card-cta-bg: #0e7c6b;
  --wb-card-cta-border: #0e7c6b;
  --wb-card-cta-hover: #0a5c50;
  --wb-card-link-border: #0e7c6b;
  --wb-card-link-color: #0a5c50;
  --wb-card-link-hover-bg: #0e7c6b;
  --wb-card-active-border: #0e7c6b;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.16);
}

.wb-theme--ato {
  --wb-theme-rgb: 0, 85, 129;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #005581;
  --wb-card-meta-icon: #005581;
  --wb-card-title-hover: #00344f;
  --wb-card-cta-bg: #005581;
  --wb-card-cta-border: #005581;
  --wb-card-cta-hover: #00344f;
  --wb-card-link-border: #005581;
  --wb-card-link-color: #00344f;
  --wb-card-link-hover-bg: #005581;
  --wb-card-active-border: #005581;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.14);
}

.wb-theme--ttw {
  --wb-theme-rgb: 232, 207, 29;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #e8cf1d;
  --wb-card-meta-icon: #e8cf1d;
  --wb-card-title-hover: #c4b010;
  --wb-card-cta-bg: #e8cf1d;
  --wb-card-cta-border: #e8cf1d;
  --wb-card-cta-hover: #c4b010;
  --wb-card-link-border: #e8cf1d;
  --wb-card-link-color: #c4b010;
  --wb-card-link-hover-bg: #e8cf1d;
  --wb-card-active-border: #e8cf1d;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.2);
}

.wb-theme--default,
.wb-theme--na {
  --wb-theme-rgb: 232, 119, 34;
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-theme-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-theme-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-theme-rgb), 0.46);
  --wb-card-kicker: #e87722;
  --wb-card-meta-icon: #e87722;
  --wb-card-title-hover: #c45f12;
  --wb-card-cta-bg: #e87722;
  --wb-card-cta-border: #e87722;
  --wb-card-cta-hover: #c45f12;
  --wb-card-link-border: #e87722;
  --wb-card-link-color: #c45f12;
  --wb-card-link-hover-bg: #e87722;
  --wb-card-active-border: #e87722;
  --wb-card-active-glow: rgba(var(--wb-theme-rgb), 0.14);
}

/* Non-Series Brand_color_override — set --wb-brand-hex / --wb-brand-rgb / --wb-brand-deep inline */
.wb-theme--override {
  --wb-theme-rgb: var(--wb-brand-rgb);
  --wb-card-base: #fff;
  --wb-card-navy: rgba(var(--wb-brand-rgb), 0.16);
  --wb-card-mid: rgba(var(--wb-brand-rgb), 0.3);
  --wb-card-accent: rgba(var(--wb-brand-rgb), 0.46);
  --wb-card-kicker: var(--wb-brand-hex);
  --wb-card-meta-icon: var(--wb-brand-hex);
  --wb-card-title-hover: var(--wb-brand-deep);
  --wb-card-cta-bg: var(--wb-brand-hex);
  --wb-card-cta-border: var(--wb-brand-hex);
  --wb-card-cta-hover: var(--wb-brand-deep);
  --wb-card-link-border: var(--wb-brand-hex);
  --wb-card-link-color: var(--wb-brand-deep);
  --wb-card-link-hover-bg: var(--wb-brand-hex);
  --wb-card-active-border: var(--wb-brand-hex);
  --wb-card-active-glow: rgba(var(--wb-brand-rgb), 0.16);
}

@media (max-width: 700px) {
  .wb-slash-block {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .wb-theme-bg__shape--accent {
    width: 48%;
  }
}

.wb-slash-block__body {
  position: relative;
  z-index: 1;
  padding: 1.15rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.wb-slash-block__logo {
  position: absolute;
  top: auto;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: auto;
  max-width: min(42%, 9.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  box-sizing: border-box;
  line-height: 0;
  pointer-events: none;
  background: #fff;
  border: 1px solid #fff;
  padding: 0.4rem;
  overflow: visible;
}

.wb-slash-block__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 4.25rem;
  object-fit: contain;
  object-position: bottom right;
}

.wb-slash-block--has-logo .wb-slash-block__body--has-logo {
  padding-right: 1.2rem;
}

.wb-slash-block--has-logo .wb-slash-block__meta,
.wb-slash-block--has-logo .wb-slash-block__actions {
  padding-right: calc(min(42%, 9.5rem) + 0.5rem);
}

.wb-slash-block__kicker {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-card-kicker);
}

.wb-slash-block__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wb-ink);
}

.wb-slash-block__title a,
.wb-slash-block__title button {
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wb-slash-block__title a:hover,
.wb-slash-block__title button:hover {
  color: var(--wb-card-title-hover);
}

.wb-slash-block__blurb {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #000;
  flex: 1;
}

.wb-slash-block__blurb--chapter {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.wb-slash-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #000;
}

.wb-slash-block__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.wb-slash-block__meta .wb-icon {
  color: var(--wb-card-meta-icon);
  margin-right: 0;
}

.wb-slash-block__subseries {
  margin: 0 0 0.75rem;
}

.wb-slash-block__subseries-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-card-kicker);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.wb-slash-block .wb-subseries-pill {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(26, 36, 44, 0.12);
}

.wb-slash-block a.wb-subseries-pill:hover,
.wb-slash-block a.wb-subseries-pill:focus-visible {
  border-color: var(--wb-card-link-border);
  background: #fff;
  color: var(--wb-card-link-color);
}

.wb-slash-block .wb-subseries-pill--more {
  border-color: var(--wb-card-link-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--wb-card-link-color);
}

.wb-slash-block a.wb-subseries-pill--more:hover,
.wb-slash-block a.wb-subseries-pill--more:focus-visible {
  background: var(--wb-card-link-hover-bg);
  border-color: var(--wb-card-link-hover-bg);
  color: #fff;
}

.wb-slash-block__subseries-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
}

.wb-subseries-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #d8e0e6;
  background: #f4f7f9;
  color: var(--wb-charcoal);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.wb-subseries-pill:hover,
a.wb-subseries-pill:focus-visible {
  border-color: var(--wb-orange);
  background: #fff8f2;
  color: var(--wb-orange-deep);
}

.wb-subseries-pill--more {
  border-color: var(--wb-orange);
  background: #fff;
  color: var(--wb-orange-deep);
  flex-shrink: 0;
}

a.wb-subseries-pill--more:hover,
a.wb-subseries-pill--more:focus-visible {
  background: var(--wb-orange);
  border-color: var(--wb-orange);
  color: #fff;
}

.wb-slash-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.wb-slash-block__cta,
.wb-slash-block__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.wb-slash-block__cta {
  background: var(--wb-card-cta-bg);
  border: 1px solid var(--wb-card-cta-border);
  color: #fff;
}

.wb-slash-block__cta:hover {
  background: var(--wb-card-cta-hover);
  border-color: var(--wb-card-cta-hover);
  color: #fff;
  text-decoration: none;
}

.wb-slash-block__link {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--wb-card-link-border);
  color: var(--wb-card-link-color);
}

.wb-slash-block__link:hover {
  background: var(--wb-card-link-hover-bg);
  color: #fff;
  text-decoration: none;
}

.wb-slash-block__link i,
.wb-slash-block__cta i {
  margin: 0;
}

/* ----- Listing layout ----- */
.wb-listing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 900px) {
  .wb-listing-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.wb-filters {
  border: 1px solid var(--wb-line);
  background: var(--wb-white);
  padding: 0;
}

.wb-filters-heading {
  display: none;
  margin: 0;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wb-charcoal);
  border-bottom: 1px solid var(--wb-line);
}

@media (min-width: 900px) {
  .wb-filters-heading {
    display: block;
  }
}

.wb-filters-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border: 0;
  background: var(--wb-surface);
  color: var(--wb-charcoal);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 900px) {
  .wb-filters-toggle {
    display: none;
  }
}

.wb-filters-toggle__chevron::before {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--wb-muted);
}

.wb-filters.is-open .wb-filters-toggle__chevron::before {
  content: "\f077";
}

.wb-filters-body {
  display: none;
  padding: 0.75rem 1rem 1rem;
}

.wb-filters.is-open .wb-filters-body {
  display: block;
}

@media (min-width: 900px) {
  .wb-filters-body {
    display: block !important;
  }
}

.wb-filter-group {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.wb-filter-group[hidden] {
  display: none !important;
}

.wb-filter-group legend {
  margin: 0 0 0.45rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wb-muted);
}

.wb-filter-options {
  display: grid;
  gap: 0.35rem;
}

.wb-filter-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--wb-charcoal);
  cursor: pointer;
}

.wb-filter-option input {
  accent-color: var(--wb-orange);
}

.wb-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: var(--wb-orange-deep);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Results */
.wb-results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.wb-results-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
}

.wb-listing-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.wb-listing-bar .wb-scope-tabs {
  margin: 0;
  flex: 1 1 auto;
}

.wb-listing-bar .wb-search-wrap--bar {
  flex: 1 1 220px;
  max-width: 360px;
  min-width: 180px;
  align-self: center;
}

/* Search shares the results toolbar row with the sort, filling the results column */
.wb-results-toolbar .wb-results-toolbar__controls {
  flex-wrap: nowrap;
  min-width: 0;
}

.wb-results-toolbar .wb-search-wrap--toolbar {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

/* Keep the input's padding inside its box so it can't run under the sort */
.wb-results-toolbar .wb-search-wrap--toolbar input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.wb-results-toolbar .wb-sort-wrap {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

@media (max-width: 599.98px) {
  .wb-results-toolbar .wb-results-toolbar__controls {
    flex-wrap: wrap;
  }

  .wb-results-toolbar .wb-search-wrap--toolbar {
    flex-basis: 100%;
  }
}

.wb-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.wb-sort-wrap[hidden] {
  display: none !important;
}

.wb-sort-wrap label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 0.95rem;
  color: var(--wb-muted);
  white-space: nowrap;
}

.wb-sort-wrap label .wb-icon {
  margin: 0;
  color: var(--wb-charcoal);
}

.wb-sort-wrap select {
  height: 2.5rem;
  padding: 0 0.65rem;
  border: 1px solid var(--wb-line);
  border-radius: 0;
  background: var(--wb-white);
  color: var(--wb-ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.wb-series-stack--tab {
  margin-top: 0;
}

.wb-series-stack--tab[hidden] {
  display: none !important;
}

.wb-list[hidden] {
  display: none !important;
}

.wb-search-wrap {
  position: relative;
  flex: 1 1 220px;
  max-width: 420px;
}

.wb-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 0.9rem;
  color: var(--wb-muted);
  pointer-events: none;
}

.wb-search-icon::before {
  display: block;
  line-height: 1;
}

.wb-search-wrap input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.85rem 0 2.5rem;
  border: 1px solid var(--wb-line);
  border-radius: 0;
  background: var(--wb-white);
  color: var(--wb-ink);
  font-size: 0.92rem;
}

.wb-search-wrap input:focus {
  outline: 2px solid rgba(232, 119, 34, 0.35);
  border-color: var(--wb-orange);
}

.wb-results-count {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wb-muted);
}

.wb-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border: 1px solid var(--wb-line);
  background: var(--wb-white);
  width: fit-content;
  max-width: 100%;
}

.wb-scope-tabs button {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--wb-line);
  background: transparent;
  color: var(--wb-muted);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.65rem 1rem;
  cursor: pointer;
}

.wb-scope-tabs button:last-child {
  border-right: 0;
}

.wb-scope-tabs button.is-active {
  background: var(--wb-charcoal);
  color: #fff;
}

.wb-scope-tabs button.is-active i {
  color: var(--wb-orange);
}

.wb-active-series {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--wb-surface);
  border-left: 4px solid var(--wb-orange);
}

.wb-active-series[hidden] {
  display: none !important;
}

.wb-active-series__label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wb-charcoal);
}

.wb-active-series__clear {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--wb-orange-deep);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* Webinar listing rows */
.wb-list {
  display: grid;
  gap: 0.85rem;
}

/* Featured Series / Chapters mixed into Upcoming use full-width series cards */
.wb-list > .wb-slash-block {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.wb-list > .wb-slash-block--featured {
  margin-top: 0.85rem;
  overflow: visible;
}

.wb-list-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.75rem 0 1.1rem;
  color: #8a96a0;
}

.wb-list-sep__rule {
  flex: 1 1 auto;
  height: 1px;
  background: #d8dee4;
  max-width: 8rem;
}

.wb-list-sep__icon {
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.12em;
}

.wb-row {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--wb-white);
  border: 1px solid var(--wb-line);
}

.wb-row[class*="wb-theme--"],
.wb-slash-block[class*="wb-theme--"] {
  background: var(--wb-white);
}

.wb-row[class*="wb-theme--"] {
  border-left: 3px solid var(--wb-card-kicker);
}

/* Series cards: no slash accents */
.wb-slash-block[class*="wb-theme--"] .wb-theme-bg {
  display: none;
}

/* Webinar rows: slash accents only behind the thumbnail (left edge → before image right) */
.wb-row[class*="wb-theme--"] .wb-theme-bg {
  inset: 0 auto 0 0;
  width: calc(1rem + 112px - 0.5rem);
  max-width: 42%;
  background: transparent;
  overflow: hidden;
}

.wb-row[class*="wb-theme--"] .wb-theme-bg__shape--navy {
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.wb-row[class*="wb-theme--"] .wb-theme-bg__shape--mid {
  left: -6%;
  right: auto;
  width: 92%;
  clip-path: polygon(0 0, 88% 0, 68% 100%, 0 100%);
}

.wb-row[class*="wb-theme--"] .wb-theme-bg__shape--accent {
  left: 0;
  right: auto;
  width: 96%;
  clip-path: polygon(0 0, 78% 0, 58% 100%, 0 100%);
  transform: skewX(-18deg);
  transform-origin: left center;
}

@media (max-width: 699px) {
  .wb-row[class*="wb-theme--"] .wb-theme-bg {
    inset: 0.95rem auto auto 1rem;
    width: calc(100% - 2rem);
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    bottom: auto;
  }
}

.wb-slash-block[class*="wb-theme--"] > :not(.wb-theme-bg):not(.wb-slash-block__logo):not(.wb-slash-block__feature-tag) {
  position: relative;
  z-index: 1;
}

.wb-row[class*="wb-theme--"] > :not(.wb-theme-bg) {
  position: relative;
  z-index: 1;
}

.wb-row[class*="wb-theme--"] .wb-row__inner {
  background: transparent;
}

.wb-row[hidden] {
  display: none !important;
}

.wb-row__slash {
  display: none !important;
}

.wb-row__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  align-items: center;
}

@media (min-width: 700px) {
  .wb-row__inner {
    grid-template-columns: 112px minmax(0, 1fr) auto;
  }

  .wb-row--sub .wb-row__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.wb-row__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--wb-charcoal);
  text-decoration: none;
}

.wb-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.wb-row__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-orange);
  font-size: 1.4rem;
}

.wb-row[class*="wb-theme--"] .wb-row__thumb--placeholder {
  color: var(--wb-card-kicker);
}

.wb-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
}

.wb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.wb-badge .wb-icon {
  margin-right: 0;
}

.wb-badge--type {
  background: var(--wb-charcoal);
  color: var(--wb-orange);
}

.wb-badge--access {
  background: #eef2f4;
  color: var(--wb-charcoal);
}

.wb-badge--access.is-members {
  background: #fdeee4;
  color: var(--wb-orange-deep);
}

.wb-badge--access.is-community {
  background: #eef5fb;
  color: #1e5f8a;
}

.wb-badge--access.is-event {
  background: #e8f4f1;
  color: var(--wb-teal);
}

.wb-badge--access.is-public {
  background: #eef8f4;
  color: var(--wb-teal);
}

.wb-badge--ceu {
  background: #f3e8ef;
  color: #a23058;
}

.wb-badge--lang {
  background: #eef8f4;
  color: var(--wb-teal);
}

.wb-badge--series {
  background: #fff4eb;
  color: var(--wb-orange-deep);
}

a.wb-badge {
  text-decoration: none;
}

a.wb-badge:hover {
  filter: brightness(0.96);
}

.wb-badge--subseries {
  background: #eef2f4;
  color: var(--wb-charcoal);
}

/* Themed badges on list webinar rows — match detail page accents */
.wb-row[class*="wb-theme--"] .wb-badge--type {
  border: 1px solid var(--wb-card-kicker);
  color: var(--wb-card-kicker);
}

.wb-row[class*="wb-theme--"] .wb-badge--series {
  background: color-mix(in srgb, var(--wb-card-kicker) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--wb-card-kicker) 35%, #fff);
  color: var(--wb-card-kicker);
}

.wb-row__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-ink);
}

.wb-row__title a {
  color: inherit;
  text-decoration: none;
}

.wb-row__title a:hover {
  color: var(--wb-orange-deep);
}

.wb-row[class*="wb-theme--"] .wb-row__title a:hover {
  color: var(--wb-card-title-hover);
}

.wb-row__blurb {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #000;
}

.wb-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #000;
}

.wb-row__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.wb-row__meta .wb-icon {
  color: var(--wb-orange);
  margin-right: 0;
}

.wb-row[class*="wb-theme--"] .wb-row__meta .wb-icon {
  color: var(--wb-card-meta-icon);
}

.wb-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}

@media (min-width: 700px) {
  .wb-row__actions {
    flex-direction: column;
    align-items: stretch;
    min-width: 8.5rem;
  }
}

.wb-row[class*="wb-theme--"] .wb-btn--primary {
  background: var(--wb-card-cta-bg);
  border-color: var(--wb-card-cta-border);
}

.wb-row[class*="wb-theme--"] .wb-btn--primary:hover {
  background: var(--wb-card-cta-hover);
  border-color: var(--wb-card-cta-hover);
}

.wb-row[class*="wb-theme--"] .wb-btn--ghost {
  border-color: var(--wb-card-link-border);
  color: var(--wb-card-link-color);
}

.wb-row[class*="wb-theme--"] .wb-btn--ghost:hover {
  background: var(--wb-card-link-hover-bg);
  border-color: var(--wb-card-link-hover-bg);
  color: #fff;
}

.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.wb-btn--primary {
  background: var(--wb-orange);
  border-color: var(--wb-orange);
  color: #fff;
}

.wb-btn--primary:hover {
  background: var(--wb-orange-deep);
  border-color: var(--wb-orange-deep);
  color: #fff;
  text-decoration: none;
}

.wb-btn--disabled,
.wb-btn[aria-disabled="true"] {
  background: #8b959c;
  border-color: #8b959c;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.9;
  text-decoration: none;
}

.wb-btn--ghost {
  background: #fff;
  border-color: var(--wb-line);
  color: var(--wb-charcoal);
}

.wb-btn--ghost:hover {
  border-color: var(--wb-orange);
  color: var(--wb-orange-deep);
  text-decoration: none;
}

.wb-empty {
  margin: 0;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--wb-line);
  background: var(--wb-surface);
  color: var(--wb-muted);
  font-size: 0.95rem;
  text-align: center;
}

.wb-empty[hidden] {
  display: none !important;
}

.wb-detail .is-hidden,
.wb-detail-hero__reg .is-hidden {
  display: none !important;
}

.wb-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0.25rem;
}

.wb-load-more-wrap[hidden] {
  display: none !important;
}

.wb-load-more {
  min-width: 12rem;
  justify-content: center;
}

.wb-item-source {
  display: none !important;
}

/* =========================================================
   Webina DETAIL page
   ========================================================= */

.wb-detail {
  --wb-ink: #1a242c;
  --wb-charcoal: #2B3942;
  --wb-muted: #5b6b75;
  --wb-line: #e5eaee;
  --wb-orange: #e87722;
  --wb-orange-deep: #c45f12;
  --wb-teal: #0e7c6b;
  --wb-surface: #f5f7f8;
  --wb-white: #fff;
  --wb-theme-panel-bg: rgba(255, 255, 255, 0.94);
  --wb-program-rail: 13.5rem;
  max-width: 1140px;
  margin: 0 auto 2.5rem;
  padding: 0 0 2.5rem;
  color: var(--wb-ink);
  box-sizing: border-box;
}

.content > .wb-detail,
.content .wb-detail {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding-left: 24px;
  padding-right: 24px;
  --wb-detail-gutter: 24px;
}

@media (min-width: 960px) {
  .content > .wb-detail,
  .content .wb-detail {
    padding-left: 48px;
    padding-right: 48px;
    --wb-detail-gutter: 48px;
  }
}

.wb-detail *,
.wb-detail *::before,
.wb-detail *::after {
  box-sizing: border-box;
}

.wb-detail .wb-icon {
  margin-right: 0.35rem;
}

.wb-detail-hero {
  position: relative;
  display: block;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--wb-line);
}

/* Webinar (session) pages: full-bleed hero background, content stays in gutters */
.wb-detail:not(.wb-detail--program) {
  position: relative;
  overflow: visible;
}

.wb-detail:not(.wb-detail--program) .wb-detail-layout {
  overflow: visible;
}

.wb-detail:not(.wb-detail--program) .wb-detail-hero {
  overflow: visible;
  border: none;
  background: transparent;
}

.wb-detail:not(.wb-detail--program) .wb-detail-hero .wb-theme-bg {
  position: absolute;
  inset: auto;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  background: var(--wb-card-base);
}

/* Chapter: slash accents from the right (behind logo rail) */
.wb-detail:not(.wb-detail--program):not(.wb-detail--webinar) .wb-detail-hero .wb-theme-bg__shape--navy {
  right: 0;
  left: auto;
  width: 24%;
  max-width: none;
}

.wb-detail:not(.wb-detail--program):not(.wb-detail--webinar) .wb-detail-hero .wb-theme-bg__shape--mid {
  right: 0;
  left: auto;
  width: 16%;
  max-width: none;
}

.wb-detail:not(.wb-detail--program):not(.wb-detail--webinar) .wb-detail-hero .wb-theme-bg__shape--accent {
  right: -2%;
  left: auto;
  width: 28%;
  max-width: none;
}

/* Webinar: no hero slash box — full-page left slash like Series (mirrored) */
.wb-detail--webinar {
  position: relative;
  overflow: visible;
}

.wb-detail--webinar > :not(.wb-detail-page-bg) {
  position: relative;
  z-index: 1;
}

.wb-detail--webinar .wb-detail-page-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
  min-height: 100vh;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.wb-detail--webinar .wb-detail-page-bg .wb-theme-bg {
  inset: 0;
  background: transparent;
  overflow: visible;
}

.wb-detail--webinar .wb-detail-page-bg .wb-theme-bg__shape {
  top: 0;
  bottom: 0;
}

/* Left gutter + ~20px under content (50% = detail content width) */
.wb-detail--webinar .wb-detail-page-bg .wb-theme-bg__shape--navy {
  left: calc(50% - 50vw);
  right: auto;
  width: calc(50vw - 50% + 20px);
  max-width: none;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
}

.wb-detail--webinar .wb-detail-page-bg .wb-theme-bg__shape--mid {
  left: calc(50% - 50vw);
  right: auto;
  width: calc(50vw - 50% + 12px);
  max-width: none;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}

.wb-detail--webinar .wb-detail-page-bg .wb-theme-bg__shape--accent {
  left: calc(50% - 50vw - 6px);
  right: auto;
  width: calc(50vw - 50% + 28px);
  max-width: none;
  clip-path: polygon(0 0, 78% 0, 100% 100%, 10% 100%);
  transform: skewX(-14deg);
  transform-origin: top left;
}

.wb-detail--webinar .wb-detail-hero {
  display: flex;
  margin-bottom: 1rem;
  overflow: visible;
  border: none;
  background: transparent;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  min-height: 0;
  padding: 1rem 0 0.75rem;
}

.wb-detail--webinar .wb-detail-hero__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 1.15rem 0 1.35rem;
}

@media (min-width: 960px) {
  .wb-detail--webinar .wb-detail-hero {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.75rem;
    width: 100%;
    padding-right: 0;
  }

  .wb-detail--webinar .wb-detail-hero__body {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-right: 0;
  }

  .wb-detail--webinar .wb-detail-hero .wb-detail-hero__reg {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    margin-top: 0;
    margin-right: 0;
    padding: 0;
    align-items: stretch;
  }

  .wb-detail--webinar .wb-detail-hero--has-topline .wb-detail-hero__reg {
    margin-top: 0; /* series/host sit under title; align reg with title */
  }

  .wb-detail--webinar .wb-detail-hero__reg-btn {
    width: 100%;
    min-width: 0;
  }
}

.wb-detail--webinar .wb-detail-panel,
.wb-detail--webinar .wb-related-block,
.wb-detail--webinar .wb-detail-sessions {
  background: var(--wb-white);
}

.wb-detail--program {
  position: relative;
  overflow: visible;
}

/* Series detail landing: no intro title / at-a-glance / slash layers */
.wb-detail--series-landing .wb-detail-page-bg,
.wb-detail--series-landing .wb-detail-hero,
.wb-detail--series-landing .wb-program-meta-tag,
.wb-detail--series-landing .wb-related-block__title {
  display: none;
}

.wb-detail--program > :not(.wb-detail-page-bg) {
  position: relative;
  z-index: 1;
}

.wb-detail--program .wb-detail-page-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
  min-height: 100vh;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.wb-detail--program .wb-detail-page-bg .wb-theme-bg {
  inset: 0;
  background: transparent;
  overflow: visible;
}

.wb-detail--program .wb-detail-page-bg .wb-theme-bg__shape {
  top: 0;
  bottom: 0;
}

/* Same left-margin slash as webinar detail */
.wb-detail--program .wb-detail-page-bg .wb-theme-bg__shape--navy {
  left: calc(50% - 50vw);
  right: auto;
  width: calc(50vw - 50% + 20px);
  max-width: none;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
}

.wb-detail--program .wb-detail-page-bg .wb-theme-bg__shape--mid {
  left: calc(50% - 50vw);
  right: auto;
  width: calc(50vw - 50% + 12px);
  max-width: none;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}

.wb-detail--program .wb-detail-page-bg .wb-theme-bg__shape--accent {
  left: calc(50% - 50vw - 6px);
  right: auto;
  width: calc(50vw - 50% + 28px);
  max-width: none;
  clip-path: polygon(0 0, 78% 0, 100% 100%, 10% 100%);
  transform: skewX(-14deg);
  transform-origin: top left;
}

.wb-detail--program .wb-detail-hero {
  margin-bottom: 0.75rem;
  overflow: visible;
  border: none;
  background: transparent;
}

.wb-detail--program:not(.wb-detail--series-landing) .wb-detail-panel,
.wb-detail--program:not(.wb-detail--series-landing) .wb-related-block,
.wb-detail--program:not(.wb-detail--series-landing) .wb-detail-sessions {
  background: var(--wb-white);
}

.wb-detail--series-landing.wb-detail--program .wb-detail-panel,
.wb-detail--series-landing.wb-detail--program .wb-related-block,
.wb-detail--series-landing.wb-detail--program .wb-detail-sessions,
.wb-detail--series-landing .wb-detail-related-stack,
.wb-detail--series-landing .wb-subseries-grid {
  background: transparent !important;
  background-color: transparent !important;
}

.wb-detail-hero__body {
  position: relative;
  z-index: 1;
  padding: 1.35rem 1.35rem 1.45rem;
}

.wb-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.wb-detail-hero__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem 0.85rem;
  margin: 0.55rem 0 0;
  width: 100%;
}

.wb-detail-hero__topline .wb-detail-badges {
  margin: 0;
}

.wb-detail-host--topline {
  margin: 0;
  font-size: 0.88rem;
  white-space: nowrap;
}

.wb-detail-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wb-ink);
}

.wb-detail--webinar .wb-detail-title {
  margin: 0;
}

.wb-detail-host {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wb-charcoal);
}

.wb-detail-host .wb-icon {
  color: var(--wb-card-kicker);
}

.wb-detail-section__title .wb-icon,
.wb-detail-aside__title .wb-icon,
.wb-related-block__title .wb-icon,
.wb-detail-sessions .wb-section-title .wb-icon {
  color: var(--wb-card-kicker);
}

.wb-detail-panel,
.wb-related-block {
  position: relative;
  overflow: hidden;
  background: var(--wb-theme-panel-bg);
  border: 1px solid var(--wb-line);
  border-left: 3px solid var(--wb-card-kicker);
}

.wb-detail-panel {
  padding: 1.15rem 1.25rem;
}

.wb-detail .wb-badge--type {
  border: 1px solid var(--wb-card-kicker);
  color: var(--wb-card-kicker);
}

.wb-detail .wb-badge--series {
  background: color-mix(in srgb, var(--wb-card-kicker) 12%, #fff);
  border-color: color-mix(in srgb, var(--wb-card-kicker) 35%, #fff);
  color: var(--wb-card-kicker);
}

.wb-detail a.wb-badge--series:hover {
  background: color-mix(in srgb, var(--wb-card-kicker) 18%, #fff);
}

.wb-detail .wb-overview-row dd a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.wb-detail .wb-overview-row dd a:hover {
  color: var(--wb-card-kicker);
}

.wb-detail .wb-btn--primary {
  background: var(--wb-card-cta-bg);
  border-color: var(--wb-card-cta-border);
}

.wb-detail .wb-btn--primary:hover {
  background: var(--wb-card-cta-hover);
  border-color: var(--wb-card-cta-hover);
}

.wb-detail .wb-btn--disabled,
.wb-detail .wb-btn[aria-disabled="true"] {
  background: #8b959c;
  border-color: #8b959c;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.9;
}

.wb-detail .wb-btn--ghost {
  border-color: var(--wb-card-link-border);
  color: var(--wb-card-link-color);
}

.wb-detail .wb-btn--ghost:hover {
  background: var(--wb-card-link-hover-bg);
  border-color: var(--wb-card-link-hover-bg);
  color: #fff;
}

.wb-detail .wb-scope-tabs button.is-active {
  background: var(--wb-card-cta-bg);
  color: #fff;
}

.wb-detail .wb-scope-tabs button.is-active i {
  color: #fff;
}

.wb-detail .wb-active-series {
  border-left-color: var(--wb-card-kicker);
}

.wb-detail .wb-active-series__clear,
.wb-detail .wb-filter-clear {
  color: var(--wb-card-kicker);
}

.wb-detail .wb-filter-clear:hover,
.wb-detail .wb-active-series__clear:hover {
  color: var(--wb-card-cta-hover);
}

.wb-detail .wb-row {
  background: var(--wb-white);
  border-left: 3px solid var(--wb-card-kicker);
}

.wb-detail .wb-row > :not(.wb-theme-bg) {
  position: relative;
  z-index: 1;
}

.wb-detail .wb-row .wb-row__inner {
  background: transparent;
}

.wb-detail .wb-row .wb-row__thumb--placeholder {
  color: var(--wb-card-kicker);
}

.wb-detail .wb-row[class*="wb-theme--"] .wb-row__meta .wb-icon,
.wb-detail .wb-row__meta .wb-icon {
  color: var(--wb-card-meta-icon);
}

.wb-detail .wb-overview-row dt {
  color: var(--wb-card-kicker);
  opacity: 0.85;
}

.wb-detail .wb-overview-row dt .wb-icon {
  color: var(--wb-card-kicker);
}

.wb-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

.wb-detail-layout > .wb-detail-hero {
  margin-bottom: 0;
}

.wb-detail-below-hero {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 960px) {
  .wb-detail:not(.wb-detail--program) .wb-detail-below-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.75rem;
    align-items: start;
  }

  .wb-detail:not(.wb-detail--program) .wb-detail-below-hero > .wb-detail-main {
    min-width: 0;
  }

  /* Series: single-column intro; logo stays with title */
  .wb-detail--program .wb-detail-layout--program {
    display: flex;
    flex-direction: column;
  }

  .wb-detail--program .wb-detail-primary {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
  }
}

/* Detail hero: title left; Series meta tag or Chapter logo top-right */
.wb-detail--program .wb-detail-hero,
.wb-detail:not(.wb-detail--program):not(.wb-detail--webinar) .wb-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.15rem;
  padding: 1.35rem 0;
  padding-right: 0;
}

.wb-detail--program .wb-detail-hero {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.wb-detail--program .wb-detail-hero__body,
.wb-detail:not(.wb-detail--program):not(.wb-detail--webinar) .wb-detail-hero__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 1.15rem 0 1.35rem;
}

.wb-detail--program .wb-detail-hero__body {
  padding-top: var(--wb-program-body-pad, 0.75rem);
}

.wb-detail--program .wb-detail-title {
  display: none;
}

.wb-detail--program .wb-program-about {
  margin: 0.35rem 0 0;
  padding: 0;
  max-width: 42rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.wb-detail--program .wb-program-about__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-ink);
}

.wb-detail--program .wb-program-about__title .wb-icon {
  color: var(--wb-card-kicker);
}

.wb-detail--program .wb-program-about__content {
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--wb-charcoal);
}

.wb-detail--program .wb-program-about__content p {
  margin: 0 0 0.65rem;
}

.wb-detail--program .wb-program-about__content p:last-child {
  margin-bottom: 0;
}

.wb-detail--program .wb-detail-hero .wb-detail-logo,
.wb-detail:not(.wb-detail--program) .wb-detail-hero .wb-detail-logo {
  flex: 0 0 var(--wb-program-rail);
  width: var(--wb-program-rail);
  max-width: var(--wb-program-rail);
  margin: 0;
  padding: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #fff;
  box-sizing: border-box;
  line-height: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Series: key-details tag hangs from top-right (replaces logo) */
.wb-detail--program .wb-program-meta-tag {
  flex: 0 0 auto;
  width: max-content;
  max-width: max-content;
  margin: 0;
  padding: 1.1rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  align-self: flex-start;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--wb-line);
  border-top: 4px solid var(--wb-card-kicker);
  box-shadow: 0 8px 22px rgba(26, 36, 44, 0.08);
  position: relative;
  /* Below .page-header (z-index: 100); still above hero / page wash */
  z-index: 4;
}

/* Desktop: Details tag hangs from just under the site nav (over SF title hero) */
@media (min-width: 900px) {
  .wb-detail--program .wb-program-meta-tag {
    margin-top: calc(-1 * var(--wb-program-meta-lift, 8.5rem));
  }
}

.wb-detail--program .wb-program-meta-tag .wb-program-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.wb-detail--program .wb-program-meta-tag .wb-program-meta-item__label {
  white-space: nowrap;
}

.wb-detail--program .wb-program-meta-tag .wb-program-meta-item__value {
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--wb-ink);
  white-space: nowrap;
}

.wb-detail--program .wb-program-meta-tag__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: max-content;
  max-width: max-content;
  margin: 0.15rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--wb-line);
  box-sizing: border-box;
}

.wb-detail--program .wb-program-meta-tag__ctas .wb-program-ctas__btn {
  width: max-content;
  max-width: max-content;
  white-space: nowrap;
  justify-content: center;
}

@media (max-width: 899px) {
  .wb-detail--program .wb-detail-hero {
    flex-direction: column;
    align-items: stretch;
  }

  /* Tablet: Frequency / Access / CTA in one horizontal row */
  .wb-detail--program .wb-program-meta-tag {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem 1.35rem;
    width: 100%;
    max-width: 100%;
    order: 0;
    margin-top: 1rem;
    align-self: stretch;
    padding: 1rem 1.1rem;
  }

  .wb-detail--program .wb-program-meta-tag .wb-program-meta-item {
    flex: 0 1 auto;
    min-width: 0;
  }

  .wb-detail--program .wb-program-meta-tag .wb-program-meta-item__label,
  .wb-detail--program .wb-program-meta-tag .wb-program-meta-item__value {
    white-space: nowrap;
  }

  .wb-detail--program .wb-program-meta-tag__ctas {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    max-width: none;
    margin: 0;
    margin-left: auto;
    padding: 0;
    padding-left: 1.25rem;
    border-top: 0;
    border-left: 1px solid var(--wb-line);
  }

  .wb-detail--program .wb-program-meta-tag__ctas .wb-program-ctas__btn {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* Phone: each item wraps to its own full-width row */
@media (max-width: 599px) {
  .wb-detail--program .wb-program-meta-tag {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.9rem;
  }

  .wb-detail--program .wb-program-meta-tag .wb-program-meta-item {
    flex: 1 1 100%;
    width: 100%;
  }

  .wb-detail--program .wb-program-meta-tag .wb-program-meta-item__label,
  .wb-detail--program .wb-program-meta-tag .wb-program-meta-item__value {
    white-space: normal;
  }

  .wb-detail--program .wb-program-meta-tag__ctas {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0.85rem;
    border-left: 0;
    border-top: 1px solid var(--wb-line);
  }

  .wb-detail--program .wb-program-meta-tag__ctas .wb-program-ctas__btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
}

/* Chapter: logo width matches aside column */
.wb-detail:not(.wb-detail--program) .wb-detail-hero .wb-detail-logo {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
}

.wb-detail--webinar .wb-detail-hero__body .wb-detail-title {
  margin-bottom: 0;
}

.wb-detail--webinar .wb-detail-hero .wb-detail-hero__reg {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 0.4rem;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.wb-detail-hero__reg-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
}

.wb-detail--webinar .wb-detail-hero__reg-btn {
  width: 100%;
  min-width: 0;
}

.wb-detail-hero__reg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  box-sizing: border-box;
  text-align: center;
}

.wb-detail-hero__access {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wb-ink, #2a2f36);
}

.wb-detail-hero__access .wb-icon {
  color: var(--wb-card-kicker);
  flex: 0 0 auto;
  margin-top: 0.12rem;
}

@media (min-width: 960px) {
  .wb-detail:not(.wb-detail--program) .wb-detail-hero {
    gap: 1.75rem; /* match main/aside grid gap so hero rail aligns over aside */
  }

  /* Keep webinar CTA rail flush with aside (must follow base __reg rules) */
  .wb-detail--webinar .wb-detail-hero {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.75rem;
    width: 100%;
    padding-right: 0;
    margin-right: 0;
  }

  .wb-detail--webinar .wb-detail-hero__body {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-right: 0;
  }

  .wb-detail--webinar .wb-detail-hero .wb-detail-hero__reg {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    margin-top: 0;
    margin-right: 0;
    padding: 0;
    align-items: stretch;
    align-self: flex-start;
  }

  .wb-detail--webinar .wb-detail-hero--has-topline .wb-detail-hero__reg {
    margin-top: 0;
  }

  .wb-detail--webinar .wb-detail-hero__reg-btn,
  .wb-detail--webinar .wb-detail-hero__access {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.wb-detail--program .wb-detail-hero .wb-detail-logo img,
.wb-detail:not(.wb-detail--program) .wb-detail-hero .wb-detail-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 5.5rem;
  margin: 0 auto;
  object-fit: contain;
  object-position: top center;
}

@media (max-width: 899px) {
  .wb-detail--program .wb-detail-hero .wb-detail-logo {
    flex: 0 0 9.5rem;
    width: 9.5rem;
    max-width: 9.5rem;
  }
  .wb-detail:not(.wb-detail--program) .wb-detail-hero .wb-detail-logo {
    flex: 0 0 9.5rem;
    width: 9.5rem;
    max-width: 9.5rem;
  }
  .wb-detail--webinar .wb-detail-hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.65rem;
  }
  .wb-detail--webinar .wb-detail-hero__body {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .wb-detail--webinar .wb-detail-hero .wb-detail-hero__reg,
  .wb-detail--webinar .wb-detail-hero--has-topline .wb-detail-hero__reg {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .wb-detail--webinar .wb-detail-hero__reg-btn {
    width: 100%;
    min-width: 0;
  }
  .wb-detail-hero__reg-btn {
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
  }
}

@media (min-width: 900px) and (max-width: 959px) {
  .wb-detail:not(.wb-detail--program) .wb-detail-hero .wb-detail-logo {
    flex: 0 0 var(--wb-program-rail);
    width: var(--wb-program-rail);
    max-width: var(--wb-program-rail);
  }
  .wb-detail--webinar .wb-detail-hero .wb-detail-hero__reg {
    flex: 0 0 var(--wb-program-rail);
    width: var(--wb-program-rail);
    max-width: var(--wb-program-rail);
  }
}

.wb-program-details {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wb-line);
}

.wb-detail-panel--program-intro > .wb-program-details:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.wb-program-intro-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 900px) {
  .wb-program-intro-layout--with-ctas {
    grid-template-columns: minmax(0, 1fr) var(--wb-program-rail);
    gap: 1.15rem;
  }

  .wb-program-intro-layout--with-ctas .wb-program-ctas {
    grid-column: 2;
  }

  .wb-program-intro-layout--rail-only {
    grid-template-columns: minmax(0, 1fr) var(--wb-program-rail);
  }
}

.wb-program-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: var(--wb-program-rail);
  max-width: var(--wb-program-rail);
  min-width: 0;
  margin: 0;
  padding: 0;
  justify-self: end;
  box-sizing: border-box;
}

.wb-program-ctas__btn {
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}

.wb-program-meta-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem 1.75rem;
  margin: 0;
}

.wb-detail-hero__meta,
.wb-detail-hero .wb-program-meta-row {
  margin: 0 0 0.75rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.wb-program-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.wb-program-meta-item__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-card-kicker);
  white-space: nowrap;
}

.wb-program-meta-item__label .wb-icon {
  width: 0.85rem;
  text-align: center;
}

.wb-program-meta-item__value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--wb-ink);
}

.wb-detail-actions--inline {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.wb-detail-actions--inline .wb-btn {
  width: auto;
}

.wb-detail-main {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

.wb-detail-panel--sticky {
  position: sticky;
  top: 1rem;
}

.wb-detail-section__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wb-charcoal);
}

.wb-detail-section__title .wb-icon {
  color: var(--wb-card-kicker);
}

.wb-detail-section__content {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--wb-ink);
}

.wb-detail-section__content p:first-child {
  margin-top: 0;
}

.wb-detail-section__content p:last-child {
  margin-bottom: 0;
}

.wb-detail-aside__title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wb-charcoal);
}

.wb-detail-overview {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

/* CEU earned — callout highlight above When in at-a-glance */
.wb-ceu-callout {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(162, 48, 88, 0.28);
  border-left: 4px solid var(--wb-card-kicker, #a23058);
  background: linear-gradient(135deg, rgba(162, 48, 88, 0.08), rgba(232, 119, 34, 0.06));
  color: var(--wb-ink, #1a242c);
}

.wb-ceu-callout__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wb-card-kicker, #a23058);
}

.wb-ceu-callout__label .wb-icon {
  width: 0.85rem;
  text-align: center;
}

.wb-ceu-callout__value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--wb-charcoal, #2b3942);
}

.wb-ceu-callout__unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wb-muted, #5b6b75);
  margin-left: 0.25rem;
}

.wb-overview-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.92rem;
}

.wb-overview-row dt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-muted);
}

.wb-overview-row dt .wb-icon {
  width: 0.85rem;
  text-align: center;
  opacity: 0.9;
}

.wb-overview-row dd {
  margin: 0;
  font-weight: 600;
  color: var(--wb-ink);
}

.wb-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wb-detail-actions--pre {
  margin: 0 0 1rem;
}

.wb-detail-actions .wb-btn {
  width: 100%;
}

.wb-detail-thumb {
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--wb-charcoal);
  aspect-ratio: 1 / 1;
}

.wb-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.wb-detail-logo {
  margin: 0;
  padding: 0.4rem;
  width: fit-content;
  max-width: 100%;
  background: #fff;
  border: 1px solid #fff;
  box-sizing: border-box;
  line-height: 0;
  text-align: center;
  overflow: visible;
}

.wb-detail-logo img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
  object-position: top center;
}

/* Webinar: host logo at top of at-a-glance aside */
.wb-detail-logo--aside {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wb-detail-logo--aside img {
  max-height: 4.75rem;
}

/* People */
.wb-people-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 600px) {
  .wb-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wb-person {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
}

a.wb-person--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.wb-person--link:hover,
a.wb-person--link:focus-visible {
  border-color: var(--wb-card-kicker, var(--wb-orange));
  box-shadow: 0 0 0 1px var(--wb-card-kicker, var(--wb-orange));
  outline: none;
}

a.wb-person--link:hover .wb-person__name,
a.wb-person--link:focus-visible .wb-person__name {
  color: var(--wb-card-title-hover, var(--wb-orange-deep));
}

.wb-person__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wb-charcoal);
  color: var(--wb-orange);
  overflow: hidden;
}

.wb-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-person__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wb-ink);
}

.wb-person__role {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-muted);
}

.wb-person:has(.wb-person__blurb) {
  align-items: flex-start;
}

.wb-person__body {
  min-width: 0;
}

.wb-person__meta {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wb-ink);
}

.wb-person__blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--wb-muted);
}

.wb-person__bio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--wb-line);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-charcoal);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.wb-person__bio-btn .fa-solid {
  font-size: 0.72rem;
  transition: transform 0.15s ease;
}

a.wb-person--link:hover .wb-person__bio-btn,
a.wb-person--link:focus-visible .wb-person__bio-btn {
  border-color: var(--wb-card-kicker, var(--wb-orange));
  color: var(--wb-card-title-hover, var(--wb-orange-deep));
}

a.wb-person--link:hover .wb-person__bio-btn .fa-solid,
a.wb-person--link:focus-visible .wb-person__bio-btn .fa-solid {
  transform: translateX(2px);
}

/* Sponsors */
.wb-sponsor-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.wb-sponsor-strip img {
  max-height: 48px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Related children */
.wb-detail-related-stack {
  display: grid;
  gap: 1.35rem;
}

.wb-related-block {
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--wb-theme-panel-bg);
}

.wb-related-block__title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wb-charcoal);
}

.wb-related-block__title .wb-icon {
  color: var(--wb-card-kicker);
}

/* Series landing: no Chapters title, no side gutters, no white panel — cards only */
.wb-detail--series-landing {
  --wb-theme-panel-bg: transparent;
}

.content > .wb-detail.wb-detail--series-landing,
.content .wb-detail.wb-detail--series-landing,
.wb-detail.wb-detail--series-landing {
  background: transparent !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  --wb-detail-gutter: 0px;
  --wb-theme-panel-bg: transparent;
}

/* AutoCareMain / Sitefinity white content shell — let page gray show in card gaps */
.content:has(.wb-detail--series-landing),
.content:has(.wb-widget--series-page),
.MainContent:has(.wb-detail--series-landing),
.sf_colsIn:has(.wb-detail--series-landing),
.sf_colsOut:has(.wb-detail--series-landing) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.wb-detail--series-landing,
.wb-detail--series-landing.wb-detail--program,
.wb-detail--series-landing .wb-detail-layout,
.wb-detail--series-landing .wb-detail-layout--program,
.wb-detail--series-landing .wb-detail-primary,
.wb-detail--series-landing .wb-detail-main,
.wb-detail--series-landing .wb-detail-panel,
.wb-detail--series-landing .wb-detail-related-stack,
.wb-detail--series-landing .wb-related-block,
.wb-detail--series-landing .wb-detail-sessions,
.wb-detail--series-landing .wb-subseries-grid {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.wb-detail--series-landing .wb-detail-panel,
.wb-detail--series-landing .wb-related-block,
.wb-detail--series-landing .wb-detail-sessions {
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}

.wb-detail--series-landing .wb-related-block__title {
  display: none !important;
}

.wb-detail--series-landing .wb-slash-block,
.wb-detail--series-landing .wb-subseries-card {
  background: #fff;
}

/* Series landing: gaps show page through — no panel fill behind the grid */
.wb-detail--series-landing .wb-detail-related-stack,
.wb-detail--series-landing .wb-related-block,
.wb-detail--series-landing .wb-subseries-grid {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.wb-subseries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  background: transparent;
}

.wb-subseries-grid--cols-1 {
  grid-template-columns: 1fr;
  max-width: 28rem;
}

@media (min-width: 700px) {
  .wb-subseries-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .wb-subseries-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (min-width: 960px) {
  .wb-subseries-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wb-subseries-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 100%;
  padding: 1rem 1.05rem 1.1rem;
  overflow: hidden;
  background: var(--wb-white);
  border: 1px solid var(--wb-line);
  cursor: pointer;
}

.wb-subseries-card.is-active {
  border-color: var(--wb-card-active-border);
  box-shadow: 0 0 0 1px var(--wb-card-active-border), 0 4px 14px var(--wb-card-active-glow);
}

.wb-subseries-card__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-card-kicker);
}

.wb-subseries-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wb-ink);
}

.wb-subseries-card__title a {
  color: inherit;
  text-decoration: none;
}

.wb-subseries-card__title a:hover {
  color: var(--wb-card-title-hover);
}

.wb-subseries-card__blurb {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--wb-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.wb-subseries-card__meta-row dt .wb-icon {
  color: var(--wb-card-meta-icon);
}

.wb-subseries-card__meta {
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.wb-subseries-card__meta-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  font-size: 0.84rem;
  line-height: 1.35;
}

.wb-subseries-card__meta-row dt {
  margin: 0;
  font-weight: 700;
  color: var(--wb-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.wb-subseries-card__meta-row dd {
  margin: 0;
  color: #000;
  font-weight: 600;
}

.wb-subseries-card__actions {
  margin-top: auto;
  padding-top: 0.25rem;
}

.wb-detail-sessions {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--wb-theme-panel-bg);
  border: 1px solid var(--wb-line);
  border-left: 3px solid var(--wb-card-kicker);
}

.wb-detail-sessions .wb-section-title {
  margin: 0 0 1rem;
}

.wb-detail-sessions .wb-scope-tabs {
  margin-bottom: 1rem;
}

.wb-detail-sessions .wb-listing-layout {
  margin-top: 0;
}

.wb-child-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 600px) {
  .wb-child-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .wb-child-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wb-child-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
  min-height: 100%;
}

.wb-child-card__slash {
  display: none !important;
}

.wb-child-card__body {
  padding: 0.85rem 0.95rem 1rem;
}

.wb-child-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wb-charcoal);
  margin: -0.85rem -0.95rem 0.75rem;
}

.wb-child-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-child-card__title {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.wb-child-card__title a {
  color: var(--wb-ink);
  text-decoration: none;
}

.wb-child-card__title a:hover {
  color: var(--wb-orange-deep);
}

.wb-child-card__meta {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wb-muted);
}

.wb-child-card__meta .wb-icon {
  color: var(--wb-orange);
}

/* =========================================================
   Call-out highlight widget (selected items, no filters)
   ========================================================= */

.wb-callout {
  --wb-callout-charcoal: #2b3942;
  --wb-callout-accent: var(--wb-orange);
  --wb-callout-accent-deep: var(--wb-orange-deep);
  --wb-callout-foot-text: #2b3942;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--wb-ink);
}

.content > .wb-callout,
.content .wb-callout {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.wb-callout *,
.wb-callout *::before,
.wb-callout *::after {
  box-sizing: border-box;
}

.wb-callout h1,
.wb-callout h2,
.wb-callout h3,
.wb-callout h4,
.wb-callout h5,
.wb-callout h6 {
  text-transform: none !important;
}

.wb-callout-empty {
  margin: 0;
  padding: 1rem;
  font-size: 0.92rem;
  color: var(--wb-muted);
  text-align: center;
  border: 1px dashed var(--wb-line);
  background: var(--wb-surface);
}

.wb-callout__viewport {
  width: 100%;
  overflow: hidden;
}

.wb-callout__track {
  position: relative;
  width: 100%;
}

.wb-callout-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--wb-callout-charcoal);
  box-shadow: 0 2px 10px rgba(43, 57, 66, 0.12);
}

.wb-callout-card[hidden] {
  display: none !important;
}

.wb-callout-card[class*="wb-theme--"]:not(.wb-theme--default):not(.wb-theme--na) {
  --wb-callout-accent: var(--wb-card-kicker, var(--wb-orange));
  --wb-callout-accent-deep: var(--wb-card-title-hover, var(--wb-orange-deep));
}

.wb-callout-card.wb-theme--override {
  --wb-callout-accent: var(--wb-brand-hex);
  --wb-callout-accent-deep: var(--wb-brand-deep);
}

.wb-callout-card__head {
  padding: 1rem 1rem 0.85rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wb-callout-card__kicker {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wb-callout-accent);
}

.wb-callout-card__kicker .wb-icon {
  margin-right: 0.35rem;
}

.wb-callout-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.wb-callout-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #1a242c;
  line-height: 0;
}

.wb-callout-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #1a242c;
}

.wb-callout-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-callout-accent);
  font-size: 2.5rem;
  text-decoration: none;
}

.wb-callout-card__body {
  padding: 0.85rem 1rem 1rem;
  text-align: center;
}

.wb-callout-card__when {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.wb-callout-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.wb-callout-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wb-callout-card__btn--primary {
  background: var(--wb-callout-accent);
  border-color: var(--wb-callout-accent);
  color: var(--wb-callout-foot-text);
}

.wb-callout-card__btn--primary:hover {
  background: var(--wb-callout-accent-deep);
  border-color: var(--wb-callout-accent-deep);
  color: #fff;
}

.wb-callout-card__btn--ghost {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

.wb-callout-card__btn--ghost:hover {
  color: var(--wb-callout-accent);
}

.wb-callout-card__chev {
  font-size: 1rem;
  line-height: 1;
}

.wb-callout-card__btn--ghost .wb-callout-card__chev {
  color: var(--wb-callout-accent);
}

.wb-callout-card__foot {
  padding: 0.85rem 1rem 1rem;
  background: var(--wb-callout-accent);
  color: var(--wb-callout-foot-text);
  text-align: center;
}

.wb-callout-card__blurb {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.wb-callout-card__more {
  display: inline-block;
  padding-top: 0.65rem;
  border-top: 1px dotted rgba(43, 57, 66, 0.45);
  width: 100%;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

.wb-callout-card__more:hover {
  color: var(--wb-callout-foot-text);
}

.wb-callout__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.wb-callout__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--wb-line);
  background: #fff;
  color: var(--wb-charcoal);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.wb-callout__nav:hover {
  border-color: var(--wb-orange);
  color: var(--wb-orange-deep);
}

.wb-callout__dots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wb-callout__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #c5cdd3;
  cursor: pointer;
}

.wb-callout__dot.is-active {
  background: var(--wb-orange);
}

.wb-callout-card.wb-theme--override ~ .wb-callout__controls .wb-callout__dot.is-active,
.wb-callout--carousel:has(.wb-theme--override.is-active) .wb-callout__dot.is-active {
  background: var(--wb-callout-accent, var(--wb-orange));
}

/* ---- Series landing (last): force transparent shells so card gaps show page bg ---- */
.content:has(.wb-detail--series-landing),
.content:has(.wb-widget--series-page) {
  background: transparent !important;
  background-color: transparent !important;
}

.wb-detail.wb-detail--series-landing.wb-detail--program .wb-related-block,
.wb-detail.wb-detail--series-landing.wb-detail--program .wb-detail-panel,
.wb-detail.wb-detail--series-landing.wb-detail--program .wb-detail-sessions {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
}



/* =========================================================
   Webinar-style Sitefinity title hero (accent)
   (Merged from Webina-title-block.css — paste Webina-widget.css only.)

   Sitefinity layout classes:
   - Parent column:  title-block_accent
   - Child column:   title-block__content_accent page-bounds
   - Breadcrumb:     title-block__breadcrumb
   ========================================================= */

.content .title-block_accent {
  --wb-title-bg: #2c3942;
  --wb-title-ink: #fff;
  --wb-title-slash-orange: #f47721;
  --wb-title-slash-grey: #76848f;
  /*
    Opposite equal angles (same --slash-run) → X where layers cross.
    Matching widths keep the X readable at every breakpoint.
  */
  --slash-run: 1.65rem;
  --slash-orange-w: 4.5rem;
  --slash-grey-w: 4.5rem;
  --slash-grey-shift: 0;
  --slash-text-gap: 5.75rem;
  margin: -24px -24px 1.25rem;
  padding: 2rem 1.5rem 2.15rem var(--slash-text-gap);
  background: var(--wb-title-bg);
  color: var(--wb-title-ink);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Orange base — behind; wider at top */
.content .title-block_accent::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--slash-orange-w);
  background: var(--wb-title-slash-orange);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--slash-run)) 100%,
    0 100%
  );
}

/* Grey overlay — opposite slant (wider at bottom) → X cross */
.content .title-block_accent::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slash-grey-shift);
  width: var(--slash-grey-w);
  background: var(--wb-title-slash-grey);
  opacity: 0.78;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    calc(100% - var(--slash-run)) 0,
    100% 100%,
    0 100%
  );
}

/* Child: title-block__content_accent page-bounds */
.content .title-block_accent .title-block__content_accent,
.content .title-block_accent .title-block__content_accent.page-bounds {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  color: var(--wb-title-ink);
}

.content .title-block_accent .title-block__content_accent a,
.content .title-block_accent .title-block__content_accent .page-title,
.content .title-block_accent .page-title {
  color: var(--wb-title-ink);
}

/* Page title */
.content .title-block_accent .page-title,
.content .title-block_accent h1.page-title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
  color: var(--wb-title-ink);
}

/* Breadcrumb */
.content .title-block_accent .title-block__breadcrumb,
.content .title-block_accent .breadcrumbs {
  margin: 0 0 0.65rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.content .title-block_accent .title-block__breadcrumb a,
.content .title-block_accent .breadcrumbs a {
  color: #f47721;
  font-weight: 400;
  text-decoration: none;
}

.content .title-block_accent .title-block__breadcrumb a:hover,
.content .title-block_accent .title-block__breadcrumb a:focus,
.content .title-block_accent .breadcrumbs a:hover,
.content .title-block_accent .breadcrumbs a:focus {
  color: #fff;
  text-decoration: underline;
}

.content .title-block_accent .breadcrumbs span {
  opacity: 0.55;
  color: rgba(255, 255, 255, 0.72);
}

/* Tablet / hamburger */
@media (min-width: 768px) and (max-width: 959.97px) {
  .content .title-block_accent {
    --slash-run: 1.75rem;
    --slash-orange-w: 5rem;
    --slash-grey-w: 5rem;
    --slash-text-gap: 6.25rem;
    margin: calc(77px - 48px) -48px 1.25rem;
    padding: 2rem 2rem 2.15rem var(--slash-text-gap);
  }
}

/* Desktop */
@media (min-width: 960px) {
  .content .title-block_accent {
    --slash-run: 1.9rem;
    --slash-orange-w: 5.5rem;
    --slash-grey-w: 5.5rem;
    --slash-text-gap: 6.75rem;
    margin: -48px -48px 1.25rem;
    padding: 2.25rem 3rem 2.35rem var(--slash-text-gap);
  }
}

/* Wide — grow band with page margin; keep equal widths + shared run for X */
@media (min-width: 1280px) {
  .content .title-block_accent {
    --slash-run: 2rem;
    --slash-orange-w: max(5.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
    --slash-grey-w: var(--slash-orange-w);
    --slash-text-gap: max(6.75rem, calc((100vw - 1200px) / 2 + 3.75rem));
    padding-left: var(--slash-text-gap);
    padding-right: 96px;
  }

  .content .page-content-accent-swoosh,
  .page-content-accent-swoosh {
    --slash-run: 2rem;
    --slash-orange-w: max(5.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
  }

  .content .page-content-accent-swoosh::before,
  .page-content-accent-swoosh::before {
    left: -48px;
  }
}

/* =========================================================
   Content-row orange swoosh (.page-content-accent-swoosh)
   Sitefinity: add class to the content Row under the title hero.
   Separate block that matches the hero orange slash angle so it
   reads as a continuation (not the same element).
   ========================================================= */

.content .page-content-accent-swoosh,
.page-content-accent-swoosh {
  --wb-title-slash-orange: #f47721;
  --slash-run: 1.65rem;
  --slash-orange-w: 4.5rem;
  /* Extra taper over this row; bridge.js may overwrite to keep angle */
  --slash-swoosh-run: var(--slash-run);
  position: relative;
  overflow: visible;
  z-index: 1;
}

.content .page-content-accent-swoosh::before,
.page-content-accent-swoosh::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  /* Pull to the same left edge as title-block_accent (negative page padding) */
  left: -24px;
  width: var(--slash-orange-w);
  background: var(--wb-title-slash-orange);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  /*
    Top right edge inset by --slash-run → meets hero orange tip.
    Bottom tapers further by --slash-swoosh-run → same diagonal language.
  */
  clip-path: polygon(
    0 0,
    calc(100% - var(--slash-run)) 0,
    calc(100% - var(--slash-run) - var(--slash-swoosh-run)) 100%,
    0 100%
  );
}

.content .page-content-accent-swoosh > *,
.page-content-accent-swoosh > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 959.97px) {
  .content .page-content-accent-swoosh,
  .page-content-accent-swoosh {
    --slash-run: 1.75rem;
    --slash-orange-w: 5rem;
  }

  .content .page-content-accent-swoosh::before,
  .page-content-accent-swoosh::before {
    left: -48px;
  }
}

@media (min-width: 960px) {
  .content .page-content-accent-swoosh,
  .page-content-accent-swoosh {
    --slash-run: 1.9rem;
    --slash-orange-w: 5.5rem;
  }

  .content .page-content-accent-swoosh::before,
  .page-content-accent-swoosh::before {
    left: -48px;
  }
}

/* =========================================================
   WEBINAR PAGE TEMPLATE — .wb-hero (native breadcrumb + .page-title)
   Same bisect-slash hero as .ga-hero, scoped to webinar pages.

   Sitefinity page layout classes:
   - Hero Row:     grid wb-hero
   - Hero Col 1:   grid__unit grid__unit--3-4-m wb-title
   - Hero Col 2:   grid__unit grid__unit--1-4-m wb-cta
   - Content Row:  grid wb-page-content_light
   - Content Col:  grid__unit

   Listing page: native Sitefinity page title shows as-is.
   Series / Chapter / Webinar detail: the detail template swaps
   .wb-hero .page-title text for data-wb-hero-title and sets
   --wb-hero-slash to the series host color.

   Doubled class selectors give .content-level specificity without
   requiring the page template to have a .content wrapper.
   ========================================================= */

.wb-hero.wb-hero {
  --wb-hero-bg: #2c3942;
  --wb-hero-slash: #f47721;
  --wb-hero-slash-grey: #76848f;
  --wb-hero-link: #f47721;
  --wb-hero-ink: #fff;
  --wb-hero-muted: rgba(255, 255, 255, 0.72);
  /*
    Opposite equal angles (same --slash-run) → X where layers cross.
    Matching widths keep the X readable at every breakpoint.
  */
  --slash-run: 1.65rem;
  --slash-orange-w: 4.5rem;
  --slash-grey-w: 4.5rem;
  --slash-grey-shift: 0;
  --slash-text-gap: 5.75rem;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--wb-hero-bg);
  color: var(--wb-hero-ink);

  /* Bleed out of .content gutters; tuck under fixed header */
  margin: calc(77px - 96px) -24px 1.25rem;
  padding: 2rem 1.5rem 2.15rem var(--slash-text-gap);
}

/* Orange base — behind; wider at top */
.wb-hero.wb-hero::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--slash-orange-w);
  background: var(--wb-hero-slash);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--slash-run)) 100%,
    0 100%
  );
}

/* Grey overlay — opposite slant (wider at bottom) → X cross */
.wb-hero.wb-hero::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slash-grey-shift);
  width: var(--slash-grey-w);
  background: var(--wb-hero-slash-grey);
  opacity: 0.78;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    calc(100% - var(--slash-run)) 0,
    100% 100%,
    0 100%
  );
}

.wb-hero.wb-hero > .wb-title,
.wb-hero.wb-hero > .wb-cta,
.wb-hero.wb-hero > .sf_colsIn.wb-title,
.wb-hero.wb-hero > .sf_colsIn.wb-cta {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  color: var(--wb-hero-ink);
}

.wb-hero.wb-hero .wb-title {
  padding: 0;
}

.wb-hero.wb-hero .wb-title .page-title,
.wb-hero.wb-hero .wb-title h1.page-title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
  color: var(--wb-hero-ink);
}

.wb-hero.wb-hero .wb-title .breadcrumbs,
.wb-hero.wb-hero .wb-title .content-breadcrumb,
.wb-hero.wb-hero .wb-title .title-block__breadcrumb {
  margin: 0 0 0.65rem;
  color: var(--wb-hero-muted);
  font-size: 0.9rem;
}

.wb-hero.wb-hero .wb-title .breadcrumbs a,
.wb-hero.wb-hero .wb-title .content-breadcrumb a,
.wb-hero.wb-hero .wb-title .title-block__breadcrumb a {
  color: var(--wb-hero-link);
  font-weight: 400;
  text-decoration: none;
}

.wb-hero.wb-hero .wb-title .breadcrumbs a:hover,
.wb-hero.wb-hero .wb-title .breadcrumbs a:focus,
.wb-hero.wb-hero .wb-title .content-breadcrumb a:hover,
.wb-hero.wb-hero .wb-title .content-breadcrumb a:focus,
.wb-hero.wb-hero .wb-title .title-block__breadcrumb a:hover,
.wb-hero.wb-hero .wb-title .title-block__breadcrumb a:focus {
  color: #fff;
  text-decoration: underline;
}

.wb-hero.wb-hero .wb-title .breadcrumbs span,
.wb-hero.wb-hero .wb-title .content-breadcrumb span {
  opacity: 0.55;
  color: var(--wb-hero-muted);
}

.wb-hero.wb-hero .wb-title .page-title + .breadcrumbs {
  margin-top: 0;
}

.wb-hero.wb-hero .wb-cta {
  min-height: 0;
  padding: 0;
}

/* Webinar detail: the page hero already shows the title */
body:has(.wb-hero .page-title) .wb-detail.wb-detail--webinar .wb-detail-title {
  display: none !important;
}

/*
  --wb-page-gutter is shared by .wb-hero and .wb-page-content_light so the
  hero title / details card line up with the page content edges.
  It never drops below the slash width + text gap.
*/
@media (min-width: 768px) {
  .wb-hero.wb-hero,
  .wb-page-content_light.wb-page-content_light {
    --wb-page-gutter: 6.25rem;
  }
}

@media (min-width: 960px) {
  .wb-hero.wb-hero,
  .wb-page-content_light.wb-page-content_light {
    --wb-page-gutter: max(6.75rem, calc((100vw - 1200px) / 2));
  }
}

@media (min-width: 768px) and (max-width: 959.97px) {
  .wb-hero.wb-hero {
    --slash-run: 1.75rem;
    --slash-orange-w: 5rem;
    --slash-grey-w: 5rem;
    --slash-text-gap: var(--wb-page-gutter);
    margin: calc(77px - 48px) -48px 1.25rem;
    padding: 2rem var(--wb-page-gutter) 2.15rem var(--slash-text-gap);
  }
}

@media (min-width: 960px) {
  .wb-hero.wb-hero {
    --slash-run: 1.9rem;
    --slash-orange-w: calc(var(--wb-page-gutter) - 1.25rem);
    --slash-grey-w: var(--slash-orange-w);
    --slash-text-gap: var(--wb-page-gutter);
    margin: calc(168px - 215px) -48px 1.25rem;
    padding: 2.25rem var(--wb-page-gutter) 2.35rem var(--slash-text-gap);
  }
}

@media (min-width: 1280px) {
  .wb-hero.wb-hero {
    --slash-run: 2rem;
  }
}

/* =========================================================
   WEBINAR PAGE TEMPLATE — .wb-page-content_light (page margins only)
   ========================================================= */

.wb-page-content_light.wb-page-content_light {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background: transparent;
}

.wb-page-content_light.wb-page-content_light > .grid__unit,
.wb-page-content_light.wb-page-content_light > .sf_colsIn,
.wb-page-content_light.wb-page-content_light > .sf_colsIn.grid__unit {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* .content already pads 48px at these widths; top up to the shared gutter */
@media (min-width: 768px) {
  .wb-page-content_light.wb-page-content_light {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(var(--wb-page-gutter) - 48px);
    padding-right: calc(var(--wb-page-gutter) - 48px);
  }

  .wb-page-content_light.wb-page-content_light .wb-widget,
  .wb-page-content_light.wb-page-content_light .wb-detail {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================
   WEBINAR PAGE TEMPLATE — .wb-hero-tag (details card widget)
   Detail template: Webina-hero-tag.cshtml.txt, placed in the
   hero's 1/4 column (wb-cta). Accent comes from the widget's
   inline --wb-tag-accent / --wb-tag-accent-deep (series color).
   ========================================================= */

/* Main detail widget: hide its own details block while the hero card is on the page */
body:has(.wb-hero-tag) .wb-detail.wb-detail .wb-detail-hero .wb-program-meta-tag,
body:has(.wb-hero-tag) .wb-detail.wb-detail .wb-detail-hero .wb-detail-hero__reg {
  display: none !important;
}

/* Webinar: title + register live in the page hero and tags moved into Session overview — drop the empty widget header */
body:has(.wb-hero .page-title):has(.wb-hero-tag) .wb-detail.wb-detail--webinar .wb-detail-hero:not(:has(.wb-detail-hero__topline)) {
  display: none !important;
}

/*
  Series / chapter: the Webinars section (tabs, filters, session rows) and the
  Chapters cards sit straight on the page like the main listing — no white
  panel or accent border. Doubled classes beat the templates' inline !important
  panel rules.
*/
.wb-detail.wb-detail.wb-detail--program .wb-detail-sessions.wb-detail-sessions,
.wb-detail.wb-detail.wb-detail--program .wb-detail-related-stack.wb-detail-related-stack,
.wb-detail.wb-detail.wb-detail--program .wb-related-block.wb-related-block {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/*
  Webinar: Session overview, Speakers / Panelists / Moderator / Sponsors and the
  related webinars block sit straight on the page too — no white panel or accent border.
*/
.wb-detail.wb-detail.wb-detail--webinar .wb-detail-main .wb-detail-panel.wb-detail-panel,
.wb-detail.wb-detail.wb-detail--webinar .wb-related-block.wb-related-block {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.wb-detail.wb-detail.wb-detail--webinar .wb-detail-main {
  gap: 2.25rem;
}

/*
  Webinar pages: the templates pull the widget up 47px (old layout). Under the
  page hero that tucks the Session overview box behind it — start below instead.
*/
body:has(.wb-hero) .wb-detail.wb-detail.wb-detail--webinar {
  margin-top: 0.75rem !important;
}

/* Page background color strip (left band behind the detail widget) — off for now */
.wb-detail.wb-detail .wb-detail-page-bg.wb-detail-page-bg {
  display: none !important;
}

/* Series / chapter: "Hosted by" moves into the hero details card */
body:has(.wb-hero .wb-hero-tag) .wb-detail.wb-detail--program .wb-program-about__host {
  display: none !important;
}

/* Series / chapter description copy (beats the template's inline !important) */
body .wb-detail.wb-detail--program .wb-program-about__content {
  font-size: 1.075rem !important;
  line-height: 1.6 !important;
}

/*
  Keep "Hosted by" + description clear of the details card, which fills the
  hero's right 1/4 column and hangs over this area. 25% matches that column.
*/
@media (min-width: 768px) {
  body:has(.wb-hero .wb-cta .wb-hero-tag) .wb-detail.wb-detail--program .wb-detail-hero__body {
    padding-right: calc(25% + 2rem) !important;
  }
}

/*
  Webinar: logo + When / Time / Duration / Language live in the hero card,
  so the detail widget's aside is dropped. From 768px its column stays as an
  empty spacer (25% = the card's hero column) so the main content never runs
  under the hanging card.
*/
body:has(.wb-hero .wb-cta .wb-hero-tag--webinar) .wb-detail.wb-detail--webinar .wb-detail-aside {
  display: none !important;
}

@media (min-width: 768px) {
  body:has(.wb-hero .wb-cta .wb-hero-tag--webinar) .wb-detail.wb-detail--webinar .wb-detail-below-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 25% !important;
    gap: 1.75rem !important;
    align-items: start !important;
  }

  body:has(.wb-hero .wb-cta .wb-hero-tag--webinar) .wb-detail.wb-detail--webinar .wb-detail-below-hero > .wb-detail-main {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  body:has(.wb-hero .wb-cta .wb-hero-tag--webinar) .wb-detail.wb-detail--webinar .wb-detail-below-hero::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
  }
}

.wb-hero-tag {
  --wb-tag-accent: #e87722;
  --wb-tag-accent-deep: #c45f12;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  width: 100%;
  max-width: 19rem;
  margin: 0 0 0 auto;
  padding: 1.1rem 1rem 1.2rem;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5eaee;
  border-top: 4px solid var(--wb-tag-accent);
  box-shadow: 0 8px 22px rgba(26, 36, 44, 0.18);
  color: #2b3942;
  text-align: left;
}

.wb-hero-tag__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.wb-hero-tag__logo {
  display: flex;
  justify-content: center;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid #e5eaee;
}

.wb-hero-tag__logo img {
  display: block;
  max-width: 100%;
  max-height: 5rem;
  height: auto;
  object-fit: contain;
}

.wb-hero-tag__logo--thumb img {
  max-height: 9rem;
}

/* Webinar card carries more rows — label / value side by side when it has room */
.wb-hero-tag.wb-hero-tag--webinar {
  gap: 0.7rem;
  container-type: inline-size;
}

@container (min-width: 15.5rem) {
  .wb-hero-tag--webinar .wb-hero-tag__item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75rem;
  }
}

.wb-hero-tag__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-tag-accent);
}

.wb-hero-tag__value {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  color: #2b3942;
}

.wb-hero-tag__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid #e5eaee;
}

.wb-hero-tag > .wb-hero-tag__ctas:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.wb-hero-tag .wb-hero-tag__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.6rem 1rem;
  box-sizing: border-box;
  border: 2px solid var(--wb-tag-accent);
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wb-hero-tag .wb-hero-tag__btn--primary {
  background: var(--wb-tag-accent);
  color: #fff;
}

.wb-hero-tag .wb-hero-tag__btn--primary:hover,
.wb-hero-tag .wb-hero-tag__btn--primary:focus {
  background: var(--wb-tag-accent-deep);
  border-color: var(--wb-tag-accent-deep);
  color: #fff;
  text-decoration: none;
}

.wb-hero-tag .wb-hero-tag__btn--ghost {
  background: #fff;
  color: var(--wb-tag-accent-deep);
}

.wb-hero-tag .wb-hero-tag__btn--ghost:hover,
.wb-hero-tag .wb-hero-tag__btn--ghost:focus {
  background: var(--wb-tag-accent);
  color: #fff;
  text-decoration: none;
}

.wb-hero-tag .wb-hero-tag__btn--disabled,
.wb-hero-tag .wb-hero-tag__btn--disabled:hover {
  background: #eef1f3;
  border-color: #d5dce1;
  color: #6b7a84;
  cursor: default;
}

/*
  Card bleeds past the hero bottom onto the page at every width.
  The hero must not clip (overflow: visible) and must stack above the
  content rows that follow it (z-index), or the card is cut off / covered.
  The slash layers sit inside the hero box, so nothing else spills out.
*/
.wb-hero.wb-hero:has(.wb-hero-tag) {
  overflow: visible;
  z-index: 20;
}

/* Tablet + desktop (hero columns side by side): absolute card, top-right of the 1/4 column */
@media (min-width: 768px) {
  .wb-hero.wb-hero .wb-cta {
    position: relative;
    align-self: stretch;
  }

  .wb-hero.wb-hero .wb-cta .wb-hero-tag {
    position: absolute;
    top: var(--wb-hero-tag-top, 0);
    right: 0;
    width: 100%;
    max-width: 19rem;
    margin: 0;
  }
}

/* Desktop: lift the card to meet the bottom of the site menu */
@media (min-width: 960px) {
  .wb-hero.wb-hero .wb-cta .wb-hero-tag {
    --wb-hero-tag-top: -21px;
  }
}

/*
  Phone (hero columns stack): card sits under the title and hangs off the hero
  bottom by --wb-hero-tag-hang. Negative margin = hero padding-bottom + hang;
  the hero's margin-bottom grows by the same hang so page content isn't covered.
*/
@media (max-width: 767.97px) {
  .wb-hero.wb-hero:has(.wb-hero-tag) {
    --wb-hero-tag-hang: 2rem;
    margin-bottom: calc(1.25rem + var(--wb-hero-tag-hang));
  }

  .wb-hero.wb-hero .wb-cta {
    margin-top: 1.25rem;
  }

  .wb-hero.wb-hero .wb-cta .wb-hero-tag {
    position: relative;
    max-width: none;
    margin: 0 0 calc(-2.15rem - var(--wb-hero-tag-hang, 2rem));
  }
}

/*
  Slightly angled bottom edge (~6deg): rise = card width x tan(6deg) = 0.1051.
  The 1/4 column is the size container so the rise tracks the card width.
  clip-path would cut off box-shadow, so the shadow moves to the column as a
  drop-shadow filter (which follows the angled shape).
*/
.wb-hero.wb-hero .wb-cta:has(.wb-hero-tag) {
  container-type: inline-size;
  filter: drop-shadow(0 8px 14px rgba(26, 36, 44, 0.2));
}

.wb-hero.wb-hero .wb-cta .wb-hero-tag {
  --wb-hero-tag-slant: calc(min(100cqw, 19rem) * 0.1051);
  padding-bottom: calc(1.2rem + var(--wb-hero-tag-slant));
  border-bottom: 0;
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--wb-hero-tag-slant)));
}

@media (max-width: 767.97px) {
  .wb-hero.wb-hero .wb-cta .wb-hero-tag {
    --wb-hero-tag-slant: calc(100cqw * 0.1051);
  }
}