/* Upcoming Programmes — [klcc_upcoming_programmes] */

.klcc-up {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Museo Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  color: #111;
  background: #fff;
  border-radius: 16px;
  /* “Full image height” media option: cap vertical size while staying within column width */
  --klcc-up-media-natural-max-h: 500px;
  --klcc-up-fs-banner: clamp(18px, 1.75vw, 29.33px);
  --klcc-up-fs-wellness: clamp(40px, 5.6vw, 56px);
  --klcc-up-fs-title: clamp(16px, 1.75vw, 29.33px);
  --klcc-up-fs-content: clamp(14px, 1.4vw, 21.33px);
}

/* Upcoming Programmes: force Museo Sans across the module (beats global h2-h6 rules). */
.klcc-up,
.klcc-up h1,
.klcc-up h2,
.klcc-up h3,
.klcc-up h4,
.klcc-up h5,
.klcc-up h6,
.klcc-up p,
.klcc-up li,
.klcc-up a,
.klcc-up span,
.klcc-up .plr-line {
  font-family: "Museo Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Max-width + 25px horizontal inset for all inner content (banner, body, footer). */
.klcc-up__inner {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.klcc-up__body-pad {
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
}

.klcc-up b,
.klcc-up strong {
  font-weight: 700;
}

.klcc-up__banner {
  background: #E4F5F9;
  color: #fff;
  text-align: center;
  padding: 18px 0;
  margin: 0;
  border-radius: 16px;
}

/* Font size / family: from theme root h3 rules; module keeps weight + banner colour only */
.klcc-up__banner-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  font-size: var(--klcc-up-fs-banner);
}

/* WELLNESS + PULSE/ZONE: one column, zero row-gap so wordmark sits flush under WELLNESS.
   minmax(0,1fr) keeps gradient headline inside the text column (max-content was growing past the grid track). */
.klcc-up__brandline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  row-gap: 0;
  column-gap: 0;
  justify-items: start;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 20px;
  box-sizing: border-box;
}

.klcc-up__brandline .klcc-up__wellness {
  grid-column: 1;
  margin: 0px;
  padding: 0;
  font-family: var(--klcc-font-header, "Bicyclette", "Arial Narrow", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--klcc-up-fs-wellness);
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: inherit;
}

