/*
 * Home hero — mirrors the Our Story hero system in story.css.
 * Loaded only on index.php, after styles.css.
 * Do not change story.php / story.css.
 */

/* Picnic group sits above unused ground; keep all five people in frame. */
.home-hero .hero-bg {
  object-fit: cover;
  object-position: 50% 32%;
}

/* Same bg/overlay lock as Story: shared .hero-bg uses min-height: 100vh. */
@media (max-width: 900px) {
  .home-hero .hero-bg,
  .home-hero .hero-overlay {
    min-height: 0 !important;
    height: 100% !important;
  }
}

/* Same mobile title treatment as Story; focal point tuned for this photo. */
@media (max-width: 768px) {
  .home-hero .hero-content h1 {
    font-size: clamp(1.7rem, 1.25rem + 2.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .home-hero .hero-bg {
    object-fit: cover !important;
    object-position: 50% 28% !important;
  }
}

@media (max-width: 480px) {
  .home-hero .hero-bg {
    object-position: 50% 24% !important;
  }

  /*
   * Keep the Story hero box (50vh) while Home CTAs stay inside .hero-content.
   * Shared mobile rules stack full-width buttons and add content padding that
   * would otherwise grow this section below Story.
   */
  .home-hero .hero-content {
    padding: 0 !important;
  }

  .home-hero .hero-content p,
  .home-hero .hero-content p:last-of-type {
    margin-bottom: 10px !important;
  }

  .home-hero .hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .home-hero .hero-actions a {
    width: auto !important;
    max-width: none;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px !important;
    font-size: 0.95rem !important;
  }
}

/*
 * How We Help photo (img/3.JPG is a tall portrait).
 * Shared rules use min-height: 400px and height: auto, so the intrinsic
 * photo height stretched the card. Keep a compact cover card at every breakpoint.
 */
.how-we-help {
  min-height: 0;
}

.how-we-help .how-we-help-img {
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  height: 430px !important;
  min-height: 0 !important;
  overflow: hidden;
  align-self: center;
}

.how-we-help .how-we-help-img-el {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: 50% 22%;
}

@media (max-width: 1024px) {
  .how-we-help .how-we-help-img {
    width: min(90vw, 440px) !important;
    max-width: 440px !important;
    height: 370px !important;
  }
}

@media (max-width: 768px) {
  .how-we-help .how-we-help-img {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    height: 320px !important;
  }
}

@media (max-width: 480px) {
  .how-we-help .how-we-help-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 280px !important;
  }
}