/* ============================================================
   Volunteer page  -  welcome/css/volunteer.css
   Loaded by welcome/tpl/volunteer.tpl.
   Uses the shared --ss-* design tokens from ss_base.css.
   ============================================================ */

/* ---- Volunteer page (scoped) ---- */
.vol-hero{
    position:relative;padding:7rem 0 5rem;overflow:hidden;
    background:linear-gradient(160deg,var(--ss-teal-deep) 0%,var(--ss-teal) 55%,#3a7d76 100%);
    color:var(--ss-warm-white);text-align:center;
}
.vol-hero::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 20% 20%,rgba(201,169,98,.18),transparent 45%),
               radial-gradient(circle at 82% 70%,rgba(212,133,106,.16),transparent 45%);
    pointer-events:none;
}
.vol-hero .container{position:relative;z-index:1;max-width:760px}
.vol-hero .section-label{color:var(--ss-gold-light);letter-spacing:.14em}
.vol-hero h1{
    font-family:var(--ss-font-display);font-weight:500;
    font-size:clamp(2.6rem,5vw,3.8rem);line-height:1.08;margin:.4rem 0 1rem;
}
.vol-hero p{
    font-size:1.15rem;line-height:1.7;color:rgba(255,252,247,.9);
    max-width:620px;margin:0 auto;
}

/* ---- Intro / gift framing ---- */
.vol-intro{padding:4.5rem 0 1rem;text-align:center}
.vol-intro .container{max-width:720px}
.vol-intro .intro-lead{
    font-family:var(--ss-font-display);font-style:italic;
    font-size:1.75rem;color:var(--ss-teal);margin-bottom:1.25rem;line-height:1.3;
}
.vol-intro p{font-size:1.05rem;line-height:1.75;color:var(--ss-text-muted)}

/* ---- Opportunities ---- */
.vol-opps{padding:4rem 0}
.vol-opps .container{max-width:1080px}
.vol-section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem}
.vol-section-head h2{
    font-family:var(--ss-font-display);font-weight:500;
    font-size:2.25rem;color:var(--ss-charcoal);margin-bottom:.5rem;
}
.vol-section-head p{color:var(--ss-text-muted);font-size:1.02rem;line-height:1.65}
.vol-opps-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem;
}
.vol-opp{
    display:flex;flex-direction:column;gap:.6rem;
    background:var(--ss-white);border:1px solid var(--ss-border-soft);
    border-radius:var(--ss-radius-lg);padding:1.6rem;text-decoration:none;
    transition:transform var(--ss-transition-base),box-shadow var(--ss-transition-base),border-color var(--ss-transition-base);
}
.vol-opp:hover{
    transform:translateY(-5px);box-shadow:var(--ss-shadow-medium);
    border-color:rgba(201,169,98,.5);
}
.vol-opp-icon{
    width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
    font-size:1.35rem;color:var(--ss-white);
    background:linear-gradient(135deg,var(--ss-teal-light),var(--ss-teal));
}
.vol-opp h3{font-size:1.15rem;color:var(--ss-charcoal);margin:0}
.vol-opp p{font-size:.92rem;color:var(--ss-text-muted);line-height:1.55;margin:0;flex:1}
.vol-opp .vol-opp-link{
    font-size:.9rem;font-weight:600;color:var(--ss-teal);
    display:inline-flex;align-items:center;gap:.3rem;
}
.vol-opp:hover .vol-opp-link{gap:.5rem}

/* ---- Three-step path ---- */
.vol-steps{padding:4.5rem 0;background:var(--ss-cream)}
.vol-steps .container{max-width:920px}
.vol-steps-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2.5rem;
}
.vol-step{
    position:relative;background:var(--ss-white);border-radius:var(--ss-radius-lg);
    padding:2rem 1.6rem 1.8rem;box-shadow:var(--ss-shadow-soft);
}
.vol-step-num{
    position:absolute;top:-18px;left:1.6rem;width:40px;height:40px;border-radius:50%;
    display:grid;place-items:center;font-family:var(--ss-font-display);
    font-size:1.3rem;font-weight:600;color:var(--ss-white);
    background:linear-gradient(135deg,var(--ss-gold-warm),var(--ss-gold));
    box-shadow:var(--ss-shadow-soft);
}
.vol-step h3{font-size:1.2rem;color:var(--ss-charcoal);margin:.9rem 0 .5rem}
.vol-step p{font-size:.95rem;color:var(--ss-text-muted);line-height:1.6;margin-bottom:1rem}
.vol-step a.vol-step-link{
    font-size:.92rem;font-weight:600;color:var(--ss-teal);
    display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;
}
.vol-step a.vol-step-link:hover{gap:.55rem;color:var(--ss-teal-deep)}
.vol-step .vol-step-note{
    display:block;margin-top:.5rem;font-size:.8rem;color:var(--ss-text-light);font-style:italic;
}
.vol-steps-cta{text-align:center;margin-top:2.75rem}

/* ---- Closing ---- */
.vol-closing{padding:5rem 0;text-align:center}
.vol-closing .container{max-width:680px}
.vol-closing blockquote{
    font-family:var(--ss-font-display);font-style:italic;
    font-size:1.6rem;line-height:1.45;color:var(--ss-teal);margin:0 0 1.25rem;
}
.vol-closing p{color:var(--ss-text-muted);font-size:1.02rem;line-height:1.7}

@media (max-width:600px){
    .vol-hero{padding:5.5rem 0 4rem}
    .vol-step-num{left:50%;transform:translateX(-50%)}
    .vol-step{text-align:center;padding-top:2.4rem}
}