/* ============================================================
   Community: I Need Help / I Want to Help
   ============================================================ */

.com-head{
  background:var(--ink); color:var(--on-dark);
  padding-top:calc(74px + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2rem,4vw,3.5rem);
  position:relative;
}
.com-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--moss), transparent 55%);
}
.com-head h1{ font-size:var(--step-4); margin:0 0 .75rem; max-width:18ch; }
.com-head__lede{ font-size:var(--step-0); color:var(--on-dark-mute); max-width:52ch; margin-bottom:1.5rem; }

/* Mode switcher: I need help / I want to help */
.com-switch{
  display:inline-flex; padding:.3rem; border-radius:999px;
  background:rgba(239,238,230,0.06); border:1px solid var(--line-dark);
  gap:.25rem;
}
.com-switch a{
  padding:.6rem 1.3rem; border-radius:999px;
  font-family:var(--ui); font-size:.85rem; font-weight:700;
  text-decoration:none; color:var(--on-dark-mute);
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.com-switch a.is-active{ background:var(--moss); color:#F3FBF7; }
.com-switch a:not(.is-active):hover{ color:var(--on-dark); }

/* Crisis notice — shown on I need help */
.com-crisis{
  background:var(--slate); color:var(--on-dark);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:.85rem var(--gutter);
  font-family:var(--ui); font-size:.8rem; line-height:1.6;
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  text-align:center;
}
.com-crisis strong{ color:var(--moss-lt); }
.com-crisis a{ color:var(--moss-lt); text-underline-offset:3px; }

/* Filters */
.com-filters{
  position:sticky; top:74px; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
  padding-block:1rem;
}
.com-filters__row{ display:flex; align-items:flex-start; gap:.9rem; }
.com-filters__label{
  font-family:var(--ui); font-size:.72rem; font-weight:600;
  letter-spacing:0.03em; color:var(--on-light-mute);
  flex:0 0 auto; min-width:72px; padding-top:.72rem;
}
.com-fgroup{ display:flex; gap:.5rem; flex-wrap:wrap; flex:1 1 240px; min-width:0; }
.com-fchip{
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--line-light);
  color:var(--on-light-mute);
  font-family:var(--ui); font-size:.82rem; font-weight:600;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out),
             border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.com-fchip:hover,.com-fchip:focus-visible{ color:var(--on-light); border-color:var(--on-light-mute); transform:translateY(-1px); }
.com-fchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.com-filters__clear{
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-family:var(--ui); font-size:.78rem; font-weight:600;
  color:var(--copper); text-decoration:underline; text-underline-offset:3px;
  padding:.72rem 0 0;
}
.com-filters__clear[hidden]{ display:none; }

.com-results-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding-block:2rem 1.25rem;
}
.com-results-bar p{ margin:0; font-family:var(--ui); font-size:var(--step--1); color:var(--on-light-mute); }
.com-results-bar b{ color:var(--on-light); }

/* Org cards */
.com-grid{
  display:grid; gap:1.15rem;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  padding-bottom:clamp(4rem,8vw,7rem);
}
.com-card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line-light); border-radius:18px;
  padding:1.4rem 1.35rem 1.2rem;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             border-color .35s var(--ease-out);
}
.com-card:hover,.com-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(46,115,97,0.5);
  box-shadow:0 22px 45px -26px rgba(10,26,32,0.6);
}
.com-card__area{
  font-family:var(--ui); font-size:.72rem; color:var(--on-light-mute);
  margin:0 0 .5rem; display:flex; align-items:center; gap:.4rem;
}
.com-card__area::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--fog); flex:0 0 5px;
}
.com-card h3{ font-size:var(--step-1); margin:0 0 .6rem; line-height:1.15; }
.com-card__mission{
  font-size:.87rem; color:var(--on-light); margin:0 0 .8rem; line-height:1.6;
  font-style:italic;
}
.com-card__services{
  font-size:.83rem; color:var(--on-light-mute); margin:0 0 1rem; line-height:1.6;
}
.com-card__foot{
  margin-top:auto; display:flex; flex-direction:column; gap:.75rem;
  padding-top:.9rem; border-top:1px solid var(--line-light);
}
.com-card__tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.com-card__tags span{
  font-family:var(--ui); font-size:.68rem; font-weight:600;
  padding:.2rem .55rem; border-radius:999px;
  background:rgba(18,38,44,0.06); color:var(--on-light-mute);
}
.com-card__actions{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.com-card__link{
  font-family:var(--ui); font-size:.8rem; font-weight:700;
  color:var(--moss); text-decoration:none;
}
.com-card__link:hover{ color:var(--moss-deep); text-decoration:underline; }
.com-card__helptype{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  color:var(--fog); text-transform:uppercase; letter-spacing:0.03em;
}

.com-empty{
  border:1px dashed var(--line-light); border-radius:18px;
  padding:clamp(2rem,5vw,3.5rem); text-align:center;
  grid-column:1 / -1;
}
.com-empty h3{ font-size:var(--step-2); margin:0 0 .5rem; }
.com-empty p{ margin:0 auto; color:var(--on-light-mute); max-width:42ch; }

/* Footnote */
.com-footnote{
  background:var(--paper-2); border-top:1px solid var(--line-light);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.com-footnote h2{ font-size:var(--step-2); }
.com-footnote p{ color:var(--on-light-mute); font-size:var(--step--1); line-height:1.7; }