/* =====================================================================
   VESPERS — Home-only additions
   Featured Books rail + Testimonies carousel. Inherits :root from main.css.
   (Book cover component comes from books.css, also loaded on this page.)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Featured books
   --------------------------------------------------------------------- */
.home-books{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.home-books-lead{max-width:60ch; margin-top:14px;}
.hb-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,32px); margin-top:clamp(26px,3vw,38px);}
.hb-card{display:flex; flex-direction:column; gap:14px; color:var(--fg1);}
.hb-card .bookcover{transition:transform .45s var(--ease), box-shadow .45s var(--ease);}
.hb-card .bk-theme{font:700 .62rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow-ink);}
.hb-t{display:block; font:600 1.18rem/1.14 var(--font-display); color:var(--fg1); margin-top:2px; transition:color .25s;}
.hb-sub{display:block; font:italic 500 .9rem/1.4 var(--font-display); color:var(--fg2); margin-top:5px;}
@media (hover:hover){
  .hb-card:hover .bookcover{transform:translateY(-6px) rotate(-1deg); box-shadow:0 30px 60px -22px rgba(20,22,46,.55);}
  .hb-card:hover .hb-t{color:var(--accent-strong);}
}
@media (min-width:980px){ .hb-grid{grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.4vw,34px);} }

/* ---------------------------------------------------------------------
   Testimonies carousel — 4 visible on desktop, scroll-snap, gentle motion
   --------------------------------------------------------------------- */
.tcar{position:relative; margin-top:clamp(24px,2vw,40px);}
.tcar-track{display:flex; gap:18px; margin:0; padding:6px 2px 16px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;}
.tcar-track::-webkit-scrollbar{display:none;}
.tcar-slide{flex:0 0 100%; min-width:0; scroll-snap-align:start;}
.tcar-slide .tcard{height:100%; transform:none;}
.tcar-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px;}
.tcar-btn{flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--border-strong); color:var(--fg2);
  display:flex; align-items:center; justify-content:center; transition:color .25s, border-color .25s, background-color .25s, transform .16s var(--ease), opacity .25s;}
.tcar-btn:active{transform:scale(.94);}
.tcar-btn[disabled]{opacity:.32; cursor:default;}
@media (hover:hover){ .tcar-btn:not([disabled]):hover{border-color:var(--gilt-500); color:var(--accent-strong); background:var(--gilt-100);} }
.tcar-dots{display:flex; align-items:center; gap:9px;}
.tcar-dots button{width:8px; height:8px; padding:0; min-width:0; border-radius:50%; background:var(--border-strong);
  transition:background-color .25s, transform .25s;}
.tcar-dots button.is-active{background:var(--gilt-500); transform:scale(1.3);}
@media (min-width:560px){ .tcar-slide{flex-basis:calc((100% - 18px) / 2);} }
@media (min-width:1000px){ .tcar-slide{flex-basis:calc((100% - 54px) / 4);} }

@media (prefers-reduced-motion:reduce){
  .tcar-track{scroll-behavior:auto;}
  .hb-card .bookcover{transition:none !important;}
}

/* ── VISION — "Join the movement" modal ──────────────────────────────────
   Shown by :target (works with JS off) or by .is-open (JS-enhanced). */