/* Only WELLNESS keeps brand display face. */
.klcc-up .klcc-up__brandline .klcc-up__wellness,
.klcc-up .klcc-up__brandline .klcc-up__wellness .klcc-up__wellness-fill,
.klcc-up .klcc-up__brandline .klcc-up__wellness .plr-line {
  font-family: var(--klcc-font-header, "Bicyclette", "Arial Narrow", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: var(--klcc-up-fs-wellness) !important;
}

/* Gradient + split live on inner span (avoids theme p { color } fighting clip:text on block p) */
.klcc-up .klcc-up__brandline .klcc-up__wellness .klcc-up__wellness-fill.gradient-text {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  color: #8ac646 !important;
  background-color: transparent;
  background-image: linear-gradient(90deg, #8ac646 0%, #204a8a 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
}

/*
 * WELLNESS + split-text: blur on .plr-line breaks background-clip:text in Chromium/WebKit.
 * Each line needs its own gradient paint box (inline-block + box-decoration-break).
 */
.klcc-up .klcc-up__brandline .klcc-up__wellness .klcc-up__wellness-fill.gradient-text.klcc-up__plr-split.split-text .plr-line {
  display: inline-block !important;
  width: auto;
  max-width: 100% !important;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  background-image: linear-gradient(90deg, #8ac646 0%, #204a8a 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-color: transparent !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  filter: none !important;
  will-change: clip-path, opacity;
  transform: translateZ(0);
}

.klcc-up .klcc-up__brandline .klcc-up__wellness .klcc-up__wellness-fill.gradient-text.klcc-up__plr-split.split-text.plr-inview .plr-line {
  animation: plrRevealIn var(--plr-duration) var(--plr-ease) forwards;
  animation-delay: calc(var(--line-index) * var(--plr-stagger));
}

@media (prefers-reduced-motion: reduce) {
  .klcc-up .klcc-up__brandline .klcc-up__wellness .klcc-up__wellness-fill.gradient-text.klcc-up__plr-split.split-text .plr-line {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
  }
}

.klcc-up__brandline .klcc-up__brand {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  margin: -8px 0 0;
  padding: 0;
  line-height: 0;
}

.klcc-up__brandline .klcc-up__brand-img {
  display: block;
  width: auto;
  max-width: min(100%, 260px);
  height: auto;
  max-height: clamp(34px, 8.5vw, 50px);
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: left top;
}

/*
 * Keep the split-text reveal mask from clipping font descenders.
 * The horizontal reveal is handled by clip-path on .plr-line, so this
 * programme-specific mask does not need the global overflow crop.
 */
.klcc-up__brandline .klcc-up__wellness .plr-line-mask {
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1.15;
  max-width: 100%;
  box-sizing: border-box;
}

.klcc-up__brandline .klcc-up__wellness .plr-line {
  line-height: 1.15;
  margin-bottom: 0;
}

.klcc-up__title {
  margin: 0 0 14px;
  font-size: var(--klcc-up-fs-title);
  font-weight: 700;
  color: #0d2d6b;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.klcc-up__desc {
  font-size: var(--klcc-up-fs-content);
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 10px;
}

.klcc-up__desc p,
.klcc-up__desc li,
.klcc-up__desc strong,
.klcc-up__desc b,
.klcc-up__desc .klcc-up__plr-split.split-text .plr-line {
  font-size: var(--klcc-up-fs-content);
  font-weight: 500;
}

.klcc-up__desc p {
  margin: 0 0 0.75em;
}

.klcc-up__desc ul {
  margin: 0 0 0.75em 1.2em;
  padding: 0;
}

/* No extra gap between a label paragraph and the list that follows (themes often add ul margin) */
.klcc-up .entry-content p:has(+ ul),
.klcc-up .entry-content p:has(+ ol),
.klcc-up .klcc-up__split-prose p:has(+ ul),
.klcc-up .klcc-up__split-prose p:has(+ ol) {
  margin-bottom: 0 !important;
}

.klcc-up .entry-content p + ul,
.klcc-up .entry-content p + ol,
.klcc-up .klcc-up__split-prose p + ul,
.klcc-up .klcc-up__split-prose p + ol {
  margin-top: 0 !important;
  padding-top: 0;
}

.klcc-up__sessions-label {
  margin: 18px 0 8px;
  font-size: var(--klcc-up-fs-content);
  font-weight: 700;
  color: #e91e8c;
  text-transform: capitalize;
}

/* Green box + CTA share width: box hugs content; button centers under the box */
.klcc-up__sessions-cta-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  margin-bottom: 20px;
  vertical-align: top;
}

.klcc-up__sessions-label + .klcc-up__sessions-cta-wrap {
  margin-top: 0;
}

.klcc-up__sessions {
  background: #99cc00;
  color: #fff;
  border-radius: 16px;
  padding: 12px 18px;
  margin: 0;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  font-size: var(--klcc-up-fs-content);
  font-weight: 500;
  line-height: 1.5;
}

.klcc-up__sessions p,
.klcc-up__sessions li,
.klcc-up__sessions .klcc-up__plr-split.split-text .plr-line {
  font-size: var(--klcc-up-fs-content);
  font-weight: 500;
  color: #fff;
}

.klcc-up__sessions strong,
.klcc-up__sessions b,
.klcc-up__sessions strong .plr-line,
.klcc-up__sessions b .plr-line {
  font-weight: 700;
}

.klcc-up__sessions-cta-wrap--full {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

.klcc-up__sessions--fullwidth {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.klcc-up__sessions--fullwidth.klcc-up__sessions--cols {
  justify-items: stretch;
}

.klcc-up__sessions--para .klcc-up__sessions-inner {
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

.klcc-up__sessions--para .klcc-up__sessions-inner p {
  margin: 0px;
}

.klcc-up__sessions--para .klcc-up__sessions-inner p:last-child {
  margin-bottom: 0;
}

.klcc-up__sessions--cols {
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px 28px;
  align-items: start;
  text-align: center;
}

.klcc-up__sessions-col {
  text-align: center;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

.klcc-up__sessions-col p {
  margin: 0 0 0.6em;
}

.klcc-up__sessions-col p:last-child {
  margin-bottom: 0;
}

.klcc-up__cta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  margin: 15px 0 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.klcc-up__cta-row .klcc-up__cta {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

/* One visible button: keep pill readable width (not stretched full row on desktop) */
.klcc-up__cta-row--single {
  justify-content: center;
}

.klcc-up__cta {
  display: inline-block;
  margin: 0;
  padding: 12px 28px;
  border-radius: 999px;
  background: #FF4D00;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  font-size: var(--klcc-up-fs-content);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Label text uses <p> so theme paragraph / root typography can apply inside the pill */
.klcc-up__cta .klcc-up__cta-text {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: inherit;
}

.klcc-up__cta .klcc-up__cta-text.klcc-up__plr-split.split-text .plr-line {
  font-weight: 700;
}

.klcc-up__cta .klcc-up__cta-text.klcc-up__plr-split.split-text {
  display: inline-block;
  vertical-align: top;
}

/* Split-text line colours (WELLNESS: .klcc-up__wellness-fill in module-upcoming-programmes.css) */
.klcc-up__banner .klcc-up__plr-split.split-text .plr-line {
  color: #000;
  -webkit-text-fill-color: #000;
}

.klcc-up__title.klcc-up__plr-split.split-text .plr-line {
  color: #0d2d6b;
  -webkit-text-fill-color: #0d2d6b;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
}

.klcc-up__sessions-label.klcc-up__plr-split.split-text .plr-line {
  color: #0d2d6b;
  -webkit-text-fill-color: #0d2d6b;
}

.klcc-up__cta .klcc-up__cta-text.klcc-up__plr-split.split-text .plr-line {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Force Astro on WELLNESS (including split-text generated lines). */
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-astro,
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-astro .klcc-up__wellness-fill,
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-astro .plr-line,
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-astro .plr-line * {
  font-family: "Astro", "Arial Narrow", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
}

/* No logo: keep WELLNESS in header face (Bicyclette). */
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-header,
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-header .klcc-up__wellness-fill,
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-header .plr-line,
.klcc-up .klcc-up__brandline .klcc-up__wellness.klcc-font-header .plr-line * {
  font-family: var(--klcc-font-header, "Bicyclette", "Arial Narrow", "Helvetica Neue", Arial, sans-serif) !important;
  font-weight: 900 !important;
}

/* Editor prose: plain <p> only (see module-klcc-split-text.js). No -webkit-text-fill on .plr-line so TinyMCE text colours work. */
.klcc-up__desc.klcc-up__split-prose .klcc-up__plr-split.split-text .plr-line {
  color: #111;
}

.klcc-up__sessions .klcc-up__split-prose .klcc-up__plr-split.split-text .plr-line {
  color: #fff;
}

.klcc-up__foot-inner.klcc-up__split-prose .klcc-up__plr-split.split-text .plr-line {
  color: #000;
}

/* WebKit: parent line colour must not block inline style="color:…" on spans from the editor */
.klcc-up .klcc-up__split-prose .plr-line [style*="color"] {
  -webkit-text-fill-color: currentColor;
}

.klcc-up__cta:hover,
.klcc-up__cta:focus-visible {
  opacity: 0.92;
  transform: translateY(-1px);
}

/*
 * Same grid tracks for text-left and text-right so the gutter stays one vertical line when rows
 * alternate. Equal columns — 50/50 minus gap.
 * align-items: start !important — top-align vs theme/Elementor grid centering; media col uses flex-start too.
 */
.klcc-up__row {
  display: grid;
  column-gap: 50px;
  row-gap: clamp(24px, 4vw, 36px);
  align-items: start !important;
  padding: 32px 0;
  box-sizing: border-box;
}

.klcc-up__row--text-left,
.klcc-up__row--text-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Desktop: one grid row — text column stacks brand + copy; media in the other column. */
.klcc-up__row--text-left .klcc-up__text-column {
  grid-column: 1;
  grid-row: 1;
}

.klcc-up__row--text-left .klcc-up__col--media {
  grid-column: 2;
  grid-row: 1;
}

.klcc-up__row--text-right .klcc-up__text-column {
  grid-column: 2;
  grid-row: 1;
}

.klcc-up__row--text-right .klcc-up__col--media {
  grid-column: 1;
  grid-row: 1;
}

.klcc-up__text-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  align-self: start;
}

.klcc-up__col--text,
.klcc-up__text-block {
  min-width: 0;
  align-self: start;
}

.klcc-up__text-column .klcc-up__text-block {
  width: 100%;
}

/* Top-align with WELLNESS: avoid stretched row height + centered media from theme / grid defaults */
.klcc-up__col--media {
  min-width: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.klcc-up__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
 * Media: stacked tiles use fixed aspect 50/33. “One large image” uses max-height instead — see .klcc-up__single-img.
 * Accent radius 80px: lone tile → bottom-left; two stacked → top bottom-right, bottom bottom-left.
 */
.klcc-up__stack .klcc-up__imgwrap {
  width: 100%;
  aspect-ratio: 50 / 33;
  overflow: hidden;
  line-height: 0;
  position: relative;
  border-radius: 24px;
}

/* One image in stack: same frame size as single-image layout; bottom-left 80px */
.klcc-up__stack .klcc-up__imgwrap:only-child {
  border-radius: 24px 24px 24px 80px;
}

.klcc-up__stack .klcc-up__imgwrap:first-child:not(:only-child) {
  border-radius: 24px 24px 80px 24px;
}

.klcc-up__stack .klcc-up__imgwrap:last-child:not(:only-child) {
  border-radius: 24px 24px 24px 80px;
}

.klcc-up__stack .klcc-up__imgwrap .klcc-up__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/*
 * One large image: max height 450px; frame height follows the image when shorter (no fixed aspect box).
 */
.klcc-up__single-img {
  width: 100%;
  max-height: 450px;
  height: fit-content;
  border-radius: 24px 24px 24px 80px;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.klcc-up__col--single .klcc-up__single-img .klcc-up__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: contain;
  object-position: center center;
}

/*
 * “Tall / natural max” media: fixed frame height (--klcc-up-media-natural-max-h) × full column width.
 * object-fit: cover fills that frame (landscape images were ~200px tall with contain + max-height,
 * because max-height is only a cap — proportional height stays small). Cover may crop edges slightly.
 */
.klcc-up .klcc-up__col--media[data-klcc-up-image-height="natural"] .klcc-up__stack .klcc-up__imgwrap,
.klcc-up .klcc-up__col--media-natural .klcc-up__stack .klcc-up__imgwrap {
  aspect-ratio: auto !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  /* Two stacked tiles: split the 500px budget minus stack gap (12px). */
  height: calc((var(--klcc-up-media-natural-max-h) - 12px) / 2) !important;
  max-height: calc((var(--klcc-up-media-natural-max-h) - 12px) / 2) !important;
}

.klcc-up .klcc-up__col--media[data-klcc-up-image-height="natural"] .klcc-up__stack .klcc-up__imgwrap:only-child,
.klcc-up .klcc-up__col--media-natural .klcc-up__stack .klcc-up__imgwrap:only-child {
  height: var(--klcc-up-media-natural-max-h) !important;
  max-height: var(--klcc-up-media-natural-max-h) !important;
}

.klcc-up .klcc-up__col--media[data-klcc-up-image-height="natural"] .klcc-up__stack .klcc-up__imgwrap .klcc-up__img,
.klcc-up .klcc-up__col--media-natural .klcc-up__stack .klcc-up__imgwrap .klcc-up__img,
.klcc-up .klcc-up__img.klcc-up__img--natural {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
}

.klcc-up .klcc-up__col--media[data-klcc-up-image-height="natural"] .klcc-up__single-img,
.klcc-up .klcc-up__col--media-natural .klcc-up__single-img {
  display: block !important;
  width: 100% !important;
  height: var(--klcc-up-media-natural-max-h) !important;
  max-height: var(--klcc-up-media-natural-max-h) !important;
  overflow: hidden !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
}

.klcc-up .klcc-up__col--media[data-klcc-up-image-height="natural"] .klcc-up__single-img .klcc-up__img,
.klcc-up .klcc-up__col--media-natural .klcc-up__single-img .klcc-up__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
}

.klcc-up__rule {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 0;
}

.klcc-up__foot {
  background: #E4F5F9;
  color: #000;
  text-align: center;
  padding: 22px 0;
  margin-top: 8px;
  border-radius: 0;
  box-sizing: border-box;
}

.klcc-up__foot-inner {
  max-width: 1100px;
  margin: 0 auto;
  font-size: var(--klcc-up-fs-title) !important;
  font-weight: 500;
  line-height: 1.55;
}

.klcc-up__foot-inner p {
  margin: 0 0 0.6em;
  font-size: var(--klcc-up-fs-title) !important;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Match theme root h3 (like other module headings); foot bar colour from .klcc-up__foot */
.klcc-up__foot-inner h3 {
  margin: 0 0 0.6em;
  font-size: var(--klcc-up-fs-title) !important;
  color: inherit;
}

.klcc-up__foot-inner li,
.klcc-up__foot-inner strong,
.klcc-up__foot-inner b,
.klcc-up__foot-inner .klcc-up__plr-split.split-text .plr-line {
  font-size: var(--klcc-up-fs-title) !important;
  font-weight: 500;
}

.klcc-up__foot-inner strong,
.klcc-up__foot-inner b {
  color: inherit;
  font-weight: 700;
}

/* Wrap chosen words in <span class="klcc-up-foot-accent">…</span> in the footer editor */
.klcc-up__foot-inner .klcc-up-foot-accent {
  color: #d9f5a8;
  font-weight: 700;
}

.klcc-up__foot-inner a {
  color: inherit;
  text-decoration: underline;
}

/*
 * Phone-only typography (≤767px): tablets/desktop keep base rules above. !important only here so theme/Elementor
 * cannot beat mobile sizes; inline font-size in programme HTML is stripped in PHP so CSS can win.
 */
@media (max-width: 767px) {
  .klcc-up .klcc-up__banner-title,
  .klcc-up .klcc-up__banner-title .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-banner) !important;
  }

  .klcc-up .klcc-up__brandline .klcc-up__wellness,
  .klcc-up .klcc-up__brandline .klcc-up__wellness .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-wellness) !important;
  }

  .klcc-up .klcc-up__brandline .klcc-up__brand-img {
    width: auto;
    max-width: min(100%, 200px);
    max-height: clamp(28px, 8vw, 40px);
  }

  .klcc-up .klcc-up__title,
  .klcc-up .klcc-up__title .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-title) !important;
  }

  .klcc-up .klcc-up__desc,
  .klcc-up .klcc-up__desc p,
  .klcc-up .klcc-up__desc li,
  .klcc-up .klcc-up__desc h1,
  .klcc-up .klcc-up__desc h2,
  .klcc-up .klcc-up__desc h3,
  .klcc-up .klcc-up__desc h4,
  .klcc-up .klcc-up__desc h5,
  .klcc-up .klcc-up__desc h6,
  .klcc-up .klcc-up__desc .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-content) !important;
  }

  .klcc-up .klcc-up__sessions-label,
  .klcc-up .klcc-up__sessions-label .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-content) !important;
  }

  /* Green sessions box: 14px on phone (split-text puts plain lines in .plr-line — same rule must be 14px) */
  .klcc-up .klcc-up__sessions,
  .klcc-up .klcc-up__sessions p,
  .klcc-up .klcc-up__sessions li,
  .klcc-up .klcc-up__sessions .klcc-up__plr-split.split-text .plr-line,
  .klcc-up .klcc-up__sessions-inner,
  .klcc-up .klcc-up__sessions-col,
  .klcc-up .klcc-up__sessions-col p,
  .klcc-up .klcc-up__sessions-col li,
  .klcc-up .klcc-up__sessions-col .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-content) !important;
  }

  .klcc-up .klcc-up__cta {
    margin: 0 !important;
    font-size: var(--klcc-up-fs-content) !important;
  }

  .klcc-up .klcc-up__cta .klcc-up__cta-text,
  .klcc-up .klcc-up__cta .klcc-up__cta-text.klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-content) !important;
  }

  .klcc-up .klcc-up__foot {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .klcc-up .klcc-up__foot-inner,
  .klcc-up .klcc-up__foot-inner p,
  .klcc-up .klcc-up__foot-inner h3,
  .klcc-up .klcc-up__foot-inner li,
  .klcc-up .klcc-up__foot-inner .klcc-up__plr-split.split-text .plr-line {
    font-size: var(--klcc-up-fs-title) !important;
  }
}

