/* /volunteers, Figma volunteers-page 3361:16117 (2026-09-24). */

/* ---- Hero photo grid: nine torn-edge tiles straight on Sunny ---- */
.vol-grid {
  flex: 0 1 598px; min-width: 0; margin-left: auto;
  display: grid; grid-template-columns: repeat(3, 158px); grid-auto-rows: 190px;
  gap: 21px 8px; justify-content: center; align-content: center;
  padding: 34px 0;
}
.vol-tile { border-radius: 13.5px; overflow: hidden; --vp-ring: var(--sunny, #FFD100); }
.vol-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; border-radius: inherit; }

/* ---- Who we need ---- */
.vol-needs { gap: 64px; }
.vol-needs .d-headline { gap: 16px; }
.vol-needs .d-h2 { font-size: clamp(36px, 4.3vw, 64px); }
.vol-paths { display: flex; gap: 40px; align-items: stretch; width: 100%; text-align: left; }
.vol-path {
  flex: 1 1 0; min-width: 0;
  background: var(--magnolia, #FDF9F1); --vp-ring: var(--magnolia, #FDF9F1);
  border-radius: 24px; padding: 40px 28px;
  display: flex; flex-direction: column; gap: 56px;
}
.vol-path-head { display: flex; flex-direction: column; gap: 12px; }
.vol-path-head h3 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(30px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0; text-wrap: wrap;
}
.vol-path-head p { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.vol-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vol-roles li { font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); }
.vol-roles b { font-weight: 700; }
.vol-roles--bullets li::before { content: "\2022"; margin-right: 6px; }
.vol-path-note { font-size: 16px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

/* ---- What a mission looks like ---- */
.vol-mission { display: flex; align-items: center; gap: 64px; width: 100%; }
.vol-mission-copy { flex: 1 1 616px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.vol-mission-copy .d-h2 { font-size: clamp(36px, 4.3vw, 64px); max-width: 529px; }
.vol-mission-body { display: flex; flex-direction: column; gap: 24px; }
.vol-mission-body p { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.vol-mission-photo {
  flex: 0 1 624px; min-width: 0; height: 712px; border-radius: 32px; overflow: hidden;
  border: 4px solid var(--neutral-200, #F1EDE5);
}
.vol-mission-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }

/* ---- Questions about volunteering (Figma Information Section 3645:12509) ---- */
.vol-info { padding: 80px; display: flex; gap: 80px; align-items: flex-start; background: #fff; }
.vol-info-col { flex: 0 0 400px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.vol-info-head { display: flex; flex-direction: column; gap: 16px; }
.vol-info-head h2 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 2.9vw, 44px); line-height: 1.1; color: var(--carbon, #28201C); margin: 0;
}
.vol-info-head p { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; margin: 0; }
.vol-call {
  background: #fff; border: 3px solid var(--neutral-200, #F1EDE5); border-radius: 12px;
  padding: 40px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  box-shadow: 0 1px 1.5px rgba(10,13,18,.1), 0 1px 1px rgba(10,13,18,.1);
}
.vol-call-avatar { width: 107px; height: 107px; border-radius: 50%; overflow: hidden; }
.vol-call-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.vol-call h3 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 24px;
  line-height: 1.25; letter-spacing: -.5px; color: var(--carbon, #28201C); margin: 0;
}
.vol-call p { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; margin: 0; }
.vol-call p a { text-decoration: underline; }
.vol-call-txt { display: flex; flex-direction: column; gap: 8px; }
.vol-call-btns { display: flex; gap: 20px; width: 100%; margin-top: 12px; }
.vol-call-btns > a { flex: 1 1 0; justify-content: center; }

.vol-faqs { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vol-faq {
  background: #fff; border: 3px solid #fff; border-radius: 12px;
  box-shadow: 0 1px 1.5px rgba(10,13,18,.1), 0 1px 1px rgba(10,13,18,.1);
  transition: border-color .2s ease;
}
.vol-faq.open { border-color: var(--neutral-200, #F1EDE5); }
/* Hand-drawn 3px Neutral-200 outline on the call card and the open FAQ
   (Figma Information Section 3645:12509; closed items keep a white stroke).
   The ring sits ON the element's own border so it wobbles both ways. */
.vol-call.wavy-edge, .vol-faq.wavy-edge { border-color: #fff; --wavy-color: transparent; }
.vol-call.wavy-edge, .vol-faq.wavy-edge.open { --wavy-color: var(--neutral-200, #F1EDE5); }
.vol-call.wavy-edge::after, .vol-faq.wavy-edge::after {
  inset: -3px; border-width: 3px; z-index: 1; filter: url(#vp-wavy-card);
  transition: border-color .2s ease;
}
.vol-faq h3 { margin: 0; }
.vol-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 21px 13px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.6;
  color: var(--carbon, #28201C); border-radius: 9px;
}
.vol-faq-q:focus-visible { outline: 2px solid var(--grass-600, #859B2B); outline-offset: 2px; }
/* Hover (PG-27): a soft cream wash behind the question. */
.vol-faq-q { transition: background .15s ease; }
.vol-faq-q:hover { background: var(--magnolia, #FDF9F1); }
.vol-faq-icon {
  width: 32px; height: 32px; border-radius: 16px; background: var(--sunny, #FFD100);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vol-faq-icon img { width: 20px; height: 20px; display: block; }
.vol-faq-icon .i-minus, .vol-faq.open .vol-faq-icon .i-plus { display: none; }
.vol-faq.open .vol-faq-icon .i-minus { display: block; }
.vol-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.vol-faq-a p { margin: 0; padding: 0 13px 21px; font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; }
.vol-faq.open .vol-faq-q { padding-bottom: 8px; }

@media (max-width: 1100px) {
  .vol-grid { flex: none; width: 100%; margin: 0; grid-template-columns: repeat(3, minmax(0, 158px)); grid-auto-rows: auto; padding: 0; gap: 16px 8px; }
  .vol-tile { aspect-ratio: 158 / 190; }
  .vol-paths { flex-direction: column; }
  .vol-mission { flex-direction: column; align-items: stretch; gap: 40px; }
  .vol-mission-copy, .vol-mission-photo { flex: none; width: 100%; }
  .vol-mission-photo { height: auto; aspect-ratio: 3 / 2; }
  .vol-info { flex-direction: column; gap: 40px; padding: 72px 40px; }
  .vol-info-col { flex: none; width: 100%; }
}
/* ---- Phones: Figma "Volunteers - Mobile" 3824:33571 ---- */
/* ---- Pathway tabs (Figma Tab-bar 3744:21358 on desktop, "Pathway tabs"
   3824:33599 on phones). The script switches them on; without it the tablist
   stays hidden and both pathway cards show, as before. ---- */
.vol-tabs[hidden] { display: none; }
.vol-paths .vol-path[hidden] { display: none; }
.vol-tab {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 6px 16px;
  border: 1px solid transparent; border-radius: 9999px; background: transparent; cursor: pointer;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.25;
  color: var(--neutral-600, #5C534D); white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.vol-tab:hover { background: var(--magnolia, #FDF9F1); }
.vol-tab[aria-selected="true"] { background: var(--sunny, #FFD100); color: var(--carbon, #28201C); font-weight: 600; }
.vol-tab:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.vol-path:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 4px; }
/* The pathway lead is the frame's bold Fredoka line. */
.vol-path-head p { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--carbon, #28201C); }
@media (min-width: 721px) {
  .vol-needs:has(.vol-tabs:not([hidden])) { gap: 20px; }
  .vol-tabs {
    display: inline-flex; gap: 4px; width: auto; padding: 4px; margin-top: -4px;
    border: 1px solid var(--neutral-200, #F1EDE5); border-radius: 9999px; background: #fff;
    box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06);
  }
  /* One wide panel at a time. The frame's photo column is not in the page, so
     the heading and lead take the left column and the roles the right. */
  .vol-paths.is-tabbed .vol-path:not([hidden]) {
    --vp-ring: var(--neutral-200, #F1EDE5);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 72px; align-items: start;
    padding: 56px;
  }
  .vol-paths.is-tabbed .vol-path-head { grid-row: 1 / span 2; }
  .vol-paths.is-tabbed .vol-roles { gap: 8px; }
  .vol-paths.is-tabbed .vol-roles li, .vol-paths.is-tabbed .vol-path-note { font-size: 20px; color: var(--neutral-600, #5C534D); }
  .vol-paths.is-tabbed .vol-roles b { color: var(--carbon, #28201C); }
}
@media (max-width: 720px) {
  main .d-sec { padding: 56px 24px; gap: 16px; }

  /* Hero photo grid: three equal columns of smooth rounded tiles. */
  .vol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .vol-tile { aspect-ratio: 97 / 132; border-radius: 8px; }
  .vol-tile.vp-torn::after { display: none; }

  /* Who we need: two pill tabs, one pathway card at a time. */
  .vol-needs { gap: 16px; }
  .vol-needs .d-headline { gap: 12px; }
  .vol-needs .d-h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .vol-tabs { display: flex; gap: 8px; align-items: stretch; width: 100%; }
  /* The frame sets these labels at 10px, too small to read: 14px here, and
     the two long labels wrap inside their pills. */
  .vol-tab { flex: 1 1 0; min-width: 0; padding: 6px 10px; border-radius: 22px; font-size: 14px; white-space: normal; }
  .vol-tab[aria-selected="true"] {
    background: var(--sunny-100, #FCF3CC); border-color: var(--sunny-300, #FDE577);
    box-shadow: inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  }
  .vol-paths { gap: 16px; }
  .vol-path { padding: 24px 20px; gap: 16px; }
  .vol-path-head { gap: 12px; }
  .vol-path-head h3 { font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: 0; }
  .vol-path-head p { font-size: 20px; }
  .vol-roles { gap: 8px; }

  /* What a mission looks like */
  .vol-mission { gap: 16px; }
  .vol-mission-copy { gap: 16px; }
  .vol-mission-copy .d-h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; max-width: none; }
  .vol-mission-body { gap: 16px; }
  .vol-mission-body p { font-size: 16px; }
  .vol-mission-photo { height: auto; aspect-ratio: 327 / 357; border-radius: 24px; }

  /* Questions */
  .vol-info { padding: 56px 24px; gap: 32px; }
  .vol-info-head h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .vol-info-head p, .vol-call p { font-size: 16px; }
  .vol-call { padding: 32px 16px; }
  /* "Still have questions?": the two buttons stay side by side, one line each. */
  .vol-call-btns { flex-direction: row; gap: 12px; }
  .vol-call-btns > a { white-space: nowrap; padding-inline: 12px; min-height: 44px; }
  /* Question text: 20px semibold, wrapping where the words run out (the
     inherited heading balance broke the lines early). */
  .vol-faq-q { font-size: 20px; line-height: 1.5; text-wrap: wrap; min-height: 74px; padding: 8px 13px; }
  .vol-faq.open .vol-faq-q { padding-top: 16px; }
}

/* Face-safe crop (YuNet audit 2026-09-24). */
img[src*="vol-r2-3"] { object-position: 50% 10% !important; }

/* Isabel 10-13: the Clinical & Surgical card carries the frame's photo
   (3361:16480: 592 x 664 photo beside a 592px copy column, 64px apart,
   44 / 28 padding, Magnolia). Phones keep the text-only card. */
.vol-path-photo { display: none; margin: 0; }
@media (min-width: 721px) {
  .vol-paths.is-tabbed .vol-path--photo:not([hidden]) {
    --vp-ring: var(--magnolia, #FDF9F1); background: var(--magnolia, #FDF9F1);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 24px 64px; padding: 44px 28px; align-items: start;
  }
  .vol-paths.is-tabbed .vol-path--photo .vol-path-photo {
    display: block; grid-column: 1; grid-row: 1 / span 3; align-self: stretch;
    min-height: 0; height: 100%; max-height: 664px; border-radius: 10px; overflow: hidden;
  }
  .vol-path--photo .vol-path-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
  .vol-paths.is-tabbed .vol-path--photo .vol-path-head { grid-column: 2; grid-row: 1; }
  .vol-paths.is-tabbed .vol-path--photo .vol-roles,
  .vol-paths.is-tabbed .vol-path--photo .vol-path-note { grid-column: 2; }
}