/* ============================================================
   Hisdayspring — responsive.css
   Breakpoints: 430 / 640 / 768 / 1024 / 1240 / 1440
   Mobile-first: base styles target 320px+; this file refines up.
   ============================================================ */

/* ---------- Small phones (≥320px) ---------- */
@media (min-width: 320px) {
  .brand__name { font-size: 1.12rem; }
}

/* ---------- Phones (≤640px): stack hero buttons one over the other ---------- */
@media (max-width: 640px) {
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Large phones (≥430px) ---------- */
@media (min-width: 430px) {
  .brand__name { font-size: 1.24rem; }
  .event-card { min-height: 120px; }
}

/* ---------- Phablet / small tablet (≥640px) ---------- */
@media (min-width: 640px) {
  .hero__actions .btn { padding-inline: 1.9em; }

  .filter-bar { gap: 1rem; }

  .footer-bottom { flex-direction: row; }

  .event-card .event-date-chip { width: 84px; }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 1.2rem;
  }
}

/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
  :root { --header-h: 80px; }

  .utility-bar { display: block; }

  .service-strip { margin-top: -44px; }

  .page-hero .breadcrumb { margin-bottom: 1rem; }

  .hymn-columns {
    column-count: 2;
    column-gap: 1.4rem;
  }
  .hymn-columns .hymn-item {
    break-inside: avoid;
    margin-bottom: 0.7rem;
  }
  .hymn-columns .hymn-item + .hymn-item { margin-top: 0; }

  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Laptop (≥1024px) ---------- */
@media (min-width: 1024px) {
  .hero__inner { padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(4rem, 7vw, 6.5rem); }

  .service-strip__card { gap: 1.25rem; }

  .footer-top { gap: 2.5rem; }

  .sermon-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
  }

  .detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.25rem;
    align-items: start;
  }
  .detail-aside { position: sticky; top: calc(var(--header-h) + 24px); }

  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Desktop (≥1240px) ---------- */
@media (min-width: 1240px) {
  :root { --header-h: 84px; }

  .brand__logo { width: 48px; height: 48px; }
  .brand__name { font-size: 1.32rem; }
}

/* ---------- Large desktop (≥1440px) ---------- */
@media (min-width: 1440px) {
  :root { --container: 1240px; }
}

/* ---------- Print ---------- */
@media print {
  .utility-bar, .site-header, .mobile-nav, .back-to-top,
  .hero__actions, .filter-bar, .load-more-wrap, .share-row,
  .footer-social, .newsletter__form, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .page-hero { background: #fff !important; color: #000; }
  .hero h1, .page-hero h1 { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ---------- Safety nets ---------- */
/* Prevent any accidental horizontal overflow */
body { overflow-x: clip; }
iframe, embed, object { max-width: 100%; }

/* Long words / numbers wrap cleanly */
.centre-lines, .account-row__value, .contact-line a, .event-meta {
  overflow-wrap: anywhere;
}