/* ==========================================================
   BLESSED JESUS WORLD CHURCH — MOBILE REBUILD
   Loaded ONLY at widths <= 767px.
   Desktop/tablet markup and styling are not altered.
   ========================================================== */

:root{
  --m-bg:#07050a;
  --m-panel:#100a14;
  --m-panel-2:#160d1c;
  --m-gold:#f3d778;
  --m-purple:#8e2bb5;
  --m-text:#fbf7fc;
  --m-muted:#b9afbd;
  --m-line:rgba(243,215,120,.14);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:72px;
  overflow-x:hidden;
}

body{
  overflow-x:hidden !important;
  padding-top:68px !important;
  background:
    radial-gradient(circle at 82% 8%,rgba(115,32,151,.12),transparent 28%),
    linear-gradient(180deg,#07050a,#0b0710 54%,#050406) !important;
}

/* ----------------------------------------------------------
   MOBILE HEADER — use the EXISTING header/navigation.
   No duplicate mobile UI is injected.
   ---------------------------------------------------------- */
header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9998 !important;
  background:rgba(5,4,7,.95) !important;
  border-bottom:1px solid rgba(243,215,120,.14) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

header .container{
  width:100% !important;
  padding:0 14px !important;
}

header nav{
  min-height:68px !important;
  height:68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.brand{
  min-width:0 !important;
  flex:1 1 auto !important;
  max-width:calc(100% - 124px) !important;
  gap:8px !important;
  overflow:hidden !important;
}

.logo-small{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  object-fit:contain !important;
  border-radius:14px !important;
}

.brand-copy small{
  display:none !important;
}
.brand-copy{min-width:0 !important;overflow:hidden !important}
.brand-copy strong{
  display:block !important;
  font-size:.78rem !important;
  line-height:1.02 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mobile-quick-give{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-width:58px !important;
  height:40px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#f7e38f,#d4a12f) !important;
  color:#1b0d17 !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  box-shadow:0 0 22px rgba(215,165,52,.16) !important;
  text-decoration:none !important;
}

.menu{
  display:grid !important;
  place-items:center !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid rgba(243,215,120,.14) !important;
  background:rgba(255,255,255,.035) !important;
  color:#fff !important;
  font-size:1.25rem !important;
}

.navlinks{
  position:fixed !important;
  inset:68px 0 0 0 !important;
  width:100% !important;
  height:calc(100dvh - 68px) !important;
  padding:18px 14px calc(28px + env(safe-area-inset-bottom)) !important;
  display:none !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:7px !important;
  overflow-y:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 90% 8%,rgba(121,36,159,.18),transparent 30%),
    linear-gradient(180deg,#09060d,#050406) !important;
  box-shadow:none !important;
}
.navlinks.show{display:flex !important}
.navlinks > a,
.navlinks .more-trigger{
  min-height:52px !important;
  padding:13px 15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.025) !important;
  font-size:.94rem !important;
}
.navlinks .give-pill{
  margin-top:8px !important;
  color:#1b0d17 !important;
  background:linear-gradient(135deg,#f7e38f,#d4a12f) !important;
  border-color:transparent !important;
}
.more-pages{width:100% !important}
.more-pages-menu{
  position:static !important;
  display:none !important;
  width:100% !important;
  margin-top:7px !important;
  padding:7px !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.more-pages:hover .more-pages-menu,
.more-pages:focus-within .more-pages-menu{
  display:grid !important;
}

.social-dock{display:none !important}

/* ----------------------------------------------------------
   GLOBAL MOBILE RHYTHM
   ---------------------------------------------------------- */
.container{
  width:calc(100% - 28px) !important;
  max-width:none !important;
  margin-inline:auto !important;
}

.section{
  padding:58px 0 !important;
}

.section-head{
  align-items:flex-start !important;
  flex-direction:column !important;
  gap:10px !important;
}

.eyebrow{
  font-size:.67rem !important;
  letter-spacing:.18em !important;
}

h1,h2,h3{
  text-wrap:balance;
}
p{
  text-wrap:pretty;
}

.btn{
  min-height:50px !important;
  width:100% !important;
  border-radius:17px !important;
}

/* ----------------------------------------------------------
   HERO — deliberately rebuilt from existing content.
   ---------------------------------------------------------- */
.hero{
  min-height:auto !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(7,5,10,.18),rgba(7,5,10,.42) 44%,rgba(7,5,10,.95) 94%),
    url("canva-home-sanctuary-background-clean.png") center/cover no-repeat !important;
}
.hero::before{
  background:
    linear-gradient(180deg,rgba(6,4,8,.10),rgba(6,4,8,.68) 70%,#07050a 100%),
    radial-gradient(circle at 80% 20%,rgba(128,37,164,.18),transparent 34%) !important;
}
.hero .grid-stars{opacity:.14 !important}

.hero-grid{
  min-height:calc(100svh - 68px) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  gap:0 !important;
  padding:76px 0 34px !important;
}

.hero-grid > div:first-child{
  width:100% !important;
}

.hero h1{
  margin:14px 0 20px !important;
  font-size:clamp(3.45rem,15.2vw,4.9rem) !important;
  line-height:.86 !important;
  letter-spacing:-.045em !important;
}

.hero-copy{
  max-width:none !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  color:#d0c7d4 !important;
}

.actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin-top:24px !important;
}

.hero-logo-wrap{
  display:none !important;
}

/* ----------------------------------------------------------
   QUICK LINKS
   ---------------------------------------------------------- */
.quick{
  margin-top:18px !important;
}
.quick-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}
.quick a{
  min-height:112px !important;
  padding:15px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  border:1px solid rgba(243,215,120,.11) !important;
  border-radius:21px !important;
  background:
    radial-gradient(circle at 90% 10%,rgba(124,36,163,.18),transparent 38%),
    rgba(255,255,255,.025) !important;
}
.quick a small{
  color:var(--m-gold) !important;
  font-size:.62rem !important;
}
.quick a strong{
  margin-top:7px !important;
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:1.25rem !important;
  line-height:1 !important;
}

/* ----------------------------------------------------------
   HORIZONTAL CHURCH STORY
   Keep the Grasmere-style story, but use native touch scrolling
   instead of desktop scroll-to-horizontal translation.
   ---------------------------------------------------------- */
.church-story-section{
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:58px 0 62px !important;
}

.story-stage{
  position:static !important;
  top:auto !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  overflow:visible !important;
  transform:none !important;
}

.story-intro{
  position:static !important;
  width:calc(100% - 28px) !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto 20px !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.story-intro::after{display:none !important}
.story-scroll-pill{
  display:inline-flex !important;
  margin-bottom:18px !important;
  font-size:.66rem !important;
}
.story-logo-stage{
  width:124px !important;
  height:124px !important;
  margin-bottom:18px !important;
}
.story-intro h2{
  max-width:8ch !important;
  margin:12px 0 !important;
  font-size:clamp(3rem,14vw,4.2rem) !important;
  line-height:.84 !important;
}
.story-intro p{
  max-width:32ch !important;
  font-size:.94rem !important;
  line-height:1.55 !important;
}

.story-track{
  position:static !important;
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  gap:14px !important;
  padding:0 14px 16px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-inline:14px !important;
  overscroll-behavior-inline:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  cursor:grab !important;
}
.story-track::-webkit-scrollbar{display:none !important}

.story-card{
  flex:0 0 calc(100vw - 36px) !important;
  width:calc(100vw - 36px) !important;
  max-width:calc(100vw - 36px) !important;
  min-height:0 !important;
  height:auto !important;
  scroll-snap-align:center !important;
  border-radius:26px !important;
  overflow:hidden !important;
  transform:none !important;
}

.story-card-copy{
  padding:24px 20px !important;
}
.story-card-copy h2,
.story-card-copy h3{
  font-size:clamp(2.35rem,11vw,3.5rem) !important;
  line-height:.92 !important;
}
.story-card-copy p{
  font-size:.94rem !important;
  line-height:1.62 !important;
}
.story-card-visual{
  min-height:0 !important;
  height:auto !important;
}
.story-card-visual img{
  width:100% !important;
  height:auto !important;
  max-height:62vh !important;
  object-fit:cover !important;
}

.story-progress-wrap,
.story-progress,
.story-rail,
.story-edge-mask{
  display:none !important;
}

/* Pastor quote carousel nested inside the story card */
.pastor-story-heading{
  grid-template-columns:44px 1fr !important;
  gap:12px !important;
  padding:20px 18px !important;
}
.pastor-story-heading h3{
  font-size:clamp(1.9rem,9vw,2.65rem) !important;
}

.quote-carousel-frame,
.quote-carousel,
.quote-carousel .pastor-track{
  min-height:0 !important;
  height:auto !important;
}
.quote-carousel .pastor-slide{
  min-height:0 !important;
  grid-template-columns:1fr !important;
}
.quote-photo-pane{
  min-height:0 !important;
  aspect-ratio:4/5 !important;
}
.quote-photo-pane img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
}
.quote-copy-pane{
  min-height:0 !important;
  padding:24px 20px 90px !important;
}
.quote-copy-pane blockquote{
  font-size:clamp(1.7rem,8vw,2.35rem) !important;
  line-height:1.08 !important;
}
.quote-carousel .pastor-prev,
.quote-carousel .pastor-next{
  top:auto !important;
  bottom:24px !important;
  width:48px !important;
  height:48px !important;
}
.quote-carousel .pastor-prev{left:18px !important;right:auto !important}
.quote-carousel .pastor-next{right:18px !important}
.pastor-dots{display:none !important}
.pastor-bottom-bar{
  padding:8px 68px !important;
  min-height:60px !important;
}
.pastor-hint{display:none !important}
.pastor-toggle{display:none !important}

/* ----------------------------------------------------------
   STANDARD SECTIONS
   ---------------------------------------------------------- */
.about-grid,
.media-shell,
.quote-grid,
.give-grid,
.distribution,
.ghana-identity-grid,
.footer-grid,
.form-grid{
  grid-template-columns:1fr !important;
}

.cards3,
.book-grid,
.stats,
.amounts{
  grid-template-columns:1fr !important;
}

.card,
.glow-card,
.media-shell,
.about-card,
.quote-card,
.give-card,
.distribution,
.ghana-identity-visual,
.ghana-identity-copy{
  border-radius:24px !important;
}

.about-card,
.media-shell,
.quote-card,
.give-card,
.distribution{
  padding:22px !important;
}

/* ----------------------------------------------------------
   CANVA: never show a failed embedded frame on a phone.
   Use a local sanctuary visual instead.
   Desktop remains untouched because this stylesheet is mobile-only.
   ---------------------------------------------------------- */
.canva-visual{
  min-height:260px !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(7,5,10,.10),rgba(7,5,10,.52)),
    url("canva-home-sanctuary-background-clean.png") center/cover no-repeat !important;
}
.canva-visual iframe{
  display:none !important;
}
.canva-atmosphere{
  display:none !important;
}

/* ----------------------------------------------------------
   GHANA IDENTITY
   ---------------------------------------------------------- */
.ghana-identity-section{
  padding:58px 0 !important;
}
.ghana-identity-grid{
  gap:14px !important;
}
.ghana-identity-visual{
  min-height:0 !important;
  padding:10px !important;
}
.ghana-identity-visual img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:19px !important;
}
.ghana-identity-copy{
  min-height:0 !important;
  padding:26px 20px !important;
}
.ghana-identity-copy h2{
  font-size:clamp(2.7rem,12vw,4rem) !important;
  line-height:.92 !important;
}

