/* ==========================================================================
   Jobs and Fellowship pages: templates/jobs/list.html, jobs/details.html,
   fellowship/list.html and fellowship/group_detail.html.

   Built from pages.css (the shared .vp-* pieces, loaded first through
   partials/_pages_head.html); this file only adds what these pages need.
   .vj-* belongs to the Jobs pages, .vf-* to the Fellowship pages.
   ========================================================================== */

/* ------------------------------------------------- shared-piece fixes */
/* pages.css zeroes the padding of every <section> on these pages
   (".vp-page section { padding: 0 }" outranks ".vp-hero" and ".vp-panel"),
   so a hero or a panel written as a <section> lost its padding. Put back. */
.vp-page section.vp-hero { padding: 2rem 2.25rem; }
.vp-page section.vp-hero--compact { padding: 1.6rem 2rem; }
.vp-page section.vp-panel { padding: 1.15rem; }
.vp-page section.vp-panel--flush, .vp-page section.vp-panel--brand { padding: 0; }
@media (max-width: 767.98px) {
  .vp-page section.vp-hero { padding: 1.2rem 1.15rem 1.3rem; }
  .vp-page section.vp-hero--light:has(.vp-hero__media) { padding: 0; }
  .vp-page section.vp-panel { padding: 1rem; }
  .vp-page section.vp-panel--flush, .vp-page section.vp-panel--brand { padding: 0; }
}

/* Font Awesome's script swaps every <i> for an <svg class="svg-inline--fa">,
   so the pages.css rules written as "… i" miss the icons. Same looks here. */
.vp-page .vp-card__meta .svg-inline--fa { flex: none; width: 0.95rem; color: var(--vh-orange); font-size: 0.78rem; }
.vp-page .vp-checks .svg-inline--fa { flex: none; margin-top: 0.3rem; color: var(--vh-orange); }
.vp-page .vp-hero__search > .svg-inline--fa { flex: none; color: var(--vh-muted); }
.vp-page .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-page .vp-panel__title > .svg-inline--fa { color: var(--vh-orange); }
.vp-page .vp-row__sub .svg-inline--fa { margin-right: 0.3rem; color: var(--vh-orange); }
.vp-page .vp-stats .svg-inline--fa { font-size: 0.8em; }

/* The current breadcrumb is cut with "…" only as a block box: an inline-flex
   <li> clipped it mid-word without the dots. */
.vp-page .vp-crumbs li[aria-current] { display: block; }
.vp-page .vp-crumbs li[aria-current]::before { display: inline-block; margin: 0 0.6rem 0.08rem 0; vertical-align: middle; }

/* A form control as wide as its column. */
.vj-wide { width: 100%; }

/* ================================================================= JOBS */

/* ------------------------------------------------------------------ hero */
.vj-hero {
  background:
    radial-gradient(circle at 88% 20%, rgba(243, 182, 63, 0.35) 0, rgba(243, 182, 63, 0) 38%),
    radial-gradient(circle at 70% 110%, rgba(200, 97, 45, 0.22) 0, rgba(200, 97, 45, 0) 45%),
    var(--vp-hero-bg);
}
.vj-hero .vp-hero__body { max-width: 40rem; }
.vj-hero .vp-hero__search { margin-top: 0.15rem; }
.vj-hero .vp-hero__stats { margin-top: 1rem; }

