/* [MODIFIED] Hero Slideshow Section */
.hero-slideshow {
  position: relative;
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  color: var(--white);
  overflow: hidden;
}

.slides-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
  display: flex;
  align-items: center;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide .hero-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out 0.5s;
}

.slide.active .hero-content {
  opacity: 1;
  transform: translateY(0);
}

.hero-overlay {
  content: '';
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.35);
  z-index: 3;
}
.hero-content { 
  position: relative; 
  z-index: 4; 
  text-align: left;
  max-width: 600px;
}
.hero-content h1 { font-size: clamp(2.8rem, 6vw, 4.5rem); margin-bottom: 0.5rem; color: var(--white); }
.hero-content .tagline { font-size: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 2.5rem; font-weight: 300; }
.hero-content .btn { margin: 0 0.5rem 0 0; }

/* Slideshow Navigation */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.3);
  color: var(--white);
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 0.3s ease;
}
.slide-arrow:hover {
  background: rgba(0,0,0,0.6);
}
.prev-arrow { left: 1.5rem; }
.next-arrow { right: 1.5rem; }

/* Slideshow Indicators */
.slide-indicators {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.75rem;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.dot:hover {
  background: rgba(255,255,255,0.8);
}
.dot.active {
  background: transparent;
  border-color: var(--white);
}

/* Welcome / Pastor Section */
.welcome-pastor { padding: 4rem 0; }
.welcome-container { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.welcome-text { flex: 2 1 400px; }
.welcome-text h2 { margin-bottom: 1.5rem; }
.welcome-text p { margin-bottom: 1rem; }
.welcome-image { flex: 1 1 300px; }
.welcome-image img { width: 100%; max-width: 350px; margin: 0 auto; border-radius: 0.5rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Service Info Section */
.service-info { padding: 3rem 0; background: var(--primary-color); color: var(--white); }
.service-info .container { display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center; gap: 2rem; }
.info-box { flex: 1; min-width: 250px; }
.info-box i { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 1rem; }
.info-box h3 { color: var(--white); }
.info-box p { margin: 0; color: #eee; }

/* Bulletin Section Styles */
.bulletin-section { padding: 4rem 0; }
.bulletin-section h2 { text-align: center; margin-bottom: 1rem; }
.bulletin-container { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; margin-top: 2rem; }
.bulletin-preview { flex: 1 1 350px; }
.bulletin-preview a { display: block; }
.bulletin-preview img { width: 100%; max-width: 400px; margin: 0 auto; border-radius: 0.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.bulletin-preview a:hover img { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.bulletin-content { flex: 1 1 450px; }
.bulletin-content h3 { font-size: 1.75rem; margin-bottom: 1rem; }
.bulletin-content p { margin-bottom: 1.5rem; }
.bulletin-content .btn i { margin-right: 0.75rem; }

/* Grid Cards (Ministries) */
.grid-cards { padding: 4rem 0; }
.grid-cards h2 { text-align: center; }
.section-subtitle { text-align: center; max-width: 600px; margin: -0.5rem auto 2.5rem auto; color: #666; }
.card-container { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: #fff; border-radius: 0.5rem; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: center; border: 1px solid #eee; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.card-icon { font-size: 3rem; color: var(--accent-color); margin-bottom: 1rem; }
.card h3 { margin-bottom: 0.75rem; color: var(--primary-color); }
.card p { font-size: 1rem; line-height: 1.5; margin-bottom: 1.5rem; flex-grow: 1; }

/* CTA for ministries page on home */
.ministries-cta { text-align: center; margin-top: 3rem; }

/* Latest Sermon Section */
.latest-sermon { padding: 4rem 0; text-align: center; }
.sermon-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 800px; margin: 0 auto 2rem auto; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.sermon-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sermon-cta { margin-top: 2.5rem; }

/* Events / Calendar Section */
.events-section { padding: 4rem 0; }
.events-section h2 { text-align: center; }
.events-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.event-item { display: flex; background: var(--white); border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.event-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.event-date { background: var(--accent-color); color: var(--white); padding: 1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; min-width: 90px; }
.date-month { font-size: 1rem; font-weight: 600; text-transform: uppercase; }
.date-day { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.event-details { padding: 1rem 1.5rem; }
.event-details h3 { margin-top: 0; margin-bottom: 0.5rem; }
.event-details .event-meta { font-size: 0.9rem; color: #777; margin-bottom: 0.75rem; }
.event-details .event-meta i { margin-right: 0.4rem; }
.events-cta { text-align: center; margin-top: 2.5rem; }

/* Beliefs Section */
.beliefs { padding: 4rem 0; }
.beliefs-container { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.beliefs-image { flex: 1 1 400px; }
.beliefs-image img { border-radius: 0.5rem; }
.beliefs-content { flex: 1 1 400px; }
.beliefs-content .btn-primary { margin-top: 1.5rem; }
.beliefs ul { list-style: none; margin-top: 1.5rem; }
.beliefs li { margin-bottom: 1rem; padding-left: 2rem; position: relative; }
.beliefs li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--accent-color); position: absolute; left: 0; top: 4px; }

/* Contact Section */
.contact-section { padding: 4rem 0; }
.contact-section h2 { text-align: center; }
.contact-grid { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.contact-form { flex: 1 1 300px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.85rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 0.5rem; font-family: inherit; font-size: 1rem; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 2px var(--accent-color-light); }
.contact-form label { display: block; margin-bottom: 1.5rem; }
.contact-form label input { display: inline-block; width: 60px; margin-left: 0.5rem; }
.contact-form button { width: 100%; border-radius: 0.5rem; }
.map-embed {
  flex: 1 1 300px;
  min-height: 400px;
  border-radius: 0.5rem; /* MOVED from iframe to here */
  overflow: hidden;      /* ADDED to contain the map */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Fallback message for events grid */
.no-events-message { grid-column: 1 / -1; text-align: center; padding: 2rem; background: #fff; border-radius: 0.5rem; color: #555; font-style: italic; }

.watch-online-box .info-box-link:hover,
.watch-online-box .info-box-link:focus { transform: translateY(-5px);}
.watch-online-box .info-box-link {
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* =============================================================== */
/*                     RESPONSIVE STYLES (FINAL)                   */
/* =============================================================== */

@media (max-width: 768px) {
  /* --- [THE FIX] Hero Slideshow for Mobile --- */
  .hero-slideshow {
    height: 70vh;
    justify-content: center; /* Horizontally center the content block */
  }
  .hero-content {
    text-align: center; /* Center the text inside the block */
    max-width: 90%; /* Allow content to use more width on mobile */
  }
  .hero-content h1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem); /* More responsive font size */
  }
  .hero-content .tagline {
    font-size: clamp(1rem, 4vw, 1.3rem);
    margin-bottom: 2rem;
  }
  .hero-content .btn {
    margin: 0.5rem; /* Give buttons space when they stack */
  }
  .slide-arrow {
    font-size: 1.5rem;
    padding: 0.5rem 0.75rem;
    top: 45%;
  }
  .prev-arrow { left: 0.5rem; }
  .next-arrow { right: 0.5rem; }

  /* --- Other Section Adjustments --- */
  .welcome-image img {
    max-width: 280px;
  }
  .event-item {
    flex-direction: column;
  }
  .event-date {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem;
  }
  .date-day { font-size: 2rem; }
  .event-details {
    text-align: center;
  }
  .contact-grid {
    flex-direction: column-reverse;
  }
}

@media (max-width: 500px) {
  .service-info .container {
    flex-direction: column;
    gap: 2.5rem;
  }
  .beliefs-content ul {
    columns: 1;
  }
  .bulletin-container {
    text-align: center;
  }
  .bulletin-content h3 {
    font-size: 1.5rem;
  }
  .g-recaptcha {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}