/* ============================================================
   Shared by /volunteers and /partnerships (2026-09-24 design match).
   Figma copy s3OB1YtX1ctalxmNGbm2gN: volunteers-page 3361:16117,
   volunteers-form 3433:10264, partnership 3433:9669,
   partnership-form 3433:10099. Behaviour from MBP's hosted mock-ups
   (spinehope-volunteers.html, spinehope-partnerships.html).
   The hand-drawn edges use the #vp-wavy-* filters defined in each
   page's own <svg> (not the footer's, which another builder owns).
   ============================================================ */

/* ---- Hand-drawn ring ----
   .vp-ring: ring BEHIND the element, repeating its background colour
   (cards, badges, bands). .vp-torn: ring ON TOP, so a photo edge reads
   as torn paper (hero photos). Both take --vp-ring. */
.vp-ring, .vp-torn { position: relative; isolation: isolate; }
.vp-ring::after, .vp-torn::after {
  content: ""; position: absolute; pointer-events: none;
  border-style: solid; border-color: var(--vp-ring, currentColor);
  border-radius: inherit;
}
.vp-ring::after { inset: -2.5px; border-width: 5px; z-index: -1; filter: url(#vp-wavy-card); }
.vp-torn::after { inset: -1px; border-width: 6px; z-index: 2; filter: url(#vp-wavy-card); }
.d-badge.vp-ring::after { filter: url(#vp-wavy-badge); border-radius: 6px; }
.d-badge--grass.vp-ring { --vp-ring: var(--grass, #A7C434); }
.d-badge--sunny.vp-ring { --vp-ring: var(--sunny, #FFD100); }
/* A full-bleed hero keeps its ring inside the viewport so it cannot add a
   horizontal scroll; only the rounded bottom edge shows the wave. */
.vp-hero.vp-ring::after { left: 0; right: 0; top: 0; }

/* ---- Light hero on Sunny (both pages) ---- */
.vp-hero {
  background: var(--sunny, #FFD100);
  --vp-ring: var(--sunny, #FFD100);
  display: flex; align-items: center; gap: 48px;
  padding: 144px 112px 40px; /* Figma hero-section pt 144 (spacing/36) */
  border-radius: 0 0 32px 32px;
  overflow: visible;
}
.vp-hero-copy { flex: 0 1 660px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.vp-hero-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(38px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.75px;
  color: var(--carbon, #28201C); margin: 0;
}
.vp-hero-sub {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25;
  color: var(--carbon, #28201C); margin: 0;
}
/* The hero CTA is Fredoka 500 in the design, unlike the Work Sans buttons. */
.vp-hero .d-btn-dark { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; cursor: pointer; }
.d-btn-dark { cursor: pointer; }
.d-btn-dark:focus-visible, .vp-card-cta:focus-visible {
  outline: 2px solid var(--carbon, #28201C); outline-offset: 2px;
}
/* Breadcrumb on the Sunny hero: Carbon ring, and padding so the 22px link
   line has a 30px hit area (the negative margin keeps the row height). */
.vp-hero .d-crumb a { padding-block: 4px; margin-block: -4px; }
.vp-hero .d-crumb a:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; border-radius: 4px; }

/* ---- Grass CTA band ("Ready to step in?" / "Partner With Us") ---- */
.vp-band-sec { padding: 40px 36px; background: #fff; }
.vp-band {
  background: var(--grass, #A7C434); border-radius: 16px; padding: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
  position: relative; isolation: isolate;
}
/* Hand-drawn edge (Figma "Site Banner" 3908:11712 and its phone version). */
.vp-band::after {
  content: ""; position: absolute; inset: -2.5px; border-radius: inherit;
  border: 5px solid var(--grass, #A7C434);
  pointer-events: none; filter: url(#vp-wavy-card); z-index: -1;
}
.vp-band h2 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0;
}
/* Band CTA: Fredoka Medium label, as the hero button (Figma Button 2222:35). */
.vp-band .d-btn-dark { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; }
.vp-band p { margin: 0; max-width: 1170px; font-weight: 600; font-size: 20px; line-height: 1.6; color: var(--grass-950, #1F200F); }

/* ---- "Explore ways to give" (Figma Cross Link Section, stacked cards) ---- */
.vp-xlink { padding: 96px 44px; display: flex; flex-direction: column; gap: 64px; background: #fff; }
.vp-xlink-head { display: flex; gap: 12px 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.vp-xlink-head > div { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vp-xlink-head h2 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(30px, 2.9vw, 44px); line-height: 1.15; color: var(--carbon, #28201C); margin: 0;
}
.vp-xlink-head p { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.vp-cards { display: flex; gap: 24px; align-items: stretch; }
.vp-card {
  flex: 1 1 0; min-width: 0; min-height: 422px;
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px; border-radius: 8px;
  background: var(--neutral-200, #F1EDE5); --vp-ring: var(--neutral-200, #F1EDE5);
}
.vp-card--sunny { background: var(--sunny, #FFD100); --vp-ring: var(--sunny, #FFD100); }
.vp-card-img { aspect-ratio: 233.6 / 185; height: auto; width: 100%; border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.vp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-card-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.vp-card-info h3 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; color: #211E1B; margin: 0;
}
.vp-card--sunny .vp-card-info h3 { color: var(--carbon, #28201C); }
.vp-card-info p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: #1A1A1A; margin: 0; }
.vp-card-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 9999px; white-space: nowrap; max-width: 100%;
  background: var(--carbon, #28201C); border: 1px solid var(--neutral-700, #3D342F);
  color: var(--magnolia, #FDF9F1);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  transition: background .15s ease;
}
.vp-card-cta:hover { background: var(--neutral-700, #3D342F); }
.vp-card-cta svg { width: 16px; height: 16px; flex: none; }

/* ---- Slide-in form (MBP "anchor-modal" pattern) ----
   The hosted mock-up shows and hides the panel with no transition; a
   short slide is added and dropped again under reduced motion. */
.vp-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(to bottom, rgba(40,32,28,.2), rgba(40,32,28,.8));
  display: none; justify-content: flex-end; align-items: flex-start; padding: 16px;
}
.vp-modal-overlay.open { display: flex; }
.vp-modal {
  background: #fff; border: 1px solid var(--neutral-300, #E5E1D8); border-radius: 24px;
  width: 560px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 32px; display: flex; flex-direction: column; gap: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: vp-slide-in .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes vp-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vp-modal { animation: none; } }
.vp-modal-header { display: flex; align-items: center; justify-content: space-between; }
.vp-modal-header .d-badge { --vp-ring: var(--grass, #A7C434); }
.vp-modal-close {
  width: 48px; height: 48px; border-radius: 9999px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.vp-modal-close:hover { background: var(--neutral-200, #F1EDE5); }
.vp-modal-close:focus-visible { outline: 2px solid var(--grass-600, #859B2B); outline-offset: 2px; }
.vp-modal-close img { width: 20px; height: 20px; display: block; }
.vp-modal-title { display: flex; flex-direction: column; gap: 12px; }
.vp-modal-title h2 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 28px; line-height: 1.25; color: var(--carbon, #28201C); margin: 0;
}
.vp-modal-title p { font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; margin: 0; }
.vp-form { display: flex; flex-direction: column; gap: 24px; }
.vp-fields { display: flex; flex-direction: column; gap: 16px; }
.vp-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.vp-field label { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--carbon, #28201C); }
.vp-field input, .vp-field textarea, .vp-field select {
  width: 100%; box-sizing: border-box; padding: 16px 20px;
  border: 1px solid var(--neutral-400, #D0C4B8); background: #fff;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.6;
  color: var(--carbon, #28201C); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vp-field input, .vp-field select { border-radius: 9999px; }
.vp-field textarea { height: 120px; border-radius: 12px; resize: none; }
.vp-field select { padding-right: 48px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.vp-field select:invalid { color: var(--neutral-600, #5C534D); }
.vp-field .vp-chevron { position: absolute; right: 20px; bottom: 17px; width: 20px; height: 20px; pointer-events: none; }
.vp-field input::placeholder, .vp-field textarea::placeholder { color: var(--neutral-600, #5C534D); opacity: 1; }
.vp-field input:focus, .vp-field textarea:focus, .vp-field select:focus {
  border-color: var(--grass-500, #A7C434); box-shadow: 0 0 0 3px rgba(167,196,52,.18);
}
.vp-field [aria-invalid="true"] { border-color: var(--error-text, #B42318); }
.vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vp-submit { width: 100%; }
.vp-submit[disabled] { opacity: .7; cursor: progress; }
.vp-status { margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--error-text, #B42318); min-height: 0; }
.vp-status:empty { display: none; }
.vp-alt { margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-600, #5C534D); text-align: center; }
.vp-alt a { color: var(--carbon, #28201C); font-weight: 600; text-decoration: underline; }
.vp-divider { height: 1px; width: 100%; border: 0; margin: 0; background: var(--neutral-300, #E5E1D8); }
.vp-done { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--grass-50, #F5F6EB); }
.vp-done h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.25; margin: 0; color: var(--carbon, #28201C); }
.vp-done p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); }

/* Book-a-call card inside the panel. */
.vp-bookcall {
  background: #fff; border: 3px solid var(--magnolia, #FDF9F1); border-radius: 24px;
  padding: 40px 16px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 1px 1.5px rgba(10,13,18,.1), 0 1px 1px rgba(10,13,18,.1);
}
.vp-bookcall-profile { display: flex; gap: 20px; align-items: flex-start; }
.vp-bookcall-avatar { width: 107px; height: 107px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.vp-bookcall-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.vp-bookcall-txt { display: flex; flex-direction: column; gap: 8px; }
.vp-bookcall-txt h3 { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.6; margin: 0; color: var(--carbon, #28201C); }
.vp-bookcall-txt p { font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; margin: 0; }
.vp-bookcall-btns { display: flex; gap: 20px; }
.vp-bookcall-btns > a { flex: 1 1 0; justify-content: center; }
.vp-btn-sm { min-height: 42px; padding: 8px 20px; font-size: 16px; line-height: 1.6; }
.vp-btn-sm svg { width: 16px; height: 16px; }

body.vp-modal-open { overflow: hidden; }

@media (max-width: 1100px) {
  .vp-hero { flex-direction: column; align-items: stretch; padding: 168px 40px 48px; gap: 40px; }
  .vp-hero-copy { flex: none; }
  .vp-band-sec { padding: 32px 24px; }
  .vp-xlink { padding: 72px 40px; gap: 40px; }
  .vp-cards { flex-wrap: wrap; }
  .vp-card { flex: 1 1 calc(50% - 12px); min-height: 0; }
}
/* ---- Phones: Figma "Volunteers - Mobile" 3824:33571 and "Partnerships -
   Mobile" 3807:24737 (375 wide, 24px gutters). Mobile type: H3 36/1.2,
   H5 28/1.25, H7 22/1.3, body 16/1.6. ---- */
@media (max-width: 720px) {
  .vp-hero { padding: 160px 24px 40px; gap: 24px; border-radius: 0 0 24px 24px; }
  .vp-hero-copy { gap: 16px; }
  .vp-hero-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .vp-hero-sub { font-size: 22px; line-height: 1.3; }
  /* Primary button: full width, 56px, label on one line. */
  .vp-hero .d-btn-dark { width: 100%; justify-content: center; min-height: 56px; padding: 12px 16px; white-space: nowrap; }

  /* Grass call-out ("Site Banner" 3908:11739): torn edge, H3 heading, full
     width button. The frame's own label overflows its pill; here the card
     padding and the label step down so it sits inside on one line. */
  .vp-band-sec { padding: 48px 24px; }
  /* Site Banner, phone (3908:11721): 36px inside the 5px ring on every side. */
  .vp-band { padding: 36px; gap: 16px; border-radius: 24px; }
  .vp-band h2 { font-size: 36px; line-height: 1.2; color: var(--grass-950, #1F200F); }
  .vp-band p { font-size: 16px; }
  .vp-band .d-btn-dark { width: 100%; justify-content: center; min-height: 56px; padding: 12px; font-size: clamp(16px, 4.8vw, 20px); white-space: nowrap; }

  /* "Explore ways to give" ("Cross Link Section" 3824:33740): heading,
     full-width See All, then ONE row of 272px cards that scrolls sideways. */
  .vp-xlink { padding: 40px 24px; gap: 16px; }
  .vp-xlink-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .vp-xlink-head > div { flex: none; gap: 8px; }
  .vp-xlink-head h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .vp-xlink-head p { font-size: 16px; }
  .vp-xlink-head .btn { width: 100%; min-height: 56px; font-size: 16px; white-space: nowrap; }
  .vp-cards {
    flex-wrap: nowrap; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -24px; padding: 6px 24px 10px; scroll-padding-inline: 24px;
  }
  .vp-cards + .sc-dots { display: none; } /* the frame has no dots under this row */
  .vp-card { flex: 0 0 272px; min-height: 390px; scroll-snap-align: start; }
  .vp-card-img { aspect-ratio: auto; height: 185px; }
  .vp-card-info h3 { font-size: 28px; }
  .vp-card-info p { font-size: 18px; color: var(--neutral-600, #5C534D); }
  .vp-card--sunny .vp-card-info p { color: var(--carbon, #28201C); }

  .vp-modal-overlay { padding: 8px; }
  .vp-modal { padding: 24px 20px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}
@media (max-width: 640px) {
  .vp-bookcall-profile { flex-direction: column; gap: 12px; }
  .vp-bookcall-avatar { width: 80px; height: 80px; }
  .vp-bookcall-btns { flex-direction: column; gap: 12px; }
}

/* display:flex above would otherwise beat the hidden attribute. */
.vp-form[hidden], .vp-done[hidden], .vp-modal-overlay[hidden] { display: none; }