/* ------------------------------------------------- the job tools (tiles) */
.vj-links .vp-cat { flex: 1 0 6.75rem; }
.vj-link--primary {
  border-color: transparent;
  background: var(--vh-grad);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(111, 53, 39, 0.75);
}
.vj-link--primary:hover { color: #fff; }
.vj-link--primary .vp-cat__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
/* pages.css's brown tone has no dark-theme colour: brown on near-black. */
[data-bs-theme="dark"] .vp-page .vp-tone-8 { --vp-tone: #e2b48d; }

/* -------------------------------------------------------------- filters */
.vj-filters {
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: var(--vp-radius);
  background: var(--vh-surface);
  box-shadow: var(--vp-shadow);
}
.vj-filters > summary { list-style: none; }
.vj-filters > summary::-webkit-details-marker { display: none; }
.vj-filters__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.15rem;
  color: var(--vh-ink);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}
.vj-filters__toggle:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: -3px; }
.vj-filters__label { display: inline-flex; align-items: center; gap: 0.55rem; }
.vj-filters__label .svg-inline--fa { color: var(--vh-orange); }
.vj-filters__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--vh-grad);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.vj-filters__chev { margin-left: auto; color: var(--vh-muted); font-size: 0.8rem; transition: transform 0.2s ease; }
.vj-filters[open] .vj-filters__chev { transform: rotate(180deg); }
.vj-filters__form.vp-panel { border: 0; border-top: 1px solid var(--vh-line); border-radius: 0; box-shadow: none; }

/* The filter groups are fieldsets. Bootstrap floats their legend so it sits
   inside the padding like a heading; only its size changes here. */
.vj-filters fieldset.vp-filter { min-width: 0; margin: 0; }
.vj-filters legend.vp-filter__title { float: left; width: 100%; margin: 0 0 0.65rem; padding: 0; font-size: 0.9rem; line-height: 1.3; }
.vj-filters .vp-check { align-items: flex-start; }
.vj-filters .vp-check input { margin-top: 0.15rem; }
.vj-check__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vj-filters .vp-check__count { margin-top: 0.1rem; }
.vj-filters__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.vj-filters .vp-range .vp-input { padding: 0 0.7rem; }
.vj-filters .vp-range input::-webkit-outer-spin-button,
.vj-filters .vp-range input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

/* ------------------------------------------------------------- results */
.vj-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.vj-active { margin: 0; padding: 0; list-style: none; }
.vj-active .vp-chip .svg-inline--fa { font-size: 0.72rem; }
.vj-grid { --vp-min: 19.5rem; }

