/* ─── EUROPA GROTESK — @font-face ───────────────────────────── */
@font-face {
  font-family: 'EuropaGrotesk';
  src: url('europa-grotesk-sh-bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/* ─── TUSKER GROTESK — @font-face ────────────────────────────── */
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-5500Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-5600Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-5700Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-5800Super.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-4500Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-4700Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: 'TuskerGrotesk';
  src: url('fonts/TuskerGrotesk-6700Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-stretch: expanded;
  font-display: swap;
}

/* ─── GLOBAL FONT ─────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4 {
  font-family: 'EuropaGrotesk', sans-serif;
  font-weight: bold;
}

/* ─── COLOUR SYSTEM ───────────────────────────────────────────── */
:root {
  --red: #B91C1C;
  --black: #0f0f0f;
  --charcoal: #1a1a1a;
  --white: #ffffff;
  --off-white: #f8f8f6;
  --light-grey: #f2f2f0;
  --border: #e0e0dc;
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #999999;
}

/* ─── GLOBAL RESPONSIVE ────────────────────────────────────────── */

/* Fluid media — never overflow their container */
img, video, iframe { max-width: 100%; }
video { display: block; }

/* Prevent horizontal scroll on every page */
body { overflow-x: hidden; }

/* Touch-friendly minimum target size */
.btn { min-height: 44px; }
.nav__hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* ── Container ── */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
}

/* ── Navigation ── */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__inner { grid-template-columns: 1fr auto; }
}

/* On small phones the logo + button + hamburger overflows at ~320px */
@media (max-width: 480px) {
  .nav__cta .btn { display: none; }
}