@media (max-width: 700px) {
  .klcc-up__sessions--cols {
    grid-template-columns: 1fr;
  }

  /* Flex + display:contents so order can be: WELLNESS+PULSE → photos → title & body */
  .klcc-up__row {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .klcc-up__text-column {
    display: contents;
  }

  .klcc-up__brandline {
    order: 1;
    width: 100%;
  }

  .klcc-up__col--media {
    order: 2;
    width: 100%;
  }

  .klcc-up__text-block {
    order: 3;
    width: 100%;
  }

  .klcc-up__sessions-cta-wrap {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    box-sizing: border-box;
  }

  .klcc-up__sessions {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .klcc-up__cta-row--single .klcc-up__cta {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Tablet (581–700px): two CTAs in one row, shared width like the green box */
  .klcc-up__cta-row:not(.klcc-up__cta-row--single) .klcc-up__cta {
    flex: 1 1 calc(50% - 10px);
    min-width: min(100%, 148px);
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Phone (≤580px): stack dual CTAs in a column; each button matches green sessions box width */
@media (max-width: 580px) {
  .klcc-up__cta-row:not(.klcc-up__cta-row--single) {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .klcc-up__cta-row:not(.klcc-up__cta-row--single) .klcc-up__cta {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
    text-align: center;
  }
}