/* ==========================================================================
   The content pages' shared look: Church News, Club Events, Testimonies,
   Fellowship, Jobs, Transport, Products and Services, lists and details.

   Load it through templates/partials/_pages_head.html (inside
   {% block extra_head %}), which also brings the display serif. The colour
   tokens (--vh-*) and the .vh-btn buttons come from shell.css, so these
   pages follow the light/dark switch with the rest of the site.

   Page skeleton:

     <div class="content vp-page">
       <div class="vp-wrap">
         <nav class="vp-crumbs">…</nav>
         <section class="vp-hero vp-hero--light">…</section>
         <div class="vp-layout vp-layout--aside-right">
           <div class="vp-main">…sections…</div>
           <aside class="vp-aside">…panels…</aside>
         </div>
       </div>
     </div>

   Each block below starts with the markup it expects. Page-specific rules
   belong in the page's own stylesheet, not here.
   ========================================================================== */

:root {
  --vp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --vp-radius: 18px;
  --vp-radius-sm: 12px;
  --vp-gap: 1.25rem;
  --vp-shadow: 0 1px 2px rgba(43, 29, 22, 0.04), 0 8px 24px -18px rgba(60, 30, 20, 0.35);
  --vp-shadow-hover: 0 18px 38px -20px rgba(60, 30, 20, 0.5);
  --vp-hero-bg: linear-gradient(120deg, #fff4e6 0%, #f7d9b9 100%);
  --vp-warm-bg: linear-gradient(135deg, #fff4e6 0%, #fde6cf 100%);
  --vp-gold: #f3b63f;
  --vp-gold-ink: #3b230f;
  --vp-star: #f2a516;
}
[data-bs-theme="dark"] {
  --vp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -18px rgba(0, 0, 0, 0.8);
  --vp-shadow-hover: 0 18px 38px -20px rgba(0, 0, 0, 0.9);
  --vp-hero-bg: linear-gradient(120deg, #2a1e18 0%, #3b2a21 100%);
  --vp-warm-bg: linear-gradient(135deg, #2c201a 0%, #3a2a21 100%);
}

body { background: var(--vh-cream); }

/* ------------------------------------------------------------------ page */

.content.vp-page {
  padding-top: calc(var(--phoenix-navbar-top-height) + 1.25rem);
  padding-bottom: 2.5rem;
  color: var(--vh-body);
}
.vp-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--vp-gap);
  max-width: 1560px;
  margin: 0 auto;
  min-width: 0;
}
/* Phoenix pads every <section>; these pages space their blocks themselves.
   :where() keeps this at a bare element's weight, so .vp-hero, .vp-panel and
   .vp-cta keep their own padding when they are <section>s. */
:where(.vp-page) section { padding: 0; }
.vp-page img { max-width: 100%; }

.vp-serif { font-family: var(--vp-serif); }
.vp-muted { color: var(--vh-muted); }
.vp-clamp-1, .vp-clamp-2, .vp-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vp-clamp-1 { -webkit-line-clamp: 1; }
.vp-clamp-2 { -webkit-line-clamp: 2; }
.vp-clamp-3 { -webkit-line-clamp: 3; }
/* Makes a whole card one link: put it on the card's main <a>; other buttons
   inside the card need position: relative; z-index: 2 (.vp-over does that). */
.vp-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vp-over { position: relative; z-index: 2; }

/* --------------------------------------------------------------- buttons */
/* Additions to shell.css's .vh-btn / .vh-btn--grad / .vh-btn--ghost. */

.vh-btn--outline {
  background: var(--vh-surface);
  border-color: rgba(111, 53, 39, 0.35);
  color: var(--vh-brown) !important;
}
.vh-btn--outline:hover { background: var(--vh-brown); border-color: var(--vh-brown); color: #fff !important; }
.vh-btn--white { background: #fff; color: #6f3527 !important; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35); }
.vh-btn--white:hover { transform: translateY(-1px); }
.vh-btn--glass {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff !important;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.vh-btn--glass:hover { background: rgba(255, 255, 255, 0.22); }
.vh-btn--wa { background: var(--vh-surface); border-color: #25a85a; color: #17803f !important; }
.vh-btn--wa:hover { background: #25a85a; color: #fff !important; }
.vh-btn--block { width: 100%; }
.vh-btn--lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; }
.vh-btn[disabled], .vh-btn.is-disabled { opacity: 0.55; pointer-events: none; }

/* A round icon button: <button class="vp-iconbtn" aria-label="…"><i …></i></button> */
.vp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--vh-line);
  border-radius: 50%;
  background: var(--vh-surface);
  color: var(--vh-brown);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.vp-iconbtn:hover { background: var(--vh-brown); border-color: var(--vh-brown); color: #fff; }
.vp-iconbtn:focus-visible, .vp-tab:focus-visible, .vp-cat:focus-visible, .vp-card a:focus-visible,
.vp-more:focus-visible, .vp-row:focus-visible, .vp-react:focus-visible, .vp-pager a:focus-visible {
  outline: 3px solid var(--vh-focus);
  outline-offset: 2px;
}
.vp-iconbtn.is-on { color: #d2382b; }

/* ----------------------------------------------------------- breadcrumbs */
/* <nav class="vp-crumbs" aria-label="Breadcrumb"><ol>
     <li><a href="…"><i class="fa-solid fa-house"></i> Home</a></li>
     <li><a href="…">Club Events</a></li>
     <li aria-current="page">Acts of Compassion</li></ol></nav> */

.vp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--vh-muted);
}
.vp-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.vp-crumbs li + li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.vp-crumbs a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--vh-orange); text-decoration: none; }
.vp-crumbs a:hover { color: var(--vh-brown); text-decoration: underline; }
.vp-crumbs li[aria-current] {
  display: block;
  overflow: hidden;
  max-width: 22rem;
  color: var(--vh-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-crumbs li[aria-current]::before { display: inline-block; margin: 0 0.6rem 0.12rem 0.1rem; vertical-align: middle; }

/* ------------------------------------------------------------------ hero */
/* <section class="vp-hero vp-hero--light">            (or --dark; + --compact)
     <img class="vp-hero__media" src="…" alt="">        (optional)
     <div class="vp-hero__body">
       <span class="vp-hero__kicker"><i class="fa-solid fa-newspaper"></i> Church News</span>
       <h1 class="vp-hero__title">Church News <em>&amp; Stories</em></h1>
       <p class="vp-hero__lead">…</p>
       <div class="vp-hero__actions"><a class="vh-btn vh-btn--grad" …>…</a></div>
     </div>
     <div class="vp-hero__aside">                       (optional; hidden on phones)
       <figure class="vp-quote-card"><blockquote>…</blockquote><figcaption>— Matthew 5:16</figcaption></figure>
     </div>
   </section>
   --light: warm cream, the photo on the right fading into it, dark words.
   --dark: the photo fills the banner under a dark warm veil, white words. */

.vp-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 14.5rem;
  padding: 2rem 2.25rem;
  overflow: hidden;
  border-radius: 22px;
  background: var(--vp-hero-bg);
  box-shadow: 0 14px 34px -24px rgba(60, 30, 20, 0.55);
  isolation: isolate;
}
.vp-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 42%);
}
.vp-hero__body { position: relative; min-width: 0; max-width: 34rem; }
.vp-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: var(--vp-gold);
  color: var(--vp-gold-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.vp-hero__title {
  margin: 0 0 0.6rem;
  font-family: var(--vp-serif);
  font-size: clamp(2rem, 3.4vw, 3.05rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--vh-ink);
  overflow-wrap: break-word;
}
.vp-hero__title em { font-style: italic; font-weight: 700; color: var(--vh-orange); }
.vp-hero__lead {
  max-width: 30rem;
  margin: 0 0 1.15rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vh-body);
}
.vp-hero__lead:last-child { margin-bottom: 0; }
.vp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vp-hero__aside { position: relative; flex: 0 1 19rem; min-width: 0; }

/* A search box inside the hero (the Marketplace):
   <form class="vp-hero__search" role="search"><i class="fa-solid fa-magnifying-glass"></i>
     <input type="search" …><button class="vh-btn vh-btn--grad">Search</button></form> */
.vp-hero__search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 31rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: 999px;
  background: var(--vh-surface);
  box-shadow: 0 10px 26px -14px rgba(60, 30, 20, 0.5);
}
.vp-hero__search > i, .vp-hero__search > .svg-inline--fa { color: var(--vh-muted); }
.vp-hero__search input {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  color: var(--vh-ink);
  font-size: 0.9rem;
}
.vp-hero__search input:focus { outline: none; }
.vp-hero__search:focus-within { box-shadow: 0 0 0 4px rgba(200, 97, 45, 0.18), 0 10px 26px -14px rgba(60, 30, 20, 0.5); }

/* Real numbers only (counts from the database), never invented ones:
   <dl class="vp-hero__stats"><div><dt>Vehicles</dt><dd>24</dd></div>…</dl> */
.vp-hero__stats { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin: 1.1rem 0 0; }
.vp-hero__stats div { display: flex; flex-direction: column-reverse; }
.vp-hero__stats dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vh-muted); }
.vp-hero__stats dd { margin: 0; font-family: var(--vp-serif); font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--vh-brown); }

