/* ---------- Root helpers ---------- */
:root{
  --ink:#1b1b1b;
  --paper:#fff;
  --divider:#1b1b1b;
  --overlay: 0.6; /* image dim for text contrast on mobile */
}

/* Background image (kept as-is) */
.video-background-container{
  background-image:url(../Assets/BG-MINISTRIES-PAGE.jpg);
  background-size:cover;
  background-position:center;
}

/* ---------- Hero / top content (if used) ---------- */
.content-ministries{
  width:100%;
  min-height:100svh; /* mobile-safe viewport */
}

.ministries-container{
  width:100%;
  min-height:inherit;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:clamp(12px,2vw,24px);
  text-align:center;
}

.ministries-title{
  font-family:'Sofia Pro', system-ui, sans-serif;
  font-size:clamp(28px,7vw,72px);
  color:#fff;
  line-height:1.05;
  margin:0 0 1rem;
}

.Learn-More{
  background:#fff;
  padding:.6rem 1.8rem;
  border-radius:9999px;
  transition:transform .25s ease;
  display:inline-flex;
}
.Learn-More:hover{ transform:scale(1.06); }
.Learn-More:active{ transform:scale(.98); }
.Learn-More a{
  text-decoration:none;
  color:var(--ink);
  font-family:'Sofia Pro', system-ui, sans-serif;
  font-weight:500;
  font-size:clamp(14px,2.2vw,18px);
}


/*______________________________________________________*/

/* =========================================
   Global Reset & Base
========================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  overflow-x: hidden; /* prevent stray horizontal scroll */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Sofia Pro", sans-serif;
  color: #1b1b1b;
}

/* Optional background section (if used elsewhere) */
.video-background-container{
  background-image: url(../Assets/BG-MINISTRIES-PAGE.jpg);
  background-size: cover;
  background-position: center;
}

/* =========================================
   Section Shell
========================================= */
#ministries-section{
  width: 100%;
  background: #fff;
  position: relative;
  isolation: isolate;  /* prevent z-index bleed from outside */
}

