/*
 * Highlights / KSP bento overlay — caption position via block settings (CSS vars);
 * selectors scoped under .pcp-ksp-box1 only.
 */

.pcp-ksp-box1 section.ksp-box .ksp {
  position: absolute;
  margin: 0;
  padding: 0;
  top: var(--ksp-top, 0);
  left: var(--ksp-left, 0);
  width: var(--ksp-width, auto);
  color: var(--ksp-color, #000);
  font-size: var(--ksp-font-size, 22px);
  font-weight: var(--ksp-font-weight, 700);
  line-height: 1.42857143;
}

.pcp-ksp-box1 section.ksp-box .ksp:empty {
  display: none;
}

@media screen and (min-width: 1024px) {
  .pcp-ksp-box1 section.ksp-box .ksp.ksp--hide-desktop {
    display: none;
  }
}

@media screen and (max-width: 1023.98px) {
  .pcp-ksp-box1 section.ksp-box .ksp.ksp--hide-mobile {
    display: none;
  }
}

.pcp-ksp-box1 .pcp-ksp-box1-fallback {
  width: 100%;
  aspect-ratio: 1184 / 640;
  min-height: 200px;
  background-color: #f5f5f5;
}

.pcp-ksp-box1 .ksp-box1-hero {
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 1023.98px) {
  .pcp-ksp-box1 section.ksp-box .ksp {
    top: var(--ksp-top-mobile, var(--ksp-top, 0));
    left: var(--ksp-left-mobile, var(--ksp-left, 0));
    width: var(--ksp-width-mobile, var(--ksp-width, auto));
    color: var(--ksp-color-mobile, var(--ksp-color, #000));
    font-size: var(--ksp-font-size-mobile, var(--ksp-font-size, 5vw));
    font-weight: var(--ksp-font-weight-mobile, var(--ksp-font-weight, 700));
  }
}

/* Fallback CTA pill when URL is omitted (reuse learn-row sizing from theme) */
.pcp-ksp-box1 .learn-row .learn-more-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}

@media screen and (max-width: 767.98px) {
  .pcp-ksp-box1 .learn-row .learn-more-btn {
    font-size: 14px;
  }
}