.kerne-media-text {
  --kh-dark: #373D3D;
  color: var(--kh-dark);
  position: relative;
}
.kerne-media-text.kh-bg-lys { background: #DAE5E7; }
.kerne-media-text.kh-bg-lavendel { background: #D8D9E6; }
.kerne-media-text.kh-bg-teal { background: #96B7BC; }
.kerne-media-text.kh-bg-laks { background: #E0A492; }
.kerne-media-text.kh-bg-rosa { background: #CA9B9C; }

.kerne-media-text .kh-mt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.kerne-media-text.kh-img-right .kh-mt-media { order: 2; }
.kerne-media-text.kh-img-right .kh-mt-text { order: 1; }

.kerne-media-text .kh-mt-figure {
  position: relative;
  margin: 0;
}
.kerne-media-text .kh-mt-img {
  width: 100%;
  height: auto;
  display: block;
}
.kerne-media-text .kh-eyebrow {
  font-family: MaisonNeueBook, sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.kerne-media-text .kh-h2 {
  font-family: MaisonNeueBold, sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  color: var(--kh-dark);
  margin: 0 0 20px;
}
.kerne-media-text .kh-lead {
  font-family: MaisonNeueBold, sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  margin: 0 0 16px;
}
.kerne-media-text .kh-body {
  font-family: MaisonNeueBook, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
.kerne-media-text .kh-body p {
  margin: 0 0 16px;
}
.kerne-media-text .kh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: MaisonNeueBold, sans-serif;
  font-size: 16px;
  line-height: 1;
  padding: 18px 28px;
  border-radius: 100px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-top: 8px;
}
.kerne-media-text .kh-btn--light {
  background: #fff;
  color: var(--kh-dark);
}
.kerne-media-text .kh-btn--light:hover {
  background: var(--kh-dark);
  color: #fff;
}


/* Two adjacent same-tone sections share one block-padding, not two:
   the later section's container drops its top padding. */
.kerne-media-text.kh-bg-lys + .kerne-media-text.kh-bg-lys > .container {
  padding-top: 0;
}
.kerne-media-text.kh-bg-lavendel + .kerne-media-text.kh-bg-lavendel > .container {
  padding-top: 0;
}
.kerne-media-text.kh-bg-teal + .kerne-media-text.kh-bg-teal > .container {
  padding-top: 0;
}
.kerne-media-text.kh-bg-laks + .kerne-media-text.kh-bg-laks > .container {
  padding-top: 0;
}
.kerne-media-text.kh-bg-rosa + .kerne-media-text.kh-bg-rosa > .container {
  padding-top: 0;
}

/* Panel layout: illustration centered on a tinted 4:3 panel (Figma: 755x576) */
.kerne-media-text.kh-layout-panel .kh-mt-figure {
  background: #D8D9E6;
  aspect-ratio: 755 / 576;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 90px);
}
.kerne-media-text.kh-layout-panel .kh-mt-img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.kerne-media-text.kh-layout-panel.kh-bg-lavendel .kh-mt-figure {
  background: #DAE5E7;
}

/* Fullbleed layout: edge-to-edge image, padded text column */
.kerne-media-text.kh-layout-fullbleed {
  padding-block: 0;
}
.kerne-media-text.kh-layout-fullbleed .kh-mt-grid {
  gap: 0;
  align-items: stretch;
}
.kerne-media-text.kh-layout-fullbleed .kh-mt-figure,
.kerne-media-text.kh-layout-fullbleed .kh-mt-img {
  height: 100%;
}
.kerne-media-text.kh-layout-fullbleed .kh-mt-img {
  object-fit: cover;
  min-height: 480px;
}
.kerne-media-text.kh-layout-fullbleed .kh-mt-text {
  padding: clamp(64px, 8vw, 140px) clamp(24px, 7vw, 130px);
}

.kerne-media-text .kh-mt-lightbox-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  margin: 0;
}
/* The figure floats across the seam into the next section (originally 31%
   below per the Figma spec frame; nudged to 36% when the text column above
   grew and she collided with it). */
.kerne-media-text .kh-mt-decor {
  position: absolute;
  left: 30px;
  bottom: 0;
  transform: translateY(36%);
  z-index: 2;
  pointer-events: none;
}
.kerne-media-text .kh-mt-decor img {
  display: block;
  max-height: 326px;
  width: auto;
}

.kerne-media-text .kh-mt-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1400px);
}
.kerne-media-text .kh-mt-dialog::backdrop {
  background: rgba(20, 24, 24, 0.75);
}
.kerne-media-text .kh-mt-dialog img {
  width: 100%;
  height: auto;
  display: block;
}
.kerne-media-text .kh-mt-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: 0;
  background: #fff;
  color: #373D3D;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .kerne-media-text .kh-mt-grid {
    grid-template-columns: 1fr;
  }
  .kerne-media-text.kh-img-right .kh-mt-media { order: 1; }
  .kerne-media-text.kh-img-right .kh-mt-text { order: 2; }
  .kerne-media-text.kh-layout-fullbleed .kh-mt-img {
    min-height: 320px;
  }
}

/* Below 1500px the section is too short for her full height, so the figure
   shrinks to stay clear of the text; below 1024px (stacked layout) she
   hides. */
@media (max-width: 1499px) {
  .kerne-media-text .kh-mt-decor img {
    max-height: 240px;
  }
}
@media (max-width: 1023px) {
  .kerne-media-text .kh-mt-decor {
    display: none;
  }
}