.vp-hero--dark { background: #2b170f; color: #fff; }
.vp-hero--dark .vp-hero__media { width: 100%; -webkit-mask-image: none; mask-image: none; }
.vp-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(36, 17, 9, 0.94) 0%,
    rgba(36, 17, 9, 0.82) 38%,
    rgba(36, 17, 9, 0.4) 70%,
    rgba(36, 17, 9, 0.18) 100%);
}
.vp-hero--dark .vp-hero__title { color: #fff; }
.vp-hero--dark .vp-hero__title em { color: #f4c25a; }
.vp-hero--dark .vp-hero__lead { color: rgba(255, 255, 255, 0.88); }
.vp-hero--dark .vp-hero__stats dt { color: rgba(255, 255, 255, 0.7); }
.vp-hero--dark .vp-hero__stats dd { color: #f4c25a; }

.vp-hero--compact { min-height: 11.5rem; padding: 1.6rem 2rem; }
.vp-hero--compact .vp-hero__title { font-size: clamp(1.75rem, 2.8vw, 2.45rem); }
.vp-hero--compact .vp-hero__lead { margin-bottom: 0.9rem; font-size: 0.95rem; }

/* The scripture card beside the hero's words. */
.vp-quote-card {
  margin: 0;
  padding: 1.1rem 1.25rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px -18px rgba(60, 30, 20, 0.55);
  color: var(--vh-ink);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.vp-quote-card blockquote { position: relative; margin: 0; padding-left: 1.6rem; }
.vp-quote-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: 0;
  font-family: var(--vp-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--vh-orange);
}
.vp-quote-card p { margin: 0; font-family: var(--vp-serif); font-size: 0.98rem; font-style: italic; line-height: 1.45; }
.vp-quote-card figcaption { margin-top: 0.55rem; padding-left: 1.6rem; font-size: 0.8rem; font-weight: 800; color: var(--vh-orange); }
.vp-hero--dark .vp-quote-card { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.12); color: #fff; }
.vp-hero--dark .vp-quote-card blockquote::before,
.vp-hero--dark .vp-quote-card figcaption { color: #f4c25a; }

/* --------------------------------------------------------- trust strip */
/* <ul class="vp-strip"><li class="vp-strip__item"><i class="fa-solid fa-circle-check"></i> Verified Providers</li>…</ul> */

.vp-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 0.85rem 1.25rem;
  list-style: none;
  border: 1px solid var(--vh-line);
  border-radius: var(--vp-radius);
  background: var(--vh-surface);
}
.vp-strip__item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; font-weight: 700; color: var(--vh-ink); }
.vp-strip__item i, .vp-strip__item .svg-inline--fa { font-size: 1.05rem; color: var(--vh-orange); }

/* ------------------------------------------------------ category tiles */
/* <nav class="vp-cats" aria-label="Categories">
     <a class="vp-cat is-active" href="…" aria-current="page">
       <span class="vp-cat__icon"><i class="fa-solid fa-table-cells-large"></i></span>
       <span class="vp-cat__label">All</span></a>
     <a class="vp-cat vp-tone-3" href="…"><span class="vp-cat__icon"><img src="…" alt=""></span>…</a>
   </nav>
   Add .vp-cats--photos for tiles whose picture fills the top (Marketplace).
   The row scrolls sideways when it does not fit. */

.vp-cats {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0.2rem 0.1rem 0.55rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 53, 39, 0.25) transparent;
}
.vp-cat {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 6.5rem;
  min-height: 6.5rem;
  padding: 0.75rem 0.45rem;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  background: var(--vh-surface);
  color: var(--vh-ink);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.vp-cat:hover { border-color: rgba(200, 97, 45, 0.45); color: var(--vh-ink); box-shadow: var(--vp-shadow); transform: translateY(-2px); }
.vp-cat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--vp-tone-bg, rgba(200, 97, 45, 0.1));
  color: var(--vp-tone, var(--vh-orange));
  font-size: 1.2rem;
}
.vp-cat__icon img { width: 100%; height: 100%; object-fit: cover; }
.vp-cat__label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.vp-cat__count { font-size: 0.68rem; font-weight: 700; color: var(--vh-muted); }
.vp-cat.is-active, .vp-cat[aria-current="page"] {
  border-color: transparent;
  background: var(--vh-grad);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(111, 53, 39, 0.75);
}
.vp-cat.is-active .vp-cat__icon, .vp-cat[aria-current="page"] .vp-cat__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vp-cat.is-active .vp-cat__count, .vp-cat[aria-current="page"] .vp-cat__count { color: rgba(255, 255, 255, 0.85); }

