/* block-program-head-hero
   Generated from the approved mockup CSS by wp-build/css.py, plus css-fixes/block-program-head-hero.css. */
.phero { position: relative; margin-top: var(--s3); min-height: clamp(460px, 52vh, 580px); display: flex; align-items: flex-end; overflow: hidden; background: var(--deep); }
.phero .phero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.phero .phero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 22, 14, .9) 0%, rgba(8, 22, 14, .82) 40%, rgba(8, 22, 14, .62) 56%, rgba(8, 22, 14, .2) 74%, rgba(8, 22, 14, 0) 88%); }
.phero .phero-copy { position: relative; padding: var(--s6) 0 var(--s5); color: #fff; }
.phero .kicker { color: var(--on-deep-muted); }
.phero a.kicker:hover { color: #fff; }
.phero h1 { font-size: clamp(44px, 5vw, 72px); font-weight: 500; line-height: 1.04; color: #fff; }
.phero .phero-lede { margin-top: var(--s3); font-size: 21px; line-height: 1.5; color: #fff; max-width: 34ch; }
.phero .actions { margin-top: var(--s4); }
.phero :focus-visible { outline-color: #fff; }
@media (max-width: 1000px) {
  .phero { display: block; min-height: 0; background: var(--deep); margin-top: var(--s2); }
  .phero .phero-img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; max-height: 520px; object-position: 40% 50%; }
  .phero .phero-shade { display: none; }
  .phero .phero-copy { padding: var(--s3) 0 var(--s4); }
  .phero h1 { font-size: clamp(36px, 9vw, 48px); }
  .phero .phero-lede { font-size: 18px; margin-top: var(--s2); }
  .phero .actions { margin-top: var(--s3); }
}