/* Volunteer - page-specific layout only.
 *
 * Loads AFTER styles.css and css/shared.css and only ADDS selectors: every class here is new
 * (.vol-*) or a compound of an existing class with a new one (.mcard.vol-shift), so nothing the
 * home page or another inner page uses can move.
 *
 * Everything else on this page - .phero, .strip, .band--sage, .band--forest, .grid-3, .card,
 * .disc, .chip, .mcard, .badge, .bar, .steps, .empty, .notice, the whole form kit and .cta -
 * comes from the two shared sheets unchanged.
 */

/* ------------------------------------------------------------------ Why volunteer */
.vol-why { display: grid; gap: 12px; align-content: start; }
.vol-why h3, .vol-why p { margin: 0; }

/* ------------------------------------------------------------------ Roles */
.vol-roles { list-style: none; margin: 0; padding: 0; }
.vol-roles > li { min-width: 0; display: flex; }

.vol-role { display: grid; gap: 10px; align-content: start; width: 100%; }
.vol-role h3, .vol-role p { margin: 0; }
.vol-role__skills { display: flex; flex-wrap: wrap; gap: 6px; }
/* the card's action sits on the floor of the card, so six cards of unequal copy still line up */
.vol-role .link-btn { margin-top: auto; padding-bottom: 0; justify-self: start; align-self: end; }

/* ------------------------------------------------------------------ Open shifts */
.vol-count { flex: 0 1 auto; text-align: right; }
@media (max-width: 899px) { .vol-count { text-align: left; } }

.vol-shift { scroll-margin-top: calc(var(--header-h) + 16px); }
.vol-shift .mcard__body { gap: 12px; padding: 20px 22px 20px; }

/* day and date, set as a small two-line datestamp above the role */
.vol-shift__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.vol-shift__day { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); }
.vol-shift__date { font-size: .84rem; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }

.vol-shift__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vol-shift__head .mcard__title { margin: 0; }

.vol-shift .mcard__meta { flex-direction: column; gap: 7px; }

.vol-shift__fill { display: grid; gap: 7px; margin-top: 2px; }
.vol-shift__spots { margin: 0; font-size: .84rem; color: var(--muted); }
.vol-shift__spots strong { color: var(--leaf-dark); font-variant-numeric: tabular-nums; }

.vol-shift .mcard__foot .btn { width: 100%; }

.vol-shifts__note { margin-top: var(--gap); max-width: 104ch; }

/* ------------------------------------------------------------------ Sign-up */
.vol-signup { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-lg); align-items: start; }
.vol-aside { display: grid; gap: 16px; align-content: start; min-width: 0; position: sticky; top: calc(var(--header-h) + 20px); }
.vol-aside p:last-child { margin-bottom: 0; }
.vol-aside .icon { width: 15px; height: 15px; vertical-align: -2px; }

/* the shift a visitor picked, shown inside the form so the pre-fill is never invisible */
.vol-chosen { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--amber-line); background: var(--yellow-tint); border-radius: var(--radius-sm); }
.vol-chosen .disc { width: 38px; height: 38px; }
.vol-chosen .disc .icon { width: 19px; height: 19px; }
.vol-chosen__body { min-width: 0; flex: 1; }
.vol-chosen__body strong { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
.vol-chosen__body > span { display: block; font-size: .9rem; font-weight: 700; color: var(--forest); overflow-wrap: anywhere; }
.vol-chosen .link { flex: none; font-size: .85rem; font-weight: 700; padding: 6px 2px; }

@media (max-width: 1023px) {
  .vol-signup { grid-template-columns: 1fr; }
  .vol-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .vol-aside { grid-template-columns: 1fr; }
  .vol-chosen { flex-wrap: wrap; }
  .vol-chosen__body { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ What happens next */
.vol-next__note { margin-top: clamp(26px, 3vw, 40px); max-width: 108ch; }