.vp-cats--photos .vp-cat { justify-content: flex-start; width: 7.75rem; padding: 0; overflow: hidden; }
.vp-cats--photos .vp-cat__icon { width: 100%; height: auto; aspect-ratio: 1.2; border-radius: 0; }
.vp-cats--photos .vp-cat__label { padding: 0.5rem 0.45rem 0.6rem; }

/* Pastel icon tones, as in the designs. */
.vp-tone-1 { --vp-tone: #c8612d; --vp-tone-bg: #fdeadb; }
.vp-tone-2 { --vp-tone: #d0457a; --vp-tone-bg: #fde4ee; }
.vp-tone-3 { --vp-tone: #7b4fd0; --vp-tone-bg: #efe7fd; }
.vp-tone-4 { --vp-tone: #2f7fd1; --vp-tone-bg: #e2effd; }
.vp-tone-5 { --vp-tone: #2f9a5b; --vp-tone-bg: #e1f5e8; }
.vp-tone-6 { --vp-tone: #1f9a9a; --vp-tone-bg: #ddf4f3; }
.vp-tone-7 { --vp-tone: #c9891b; --vp-tone-bg: #fdf1d6; }
.vp-tone-8 { --vp-tone: #6f3527; --vp-tone-bg: #f3e4dc; }
[data-bs-theme="dark"] [class*="vp-tone-"] { --vp-tone-bg: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .vp-tone-8 { --vp-tone: #e2b48d; }

/* -------------------------------------------------------- tabs & chips */
/* <div class="vp-tabs" role="tablist">            (or a <nav> of links)
     <a class="vp-tab is-active" href="…" aria-current="page"><i …></i> Upcoming <span class="vp-tab__count">4</span></a>
   </div> */

.vp-tabs {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.vp-tabs::-webkit-scrollbar { display: none; }
.vp-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--vh-line);
  border-radius: 999px;
  background: var(--vh-surface);
  color: var(--vh-ink);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vp-tab:hover { border-color: rgba(200, 97, 45, 0.45); color: var(--vh-brown); }
.vp-tab.is-active, .vp-tab[aria-selected="true"], .vp-tab[aria-current="page"] {
  border-color: transparent;
  background: var(--vh-grad);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(111, 53, 39, 0.75);
}
.vp-tab__count {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(111, 53, 39, 0.1);
  font-size: 0.7rem;
  font-weight: 800;
}
.vp-tab.is-active .vp-tab__count, .vp-tab[aria-selected="true"] .vp-tab__count,
.vp-tab[aria-current="page"] .vp-tab__count { background: rgba(255, 255, 255, 0.22); }

/* Small filter chips / tags: <a class="vp-chip is-active" …>Retreat</a> */
.vp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.vp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--vh-line);
  border-radius: 999px;
  background: var(--vh-surface);
  color: var(--vh-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}
.vp-chip:hover { border-color: rgba(200, 97, 45, 0.45); color: var(--vh-brown); }
.vp-chip.is-active { border-color: transparent; background: rgba(168, 77, 28, 0.12); color: var(--vh-orange); }

/* ------------------------------------------------------------ toolbar */
/* <form class="vp-toolbar" role="search">
     <label class="vp-field"><i class="fa-solid fa-magnifying-glass"></i>
       <span class="visually-hidden">Search</span><input class="vp-input" type="search" …></label>
     <select class="vp-select" …>…</select>
     <button class="vh-btn vh-btn--outline">…</button>
   </form>
   <p class="vp-count"><strong>32</strong> testimonies found</p> */

.vp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; }
.vp-field { position: relative; display: block; flex: 1 1 16rem; min-width: 0; margin: 0; }
.vp-field > i, .vp-field > .svg-inline--fa {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  color: var(--vh-muted);
  font-size: 0.85rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.vp-input, .vp-select, .vp-textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border: 1px solid var(--vh-line);
  border-radius: var(--vp-radius-sm);
  background-color: var(--vh-surface);
  color: var(--vh-ink);
  font-size: 0.86rem;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vp-field > .vp-input { padding-left: 2.5rem; }
.vp-textarea { min-height: 6rem; padding: 0.75rem 0.95rem; line-height: 1.5; resize: vertical; }
.vp-select {
  width: auto;
  padding-right: 2.3rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a6559' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  cursor: pointer;
}
.vp-input::placeholder, .vp-textarea::placeholder { color: var(--vh-muted); opacity: 1; }
.vp-input:focus, .vp-select:focus, .vp-textarea:focus {
  outline: none;
  border-color: rgba(200, 97, 45, 0.55);
  box-shadow: 0 0 0 4px rgba(200, 97, 45, 0.12);
}
.vp-count { margin: 0; font-size: 0.88rem; color: var(--vh-muted); }
.vp-count strong { color: var(--vh-ink); font-weight: 800; }

/* ------------------------------------------------------------ sections */
/* <section class="vp-section" aria-labelledby="x">
     <header class="vp-section__head">
       <h2 class="vp-section__title" id="x"><span class="vp-section__icon"><i …></i></span> Upcoming Events</h2>
       <a class="vp-more" href="…">View All <i class="fa-solid fa-arrow-right"></i></a>
     </header>
     …
   </section> */

.vp-section { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.vp-section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vp-section__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--vp-serif);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--vh-ink);
}
.vp-section__sub { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--vh-muted); }
.vp-section__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: var(--vh-grad);
  color: #fff;
  font-size: 0.9rem;
}
.vp-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  color: var(--vh-orange);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
.vp-more:hover { color: var(--vh-brown); }
.vp-more i, .vp-more .svg-inline--fa { transition: transform 0.15s ease; }
.vp-more:hover i, .vp-more:hover .svg-inline--fa { transform: translateX(3px); }

/* -------------------------------------------------------------- layout */
/* The page body beside a column of panels (right) or of filters (left). */

.vp-layout { display: grid; gap: var(--vp-gap); align-items: start; min-width: 0; }
.vp-main, .vp-aside { display: flex; flex-direction: column; gap: var(--vp-gap); min-width: 0; }
@media (min-width: 1200px) {
  .vp-layout--aside-right { grid-template-columns: minmax(0, 1fr) 21rem; }
  .vp-layout--aside-left { grid-template-columns: 16.5rem minmax(0, 1fr); }
  .vp-aside--sticky { position: sticky; top: calc(var(--phoenix-navbar-top-height) + 1rem); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .vp-layout--aside-left { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* Cards in a grid: set --vp-min on the grid to change the card width. */
.vp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--vp-min, 15.5rem), 100%), 1fr));
  gap: 1.1rem;
}
.vp-grid--sm { --vp-min: 11.5rem; }
.vp-grid--lg { --vp-min: 19rem; }

/* ---------------------------------------------------------------- cards */
/* <article class="vp-card">
     <div class="vp-card__media">
       <img src="…" alt="" loading="lazy" width="400" height="250">
       <span class="vp-card__badge"><span class="vp-date vp-date--solid">…</span></span>
       <span class="vp-card__tag"><span class="vp-pill vp-pill--gold">Youth</span></span>
       <button class="vp-card__fav vp-over" aria-label="Save"><i class="fa-regular fa-heart"></i></button>
     </div>
     <div class="vp-card__body">
       <p class="vp-card__kicker">Announcement</p>
       <h3 class="vp-card__title"><a class="vp-stretch" href="…">Youth Bible Study</a></h3>
       <ul class="vp-card__meta"><li><i class="fa-regular fa-clock"></i> 2:00 PM – 4:00 PM</li></ul>
       <p class="vp-card__excerpt">…</p>
       <div class="vp-card__foot">…</div>
     </div>
   </article>
   Media without a picture: <div class="vp-card__media vp-card__media--empty"><i class="fa-solid fa-image"></i></div> */

.vp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: var(--vp-radius);
  background: var(--vh-surface);
  box-shadow: var(--vp-shadow);
  color: var(--vh-body);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vp-card:hover { transform: translateY(-3px); box-shadow: var(--vp-shadow-hover); }
.vp-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--vh-field);
}
.vp-card__media > img, .vp-card__media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.vp-card:hover .vp-card__media > img, .vp-card:hover .vp-card__media > a > img { transform: scale(1.04); }
.vp-card__media--square { aspect-ratio: 1; }
.vp-card__media--tall { aspect-ratio: 4 / 5; }
.vp-card__media--wide { aspect-ratio: 16 / 9; }
.vp-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vp-warm-bg);
  color: rgba(168, 77, 28, 0.45);
  font-size: 2rem;
}
.vp-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; }
.vp-card__tag { position: absolute; bottom: 0.75rem; left: 0.75rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vp-card__flags { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vp-card__fav {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--vh-orange);
  font-size: 0.95rem;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.vp-card__fav:hover { transform: scale(1.08); }
.vp-card__fav.is-on { color: #d2382b; }
.vp-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.4rem; padding: 1rem 1.05rem 1.1rem; min-width: 0; }
.vp-card__kicker {
  margin: 0;
  color: var(--vh-orange);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vp-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--vh-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.vp-card__title a { color: inherit; text-decoration: none; }
.vp-card__title a:hover { color: var(--vh-brown); }
.vp-card__title--serif { font-family: var(--vp-serif); font-size: 1.08rem; font-weight: 700; }
.vp-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--vh-muted);
  font-size: 0.82rem;
}
.vp-card__meta li { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.vp-card__meta li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-card__meta i, .vp-card__meta .svg-inline--fa { flex: none; width: 0.95rem; color: var(--vh-orange); font-size: 0.78rem; text-align: center; }
.vp-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--vh-body);
  font-size: 0.86rem;
  line-height: 1.5;
}
.vp-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--vh-line);
  color: var(--vh-muted);
  font-size: 0.8rem;
}
.vp-card__body > .vp-card__foot:first-child { margin-top: 0; }
.vp-card__actions { position: relative; z-index: 2; display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.vp-card__actions .vh-btn { flex: 1; padding-right: 0.75rem; padding-left: 0.75rem; }
.vp-card__go {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--vh-grad);
  color: #fff;
  font-size: 0.78rem;
  transition: transform 0.15s ease;
}
.vp-card:hover .vp-card__go { transform: translateX(2px); }

