/* Living Hope Church — Website responsiveness
 * Layered on top of colors_and_type.css. Makes the desktop kit work on
 * tablets and phones. Uses !important to override the components' inline
 * styles inside media queries only — desktop rendering is untouched.
 */

/* ── Tablet & below: collapse multi-column layouts ──────────────────── */
@media (max-width: 880px) {

  /* Any grid tagged .lh-collapse drops to a single column with calm gaps */
  .lh-collapse {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer link columns: 4 → 2 */
  .lh-footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Headings: the components hard-code large pixel sizes inline; rein them
   * in fluidly. !important beats inline because inline isn't !important. */
  h1, .lh-h1 {
    font-size: clamp(2.5rem, 9vw, 4rem) !important;
    line-height: 1.03 !important;
  }
  h2 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
    line-height: 1.06 !important;
  }
  h3 {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }

  /* "In essentials / non-essentials / all things" unity strip */
  .lh-unity {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center;
  }
  .lh-unity-sep { display: none !important; }
}

/* ── Phone ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {

  /* Tighter page gutters + calmer vertical rhythm on small screens */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .lh-footer-cols { grid-template-columns: 1fr !important; }

  /* Sermon archive rows: stack into a readable card-ish block */
  .lh-archive-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 16px 0 !important;
  }
  .lh-archive-row a { justify-self: start !important; margin-top: 4px; }

  /* The big circular portraits / play buttons stay sensible */
  .lh-portrait-lg { width: 140px !important; height: 140px !important; }

  /* Newsletter input + button stack instead of cramming side by side */
  .lh-news-row { flex-direction: column !important; }
  .lh-news-row .btn { width: 100% !important; }
}

/* ── Mobile navigation (header) ─────────────────────────────────────── */
/* The hamburger is hidden on desktop; the inline nav + CTAs are hidden on
 * mobile and revealed in a drop panel instead. */
.lh-burger { display: none; }

/* Slightly tighten the inline nav so all six items + CTAs fit comfortably */
.lh-nav-inline { gap: 22px !important; margin-left: 24px !important; }

@media (max-width: 1024px) {
  .lh-nav-inline { display: none !important; }
  .lh-cta-inline { display: none !important; }
  .lh-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--navy);
    cursor: pointer;
  }
}

/* Drop panel shown when the burger is open */
.lh-mobile-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.lh-mobile-panel.open { display: flex; }
.lh-mobile-panel a.lh-mobile-link {
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.lh-mobile-panel .lh-mobile-ctas {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.lh-mobile-panel .lh-mobile-ctas .btn { flex: 1; }

/* Only allow the panel at all on small screens */
@media (min-width: 1025px) {
  .lh-mobile-panel { display: none !important; }
}