/* ----------------------------------------------------------
   BOOKS / DAILY UTTERANCE / FORMS / PARTNERSHIP PAGES
   Generic mobile reflow without altering their desktop markup.
   ---------------------------------------------------------- */
.hero:not(.hero){
  min-height:auto !important;
}

.books-grid,
.editions{
  grid-template-columns:1fr !important;
  gap:16px !important;
}

.book,
.edition-card{
  grid-template-columns:1fr !important;
  padding:14px !important;
  border-radius:24px !important;
}

.cover,
.edition-cover{
  width:min(100%,330px) !important;
  margin-inline:auto !important;
}

.edition-actions,
.actions{
  grid-template-columns:1fr !important;
}

input,
select,
textarea,
button{
  font-size:16px !important;
}
input,
select,
textarea{
  width:100% !important;
  min-height:48px !important;
}
textarea{min-height:130px !important}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
footer{
  padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
}
.footer-grid{
  gap:24px !important;
}
.footer-brand,
footer .brand{
  max-width:100% !important;
}

/* prevent accidental overflow */
img,video,iframe,svg{
  max-width:100% !important;
}
pre,code{
  max-width:100% !important;
  overflow:auto !important;
}

@media (width <= 380px){
  .brand-copy strong{font-size:.80rem !important}
  .container{width:calc(100% - 22px) !important}
  .story-card{
    flex-basis:calc(100vw - 30px) !important;
    width:calc(100vw - 30px) !important;
    max-width:calc(100vw - 30px) !important;
  }
  .quick-grid{grid-template-columns:1fr !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* Keep every mobile page header visible while scrolling. */
header .wrap,
header .nav,
header .site-nav{
  width:100% !important;
}
header .wrap{
  max-width:none !important;
  margin:0 !important;
  padding:0 14px !important;
}

/* Books portal: no broken image placeholder on mobile or desktop source. */
.books-portal-visual img{
  object-fit:contain !important;
}

/* ==========================================================
   FINAL MOBILE HEADER FREEZE
   Keeps logo + church name + quick Give + menu visible at all times.
   ========================================================== */

body{
  padding-top:72px !important;
}

header,
.header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:72px !important;
  z-index:2147483000 !important;
  margin:0 !important;
  background:rgba(5,4,7,.97) !important;
  border-bottom:1px solid rgba(243,215,120,.18) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  transform:translateZ(0) !important;
  will-change:transform !important;
}

header .container{
  width:100% !important;
  max-width:none !important;
  padding:0 12px !important;
  margin:0 !important;
}

header nav,
.header .nav{
  width:100% !important;
  height:72px !important;
  min-height:72px !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin:0 !important;
}

header .brand,
.header .brand{
  min-width:0 !important;
  flex:1 1 auto !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  overflow:hidden !important;
  text-decoration:none !important;
}

header .logo-small,
.header .brand img{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  object-fit:contain !important;
  border-radius:13px !important;
}

header .brand-copy,
.header .brand span{
  min-width:0 !important;
}

header .brand-copy small{
  display:none !important;
}

header .brand-copy strong,
.header .brand span{
  display:block !important;
  color:#fff !important;
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:.84rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mobile-quick-give{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  height:42px !important;
  min-width:62px !important;
  padding:0 14px !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,233,150,.32) !important;
  background:linear-gradient(135deg,#f8e58f,#d8a532) !important;
  color:#1a0d16 !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 0 20px rgba(215,165,52,.18) !important;
}

header .menu,
.header .menu{
  order:3 !important;
  flex:0 0 44px !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  margin:0 !important;
  border-radius:14px !important;
}

.header .links{
  display:none !important;
}

.navlinks{
  top:72px !important;
  height:calc(100dvh - 72px) !important;
}


/* ==========================================================
   MOBILE STORY CHAPTER NAV — NORMAL FLOW, ZERO TEXT OVERLAP
   The arrow is no longer absolutely positioned over headings.
   ========================================================== */
@media (max-width:767px){
  .mobile-story-nav{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:0 0 22px !important;
    padding:0 !important;
    position:static !important;
  }

  /* Hide the original desktop number on mobile; the mobile row owns the number. */
  .story-card-about .story-card-copy > .story-number,
  .story-card-pastor .pastor-story-heading > .story-number{
    display:none !important;
  }

  .mobile-story-number{
    display:grid !important;
    place-items:center !important;
    width:72px !important;
    height:72px !important;
    flex:0 0 72px !important;
    border-radius:24px !important;
    border:1px solid rgba(191,90,222,.28) !important;
    background:linear-gradient(145deg,rgba(100,21,131,.88),rgba(52,11,68,.96)) !important;
    color:#fff !important;
    font:800 1.35rem/1 Arial,sans-serif !important;
    box-shadow:inset 0 0 18px rgba(255,255,255,.035),0 0 24px rgba(126,39,170,.10) !important;
  }

  .mobile-story-card-next{
    display:grid !important;
    place-items:center !important;
    position:static !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    flex:0 0 58px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(243,215,120,.42) !important;
    background:radial-gradient(circle at 42% 35%,rgba(243,215,120,.12),transparent 55%),rgba(8,5,11,.94) !important;
    color:#f7d969 !important;
    font:800 2rem/1 Arial,sans-serif !important;
    box-shadow:0 0 0 4px rgba(7,5,10,.18),0 0 20px rgba(215,165,52,.18),0 0 26px rgba(126,39,170,.10) !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .mobile-story-card-next::after{
    content:"" !important;
    display:none !important;
  }

  .mobile-story-card-next:active{
    transform:scale(.94) !important;
  }

  /* Reset old grid/positioning rules that caused the overlap. */
  .story-card-pastor .pastor-story-heading{
    display:block !important;
    padding:22px 18px 24px !important;
  }

  .story-card-pastor .pastor-story-heading > div:not(.mobile-story-nav){
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  .story-card-pastor .pastor-story-heading .eyebrow,
  .story-card-pastor .pastor-story-heading h3,
  .story-card-pastor .pastor-story-heading p,
  .story-card-pastor .pastor-dud-cta,
  .story-card-about .story-card-copy > .eyebrow,
  .story-card-about .story-card-copy > h3{
    max-width:100% !important;
    width:auto !important;
    padding-right:0 !important;
    margin-right:0 !important;
  }

  .story-card-about .story-card-copy{
    padding-top:22px !important;
  }

  .story-track{
    scroll-behavior:smooth !important;
    scroll-snap-type:x mandatory !important;
  }
  .story-card{scroll-snap-align:center !important;}
}

@media (max-width:380px){
  .mobile-story-number{
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
    border-radius:21px !important;
    font-size:1.2rem !important;
  }
  .mobile-story-card-next{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    flex-basis:54px !important;
  }
}