/* ═══════════════════════════════════════════════════════
   social.css — сторінка соціальної місії /social/
   Підключати ПІСЛЯ style.css і start.css:
   <link rel="stylesheet" href="/style/social.css?v=1">
   ═══════════════════════════════════════════════════════ */

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1020px;
  margin: 0 auto;
}

@media (max-width: 860px) { .sp-grid { grid-template-columns: 1fr; } }

.sp-card {
  --sp: #4ADE80;
  --sp-dim: rgba(74, 222, 128, 0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 34px 30px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s, box-shadow .3s;
}

.sp-card:hover {
  transform: translateY(-6px);
  border-color: var(--sp);
  box-shadow: 0 16px 44px var(--sp-dim);
}

/* кольорова смуга зверху картки */
.sp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sp), transparent 70%);
}

.sp-card.sp-pink {
  --sp: #EC4899;
  --sp-dim: rgba(236, 72, 153, 0.12);
}

.sp-status {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  background: var(--sp-dim);
  color: var(--sp);
  margin-bottom: 18px;
}

.sp-card h3 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.5px;
  margin-bottom: 4px;
}

.sp-tag {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.sp-card > p:not(.sp-tag) {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.sp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.sp-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}

.sp-list .c {
  color: var(--sp);
  flex-shrink: 0;
  margin-top: 1px;
}

/* кнопка притиснута до низу картки — однакова висота карток */
.sp-btn { margin-top: auto; align-self: flex-start; }