/* Figure 1: improve text clarity without changing card geometry or typography. */
#root a.group[class*="min-h-[520px]"] > div[class*="bg-gradient-to-b"] {
  background: linear-gradient(
    to bottom,
    rgba(45, 11, 26, 0.38) 0%,
    rgba(45, 11, 26, 0.48) 42%,
    rgba(45, 11, 26, 0.94) 100%
  ) !important;
}

/* Figure 2: keep the complete highlights section within one desktop viewport. */
@media (min-width: 1024px) {
  .efp-hl-layout {
    --efp-hl-card-height: min(500px, calc(100vh - 365px));
    height: min(865px, 100vh) !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .efp-hl-layout__stage {
    margin-top: 28px !important;
  }

  .efp-hl-layout__card,
  .efp-hl-layout__text,
  .efp-hl-layout__media {
    height: var(--efp-hl-card-height) !important;
    min-height: 0 !important;
  }

  .efp-hl-layout__text {
    padding: 28px 36px !important;
  }

  .efp-hl-layout__blocks {
    gap: 8px !important;
  }
}

/* Figure 3: center the image at 80% of its current container width. */
.efp-support-path__frame {
  width: 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.efp-support-path__frame > img {
  width: 100% !important;
  height: auto !important;
}

/* Figure 4: keep the wedding carousel within one viewport. */
.efp-wedding-show {
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
}

.efp-wedding-show > img {
  height: 100% !important;
}