/* A card whose picture fills it with the words over the bottom (a lead story). */
.vp-card--overlay { min-height: 22rem; justify-content: flex-end; border: 0; background: #2b170f; color: #fff; }
.vp-card--overlay > .vp-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.vp-card--overlay > .vp-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 6, 0) 25%, rgba(20, 10, 6, 0.85) 100%);
}
.vp-card--overlay > .vp-card__body { position: relative; z-index: 1; flex: none; padding: 1.5rem; }
.vp-card--overlay .vp-card__title { color: #fff; font-family: var(--vp-serif); font-size: clamp(1.4rem, 2.4vw, 2rem); -webkit-line-clamp: 3; }
.vp-card--overlay .vp-card__excerpt { color: rgba(255, 255, 255, 0.85); }
.vp-card--overlay .vp-card__meta { color: rgba(255, 255, 255, 0.8); }
.vp-card--overlay .vp-card__meta i, .vp-card--overlay .vp-card__meta .svg-inline--fa { color: #f4c25a; }

/* A picture beside the words (side lists, related items):
   <a class="vp-card vp-card--row" href="…"><span class="vp-card__media"><img …></span><span class="vp-card__body">…</span></a> */
.vp-card--row { flex-direction: row; align-items: stretch; text-decoration: none; }
.vp-card--row > .vp-card__media { flex: 0 0 38%; max-width: 11rem; aspect-ratio: auto; min-height: 7rem; }
.vp-card--row > .vp-card__body { justify-content: center; }

/* ------------------------------------------------------------ list rows */
/* <a class="vp-row" href="…"><img class="vp-row__thumb" …> (or a .vp-date)
     <span class="vp-row__body"><span class="vp-row__title">…</span><span class="vp-row__sub">…</span></span>
     <i class="vp-row__chev fa-solid fa-chevron-right"></i></a> */

.vp-rows { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.vp-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.vp-row:hover { background: rgba(111, 53, 39, 0.05); color: inherit; }
.vp-rows > li + li > .vp-row, .vp-rows > .vp-row + .vp-row { border-top: 1px solid var(--vh-line); border-radius: 0; }
.vp-row__thumb {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 10px;
  background: var(--vh-field);
  object-fit: cover;
}
.vp-row__thumb--icon { display: flex; align-items: center; justify-content: center; color: var(--vh-orange); font-size: 1.1rem; background: rgba(200, 97, 45, 0.1); }
.vp-row__body { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vp-row__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--vh-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}
.vp-row__sub { overflow: hidden; color: var(--vh-muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.vp-row__sub i, .vp-row__sub .svg-inline--fa { margin-right: 0.3rem; color: var(--vh-orange); }
.vp-row__chev { flex: none; color: var(--vh-muted); font-size: 0.75rem; }

/* --------------------------------------------------------------- panels */
/* <section class="vp-panel"> (+ .vp-panel--brand for the brown header)
     <header class="vp-panel__head"><h2 class="vp-panel__title"><i …></i> Upcoming Events</h2><a class="vp-more" …>View All …</a></header>
     <div class="vp-panel__body">…</div>
   </section> */

.vp-panel {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--vh-line);
  border-radius: var(--vp-radius);
  background: var(--vh-surface);
  box-shadow: var(--vp-shadow);
}
.vp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.vp-panel__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--vh-ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}
.vp-panel__title > i, .vp-panel__title > .svg-inline--fa { color: var(--vh-orange); }
.vp-panel__text { margin: 0; color: var(--vh-muted); font-size: 0.84rem; }
.vp-panel--flush { padding: 0; }
.vp-panel--brand { padding: 0; overflow: hidden; border-color: transparent; background: var(--vh-grad); }
.vp-panel--brand > .vp-panel__head { margin: 0; padding: 0.9rem 1.1rem; }
.vp-panel--brand .vp-panel__title, .vp-panel--brand .vp-panel__title > i, .vp-panel--brand .vp-panel__title > .svg-inline--fa,
.vp-panel--brand > .vp-panel__head .vp-more { color: #fff; }
.vp-panel--brand > .vp-panel__body { margin: 0 0.35rem 0.35rem; padding: 0.4rem; border-radius: 14px; background: var(--vh-surface); }
.vp-panel--warm { border-color: rgba(200, 97, 45, 0.15); background: var(--vp-warm-bg); }

/* ------------------------------------------------------------ filters */
/* <div class="vp-panel vp-panel--flush">
     <div class="vp-filter"><h3 class="vp-filter__title">Category</h3>
       <label class="vp-check"><input type="radio" …> All Categories <span class="vp-check__count">42</span></label>
     </div>…</div> */

.vp-filter { padding: 1rem 1.15rem; border-bottom: 1px solid var(--vh-line); }
.vp-filter:last-child { border-bottom: 0; }
.vp-filter__title { margin: 0 0 0.65rem; color: var(--vh-ink); font-size: 0.9rem; font-weight: 800; }
.vp-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.3rem 0;
  color: var(--vh-body);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.vp-check input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: #a84d1c; }
.vp-check__count { margin-left: auto; color: var(--vh-muted); font-size: 0.72rem; font-weight: 700; }
.vp-range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* ----------------------------------------------------- dates and pills */
/* <span class="vp-date vp-date--solid"><span class="vp-date__m">Oct</span><span class="vp-date__d">25</span></span>
   Day first is fine too: <span class="vp-date"><span class="vp-date__d">28</span><span class="vp-date__m">Mar</span><span class="vp-date__y">2026</span></span>
   Fill it with {{ when|date:"M" }} / "d" / "Y" so Swahili month names appear. */

.vp-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.15rem;
  padding: 0.4rem 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
  color: #2b1d16;
  line-height: 1;
  text-align: center;
}
.vp-date__m { color: #a84d1c; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.vp-date__d { margin: 0.12rem 0; font-size: 1.35rem; font-weight: 900; }
.vp-date__y { color: #7a6559; font-size: 0.62rem; font-weight: 700; }
.vp-date--solid { background: linear-gradient(160deg, #d9662e 0%, #a84d1c 100%); color: #fff; }
.vp-date--solid .vp-date__m, .vp-date--solid .vp-date__y { color: rgba(255, 255, 255, 0.92); }
.vp-date--soft { background: rgba(200, 97, 45, 0.1); box-shadow: none; }
.vp-date--lg { min-width: 4.4rem; padding: 0.6rem 0.7rem; border-radius: 14px; }
.vp-date--lg .vp-date__d { font-size: 2rem; }
.vp-date--lg .vp-date__m { font-size: 0.78rem; }

/* <span class="vp-pill vp-pill--gold">Featured</span> */
.vp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(168, 77, 28, 0.1);
  color: var(--vh-orange);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.vp-pill--gold { background: var(--vp-gold); color: var(--vp-gold-ink); }
.vp-pill--solid { background: var(--vh-grad); color: #fff; }
.vp-pill--red { background: #d93a2b; color: #fff; }
.vp-pill--green { background: rgba(31, 138, 76, 0.12); color: #1d7a45; }
.vp-pill--blue { background: rgba(47, 127, 209, 0.12); color: #24609e; }
.vp-pill--white { background: #fff; color: #2b1d16; }
.vp-pill--dark { background: rgba(20, 10, 6, 0.6); color: #fff; }
.vp-pill--outline { border: 1px solid var(--vh-line); background: transparent; color: var(--vh-body); }
.vp-pill--caps { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
[data-bs-theme="dark"] .vp-pill--green { color: #6fd39a; }
[data-bs-theme="dark"] .vp-pill--blue { color: #8fc0f2; }

/* --------------------------------------------- people, ratings, prices */

.vp-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--vh-grad);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  object-fit: cover;
}
.vp-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.66rem; }
.vp-avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }
.vp-avatar--anon { background: var(--vh-field); color: var(--vh-muted); }
.vp-person { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.vp-person__name { overflow: hidden; color: var(--vh-ink); font-size: 0.86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vp-person__sub { display: block; color: var(--vh-muted); font-size: 0.76rem; }

/* <span class="vp-rating"><i class="fa-solid fa-star"></i> 4.8 <span class="vp-rating__count">(32)</span></span> */
.vp-rating { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--vh-ink); font-size: 0.8rem; font-weight: 800; }
.vp-rating i, .vp-rating .svg-inline--fa { color: var(--vp-star); }
.vp-rating__count { color: var(--vh-muted); font-weight: 600; }
.vp-price { color: var(--vh-brown); font-size: 1.05rem; font-weight: 900; }
.vp-price--lg { font-family: var(--vp-serif); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; }
.vp-price__old { margin-left: 0.4rem; color: var(--vh-muted); font-size: 0.8em; font-weight: 600; text-decoration: line-through; }

/* Little counts with icons: <span class="vp-stats"><span><i class="fa-regular fa-eye"></i> 2.1K</span>…</span> */
.vp-stats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; color: var(--vh-muted); font-size: 0.78rem; font-weight: 600; }
.vp-stats > span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ------------------------------------------------------- detail pages */
/* <section class="vp-detail-hero">
     <img class="vp-detail-hero__img" src="…" alt="">
     <div class="vp-detail-hero__top"><span class="vp-date vp-date--lg">…</span>
       <div class="vp-detail-hero__actions"><button class="vh-btn vh-btn--white vh-btn--sm">Share</button></div></div>
     <div class="vp-detail-hero__body"><span class="vp-pill vp-pill--gold">Club Event</span>
       <h1 class="vp-detail-hero__title">Acts of Compassion</h1><p class="vp-detail-hero__lead">…</p></div>
   </section> */

.vp-detail-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-top: 5.25rem;
  min-height: clamp(15rem, 32vw, 25rem);
  overflow: hidden;
  border-radius: 22px;
  background: #2b170f;
  color: #fff;
  isolation: isolate;
}
.vp-detail-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vp-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 10, 6, 0.1) 0%, rgba(20, 10, 6, 0) 30%, rgba(20, 10, 6, 0.82) 100%);
}
.vp-detail-hero__top {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.vp-detail-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-left: auto; }
.vp-detail-hero__body { position: relative; max-width: 54rem; padding: 1.5rem 1.75rem 1.6rem; }
.vp-detail-hero__title {
  margin: 0.55rem 0 0.35rem;
  color: #fff;
  font-family: var(--vp-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: break-word;
}
.vp-detail-hero__lead { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 1rem; line-height: 1.5; }

/* A title block for detail pages without a big picture. */
.vp-title { margin: 0; color: var(--vh-ink); font-family: var(--vp-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; overflow-wrap: break-word; }

/* <div class="vp-facts"><div class="vp-fact"><span class="vp-fact__icon"><i …></i></span>
     <span><span class="vp-fact__label">Date</span><span class="vp-fact__value">Mar 28, 2026</span><span class="vp-fact__sub">Saturday</span></span></div>…</div> */
.vp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr)); gap: 0.75rem; }
.vp-fact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--vh-line);
  border-radius: 14px;
  background: var(--vh-surface);
}
.vp-fact__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgba(200, 97, 45, 0.1);
  color: var(--vh-orange);
  font-size: 1rem;
}
.vp-fact__label { display: block; color: var(--vh-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vp-fact__value { display: block; color: var(--vh-ink); font-size: 0.9rem; font-weight: 800; overflow-wrap: anywhere; }
.vp-fact__sub { display: block; color: var(--vh-muted); font-size: 0.75rem; }

/* Long text written by members or staff. */
.vp-prose { color: var(--vh-body); font-size: 1rem; line-height: 1.75; overflow-wrap: break-word; }
.vp-prose > :first-child { margin-top: 0; }
.vp-prose > :last-child { margin-bottom: 0; }
.vp-prose p { margin: 0 0 1em; }
.vp-prose h2, .vp-prose h3, .vp-prose h4 { margin: 1.5em 0 0.6em; color: var(--vh-ink); font-family: var(--vp-serif); line-height: 1.25; }
.vp-prose h2 { font-size: 1.4rem; }
.vp-prose h3 { font-size: 1.2rem; }
.vp-prose ul { margin: 0 0 1em; padding-left: 0; list-style: none; }
.vp-prose ul > li { position: relative; margin: 0.4rem 0; padding-left: 1.6rem; }
.vp-prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0.3rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vh-orange);
}
.vp-prose ol { margin: 0 0 1em; padding-left: 1.4rem; }
.vp-prose a { color: var(--vh-orange); text-decoration: underline; text-underline-offset: 2px; }
.vp-prose img { height: auto; border-radius: 14px; }
.vp-prose blockquote { margin: 1.2em 0; padding: 0.9rem 1.2rem; border-left: 4px solid var(--vh-orange); border-radius: 0 12px 12px 0; background: var(--vp-warm-bg); font-style: italic; }
.vp-prose table { width: 100%; }

/* <ul class="vp-checks"><li><i class="fa-solid fa-circle-check"></i> Visit and support local families</li></ul> */
.vp-checks { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.vp-checks li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--vh-body); font-size: 0.92rem; line-height: 1.5; }
.vp-checks i, .vp-checks .svg-inline--fa { margin-top: 0.2rem; color: var(--vh-orange); }

/* <figure class="vp-quote"><blockquote><p>Faith without works is dead.</p></blockquote><figcaption>— James 2:17</figcaption></figure> */
.vp-quote {
  position: relative;
  margin: 0;
  padding: 1.2rem 1.4rem 1.15rem 3.4rem;
  border: 1px solid rgba(200, 97, 45, 0.15);
  border-radius: 16px;
  background: var(--vp-warm-bg);
  color: var(--vh-ink);
}
.vp-quote::before {
  content: "\201C";
  position: absolute;
  top: 0.3rem;
  left: 1rem;
  color: var(--vh-orange);
  font-family: var(--vp-serif);
  font-size: 3.2rem;
  line-height: 1;
}
.vp-quote blockquote { margin: 0; }
.vp-quote p { margin: 0; font-family: var(--vp-serif); font-size: 1.05rem; font-style: italic; line-height: 1.5; }
.vp-quote figcaption { margin-top: 0.45rem; color: var(--vh-orange); font-size: 0.82rem; font-weight: 800; }

/* <dl class="vp-kv"><div class="vp-kv__row"><i class="vp-kv__icon fa-solid fa-users"></i><dt>Target Group</dt><dd>All Members</dd></div>…</dl> */
.vp-kv { display: flex; flex-direction: column; margin: 0; }
.vp-kv__row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 8rem) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--vh-line);
  font-size: 0.86rem;
}
.vp-kv__row:last-child { border-bottom: 0; }
.vp-kv__icon { color: var(--vh-orange); text-align: center; }
.vp-kv dt { margin: 0; color: var(--vh-muted); font-weight: 600; }
.vp-kv dd { margin: 0; color: var(--vh-ink); font-weight: 700; overflow-wrap: anywhere; }

