/* Child page hero (.cpt-header: services, property types, offices, single posts, Resources).
   Height scales with the viewport to keep the Figma proportion (≈475px at 1440px = 33vw),
   clamped so it isn't tiny on phones or huge on wide screens. Overrides core.css's fixed 425/475px. */
:root {
  --child-hero-height: clamp(280px, 33vw, 640px);
}

.cpt-header-image,
.cpt-header-image img {
  height: var(--child-hero-height);
}

.cpt-header-image img {
  aspect-ratio: auto;
}

/* Dark title panel: same height as the image, title vertically centered
   (replaces core.css's 180px top/bottom padding, which overflowed once the height scales down) */
.cpt-header .col-md-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--child-hero-height);
  padding: 0 45px;
}

.cpt-header .col-md-4 h1 {
  margin: 0;
}

@media (max-width: 767px) {
  .cpt-header .col-md-4 {
    padding: 0 var(--space-m);
  }
}