.wpplatform-contact-hero {
  --contact-hero-y: var(--school-section-padding-y-lg);
  padding-block: var(--contact-hero-y);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--school-primary) 12%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--school-surface-alt), var(--school-background));
}

.wpplatform-contact-hero__layout {
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.wpplatform-contact-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wpplatform-contact-hero__badge,
.wpplatform-contact-pattern-heading__eyebrow {
  margin: 0 0 var(--school-space-2);
  color: var(--school-primary);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wpplatform-contact-hero__badge {
  padding: 0.45rem 0.8rem;
  border-radius: var(--school-radius-pill);
  background: color-mix(in srgb, var(--school-secondary) 16%, var(--school-background));
  color: var(--school-primary-dark);
}

.wpplatform-contact-hero__title {
  max-width: 9ch;
  margin: 0;
  color: var(--school-heading);
  font-size: clamp(3.1rem, 6vw, 5.75rem);
  line-height: 0.94;
}

.wpplatform-contact-hero__text {
  max-width: 38rem;
  color: var(--school-text);
  font-size: var(--wp--preset--font-size--medium);
}

.wpplatform-contact-hero__actions {
  margin-top: var(--school-space-2);
}

.wpplatform-contact-hero__media {
  position: relative;
}

.wpplatform-contact-hero__image,
.wpplatform-contact-hero__image img {
  width: 100%;
}

.wpplatform-contact-hero__image img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0.45rem solid var(--school-background);
  border-radius: var(--school-radius-large);
  box-shadow: var(--school-shadow-lg);
}

.wpplatform-contact-hero__note {
  position: absolute;
  z-index: 1;
  width: min(13.5rem, 45%);
  padding: 1rem;
  border: var(--school-card-border-width) solid var(--school-card-border-color);
  border-radius: var(--school-card-radius);
  background: var(--school-background);
  box-shadow: var(--school-shadow-md);
}

.wpplatform-contact-hero__note p {
  margin: 0;
  color: var(--school-text);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.45;
}

.wpplatform-contact-hero__note strong {
  color: var(--school-heading);
}

.wpplatform-contact-hero__note--top {
  top: 1.5rem;
  left: -1rem;
}

.wpplatform-contact-hero__note--middle {
  top: 60%;
  right: -1.25rem;
}

.wpplatform-contact-hero__note--bottom {
  bottom: 1.5rem;
  left: -1.5rem;
}

@media (max-width: 781px) {
  .wpplatform-contact-hero__layout {
    gap: var(--school-space-4);
  }

  .wpplatform-contact-hero__note {
    position: static;
    width: auto;
    margin-top: var(--school-space-2);
  }

  .wpplatform-contact-hero__title {
    max-width: 12ch;
  }
}

@media (max-width: 599px) {
  .wpplatform-contact-hero {
    padding-block: var(--school-section-padding-y-mobile);
  }

  .wpplatform-contact-hero__title {
    font-size: clamp(2.6rem, 14vw, 3.5rem);
  }

  .wpplatform-contact-hero__actions,
  .wpplatform-contact-hero__actions .wp-block-button,
  .wpplatform-contact-hero__actions .wp-block-button__link {
    width: 100%;
  }
}