.alt-pagehead {
  position: relative;
  background: var(--alt-ph-bg);
  text-align: var(--alt-ph-align);
}

.alt-pagehead__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: var(--alt-ph-align);
  justify-content: center;
  gap: var(--alt-ph-gap, 14px);
  min-height: var(--alt-ph-min-d);
}

/* text-align keywords double as flex alignment here, so map them across. */
.alt-pagehead--align-center .alt-pagehead__inner { align-items: center; }
.alt-pagehead--align-left .alt-pagehead__inner { align-items: flex-start; }
.alt-pagehead--align-right .alt-pagehead__inner { align-items: flex-end; }

.alt-pagehead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.alt-pagehead__img { width: 100%; height: 100%; object-fit: cover; }
.alt-pagehead__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--alt-ph-overlay);
}

.alt-pagehead--image .alt-pagehead__title,
.alt-pagehead--image .alt-pagehead__text,
.alt-pagehead--image .alt-pagehead__eyebrow { color: #fff; }

.alt-pagehead__eyebrow { margin: 0; }

.alt-pagehead__title {
  margin: 0;
  color: var(--alt-ph-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-ph-size-d);
  font-weight: var(--alt-fw-heading);
  line-height: var(--alt-lh-h1);
  letter-spacing: var(--alt-heading-tracking);
}

.alt-pagehead__text {
  max-width: var(--alt-ph-max);
  color: var(--alt-ph-text);
  font-size: calc(var(--alt-body-size) * 1.0625);
  line-height: 1.7;
}

/* The breadcrumbs sit closer to the heading than the rest of the stack does,
   so pull them back out of the column gap by their own setting. */
.alt-pagehead__inner > .alt-crumbs {
  margin-top: calc(var(--alt-ph-crumb-gap, 8px) - var(--alt-ph-gap, 14px));
}

.alt-pagehead__actions { margin-top: 8px; }

@media (max-width: 767px) {
  .alt-pagehead__inner { min-height: var(--alt-ph-min-m); }
  .alt-pagehead__title { font-size: var(--alt-ph-size-m); }
}