/* ------------------------------------------------------------ job card */
.vj-card .vp-card__body { gap: 0.75rem; padding: 1.15rem 1.15rem 1.1rem; }
.vj-card__head { display: flex; align-items: flex-start; gap: 0.85rem; }
.vj-card__who { flex: 1; min-width: 0; }
.vj-card .vp-card__title { font-size: 1.02rem; }
.vj-card__org { margin: 0.2rem 0 0; overflow: hidden; color: var(--vh-muted); font-size: 0.84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vj-card__flag { flex: none; }
.vj-card__stats { margin: 0; }
.vj-card .vp-card__foot { margin-top: auto; }
.vj-card__salary { min-width: 0; color: var(--vh-brown); font-size: 0.95rem; font-weight: 900; overflow-wrap: anywhere; }
.vj-card__view { flex: none; }
.vj-card__view .svg-inline--fa { font-size: 0.75rem; transition: transform 0.15s ease; }
.vj-card:hover .vj-card__view { border-color: var(--vh-brown); background: var(--vh-brown); color: #fff !important; }
.vj-card:hover .vj-card__view .svg-inline--fa { transform: translateX(2px); }

/* The organisation's logo, or its initials. */
.vj-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: 14px;
  background: #fff; /* logos are drawn on white, in the dark theme too */
}
.vj-logo img { width: 100%; height: 100%; padding: 0.3rem; object-fit: contain; }
.vj-logo--initials {
  border-color: transparent;
  background: var(--vh-grad);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.vj-logo--lg { width: 5.5rem; height: 5.5rem; border-radius: 20px; font-size: 1.65rem; }
.vj-logo--lg img { padding: 0.45rem; }
.vj-logo--sm { width: 2.75rem; height: 2.75rem; border-radius: 12px; font-size: 0.85rem; }
.vj-logo--sm img { padding: 0.2rem; }

.vj-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vj-pills .vp-pill { white-space: normal; }
.vj-skills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vj-skill {
  max-width: 100%;
  overflow: hidden;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--vh-field);
  color: var(--vh-body);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vj-skill--more { background: rgba(168, 77, 28, 0.1); color: var(--vh-orange); }

.vj-pager__gap { border-color: transparent !important; background: transparent !important; }

/* ------------------------------------------------------------ job page */
.vj-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(201, 138, 46, 0.35);
  border-radius: var(--vp-radius-sm);
  background: rgba(243, 182, 63, 0.14);
  color: var(--vh-ink);
  font-size: 0.88rem;
  font-weight: 700;
}
.vj-notice .svg-inline--fa { flex: none; color: var(--vh-gold); }

.vp-page .vp-panel.vj-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem 1.75rem;
  padding: 1.5rem 1.6rem;
}
.vj-head__main { display: flex; align-items: flex-start; gap: 1.25rem; min-width: 0; }
.vj-head__text { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.vj-head__title { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.vj-head__org { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--vh-brown); font-size: 1rem; font-weight: 800; }
.vj-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--vh-muted);
  font-size: 0.84rem;
  font-weight: 600;
}
.vj-head__meta li { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; overflow-wrap: anywhere; }
.vj-head__meta .svg-inline--fa { flex: none; color: var(--vh-orange); }
.vj-head__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; min-width: 12.5rem; }
.vj-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px dashed var(--vh-line);
}
.vj-manage__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: auto;
  color: var(--vh-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vj-manage form { margin: 0; }
.vj-danger { border-color: rgba(179, 38, 30, 0.35) !important; color: #b3261e !important; }
.vj-danger:hover { background: rgba(179, 38, 30, 0.08) !important; }
[data-bs-theme="dark"] .vj-danger { color: #ff9b91 !important; }
.vj-applied { border-color: rgba(31, 138, 76, 0.45); color: #1d7a45 !important; }
.vj-applied:hover { border-color: #1d7a45; background: #1d7a45; color: #fff !important; }
[data-bs-theme="dark"] .vj-applied { color: #6fd39a !important; }
.vj-closed { color: #b3261e; font-weight: 700; }
[data-bs-theme="dark"] .vj-closed { color: #ff9b91; }

.vp-page .vp-panel.vj-block { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.5rem; }
.vj-callout {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--vh-orange);
  border-radius: 0 12px 12px 0;
  background: var(--vp-warm-bg);
  color: var(--vh-ink);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.vj-callout__label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--vh-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vj-checks li > span { min-width: 0; overflow-wrap: anywhere; }
.vj-checks--two { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.6rem 1.2rem; }

.vj-overview .vp-panel__title, .vj-org .vp-panel__title { margin-bottom: 0.35rem; }
.vj-overview__action { margin-top: 1rem; }
.vj-kv-salary { color: var(--vh-brown) !important; }
.vj-org { display: flex; flex-direction: column; gap: 0.8rem; }
.vj-org__who { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.vj-org__name { min-width: 0; color: var(--vh-ink); font-weight: 800; overflow-wrap: anywhere; }
.vj-org__text { color: var(--vh-body); font-size: 0.88rem; line-height: 1.6; overflow-wrap: break-word; }
.vj-org__text p { margin: 0 0 0.6em; }
.vj-org__text p:last-child { margin: 0; }
.vj-org .vp-more { align-self: flex-start; }

/* Similar jobs: small cards in a row. */
.vj-similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.vj-mini { gap: 0.65rem; padding: 1rem; text-decoration: none; }
.vj-mini:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: 2px; }
.vj-mini__head { display: flex; align-items: flex-start; gap: 0.7rem; }
.vj-mini__who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.vj-mini__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--vh-ink);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.vj-mini:hover .vj-mini__title { color: var(--vh-brown); }
.vj-mini__org { overflow: hidden; color: var(--vh-muted); font-size: 0.8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vj-mini__meta { display: flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--vh-muted); font-size: 0.8rem; }
.vj-mini__meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vj-mini__meta .svg-inline--fa { flex: none; color: var(--vh-orange); }
.vj-mini .vj-pills { margin-top: auto; }

/* The apply form (a Bootstrap modal). */
.vj-modal .modal-content { overflow: hidden; border: 0; border-radius: var(--vp-radius); background: var(--vh-surface); color: var(--vh-body); }
.vj-modal__head { padding: 1rem 1.25rem; border: 0; background: var(--vh-grad); color: #fff; }
.vj-modal__title { margin: 0; color: #fff; font-family: var(--vp-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.vj-modal__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.vj-modal__org { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--vh-muted); font-size: 0.88rem; font-weight: 700; }
.vj-modal__label { display: block; margin-bottom: 0.4rem; color: var(--vh-ink); font-size: 0.86rem; font-weight: 800; }
.vj-modal__hint { color: var(--vh-muted); font-weight: 600; }
.vj-file { border-color: var(--vh-line); border-radius: var(--vp-radius-sm); background-color: var(--vh-surface); color: var(--vh-ink); }
.vj-modal__foot { gap: 0.5rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--vh-line); }

/* =========================================================== FELLOWSHIP */

/* ------------------------------------------------------------ the list */
.vf-list-hero .vp-hero__media { object-position: center 45%; }
.vf-types .vp-cat { flex: 1 0 6.5rem; }
.vf-grid { --vp-min: 17rem; }

/* A group's picture is often a badge or a saint's portrait: shown whole,
   over a blurred copy of itself, instead of cropped. */
.vf-media { background: #2b170f; }
.vf-media > .vf-media__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: blur(18px) saturate(1.15);
  transform: scale(1.2);
}
.vp-card:hover .vf-media > .vf-media__blur { transform: scale(1.2); }
.vf-media > .vf-media__img { position: relative; object-fit: contain; }
.vf-media__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--vp-warm-bg);
  color: rgba(168, 77, 28, 0.45);
  font-size: 2.4rem;
}
.vf-card .vp-card__excerpt { -webkit-line-clamp: 2; }
.vf-card .vp-card__meta li > span { white-space: normal; }
.vf-card__go .svg-inline--fa { font-size: 0.75rem; transition: transform 0.15s ease; }
.vf-card:hover .vf-card__go { border-color: var(--vh-brown); background: var(--vh-brown); color: #fff !important; }
.vf-card:hover .vf-card__go .svg-inline--fa { transform: translateX(2px); }

/* Upcoming events beside what members say. */
.vf-events { display: flex; flex-direction: column; gap: 0.9rem; }
.vf-event > .vp-card__media { flex: 0 0 10rem; max-width: 10rem; min-height: 7.5rem; }
.vf-event__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--vp-warm-bg);
  color: rgba(168, 77, 28, 0.4);
  font-size: 1.8rem;
}
.vf-event .vp-card__body { gap: 0.35rem; }
.vf-event .vp-card__kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-event .vp-card__meta li > span { white-space: normal; }
.vp-empty.vf-empty--sm { padding: 1.5rem 1.25rem; }

.vf-says { display: flex; flex-direction: column; gap: 0.9rem; }
.vf-says .vp-panel__head { margin-bottom: 0; }
.vf-say { margin: 0; padding: 0.95rem 1rem; border: 1px solid rgba(200, 97, 45, 0.15); border-radius: 14px; background: var(--vp-warm-bg); }
.vf-say__text { position: relative; margin: 0 0 0.75rem; padding-left: 1.45rem; }
.vf-say__text::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: 0;
  color: var(--vh-orange);
  font-family: var(--vp-serif);
  font-size: 2.2rem;
  line-height: 1;
}
.vf-say__text p { margin: 0; color: var(--vh-ink); font-family: var(--vp-serif); font-size: 0.96rem; font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.vf-say .vp-person { flex-wrap: wrap; }
.vf-say__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vf-say__more { color: var(--vh-orange); font-size: 0.8rem; font-weight: 800; text-decoration: none; }
.vf-say__more:hover { color: var(--vh-brown); text-decoration: underline; }

/* ---------------------------------------------------------- a group */
.vp-page section.vf-hero,
.vf-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 17rem;
  padding: 2rem 2.25rem;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(120deg, #2b170f 0%, #4a2418 55%, #7a3a22 100%);
  box-shadow: 0 14px 34px -24px rgba(60, 30, 20, 0.55);
  color: #fff;
  isolation: isolate;
}
.vf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: blur(22px) saturate(1.1);
  transform: scale(1.15);
}
.vf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(36, 17, 9, 0.93) 0%, rgba(36, 17, 9, 0.8) 50%, rgba(36, 17, 9, 0.45) 100%);
}
.vf-hero--plain::before { display: none; }
.vf-hero__body { position: relative; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; max-width: 42rem; }
.vf-hero__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vf-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--vp-serif);
  font-size: clamp(1.8rem, 3.1vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.vf-hero__lead { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 1rem; font-weight: 600; }
.vf-hero__lead > span { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; overflow-wrap: anywhere; }
.vf-hero__lead .svg-inline--fa { flex: none; color: #f4c25a; }
.vf-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; }
.vf-hero__actions form { margin: 0; }
.vf-hero__pic { display: flex; flex: none; align-items: center; justify-content: center; max-width: 42%; height: 15rem; }
.vf-hero__pic img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  object-fit: contain;
}
.vf-hero__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11rem;
  height: 11rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 3.5rem;
}