/* ── Hero ── */
@media (max-width: 600px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero__headline { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__buttons {
    flex-direction: column;
    gap: 12px;
  }
  .hero__buttons .btn {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
  .hero__scroll-hint { display: none; }
}

/* ── Service strip ── */
@media (max-width: 900px) {
  .service-strip__grid { grid-template-columns: 1fr; }
}

/* ── About preview ── */
@media (max-width: 900px) {
  .about-preview__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-preview__image-wrap { order: -1; }
  .about-preview__text {
    border-left: none;
    padding-left: 0;
    border-top: 4px solid var(--red);
    padding-top: 32px;
  }
}
@media (max-width: 600px) {
  .about-preview__image { height: 260px; }
}

/* ── Events ── */
@media (max-width: 600px) {
  .events__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .event-card { width: 280px; height: 380px; }
}

/* ── Ministries ── */
@media (max-width: 900px) {
  .ministries__grid { grid-template-columns: 1fr; }
  .ministry-card--featured { height: 220px; }
  .ministry-card--regular { height: 200px; }
}

/* ── Sermon ── */
@media (max-width: 1024px) {
  .sermon__grid { grid-template-columns: 1fr; }
  .sermon__list { display: none; }
}

/* ── Carecell ── */
@media (max-width: 900px) {
  .carecell__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .carecell-card { flex-wrap: wrap; }
  .carecell-card__contact { width: 100%; margin-top: 6px; }
}

/* ── CTA banner ── */
@media (max-width: 600px) {
  .cta-banner { padding: 64px 0; }
  .cta-banner__buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-banner__buttons .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ── Footer ── */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ── Common section padding reduction ── */
@media (max-width: 600px) {
  .service-strip,
  .about-preview,
  .ministries,
  .sermon,
  .carecell {
    padding: 64px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NLF CITY CHURCH — COMPREHENSIVE MOBILE RESPONSIVE ADDITIONS
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 900px) {
  .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 8px; }
  .nav__logo img { height: 48px !important; width: auto !important; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn { font-size: 0.75rem; padding: 8px 14px; white-space: nowrap; }
  .nav__hamburger { display: flex; }
  .nav__links { display: none; }
  .experience__img-wrap { margin-right: 0 !important; }
}
@media (max-width: 480px) {
  .nav__cta { display: none; }
  .nav__inner { padding: 10px 16px; }
}

@media (max-width: 768px) {
  .hero { min-height: 90vh; padding: 80px 20px 60px; }
  .hero__headline { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.1; }
  .hero__subtext { font-size: 1rem; max-width: 100%; }
  .hero__buttons { flex-direction: column; gap: 12px; width: 100%; }
  .hero__buttons .btn { width: 100%; max-width: 320px; text-align: center; justify-content: center; }

  .events { padding: 64px 0; }
  .events__arrows { display: none !important; }
  .events__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .events__track-wrap {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }
  .events__track {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    padding-right: 16px !important;
  }
  .event-card {
    width: 80vw !important;
    max-width: 300px !important;
    height: 420px !important;
    min-height: unset !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  .highlights { padding: 64px 0; overflow: hidden; }
  .highlight-slide { min-height: 400px !important; height: 400px !important; }
  .highlight-slide img, .highlight-slide video { width: 100%; height: 100%; object-fit: cover; }

  .gatherings { padding: 64px 0; overflow: hidden; }
  .gatherings__track, .gatherings__grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; transform: none !important; overflow: visible; width: 100% !important; }
  .gathering-card { width: 100% !important; min-width: unset !important; }
  .gatherings__nav { display: none; }

  .ministries { padding: 64px 0; }
  .ministries__grid { grid-template-columns: 1fr; gap: 16px; }
  .ministry-card { height: 200px !important; }

  .pastors__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pastor-card__photo { height: 180px; }

  .page-hero { min-height: 320px; padding: 100px 20px 60px; }
  .page-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }

  .gallery__grid, .photo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery__item { height: 160px; }

  .community__grid { grid-template-columns: 1fr; gap: 24px; }
  .give__grid { grid-template-columns: 1fr; gap: 32px; }
  .give__qr { max-width: 200px; margin: 0 auto; display: block; }
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__map { height: 280px; }
  .media__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .media-card__thumb { height: 160px; }
  .beliefs__grid { grid-template-columns: 1fr; gap: 20px; }
  .locations__grid { grid-template-columns: 1fr; gap: 24px; }
  .locations__map { height: 300px; }
  .carecell__grid { grid-template-columns: 1fr; gap: 16px; }
  .cc-card__photo { height: 180px; }

  .two-col, .split-section, .content-grid { grid-template-columns: 1fr !important; gap: 32px; }

  .cta-banner { padding: 64px 20px; text-align: center; }
  .cta-banner__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .cta-banner__buttons { flex-direction: column; align-items: center; gap: 12px; }
  .cta-banner__buttons .btn { width: 100%; max-width: 300px; justify-content: center; }

  .footer { padding: 48px 0 32px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
  .footer__logo img { height: 48px; }

  .section-label { font-size: 0.7rem; }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .section-desc { font-size: 0.95rem; }

  .whatsapp-float { bottom: 20px; right: 16px; width: 52px; height: 52px; }
}

@media (max-width: 480px) {
  .gatherings__track, .gatherings__grid { grid-template-columns: 1fr; }
  .pastors__grid { grid-template-columns: 1fr; }
  .gallery__grid, .gallery-grid, .photo-grid { grid-template-columns: 1fr !important; }
  .gallery__item { height: 220px; }
  .media__grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ministries__grid { grid-template-columns: 1fr 1fr; }
  .pastors__grid { grid-template-columns: 1fr 1fr 1fr; }
  .media__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .gatherings__track, .gatherings__grid { display: grid !important; grid-template-columns: 1fr 1fr; transform: none !important; overflow: visible; width: 100% !important; gap: 20px; }
}

@media (max-width: 900px) {
  .nav__inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; grid-template-columns: unset !important; padding: 10px 16px !important; gap: 8px !important; }
  .nav__logo img { height: 52px !important; width: auto !important; }
  .nav__links { display: none !important; }
  .nav__hamburger { display: flex !important; }
  .nav__cta .btn { font-size: 0.72rem !important; padding: 8px 12px !important; white-space: nowrap !important; }
}
@media (max-width: 480px) {
  .nav__cta { display: none !important; }
  .nav__inner { padding: 10px 12px !important; }
}
@media (max-width: 768px) {
  .welcome__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .welcome__img-wrap { min-height: 280px !important; order: -1; }
  .vision-grid, .values-grid, .offer-grid, .offer__grid, .faith__grid, .seasons__grid, .who__grid, .experience__grid, .partners__grid, .feature-cards, .info-cards, .grow-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .photo-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 180px !important; grid-template-rows: unset !important; }
  .info-strip__grid, .meeting-strip__grid { grid-template-columns: 1fr !important; }
  .leader-grid { grid-template-columns: 1fr 1fr !important; max-width: 100% !important; }
  .timeline-image__frame img { height: 260px !important; }
}
@media (max-width: 480px) {
  .vision-grid, .offer-grid, .offer__grid, .grow-cards { grid-template-columns: 1fr 1fr !important; }
  .leader-grid { grid-template-columns: 1fr !important; }
  .photo-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 160px !important; }
}

/* ── Prevent horizontal overflow globally ── */
html { overflow-x: hidden; }
body { overflow-x: hidden; width: 100%; max-width: 100vw; position: relative; }

*, *::before, *::after { box-sizing: border-box; }

/* Contain all sections and wrappers */
.nav__mobile {
  max-width: 100%;
  overflow-x: hidden;
}

/* header/nav must stay visible: they contain absolutely-positioned
   .nav__dropdown and mobile nav panels that overflow on hover/open.
   overflow-x: hidden here forces overflow-y to compute as auto,
   clipping the dropdown. body { overflow-x: hidden } (above) already
   guards against page-level horizontal scroll. */
header, nav {
  max-width: 100%;
  overflow: visible;
}

/* Fix carousel/track overflow — clip wrapper, not track */
.highlights__track,
.gatherings__track,
#eventsCarouselTrack,
.evt-track {
  overflow: hidden;
}

/* Ticker must not widen the page */
.announce-ticker-wrap {
  overflow: hidden;
  max-width: 100vw;
}