/* ==================================================================
   PROPHET HANRICK HUNT
   HOME PAGE — RESPONSIVE LEVEL 3
   ------------------------------------------------------------------
   Preserves the desktop visual identity on desktop, laptop, tablet,
   phone portrait and phone landscape.
   ================================================================== */

body.home-page {
  overflow-x: clip;
}

body.home-page *,
body.home-page *::before,
body.home-page *::after {
  box-sizing: border-box;
}


/* ================================================================
   HOME PAGE MARKER
   ================================================================ */

body.home-page .page-marker-home {
  background:
    linear-gradient(
      180deg,
      #8b6b28,
      #4b3511
    );
}


/* ================================================================
   CARD TITLE SAFETY
   Keep About, Ministry, Messages and Connect on one line.
   ================================================================ */

body.home-page .home-card .card-content h2 {
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
  font-size: clamp(1.35rem, 2.15vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: nowrap;
}


/* ================================================================
   LARGE TABLET AND SMALL LAPTOP
   Preserve four cards whenever usable width allows.
   ================================================================ */

@media (max-width: 1180px) and (min-width: 821px) {
  body.home-page .home-card-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.1vw, 16px);
  }

  body.home-page .home-card {
    min-height: clamp(250px, 30vw, 350px);
  }

  body.home-page .card-content {
    width: calc(100% - 1.25rem);
  }

  body.home-page .home-card .card-content h2 {
    font-size: clamp(1.15rem, 2.25vw, 2rem);
  }

  body.home-page .card-description {
    font-size: clamp(0.7rem, 1vw, 0.88rem);
  }
}


/* ================================================================
   TABLET PORTRAIT
   Two-column layout, same desktop card composition.
   ================================================================ */

@media (max-width: 820px) {
  body.home-page .home-stage {
    min-height: auto;
  }

  body.home-page .home-content {
    min-height: auto;
    padding:
      clamp(42px, 8vw, 72px)
      16px
      28px;
  }

  body.home-page .home-copy {
    width: min(620px, 100%);
    margin: 0;
    padding-top: clamp(220px, 38vh, 390px);
  }

  body.home-page .home-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.home-page .home-card {
    min-height: clamp(300px, 54vw, 410px);
  }

  body.home-page .home-card .card-content h2 {
    font-size: clamp(1.45rem, 4vw, 2.35rem);
  }
}


/* ================================================================
   PHONE PORTRAIT
   One card per row while retaining the desktop visual style.
   ================================================================ */

@media (max-width: 560px) {
  body.home-page .home-content {
    padding-inline: 12px;
  }

  body.home-page .home-copy {
    padding-top: clamp(210px, 36vh, 330px);
  }

  body.home-page .home-copy h1 {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }

  body.home-page .home-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.home-page .home-card {
    min-height: 330px;
  }

  body.home-page .card-content {
    width: calc(100% - 2.25rem);
  }

  body.home-page .home-card .card-content h2 {
    font-size: clamp(1.75rem, 9vw, 2.65rem);
    white-space: nowrap;
  }

  body.home-page .card-description {
    width: min(100%, 35ch);
    font-size: 0.9rem;
  }
}


/* ================================================================
   PHONE AND TABLET LANDSCAPE
   Four compact cards across, visually matching desktop.
   ================================================================ */

@media (orientation: landscape) and (max-height: 620px) {
  body.home-page .home-stage {
    min-height: auto;
    background-position: 63% 18%;
  }

  body.home-page .home-content {
    min-height: auto;
    padding:
      28px
      14px
      18px;
    gap: 1.25rem;
  }

  body.home-page .home-copy {
    width: min(520px, 58vw);
    margin: 0;
    padding-top: 0;
  }

  body.home-page .home-copy h1 {
    font-size: clamp(2.25rem, 6.5vw, 4.2rem);
  }

  body.home-page .home-copy .home-intro {
    font-size: clamp(0.82rem, 1.6vw, 1rem);
  }

  body.home-page .home-card-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body.home-page .home-card {
    min-height: clamp(210px, 33vw, 290px);
  }

  body.home-page .home-card img {
    height: 58%;
  }

  body.home-page .card-content {
    bottom: 0.65rem;
    width: calc(100% - 0.8rem);
  }

  body.home-page .card-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
  }

  body.home-page .home-card .card-content h2 {
    font-size: clamp(0.82rem, 2.45vw, 1.45rem);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  body.home-page .card-description {
    width: min(100%, 27ch);
    margin-top: 0.3rem;
    font-size: clamp(0.5rem, 1.25vw, 0.72rem);
    line-height: 1.35;
  }
}


/* Very narrow landscape phones still keep all four titles intact. */
@media (orientation: landscape) and (max-width: 740px) {
  body.home-page .home-card .card-content h2 {
    font-size: clamp(0.72rem, 2.25vw, 1.05rem);
  }

  body.home-page .card-description {
    font-size: clamp(0.45rem, 1.15vw, 0.62rem);
  }
}


/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  body.home-page *,
  body.home-page *::before,
  body.home-page *::after {
    animation: none !important;
    transition: none !important;
  }
}