.vp-page .vp-panel.vf-block { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.5rem; }
.vf-agenda { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.vf-agenda__item { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.9rem; border: 1px solid var(--vh-line); border-radius: 14px; background: var(--vh-surface); }
.vf-agenda__body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; min-width: 0; }
.vf-agenda__title { margin: 0; color: var(--vh-ink); font-size: 1rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.vf-agenda .vp-card__meta li > span { white-space: normal; }
.vf-agenda__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--vh-body);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.vf-agenda__img { flex: none; width: 8rem; height: 6rem; border-radius: 12px; object-fit: cover; }
.vf-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0.9rem; }

.vf-details__action { margin-top: 1rem; }
.vf-details__action form { margin: 0; }
.vf-leaders .vp-panel__title { margin-bottom: 0.4rem; }
.vf-leaders .vp-row { padding: 0.55rem 0.15rem; }

.vf-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.vf-other > .vp-card__media { flex: 0 0 5.75rem; max-width: 5.75rem; min-height: 6.5rem; aspect-ratio: auto; }
.vf-other .vp-card__body { gap: 0.3rem; padding: 0.85rem 1rem; }
.vf-other__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--vh-ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.vf-other:hover .vf-other__name { color: var(--vh-brown); }
.vf-other__meta { display: flex; align-items: center; gap: 0.4rem; color: var(--vh-muted); font-size: 0.8rem; }
.vf-other__meta .svg-inline--fa { flex: none; color: var(--vh-orange); }
.vf-other:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: 2px; }