/* =========================================
   Top Logo Navigation
========================================= */
.logo-navigation{
  width: 100%;
  min-height: 64px;
  padding: clamp(10px, 2.2vw, 20px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
  background: #fff;
  border-bottom: 2px solid #1b1b1b;
  overflow-x: auto;                 /* allow more logos without wrap issues */
  scroll-snap-type: x proximity;
}

/* Hide scrollbar visuals but keep touch/trackpad scroll */
.logo-navigation { scrollbar-width: none; }
.logo-navigation::-webkit-scrollbar { display: none; }

.header-logo{
  margin-right: clamp(8px, 2vw, 20px);
  white-space: nowrap;
  font-family: 'Sofia Pro', system-ui, sans-serif;
  font-size: clamp(18px, 3.8vw, 28px);
  font-weight: 300;
  color: #1b1b1b;
  flex: 0 0 auto;
}

.img-logo-navigation{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.img-logo-navigation img{
  height: clamp(28px, 6vh, 56px);
  width: auto;
  cursor: pointer;
  transition: transform .25s ease;
}
.img-logo-navigation:hover img{ transform: scale(.92); }

/* =========================================
   Slides Strip (Horizontal, Snap)
========================================= */
.slides-container{
  position: relative;
  width: 100%;
  height: clamp(520px, 90svh, 900px);
  display: flex;
  overflow-x: auto;               /* horizontal scroll strip */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
}

/* hide horizontal scrollbar UI (functionality remains) */
.slides-container { scrollbar-width: none; }
.slides-container::-webkit-scrollbar { display: none; }

.slide{
  position: relative;
  flex: 0 0 100%;                 /* one full viewport width */
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  scroll-snap-align: start;
  overflow: hidden;               /* CRITICAL: clip absolute children */
}

/* =========================================
   Slide Layout (Two Columns on Desktop)
========================================= */
.slide-content{
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 1fr;
  gap: clamp(8px, 2vw, 18px);
  height: 100%;
}

/* Right column background image */
.ministry-image{
  grid-column: 2;
  width: 100%;
  height: 100%;
  background-size: contain;       /* keep full image visible on desktop */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  pointer-events: none;           /* background never blocks interactions */
}
.ministry-image::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}

/* =========================================
   Info Column (Center-Stacked States)
   IMPORTANT: both states sit EXACTLY on top
   of each other, perfectly centered.
========================================= */
.info{
  grid-column: 1;
  position: relative;
  display: grid;                  /* overlay both states in same cell */
  place-items: center;
  height: 100%;                   /* fill the column to keep center true */
  z-index: 1;                     /* above background image */
  text-align: center;
}

/* Both states share the same grid cell */
.preview,
.slide-complete{
  grid-area: 1 / 1;
  width: min(720px, 90%);         /* responsive max width */
  margin: 0;
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}

/* Default state: preview visible, complete hidden */
.preview{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.slide-complete{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* Toggle when revealed: preview fades out; complete fades in.
   They remain perfectly centered in the SAME position. */
.slide.is-revealed .preview{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.slide.is-revealed .slide-complete{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- Content inside .preview (Big logo + CTA) --- */
.ministry-logo{
  width: clamp(160px, 20vw, 320px);
  max-width: 50%;
}

.read-more{
  display: inline-block;
  margin-top: clamp(8px, 1.2vw, 14px);
  background: #fff;
  padding: .6rem 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.1);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
  text-decoration: none;
  color: #1b1b1b;
}
.read-more:hover{ transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.read-more:active{ transform: scale(.98); }
.read-more:focus-visible{ outline: 3px solid #000; outline-offset: 2px; }

.read-more-button{
  font-family: 'Sofia Pro', system-ui, sans-serif;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 400;
  margin: 0;
}

/* --- Content inside .slide-complete (Small logo ABOVE text) --- */
.logo-ministry-name{
  display: flex;
  justify-content: center;
}

.ministry-logo-little{
  width: clamp(72px, 10vw, 120px);
  margin-bottom: .55rem;          /* ensures no touch with text below */
}

.ministry-name{
  font-family: 'Sofia Pro', system-ui, sans-serif;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 600;
  color: #1b1b1b;
  margin: 0 0 .4rem;
}

.description{
  font-family: 'Sofia Pro', system-ui, sans-serif;
  font-size: clamp(20px, 4vw, 20px);
  color: #1b1b1b;
  text-align: justify;
  margin: 0;
}

/* =========================================
   Progress Bar
========================================= */
.progress-bar{
  position: absolute;
  bottom: clamp(8px, 1.5vh, 16px);
  left: 5%;
  width: 90%;
  height: 6px;
  background: rgba(0,0,0,.1);
  border-radius: 9999px;
  overflow: hidden;
  z-index: 2;
}
.progress{
  height: 100%;
  width: 0%;
  background: #1b1b1b;
  transition: width 15s linear;
}

/* =========================================
   Responsive Tweaks
========================================= */

/* Tablet / smaller laptops */
@media (max-width: 1024px){
  .slide-content{ grid-template-columns: 58% 42%; }
}

/* Mobile (≤768px): image behind, states still centered and overlapping */
@media (max-width: 768px){
  .slide-content{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* put background image behind content and fill screen */
  .ministry-image{
    order: -1;
    position: absolute;
    inset: 0;
    background-size: cover;
  }

  .info{
    height: 100%;                 /* keep true center within slide */
    padding: clamp(8px, 2.4vw, 16px);
  }

  .preview,
  .slide-complete{
    width: min(92vw, 680px);      /* a little wider allowance on phones */
  }

  .ministry-logo{ width: min(56vw, 240px); }
  .read-more-button{ font-size: clamp(14px, 4.5vw, 18px); }
  .preview, .slide-complete{
    background-color: #ffffffc5;
    padding: 1.5vh;
    border-radius: 5vh;
    width: 100%;
    height: max-content;
  }

  .progress-bar{
    background-color: #fff;
  }

  .progress{
    background-color: #ff7b00;
  }

}

/* Very small phones */
@media (max-width: 480px){
  .slides-container{ height: clamp(520px, 88svh, 760px); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .slides-container,
  .img-logo-navigation img,
  .read-more,
  .preview,
  .slide-complete,
  .progress{
    transition: none !important;
    scroll-behavior: auto;
  }
}