:root {
  --three-ma-vol-navy: #071f40;
  --three-ma-vol-navy-tint: #0d2d5c;
  --three-ma-vol-gold: #ebab22;
  --three-ma-vol-red: #c21f32;
  --three-ma-vol-gray: #f4f5f7;
  --three-ma-vol-dark: #1f2937;
  --three-ma-vol-line: #dfe3e8;
}

.three-ma-volunteers {
  color: var(--three-ma-vol-dark);
  font-family: "Raleway", Arial, sans-serif;
  line-height: 1.6;
}

.three-ma-volunteers *,
.three-ma-volunteers *::before,
.three-ma-volunteers *::after { box-sizing: border-box; }

.three-ma-volunteers__hero {
  background: linear-gradient(135deg, var(--three-ma-vol-navy), var(--three-ma-vol-navy-tint));
  border-bottom: 4px solid var(--three-ma-vol-gold);
  color: #fff;
  margin-bottom: 36px;
  padding: 54px 24px;
  text-align: center;
}

.three-ma-volunteers__hero h2,
.three-ma-volunteers__card h3,
.three-ma-volunteers__card h4,
.three-ma-volunteers__card h5,
.three-ma-volunteers__empty h3 {
  color: var(--three-ma-vol-navy);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
}

.three-ma-volunteers__hero h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0;
  text-transform: uppercase;
}

.three-ma-volunteers__hero p:last-child { margin: 0 auto; max-width: 740px; }
.three-ma-volunteers__rule { background: var(--three-ma-vol-gold); height: 4px; margin: 18px auto 22px; width: 84px; }
.three-ma-volunteers__eyebrow { color: var(--three-ma-vol-gold); font-family: "Montserrat", Arial, sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 8px; text-transform: uppercase; }
.three-ma-volunteers__grid { display: grid; gap: 32px; margin: 0 auto; max-width: 1100px; padding: 0 20px 60px; }
.three-ma-volunteers--single { margin: 0 auto; max-width: 980px; }
.three-ma-volunteers__card { background: #fff; border: 1px solid var(--three-ma-vol-line); border-radius: 8px; box-shadow: 0 8px 28px rgba(7,31,64,.1); overflow: hidden; }
.three-ma-volunteers__image { background: var(--three-ma-vol-gray); }
.three-ma-volunteers__image img { display: block; height: auto; width: 100%; }
.three-ma-volunteers__content { padding: clamp(22px, 4vw, 40px); }
.three-ma-volunteers__content h3 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 16px; }
.three-ma-volunteers__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; }
.three-ma-volunteers__description > :first-child { margin-top: 0; }
.three-ma-volunteers__text-link { color: var(--three-ma-vol-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--three-ma-vol-gold); text-decoration-thickness: 2px; }
.three-ma-volunteers__roles { border-top: 1px solid var(--three-ma-vol-line); margin-top: 28px; padding-top: 24px; }
.three-ma-volunteers__roles h4 { font-size: 1.15rem; margin: 0 0 12px; }
.three-ma-volunteers__role-day { margin: 20px 0 28px; }
.three-ma-volunteers__role-date { border-bottom: 2px solid var(--three-ma-vol-gold); font-size: 1rem; margin: 0 0 10px; padding-bottom: 7px; }
.three-ma-volunteers__role h6 { color: var(--three-ma-vol-navy); font-family: "Montserrat", Arial, sans-serif; font-size: .9rem; font-weight: 800; margin: 0 0 4px; text-transform: uppercase; }
.three-ma-volunteers__role { align-items: flex-start; background: var(--three-ma-vol-gray); border-left: 4px solid var(--three-ma-vol-gold); display: flex; gap: 20px; justify-content: space-between; margin: 10px 0; padding: 16px; }
.three-ma-volunteers__role h5 { font-size: 1rem; margin: 0 0 4px; }
.three-ma-volunteers__role p { margin: 4px 0 0; }
.three-ma-volunteers__role-time { font-weight: 600; }
.three-ma-volunteers__badge { border-radius: 999px; flex: 0 0 auto; font-family: "Montserrat", Arial, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .05em; padding: 6px 10px; text-transform: uppercase; }
.three-ma-volunteers__badge--available { background: #e9f5e5; color: #285d16; }
.three-ma-volunteers__badge--waitlist { background: #fff4d6; color: #755000; }
.three-ma-volunteers__badge--full { background: #fce8eb; color: #8a1422; }
.three-ma-volunteers__signup { border-top: 1px solid var(--three-ma-vol-line); margin-top: 28px; padding-top: 24px; }
.three-ma-volunteers__toggle,
.three-ma-volunteers__submit { background: var(--three-ma-vol-gold); border: 0; border-radius: 4px; color: var(--three-ma-vol-navy); cursor: pointer; font-family: "Montserrat", Arial, sans-serif; font-size: .78rem; font-weight: 900; letter-spacing: .08em; padding: 14px 20px; text-transform: uppercase; }
.three-ma-volunteers__toggle:hover,
.three-ma-volunteers__submit:hover { background: #c98e15; }
.three-ma-volunteers__toggle:focus-visible,
.three-ma-volunteers__submit:focus-visible,
.three-ma-volunteers input:focus-visible,
.three-ma-volunteers select:focus-visible,
.three-ma-volunteers textarea:focus-visible { outline: 3px solid rgba(235,171,34,.55); outline-offset: 2px; }
.three-ma-volunteers__form { background: var(--three-ma-vol-gray); margin-top: 18px; padding: 22px; }
.three-ma-volunteers__fields { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-ma-volunteers__fields label { color: var(--three-ma-vol-navy); font-family: "Montserrat", Arial, sans-serif; font-size: .8rem; font-weight: 700; }
.three-ma-volunteers__field--wide { grid-column: 1 / -1; }
.three-ma-volunteers input,
.three-ma-volunteers select,
.three-ma-volunteers textarea { background: #fff; border: 1px solid #aeb6c2; border-radius: 4px; color: var(--three-ma-vol-dark); display: block; font: 400 1rem "Raleway", Arial, sans-serif; margin-top: 6px; padding: 11px 12px; width: 100%; }
.three-ma-volunteers__consent { align-items: flex-start; display: flex; gap: 10px; margin: 18px 0; }
.three-ma-volunteers__consent input { flex: 0 0 auto; margin: 5px 0 0; width: auto; }
.three-ma-volunteers__notice { background: #fff7e2; border-left: 4px solid var(--three-ma-vol-gold); margin: 18px 0; padding: 14px 16px; }
.three-ma-volunteers__notice--success { background: #edf7e9; border-color: #4f9f22; }
.three-ma-volunteers__notice--error { background: #fcecef; border-color: var(--three-ma-vol-red); }
.three-ma-volunteers__empty { background: var(--three-ma-vol-gray); margin: 0 auto 60px; max-width: 900px; padding: 40px 24px; text-align: center; }
.three-ma-volunteers__honeypot { left: -10000px; position: absolute; }
.three-ma-volunteers__shift-help { color: #596273; display: block; font-family: "Raleway", Arial, sans-serif; font-size: .86rem; font-weight: 500; margin-top: 7px; }
.three-ma-volunteers button:disabled { cursor: wait; opacity: .65; }

@media (max-width: 680px) {
  .three-ma-volunteers__fields { grid-template-columns: 1fr; }
  .three-ma-volunteers__field--wide { grid-column: auto; }
  .three-ma-volunteers__role { display: block; }
  .three-ma-volunteers__badge { display: inline-block; margin-top: 12px; }
}