/* Photos in a row: <div class="vp-thumbs"><a href="…"><img …></a>…</div> */
.vp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 45%), 1fr)); gap: 0.6rem; }
.vp-thumbs > a, .vp-thumbs > img, .vp-thumbs > button {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--vh-field);
  aspect-ratio: 1;
}
.vp-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.vp-thumbs > a:hover img, .vp-thumbs > button:hover img { transform: scale(1.05); }

/* Reactions: <div class="vp-reactions"><button class="vp-react is-on"><i class="fa-solid fa-heart"></i> 345</button>…</div> */
.vp-reactions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vp-react {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  border: 1px solid var(--vh-line);
  border-radius: 999px;
  background: var(--vh-surface);
  color: var(--vh-ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vp-react:hover { border-color: rgba(200, 97, 45, 0.45); }
.vp-react.is-on { border-color: rgba(210, 56, 43, 0.5); background: rgba(210, 56, 43, 0.06); color: #c0352a; }

/* Comments: <div class="vp-comment"><span class="vp-avatar">GM</span><div>
     <p class="vp-comment__head"><span class="vp-comment__name">Grace M.</span> <time class="vp-comment__time">Mar 30, 2026</time></p>
     <p class="vp-comment__text">…</p></div></div> */
.vp-comment { display: flex; gap: 0.75rem; padding: 0.95rem 0; border-top: 1px solid var(--vh-line); }
.vp-comment > div { min-width: 0; flex: 1; }
.vp-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.vp-comment__name { color: var(--vh-ink); font-size: 0.88rem; font-weight: 800; }
.vp-comment__time { color: var(--vh-muted); font-size: 0.75rem; }
.vp-comment__text { margin: 0.25rem 0 0; color: var(--vh-body); font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
.vp-comment-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
.vp-comment-form .vp-textarea { flex: 1 1 16rem; min-height: 2.9rem; }

/* ------------------------------------------------- promos and calls to act */
/* <section class="vp-cta"><img class="vp-cta__img" src="…" alt="">
     <h2 class="vp-cta__title">Stay Informed</h2><p class="vp-cta__text">…</p>
     <a class="vh-btn vh-btn--white" …>Subscribe Now</a></section>
   Without a picture it keeps a warm brown gradient. */
.vp-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  min-height: 11rem;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: var(--vp-radius);
  background: linear-gradient(135deg, #4a2418 0%, #7a3a22 55%, #b0562a 100%);
  color: #fff;
  isolation: isolate;
}
.vp-cta__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vp-cta:has(.vp-cta__img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(35, 16, 8, 0.92) 0%, rgba(35, 16, 8, 0.6) 60%, rgba(35, 16, 8, 0.25) 100%);
}
.vp-cta__title { margin: 0; color: #fff; font-family: var(--vp-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.vp-cta__text { max-width: 24rem; margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; line-height: 1.5; }

/* <a class="vp-promo" href="…"><span class="vp-promo__icon"><i …></i></span>
     <span><span class="vp-promo__title">List Your Business</span><span class="vp-promo__text">…</span></span></a> */
.vp-promo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(200, 97, 45, 0.15);
  border-radius: var(--vp-radius);
  background: var(--vp-warm-bg);
  color: var(--vh-body);
  text-decoration: none;
}
a.vp-promo:hover { color: var(--vh-body); box-shadow: var(--vp-shadow-hover); }
.vp-promo__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--vh-grad);
  color: #fff;
  font-size: 1.2rem;
}
.vp-promo__title { display: block; margin: 0; color: var(--vh-ink); font-size: 1rem; font-weight: 800; }
.vp-promo__text { display: block; margin: 0.15rem 0 0; color: var(--vh-body); font-size: 0.84rem; line-height: 1.45; }

/* ------------------------------------------------------- empty, paging */
/* <div class="vp-empty"><span class="vp-empty__icon"><i …></i></span>
     <h3 class="vp-empty__title">No upcoming events</h3><p class="vp-empty__text">…</p>
     <a class="vh-btn vh-btn--grad" …>See past events</a></div> */
.vp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 1.5rem;
  border: 1.5px dashed rgba(168, 77, 28, 0.25);
  border-radius: var(--vp-radius);
  background: var(--vh-surface);
  text-align: center;
}
.vp-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(200, 97, 45, 0.1);
  color: var(--vh-orange);
  font-size: 1.4rem;
}
.vp-empty__title { margin: 0; color: var(--vh-ink); font-family: var(--vp-serif); font-size: 1.25rem; font-weight: 700; }
.vp-empty__text { max-width: 26rem; margin: 0; color: var(--vh-muted); font-size: 0.9rem; }