.vjoin{position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:24px;}
.vjoin:target, .vjoin.is-open{display:flex;}
.vjoin-backdrop{position:absolute; inset:0; background:rgba(20,22,46,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border:0; cursor:pointer;}
.vjoin-card{position:relative; width:100%; max-width:560px; max-height:calc(100dvh - 48px); overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(20,22,46,.45); padding:36px 32px 28px;
  animation:vjoin-in .42s var(--ease-veil) both; -webkit-overflow-scrolling:touch;}
@keyframes vjoin-in{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
.vjoin-close{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:0;
  display:inline-flex; align-items:center; justify-content:center; color:var(--fg2); background:transparent; cursor:pointer;
  text-decoration:none; transition:background-color .2s, color .2s;}
.vjoin-close:hover{background:var(--surface-sunken); color:var(--fg1);}
.vjoin-close:focus-visible{outline:2px solid var(--gilt-700); outline-offset:2px;}
.vjoin-seal{width:60px; height:60px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--parchment-200); color:var(--accent-strong); box-shadow:0 0 0 6px rgba(198,164,92,.14); margin-bottom:14px;}
.vjoin-body{text-align:center;}
.vjoin-body h2{font:600 1.6rem/1.18 var(--font-display); color:var(--fg1); margin:0 0 8px; letter-spacing:.2px;}
.vjoin-intro{font:400 1rem/1.6 var(--font-body); color:var(--fg2); margin:0 auto 22px; max-width:42ch;}
.vjoin-form{text-align:left;}
.vjoin-grid2{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:520px){ .vjoin-grid2{grid-template-columns:1fr 1fr;} }
.vjoin-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px;}
.vjoin-actions .btn{margin:0;}
/* Block, never flex — a flex container blockifies the inline Privacy Policy link. */
.vjoin-privacy{display:block; margin:16px 0 0; font:400 .82rem/1.5 var(--font-body); color:var(--fg2);}
.vjoin-privacy > vm-icon{vertical-align:-.15em; margin-right:7px; color:var(--accent-strong);}
.vjoin-privacy a{color:var(--accent-strong); text-underline-offset:2px;}
.vjoin-success{text-align:center; padding:8px 4px;}
.vjoin-success[hidden]{display:none !important;}
.vjoin-success-mark{width:72px; height:72px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--parchment-200); color:var(--accent-strong); box-shadow:0 0 0 6px rgba(198,164,92,.14); margin-bottom:14px;}
.vjoin-success h2{font:600 1.5rem/1.2 var(--font-display); color:var(--fg1); margin:0 0 8px;}
.vjoin-success p{font:400 1rem/1.6 var(--font-body); color:var(--fg2); margin:0 auto 18px; max-width:38ch;}
.vjoin-success-cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.vjoin-success-cta .btn{margin:0;}
@media (max-width:520px){
  .vjoin{padding:0; align-items:flex-end;}
  .vjoin-card{max-width:none; border-radius:18px 18px 0 0; max-height:94dvh; padding:28px 20px 22px; animation-name:vjoin-up;}
  @keyframes vjoin-up{from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:none;}}
}
@media (prefers-reduced-motion:reduce){ .vjoin-card{animation:none;} }

/* ── Homepage promo — "Purpose Discovery" master class ─────────────────────
   A picture-led pop-up: only the promo image + two CTAs. Sits above the cookie
   consent bar (z 1200) so its actions are never covered. Ships hidden. */
.vpromo{position:fixed; inset:0; z-index:1260; display:none; align-items:center; justify-content:center; padding:22px;}
.vpromo[hidden]{display:none !important;}
.vpromo.is-open{display:flex;}
.vpromo-backdrop{position:absolute; inset:0; background:rgba(20,22,46,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:0; padding:0; margin:0; cursor:pointer;}
.vpromo-card{position:relative; width:100%; max-width:460px; max-height:calc(100dvh - 44px); overflow:hidden;
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--hairline-gold); border-radius:20px;
  box-shadow:var(--glow-gold), 0 30px 80px -20px rgba(20,22,46,.5);
  animation:vpromo-in .52s var(--ease-sanctuary) both;}
@keyframes vpromo-in{from{opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:none;}}
.vpromo-media{display:block; line-height:0; background:var(--ink-900); overflow:hidden;}
.vpromo-media img{display:block; width:100%; height:auto;}
.vpromo-close{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--fg-on-dark-1); background:rgba(20,22,46,.44); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background-color .2s, transform .2s;}
.vpromo-close:hover{background:rgba(20,22,46,.64); transform:scale(1.05);}
.vpromo-close:focus-visible{outline:2px solid var(--gilt-300); outline-offset:2px;}
.vpromo-actions{display:flex; gap:12px; padding:16px; background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.vpromo-btn{margin:0; flex:1 1 0; justify-content:center;}
@media (max-width:520px){
  .vpromo{padding:0; align-items:flex-end;}
  .vpromo-card{max-width:none; border-radius:20px 20px 0 0; max-height:94dvh; animation-name:vpromo-up;}
  @keyframes vpromo-up{from{opacity:0; transform:translateY(48px);} to{opacity:1; transform:none;}}
  .vpromo-actions{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){ .vpromo-card{animation:none;} }