/* Gastroscopy Service Page - Full-image hero */
.page-hero {
  background:
    linear-gradient(to top, rgba(13, 27, 42, 0.65) 0%, rgba(13, 27, 42, 0.15) 60%, transparent 100%),
    url('../../images/service-gastroscopy.jpg') center calc(50% + 40px) / cover no-repeat;
  width: 100%;
  min-height: 100vh;
  margin-top: 0;           /* override components.css - hero extends behind fixed header */
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-12);
}

.page-hero .container {
  width: 100%;
  padding-top: var(--header-height);  /* push content below the nav bar */
}

/* Subtitle under h1 */
.page-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-on-dark-muted);
  margin-top: var(--space-3);
  max-width: 540px;
  line-height: 1.6;
}

/* Accent underline on h1 */
.page-hero h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--color-accent);
  margin-top: var(--space-3);
  border-radius: 2px;
}

/* Mobile: keep full viewport */
@media (max-width: 767px) {
  .page-hero {
    min-height: 85vh;
    align-items: flex-end;
    padding-bottom: var(--space-24);
    background-position: center center, calc(50% + 50px) calc(50% + 40px);
  }

  .page-hero__subtitle {
    font-size: var(--text-base);
  }
}