/* <nav class="vp-pager" aria-label="Pages"><a href="?page=1" aria-label="Previous">‹</a>
     <span class="is-current" aria-current="page">2</span><a href="?page=3">3</a>…</nav> */
.vp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; }
.vp-pager > a, .vp-pager > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.75rem;
  border: 1px solid var(--vh-line);
  border-radius: 12px;
  background: var(--vh-surface);
  color: var(--vh-ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}
.vp-pager > a:hover { border-color: rgba(200, 97, 45, 0.45); color: var(--vh-brown); }
.vp-pager > .is-current { border-color: transparent; background: var(--vh-grad); color: #fff; }
.vp-pager > .is-disabled { opacity: 0.45; pointer-events: none; }

/* ------------------------------------------------------------ dark theme */

[data-bs-theme="dark"] .vp-quote-card { border-color: rgba(255, 255, 255, 0.1); background: rgba(36, 26, 21, 0.82); }
[data-bs-theme="dark"] .vp-card__fav { background: rgba(36, 26, 21, 0.92); }
[data-bs-theme="dark"] .vp-cat.is-active .vp-cat__icon { background: rgba(255, 255, 255, 0.16); }
[data-bs-theme="dark"] .vp-date:not(.vp-date--solid) { background: rgba(36, 26, 21, 0.95); color: #f4eae0; }
[data-bs-theme="dark"] .vp-date:not(.vp-date--solid) .vp-date__m { color: #e48a52; }
[data-bs-theme="dark"] .vp-date:not(.vp-date--solid) .vp-date__y { color: #a99487; }
[data-bs-theme="dark"] .vp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a99487' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .vp-check input { accent-color: #e48a52; }
[data-bs-theme="dark"] .vh-btn--wa { border-color: #2fae64; color: #6fdc9b !important; }
[data-bs-theme="dark"] .vh-btn--wa:hover { background: #25a85a; color: #fff !important; }

/* ---------------------------------------------------------------- phones */

@media (max-width: 991.98px) {
  /* Fingers, not mouse pointers: every control at least 44px tall. */
  .vp-page .vh-btn { min-height: 2.75rem; }
  .vp-iconbtn { width: 2.75rem; height: 2.75rem; }
  .vp-tab, .vp-chip, .vp-react { min-height: 2.75rem; }
  .vp-more { min-height: 2.75rem; margin-right: -0.35rem; padding: 0 0.35rem; }
  .vp-check { min-height: 2.75rem; }
  .vp-row { min-height: 2.75rem; }
  .vp-card__fav { width: 2.75rem; height: 2.75rem; }
  .vp-pager > a, .vp-pager > span { min-width: 2.75rem; height: 2.75rem; }
  .vp-crumbs a { min-height: 2.75rem; }
  .vp-hero__aside { display: none; }
}

@media (max-width: 767.98px) {
  /* The theme's 20px top margin plus our padding wasted a phone's first lines. */
  .content.vp-page { margin-top: 0; padding: calc(var(--phoenix-navbar-top-height) + 0.85rem) 1rem 2rem; }
  .vp-wrap { --vp-gap: 1rem; }

  /* A compact hero: the light one shows its picture as a strip on top. */
  .vp-hero { display: block; min-height: 0; padding: 1.2rem 1.15rem 1.3rem; border-radius: 18px; }
  .vp-hero--light:has(.vp-hero__media) { padding: 0; }
  .vp-hero--light .vp-hero__media {
    position: relative;
    display: block;
    width: 100%;
    height: 8.5rem;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .vp-hero--light:has(.vp-hero__media) .vp-hero__body { padding: 1rem 1.15rem 1.2rem; }
  .vp-hero--dark::before { background: linear-gradient(180deg, rgba(36, 17, 9, 0.72) 0%, rgba(36, 17, 9, 0.9) 100%); }
  .vp-hero__kicker { margin-bottom: 0.55rem; font-size: 0.64rem; }
  .vp-hero__title, .vp-hero--compact .vp-hero__title { font-size: 1.85rem; }
  .vp-hero__lead { margin-bottom: 0.9rem; font-size: 0.92rem; }
  .vp-hero__search { max-width: none; }
  .vp-hero__stats dd { font-size: 1.35rem; }

  .vp-cat { width: 5.6rem; min-height: 5.8rem; padding: 0.6rem 0.35rem; font-size: 0.74rem; }
  .vp-cat__icon { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
  .vp-cats--photos .vp-cat { width: 6.6rem; }

  .vp-section__title { font-size: 1.2rem; }
  .vp-panel:not(.vp-panel--flush):not(.vp-panel--brand) { padding: 1rem; }
  .vp-grid { gap: 0.85rem; }
  .vp-card--overlay { min-height: 18rem; }
  .vp-card--overlay > .vp-card__body { padding: 1.1rem; }
  .vp-card--row > .vp-card__media { flex-basis: 34%; }

  .vp-detail-hero { min-height: 14rem; border-radius: 18px; }
  .vp-detail-hero__body { padding: 1rem 1.1rem 1.15rem; }
  .vp-detail-hero__title { font-size: 1.5rem; }
  .vp-detail-hero__lead { font-size: 0.92rem; }
  .vp-kv__row { grid-template-columns: 1.4rem minmax(0, 6.5rem) minmax(0, 1fr); }
  .vp-quote { padding: 1rem 1.1rem 1rem 2.9rem; }
  .vp-quote::before { left: 0.75rem; font-size: 2.6rem; }
  .vp-crumbs li[aria-current] { max-width: 12rem; }
  .vp-strip { justify-content: flex-start; }
}

/* Two small cards side by side on a phone (products, categories). */
@media (max-width: 575.98px) {
  .vp-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .vp-grid--2up .vp-card__body { padding: 0.75rem 0.75rem 0.85rem; }
  .vp-grid--2up .vp-card__title { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-card, .vp-card__media > img, .vp-card__media > a > img, .vp-cat, .vp-more i, .vp-more .svg-inline--fa,
  .vp-card__go, .vp-thumbs img, .vp-card__fav, .vp-iconbtn { transition: none; }
  .vp-card:hover, .vp-cat:hover { transform: none; }
}