/* RBK/BKB V3.9 — FINAL MOBILE + UX PATCH
   Load AFTER style.css.
   Purpose: mobile-first polish without rebuilding the existing portal. */

:root{
  --v38-safe-top: env(safe-area-inset-top,0px);
  --v38-safe-bottom: env(safe-area-inset-bottom,0px);
}

html{scroll-padding-top:96px}
.scroll-top-btn{
  position:fixed;right:18px;bottom:24px;z-index:115;
  width:48px;height:48px;border:0;border-radius:50%;
  background:#2c1738;color:#f0cf7f;font-size:22px;font-weight:900;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .25s ease;
}
.scroll-top-btn.is-visible{opacity:1;transform:none;pointer-events:auto}
.scroll-top-btn:active{transform:scale(.94)}
.media-archive-section{display:none!important}

/* More perceptible scroll animations */
.reveal{transform:translateY(34px);transition:opacity .68s ease,transform .68s cubic-bezier(.2,.7,.2,1)}
.reveal.reveal-left{transform:translateX(-34px)}
.reveal.reveal-right{transform:translateX(34px)}
.reveal.visible{transform:none}

/* V3.9.1 — premium split hero for Giving, without stretching the portrait. */
.donation-hero-v391{
  min-height:560px;
  background:linear-gradient(135deg,#25122f 0%,#3a1d47 56%,#efe5d6 56%,#f7f1e8 100%);
}
.donation-hero-v391>img{
  inset:0 0 0 auto;
  width:48%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
}
.donation-hero-v391 .hero-shade{
  background:linear-gradient(90deg,rgba(23,11,29,.98) 0%,rgba(39,18,47,.94) 45%,rgba(39,18,47,.48) 58%,rgba(39,18,47,.04) 78%);
}
.donation-hero-v391 .sub-hero-copy{width:min(1240px,90vw)}
.donation-hero-v391 .sub-hero-copy>*{max-width:48%}

/* Four recurring appointments stay balanced on wide screens. */
.weekly-home .section-head{margin-bottom:24px}
.weekly-home .schedule-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.weekly-home .schedule-card{min-height:184px;padding:22px}

/* Calm editorial cards: image, concise title, duration and play. */
.media-card h3 a,.message-tile h3,.message-featured h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

@media(max-width:1100px) and (min-width:901px){
  .weekly-home .schedule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tactile feedback: mobile has no hover */
.book-card:active,.message-featured:active,.message-tile:active,.press-card:active,.btn:active{
  transform:scale(.985)
}

/* About photo: dedicated image and tighter balance */
.reverend-preview{gap:clamp(24px,4vw,60px)}
.reverend-preview h2{font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.02}

/* Reflet 2027 */
.reflet-v38-preview{
  width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;
  background:#24132f;box-shadow:0 24px 60px rgba(29,15,36,.2);margin-top:22px
}
.reflet-v38-preview canvas{width:100%;height:100%;display:block}
.reflet-v38-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Audio prayers */
.audio-prayers-hero{position:relative;overflow:hidden;border-radius:28px;min-height:420px;color:#fff}
.audio-prayers-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.audio-prayers-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,9,18,.94),rgba(20,12,24,.36))}
.audio-prayers-hero>div{position:relative;z-index:2;max-width:700px;padding:60px}
.audio-list{display:grid;gap:12px}
.audio-card{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.audio-card button{width:48px;height:48px;border:0;border-radius:50%;background:var(--plum);color:#fff}

/* Facebook should never overflow */
.facebook-embed,.fb-page-frame,.facebook-section iframe{max-width:100%!important}
.facebook-deferred{
  min-height:260px;border:1px solid var(--line);border-radius:20px;background:#fff;
  display:grid;place-items:center;text-align:center;padding:28px
}

@media(max-width:900px){
  html{scroll-padding-top:calc(82px + var(--v38-safe-top))}
  .site-header{padding-top:var(--v38-safe-top)}
  .nav-shell{height:72px}
  .mobile-nav{
    top:calc(72px + var(--v38-safe-top))!important;
    max-height:calc(100dvh - 72px - var(--v38-safe-top) - var(--v38-safe-bottom))!important;
    overscroll-behavior:contain;
  }
  .mobile-nav.open{padding-bottom:calc(30px + var(--v38-safe-bottom))}
  .mobile-nav a{min-height:48px;display:flex;align-items:center}
  .menu-btn{min-width:48px;min-height:48px}
  .mobile-give-btn{min-height:46px;padding-inline:15px}

  .mobile-dock{
    left:10px;right:10px;
    bottom:calc(10px + var(--v38-safe-bottom))!important;
    padding:8px;
    transition:transform .22s ease,opacity .22s ease;
  }
  .mobile-dock a{font-size:11px!important;min-height:50px}
  .mobile-dock span{font-size:19px!important}
  body.keyboard-open .mobile-dock{transform:translateY(150%);opacity:0;pointer-events:none}
  .scroll-top-btn{
    right:16px;
    bottom:calc(92px + var(--v38-safe-bottom));
  }
  body.keyboard-open .scroll-top-btn{opacity:0!important;pointer-events:none!important}

  /* Mobile hero must fit the device, including short screens */
  .home-hero{height:100svh!important;min-height:640px!important;max-height:none!important}
  .home-hero picture img{object-position:50% 42%!important}
  .home-hero-copy{
    left:22px!important;right:22px!important;
    bottom:calc(92px + var(--v38-safe-bottom))!important;
    max-width:620px!important
  }
  .home-hero h1{font-size:clamp(38px,10.8vw,52px)!important;line-height:1.01!important}
  .home-hero-copy .hero-name{font-size:17px!important}
  .hero-cta{gap:10px!important}
  .hero-cta .btn{min-height:50px}

  /* Internal heroes are too tall when repeated on every page */
  .sub-hero{min-height:390px!important}
  .sub-hero-copy{padding:84px 0 38px!important}
  .sub-hero h1{font-size:clamp(38px,10vw,52px)!important;line-height:1.02}
  .sub-hero strong{font-size:15px!important;line-height:1.5}

  .donation-hero-v391{
    display:flex!important;
    flex-direction:column;
    min-height:0!important;
    background:#2c1738;
  }
  .donation-hero-v391>img{
    position:relative!important;
    inset:auto!important;
    order:0;
    width:100%!important;
    height:clamp(300px,62vw,440px)!important;
    object-fit:cover!important;
    object-position:center 24%!important;
  }
  .donation-hero-v391 .hero-shade{display:none}
  .donation-hero-v391 .sub-hero-copy{
    order:1;
    width:100%!important;
    padding:34px 5vw 42px!important;
    margin:0!important;
    background:linear-gradient(135deg,#24122d,#3b2146);
  }
  .donation-hero-v391 .sub-hero-copy>*{max-width:none}

  /* Agenda/programme becomes thumb-friendly rail */
  .schedule-grid{
    display:flex!important;overflow-x:auto;gap:14px!important;
    scroll-snap-type:x mandatory;padding:4px 2px 12px;
    scrollbar-width:none
  }
  .schedule-grid::-webkit-scrollbar{display:none}
  .schedule-grid>.schedule-card,.schedule-grid>.empty-card{
    flex:0 0 min(82vw,340px);scroll-snap-align:start;min-height:184px
  }

  /* About should lead with the person on mobile */
  .reverend-preview{grid-template-columns:1fr!important}
  .reverend-preview-photo{order:0!important}
  .reverend-preview>div:last-child{order:1!important}
  .reverend-preview h2{font-size:clamp(36px,9.5vw,48px)!important}
  .reverend-preview-photo img{border-radius:22px!important}

  /* Dense utility pages */
  .media-detail{grid-template-columns:1fr!important}
  .media-meta{position:static!important}
  .resource-item{min-height:72px}
  .stay-connected{flex-direction:column!important;align-items:flex-start!important}

  /* Forms + iOS zoom prevention */
  input,select,textarea{font-size:16px!important}
  button,.btn,a.give-btn,a.mobile-give-btn{touch-action:manipulation}

  /* Press: home should not be endless on mobile */
  .press-home .press-card:nth-child(n+4){display:none!important}
}

@media(max-width:700px){
  /* The technical catalog table is not a mobile experience */
  .catalog-table-wrap,.catalog-table{display:none!important}

  /* Home books: visible next-card cue */
  .home-books .book-grid.six{
    display:flex!important;overflow-x:auto!important;gap:15px!important;
    scroll-snap-type:x mandatory!important;padding-right:18vw!important;
    scrollbar-width:none
  }
  .home-books .book-grid.six::-webkit-scrollbar{display:none}
  .home-books .book-card{flex:0 0 78vw!important;scroll-snap-align:start}

  /* Reflection form must be comfortable in portrait */
  .reflection-page{grid-template-columns:1fr!important}
  .reflection-intro{position:static!important;padding-right:0!important}
  .reflet-v38-preview{border-radius:16px}
}

@media(max-width:560px){
  .section{padding-top:50px!important;padding-bottom:50px!important}
  .home-hero{min-height:620px!important}
  .home-hero h1{font-size:clamp(36px,10.5vw,44px)!important}
  .hero-cta{display:grid!important}
  .hero-cta .btn{width:100%!important}

  .sub-hero{min-height:330px!important}
  .sub-hero-copy{padding-top:74px!important}

  .message-featured{min-height:460px!important;border-radius:20px!important}
  .message-featured-copy{left:20px!important;right:20px!important;bottom:24px!important}
  .message-featured-copy h3{font-size:34px!important;line-height:1.02!important}
  .message-featured-copy p{font-size:14px!important}
  .message-pair{grid-template-columns:1fr!important}
  .message-tile{min-height:250px!important}
  .message-tile h3{font-size:22px!important}
  .media-card>h3{font-size:22px!important;line-height:1.12!important}
  .media-thumb:after{width:64px;height:64px;font-size:23px}

  .book-copy>h2{font-size:clamp(32px,9vw,40px)!important;line-height:1.03!important}
  .meta-list>div{grid-template-columns:1fr!important}

  .daily-card{min-height:260px!important}
  .daily-card h2{font-size:31px!important}
  .online-preview{min-height:500px!important}
  .online-copy h2{font-size:39px!important}

  .footer-main a{font-size:14px!important}
  .footer-main b{font-size:11px!important}
  .footer-bottom{font-size:11px!important;color:rgba(255,255,255,.68)!important}

  .audio-prayers-hero{min-height:360px}
  .audio-prayers-hero>div{padding:34px 24px}
  .audio-card{grid-template-columns:48px 1fr}
  .audio-card>span:last-child{grid-column:2}
}

@media(max-width:430px){
  .nav-shell{padding-inline:10px!important}
  .brand img{width:38px!important;height:38px!important}
  .mobile-give-btn{font-size:11px!important;padding-inline:12px!important}
  .menu-btn b{display:none!important}
  .home-hero-copy{left:18px!important;right:18px!important}
  .home-hero h1{font-size:39px!important}
  .home-books .book-card{flex-basis:82vw!important}
}

@media(max-width:340px){
  .home-hero h1{font-size:34px!important}
  .hero-cta .btn{font-size:10px!important;padding-inline:12px!important}
  .mobile-dock a{font-size:10px!important}
}

/* Short phones: don't force a 720px hero */
@media(max-width:900px) and (max-height:700px){
  .home-hero{min-height:100svh!important}
  .home-hero-copy{bottom:calc(78px + var(--v38-safe-bottom))!important}
  .home-hero h1{font-size:clamp(33px,8.7vw,42px)!important}
  .home-hero-copy .hero-name{margin-bottom:8px!important}
  .hero-cta .btn{min-height:44px!important}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal,.home-hero picture img,.book-card,.message-featured,.message-tile{
    animation:none!important;transition:none!important;transform:none!important
  }
}


/* V3.9 complete build refinements */
.order-options{margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;display:grid;gap:10px}
.order-options[hidden]{display:none!important}.order-options .btn{justify-content:center}.order-trigger[aria-expanded="true"]{background:var(--plum);color:#fff}
.media-player-deferred{cursor:pointer}.media-player-deferred .deferred-play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border:0;border-radius:50%;background:var(--gold);color:#24132f;font-size:28px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.media-player-deferred:focus-within{outline:3px solid var(--gold2);outline-offset:4px}
.audio-empty{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--muted)}
.spiritual-heritage.no-photo{grid-template-columns:1fr;max-width:1000px;margin-inline:auto}.spiritual-heritage.no-photo .heritage-copy{max-width:800px}.heritage-symbol{display:none!important}
.reflection-page-v39{grid-template-columns:minmax(0,.78fr) minmax(360px,1.1fr)}
.reflection-intro .event-kicker{color:var(--gold-dark);font-weight:900;letter-spacing:.08em}
.reflet-v39-preview{width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#24132f;box-shadow:0 24px 60px rgba(29,15,36,.2);margin-top:22px}.reflet-v39-preview canvas{width:100%;height:100%;display:block}.reflet-v39-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.reflet-status{font-size:13px;color:var(--muted);margin-top:12px}.consent-stack{display:grid;gap:10px;margin-top:4px}.consent-stack .check{display:flex;align-items:flex-start;gap:10px}.consent-stack input{margin-top:4px;min-height:0!important}
.press-home .press-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.prayer-faith-primary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}.prayer-faith-primary>a{border:1px solid var(--line);border-radius:22px;background:#fff;padding:26px;color:inherit}.prayer-faith-primary span{font-size:26px}.prayer-faith-primary h3{font:500 25px/1.08 var(--serif);margin:12px 0 0}.prayer-faith-primary small{font-weight:900;letter-spacing:.1em;color:var(--violet)}
.path-grid.secondary-paths{opacity:.96}
@media(max-width:900px){.press-home .press-grid{grid-template-columns:1fr}.prayer-faith-primary{grid-template-columns:1fr 1fr}.reflection-page-v39{grid-template-columns:1fr}.reflet-v39-preview{border-radius:16px}}
@media(max-width:560px){.prayer-faith-primary{grid-template-columns:1fr}.media-player-deferred .deferred-play{width:58px;height:58px;font-size:22px}.reflet-v39-actions{display:grid}.reflet-v39-actions .btn{width:100%}}
/* V3.9 final refinements after offline Chromium render review */
@media(max-width:900px){
  .brand img{width:62px!important;height:auto!important;max-height:44px!important;object-fit:contain!important}
  .brand{min-width:62px;min-height:44px;display:flex;align-items:center}
  .section-head>a,.press-card>a,.media-card>a,.event-list a{display:inline-flex;align-items:center;min-height:30px}
}
@media(max-width:430px){
  .brand img{width:58px!important;height:auto!important;max-height:42px!important}
  .brand{min-width:58px}
}
@media(max-width:900px){
  .footer-main a{min-height:32px;display:flex;align-items:center}
}