/* Unused on tablet/desktop — phone layout turns this on below. */
.hero__photo {
  display: none;
}

@media (max-width: 640px) {
  /* Phone-only home hero: dedicated photo band, then navy copy.
     ≥641px keeps the existing overlay (computer / iPad). */
  .hero.hero--home {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: var(--navy-deep);
    /* Photo is rendered by .hero__photo so cover-crop is predictable. */
    background-image: none !important;
  }

  .hero--home::before,
  .hero--home::after {
    content: none;
    display: none;
  }

  .hero--home .hero__photo {
    display: block;
    width: 100%;
    height: min(78svh, 36rem);
    flex: 0 0 auto;
    background-color: var(--navy-deep);
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-size: cover;
    /* Midway between prior 68% (too left) and 42% (too right). */
    background-position: 55% 6%;
  }

  .hero--home .hero__bar {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: 0;
    padding: 1.75rem 1rem 2.5rem;
    background: var(--navy-deep);
    box-sizing: border-box;
  }

  .hero--home .hero__content {
    max-width: 100%;
    padding: 0;
  }

  .hero--home .hero__cta {
    display: inline-flex;
    margin-top: 1.25rem;
  }

  .hero--home .verse {
    font-size: 1.45rem;
  }

  .hero--home .greeting {
    margin: 1.15rem 0 0;
  }
}