/* --------------------------------------------------------------- phones */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Tablets: the church stays clear of the words. */
  .vf-list-hero .vp-hero__media { width: 46%; }
  .vf-list-hero .vp-hero__body { max-width: 54%; }
}
@media (max-width: 1199.98px) {
  /* Four facts two by two rather than three and one. */
  .vj-facts, .vf-facts:has(> .vp-fact:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .vj-filters__toggle { min-height: 3rem; }
  .vf-hero__pic { max-width: 38%; height: 12rem; }
  .vp-page .vp-panel.vj-head { grid-template-columns: minmax(0, 1fr); }
  .vj-head__actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .vj-head__actions > .vh-btn { flex: 1 1 10rem; }
}
@media (max-width: 767.98px) {
  .vj-links .vp-cat { flex: 0 0 auto; }
  .vj-hero .vp-hero__stats { gap: 0.4rem 1.4rem; }
  .vj-card .vp-card__body { padding: 1rem; }
  .vp-page .vp-panel.vj-head { gap: 1rem; padding: 1.1rem; }
  .vj-head__main { gap: 0.9rem; }
  .vj-head .vj-logo--lg { width: 4rem; height: 4rem; border-radius: 16px; font-size: 1.25rem; }
  .vj-head__title { font-size: 1.45rem; }
  .vp-page .vp-panel.vj-block { padding: 1.1rem; }
  .vj-manage__label { flex: 1 0 100%; }

  .vf-types .vp-cat { flex: 0 0 auto; }
  .vp-page section.vf-hero,
  .vf-hero { flex-direction: column-reverse; align-items: stretch; gap: 1rem; min-height: 0; padding: 1.1rem 1.1rem 1.25rem; border-radius: 18px; }
  .vf-hero::before { background: linear-gradient(180deg, rgba(36, 17, 9, 0.55) 0%, rgba(36, 17, 9, 0.9) 55%); }
  .vf-hero__pic { justify-content: flex-start; max-width: 100%; height: 9rem; }
  .vf-hero__pic img { border-width: 3px; border-radius: 16px; }
  .vf-hero__noimg { width: 7rem; height: 7rem; border-radius: 18px; font-size: 2.4rem; }
  .vf-hero__title { font-size: 1.7rem; }
  .vf-hero__lead { font-size: 0.92rem; }
  .vf-hero__actions > *, .vf-hero__actions form .vh-btn { flex: 1 1 auto; }
  .vp-page .vp-panel.vf-block { padding: 1.1rem; }
  .vf-event > .vp-card__media { flex-basis: 7.5rem; max-width: 7.5rem; }
  .vf-agenda__item { padding: 0.8rem; }
}
@media (max-width: 575.98px) {
  /* The key facts two by two, icon above the words. */
  .vj-facts, .vf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .vj-facts .vp-fact, .vf-facts .vp-fact { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.8rem 0.85rem; }
  .vj-facts .vp-fact__icon, .vf-facts .vp-fact__icon { width: 2.1rem; height: 2.1rem; border-radius: 10px; font-size: 0.85rem; }
  /* An odd one out takes the whole last row. */
  .vf-facts .vp-fact:last-child:nth-child(odd) { flex-direction: row; align-items: center; grid-column: 1 / -1; }

  /* The groups as rows, picture beside the words, so a phone shows several
     at once; the whole card is the link, so the button and blurb can go. */
  .vf-card { flex-direction: row; }
  .vf-card > .vp-card__media { flex: 0 0 7.75rem; min-height: 9rem; aspect-ratio: auto; }
  .vf-card .vp-card__badge { top: 0.5rem; left: 0.5rem; }
  .vf-card .vp-card__badge .vp-date { min-width: 2.7rem; padding: 0.3rem 0.4rem; border-radius: 10px; }
  .vf-card .vp-card__badge .vp-date__d { font-size: 1.1rem; }
  .vf-card .vp-card__tag { bottom: 0.5rem; left: 0.5rem; }
  .vf-card .vp-card__body { gap: 0.3rem; padding: 0.8rem 0.9rem; }
  .vf-card .vp-card__title { font-size: 1rem; }
  .vf-card .vp-card__meta { gap: 0.15rem; font-size: 0.8rem; }
  .vf-card .vp-card__excerpt, .vf-card .vp-card__actions { display: none; }
  .vf-agenda__img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-filters__chev, .vj-card__view .svg-inline--fa, .vf-card__go .svg-inline--fa { transition: none; }
}