/* ══════════════════════════════════════════
   sdgs.css — 17 SDGs page styles
   (reuses: bento cards from home.css,
    sdg-strip/pill from global.css)
══════════════════════════════════════════ */

/* ── BENTO (same as home — needed on this page too) ── */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 0.8rem;
}
.bento-card {
  border-radius: 16px; padding: 1.4rem;
  position: relative; overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.bento-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(11,46,26,0.12); }
.bento-card.span2 { grid-column: span 2; }

.bc-sdg3 { background: linear-gradient(135deg, #1a4d10, #2e7a1c); }
.bc-sdg4 { background: linear-gradient(135deg, #5c0a12, #891120); }

.bc-num {
  font-family: 'Fraunces', serif; font-size: 4.5rem; font-weight: 800;
  position: absolute; bottom: -0.8rem; right: 0.5rem;
  opacity: 0.1; line-height: 1; pointer-events: none; color: #fff;
}
.card-ico { font-size: 1.8rem; margin-bottom: 0.7rem; display: block; }
.card-n {
  font-family: 'Fraunces', serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lime); opacity: 0.7; margin-bottom: 0.3rem;
}
.card-title {
  font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 800;
  line-height: 1.2; color: #fff; margin-bottom: 0.4rem;
}
.card-desc { font-size: 0.78rem; line-height: 1.55; color: rgba(200,245,216,0.65); }
.card-badge {
  display: inline-block; margin: 0.2rem 0.1rem 0 0;
  padding: 0.2rem 0.6rem; border-radius: 100px;
  font-size: 0.65rem; font-weight: 600;
  background: rgba(126,217,87,0.15);
  color: var(--lime); border: 1px solid rgba(126,217,87,0.3);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card.span2 { grid-column: span 1; }
}