/* =========================================================================
   FREE SAILING — volunteer.html

   Prefixed .vol-. Chips, inputs and labels reuse demand.css's .dm- set;
   this file only adds the skill grid and the router's result cards, which
   this page shares in spirit (not in code) with waiting-list.css.
   ========================================================================= */

.vol-skills{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:11px; }
.vol-skill{ display:flex; }
.vol-skill input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.vol-skill span{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--white); color:var(--ink); font-size:14px; line-height:1.3; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.vol-skill span::before{
  content:""; flex:none; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line);
  background:#fff; transition:background .15s var(--ease), border-color .15s var(--ease);
}
.vol-skill span:hover{ border-color:#BFE7FA; }
.vol-skill input:checked + span{ background:#F2FAFF; border-color:var(--cyan); color:var(--navy); font-weight:600; }
.vol-skill input:checked + span::before{
  background:var(--cyan); border-color:var(--cyan);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5 4.5 8.5 11 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.vol-skill input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }

.vol-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.vol-car{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.vol-car label{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-60); cursor:pointer; }
.vol-car input{ width:17px; height:17px; accent-color:var(--cyan); }

.vol-loc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:11px; }
.vol-loc-or{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-25); }
.vol-loc-in{ flex:1 1 220px; min-width:160px; margin:0; }
.vol-loc-sel{ flex:1 1 180px; min-width:150px; margin:0; }
.vol-loc-said{ margin-top:10px; font-size:13.5px; color:var(--cyan-text); min-height:1px; }
.vol-loc-said:empty{ display:none; }

/* --------------------------------------------------------------- results */
.vol-results{ margin-top:34px; }
.vol-sum{ font-size:15.5px; color:var(--ink-60); margin-bottom:22px; max-width:62ch; }
.vol-sum b{ color:var(--navy); }
.vol-sec + .vol-sec{ margin-top:34px; }
.vol-sec-hd{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-25); margin-bottom:13px;
}
.vol-card{ display:flex; flex-direction:column; gap:9px; height:100%; }
.vol-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vol-reach{ flex:none; font-size:11.5px; color:var(--ink-25); white-space:nowrap; padding-top:2px; }
.vol-name{ font-size:18px; line-height:1.28; color:var(--navy); letter-spacing:-.01em; }
.vol-desc{ font-size:14px; line-height:1.52; color:var(--ink-60); flex:1; }
.vol-desc q{ quotes:"\201C""\201D""\2018""\2019"; }
.vol-meta{ font-size:12.5px; color:var(--ink-40); }
.vol-go{ margin-top:auto; padding-top:4px; font-size:13.5px; font-weight:700; color:var(--cyan-text); }
.vol-go:hover{ color:var(--navy); }

.vol-mine{ margin-top:40px; }
.vol-mine-note{ margin-top:10px; max-width:62ch; color:var(--ink-25); font-size:12.5px; }

@media (max-width:720px){
  .vol-skills{ grid-template-columns:1fr; }
  .vol-two{ grid-template-columns:1fr; gap:0; }
  .vol-loc{ flex-direction:column; align-items:stretch; }
  .vol-loc-or{ text-align:center; }
  .vol-loc-in, .vol-loc-sel{ width:100%; }
}