/* ============================================================
   ICG RESPONSIVE — Mobile-first breakpoints
   Base rules below are the MOBILE layout. Larger screens are
   progressively enhanced via min-width queries. Breakpoint
   scale: 481px (small mobile floor) / 769px (tablet) / 1025px (desktop).
   ============================================================ */

/* ── BASE (MOBILE) ───────────────────────────────────────── */
:root { --section-py: 56px; --header-h: 68px; }

.icg-container { padding: 0 16px; }

/* Nav toggle + drawer are the default on mobile */
.icg-nav-toggle { display: flex; }
.icg-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(340px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: var(--charcoal);
  overflow-y: auto;
  z-index: 999;
  transition: right var(--transition);
  padding: 0 24px 40px;
  flex-direction: column;
  align-items: flex-start;
}
.icg-nav.open { right: 0; }
.icg-nav-close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 20px 0 16px;
  color: rgba(255,255,255,0.7);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0;
  flex-shrink: 0;
  transition: color 0.2s;
}
.icg-nav-close:hover { color: var(--white); }
.icg-nav-overlay { display: block; pointer-events: none; }
.icg-nav-overlay.active { pointer-events: auto; }
.icg-nav-list { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.icg-nav-link { padding: 14px 16px; font-size: 15px; border-radius: var(--radius-md); justify-content: space-between; }
.icg-dropdown {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  box-shadow: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin: 4px 0 8px;
  padding: 4px 8px;
  display: none;
}
.icg-nav-item.open .icg-dropdown { display: block; }
.icg-dropdown .icg-nav-link { padding: 10px 16px; }

/* Hero — mobile default (smallest phones first) */
.icg-hero-v2 { min-height: 100vh; min-height: 100svh; }
.icg-hero-v2-wrap { padding: 80px 0 40px; }
.icg-hero-v2-headline { font-size: clamp(32px, 9vw, 44px); line-height: 1.1; }
.icg-hero-v2-eyebrow { font-size: 11px; }
.icg-hero-v2-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.icg-hero-v2-actions .icg-btn { width: 100%; justify-content: center; }
.icg-hero-v2-proof { margin-top: 24px; flex-wrap: wrap; }
.icg-hero-v2-inner { grid-template-columns: 1fr; gap: 40px; }
.icg-hero-v2-card { display: none; }

.icg-hero-headline { font-size: clamp(36px, 10vw, 56px); }
.icg-hero-subtext { font-size: 16px; }
.icg-hero-actions { gap: 12px; flex-direction: column; align-items: stretch; }
.icg-hero-actions .icg-btn { justify-content: center; }
.icg-hero-actions .icg-btn-lg { padding: 14px 28px; font-size: 15px; }

.icg-service-bar-inner { flex-direction: column; gap: 12px; text-align: center; }
.icg-service-times { justify-content: center; gap: 16px; }
.icg-about-snippet-img-wrap { padding-bottom: 30px; padding-right: 30px; }
.icg-about-stat-bubble { left: 0; right: auto; }

.icg-about-snippet-grid,
.icg-pastor-grid,
.icg-sermon-feature-grid,
.icg-giving-cta-inner { grid-template-columns: 1fr; gap: 40px; }
.icg-pastor-image-col { order: -1; max-width: 400px; margin: 0 auto; }
.icg-pastor-verse-card { display: none; }
.icg-events-grid,
.icg-ministries-grid,
.icg-ministries-fallback-grid,
.icg-sermons-grid,
.icg-blog-grid,
.icg-new-steps,
.icg-stats-grid,
.icg-give-grid,
.icg-contact-grid,
.icg-prayer-page-grid { grid-template-columns: 1fr; }
.icg-footer-grid { grid-template-columns: 1fr; gap: 36px; }
.icg-footer-bottom-inner { flex-direction: column; text-align: center; }
.icg-testimonials-track { grid-template-columns: 1fr; }
.icg-testimonials-controls { margin-top: 24px; }
.icg-team-grid { grid-template-columns: 1fr 1fr; }
.icg-give-cat-grid { grid-template-columns: 1fr; }
.icg-give-scripture-banner { padding: 24px; }
.icg-give-card { padding: 28px; }
.icg-section-title { font-size: clamp(24px, 6vw, 36px); }
.icg-page-hero-title { font-size: clamp(24px, 6vw, 40px); }
.icg-admin-tabs { gap: 2px; padding: 0 16px; }
.icg-tab { padding: 8px 10px; font-size: 12px; }
.icg-admin-content { padding: 24px 16px; }
.icg-admin-header-inner { padding: 20px 16px 0; }

.icg-sermon-filters-inner { flex-direction: column; }
.icg-filter-group { min-width: 100%; }
.icg-btn-lg { padding: 14px 24px; font-size: 15px; }
.icg-announcement-bar { padding-right: 48px; }
.icg-giving-cta-actions { align-items: center; }
.icg-giving-cta-actions .icg-btn { width: 100%; }

/* Membership — trust signals: 1 column, card becomes horizontal row */
.icg-trust-signals { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
.icg-trust-signal-card { display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 20px; }
.icg-trust-signal-icon { flex-shrink: 0; margin: 0; }
.icg-membership-intro-block { margin-bottom: 32px; }

/* Form wrap — tightest padding on smallest screens */
.icg-form-header { padding: 20px 16px 0; gap: 12px; }
.icg-form-header-icon { width: 44px; height: 44px; }
.icg-form-steps { padding: 18px 16px 0; overflow-x: auto; }
.icg-step-label { display: none; }
.icg-form { padding: 0 16px 28px; }
.icg-field-row { grid-template-columns: 1fr; }
.icg-radio-grid { grid-template-columns: 1fr 1fr; }
.icg-checkbox-grid { grid-template-columns: 1fr 1fr; }
.icg-unit-cards-grid { grid-template-columns: 1fr; }
.icg-review-grid { grid-template-columns: 1fr; }
.icg-form-nav { flex-direction: column-reverse; gap: 10px; margin-top: 24px; padding-top: 20px; }
.icg-form-nav .icg-btn-next,
.icg-form-nav .icg-btn-submit { width: 100%; justify-content: center; min-width: unset; padding: 15px 24px; }
.icg-form-nav .icg-btn-prev { width: 100%; justify-content: center; padding: 13px 24px; }
.icg-form-nav > div:empty { display: none; }

/* ── SMALL PHONE FLOOR (up to 480px) — final tightening ──── */
@media (max-width: 480px) {
  .icg-hero-v2-wrap { padding: 80px 0 40px; }
}

/* ── 481px+ — bigger phones / small tablets ──────────────── */
@media (min-width: 481px) {
  .icg-team-grid { grid-template-columns: repeat(2, 1fr); }
  .icg-give-cat-grid { grid-template-columns: 1fr 1fr; }
  .icg-sermon-filters-inner { flex-direction: row; }
  .icg-filter-group { min-width: 0; }
}

/* ── 769px+ — tablet ──────────────────────────────────────── */
@media (min-width: 769px) {
  :root { --section-py: 72px; --header-h: 80px; }
  .icg-container { padding: 0 24px; }

  .icg-hero-v2 { min-height: auto; }
  .icg-hero-v2-wrap { padding: 100px 0 60px; }
  .icg-hero-v2-headline { font-size: clamp(36px, 10vw, 52px); }
  .icg-hero-v2-sub { font-size: 15px; max-width: 100%; }
  .icg-hero-v2-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; }
  .icg-hero-v2-actions .icg-btn { flex: 1 1 auto; width: auto; min-width: 140px; justify-content: center; }

  .icg-hero-actions { flex-direction: row; align-items: normal; }
  .icg-hero-actions .icg-btn { justify-content: normal; }

  .icg-events-grid,
  .icg-ministries-grid,
  .icg-ministries-fallback-grid,
  .icg-sermons-grid,
  .icg-blog-grid,
  .icg-team-grid { grid-template-columns: repeat(2, 1fr); }
  .icg-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .icg-new-steps { grid-template-columns: 1fr 1fr; }
  .icg-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .icg-testimonials-track { grid-template-columns: repeat(2, 1fr); }

  .icg-form-header { padding: 28px 24px 0; }
  .icg-form-steps { padding: 24px 24px 0; overflow-x: visible; }
  .icg-step-label { display: inline; }
  .icg-form { padding: 0 24px 32px; }
  .icg-field-row { grid-template-columns: 1fr 1fr; }
  .icg-unit-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .icg-review-grid { grid-template-columns: 1fr 1fr; }
  .icg-form-nav { flex-direction: row; }
  .icg-form-nav .icg-btn-next,
  .icg-form-nav .icg-btn-submit,
  .icg-form-nav .icg-btn-prev { width: auto; min-width: unset; }

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

/* Nav close button only needed while the mobile drawer exists */
@media (min-width: 1025px) {
  .icg-nav-close { display: none; }
}

/* ── 1025px+ — desktop ────────────────────────────────────── */
@media (min-width: 1025px) {
  :root { --section-py: 96px; }

  .icg-nav-toggle { display: none; }
  .icg-nav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    overflow: visible;
    padding: 0;
    flex-direction: row;
    align-items: center;
  }
  .icg-dropdown {
    position: absolute;
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--white);
    border: none;
    margin: 0;
    padding: 8px;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  }
  .icg-nav-item:hover .icg-dropdown,
  .icg-nav-item:focus-within .icg-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .icg-nav-list { flex-direction: row; align-items: center; gap: 0; width: auto; }

  .icg-hero-v2-inner { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }
  .icg-hero-v2-card { display: block; }

  .icg-about-snippet-grid,
  .icg-pastor-grid,
  .icg-sermon-feature-grid,
  .icg-giving-cta-inner { grid-template-columns: 1fr 1fr; gap: 64px; }
  .icg-pastor-image-col { order: 0; max-width: none; margin: 0; }
  .icg-pastor-verse-card { display: block; right: 0; }
  .icg-events-grid { grid-template-columns: repeat(3, 1fr); }
  .icg-ministries-grid,
  .icg-ministries-fallback-grid { grid-template-columns: repeat(3, 1fr); }
  .icg-sermons-grid,
  .icg-blog-grid { grid-template-columns: repeat(3, 1fr); }
  .icg-testimonials-track { grid-template-columns: repeat(2, 1fr); }
  .icg-team-grid { grid-template-columns: repeat(3, 1fr); }
  .icg-give-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto 48px; }
  .icg-contact-grid { grid-template-columns: 2fr 1fr; gap: 64px; }
  .icg-new-steps { grid-template-columns: repeat(3, 1fr); }
  .icg-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .icg-prayer-page-grid { grid-template-columns: 2fr 1fr; }
  .icg-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
  .icg-giving-cta-actions { align-items: normal; }
  .icg-giving-cta-actions .icg-btn { width: 280px; }
  .icg-admin-tabs { gap: 6px; }
}
