/* ══════════════════════════════════════════
   home.css — Beranda / Homepage styles
══════════════════════════════════════════ */

/* ── BENTO GRID ── */
.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;
  cursor: default;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11,46,26,0.12);
}
.bento-card.span2 { grid-column: span 2; }
.bento-card.span1 { grid-column: span 1; }

/* Card color variants */
.bc-green  { background: linear-gradient(135deg, #e8f7e8, #d4f0d8); border: 1px solid #b8e4be; }
.bc-forest { background: linear-gradient(135deg, var(--forest), var(--deep)); }
.bc-lime   { background: linear-gradient(135deg, #d8f5c0, #c8f0a8); border: 1px solid #b0e087; }
.bc-white  { background: #fff; border: 1px solid var(--border); }
.bc-mid    { background: linear-gradient(135deg, var(--mid), #1d7a46); }
.bc-sdg3   { background: linear-gradient(135deg, #1a4d10, #2e7a1c); }
.bc-sdg4   { background: linear-gradient(135deg, #5c0a12, #891120); }
.bc-soft   { background: linear-gradient(135deg, #f0faf2, #e4f5e8); border: 1px solid var(--border); }

/* Ghost number watermark */
.bc-num {
  font-family: 'Fraunces', serif;
  font-size: 4.5rem; font-weight: 800;
  position: absolute; bottom: -0.8rem; right: 0.5rem;
  opacity: 0.07; line-height: 1;
  pointer-events: none; color: var(--forest);
}
.bc-forest .bc-num,
.bc-mid .bc-num,
.bc-sdg3 .bc-num,
.bc-sdg4 .bc-num { color: #fff; opacity: 0.1; }

/* Card inner elements */
.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;
  opacity: 0.5; margin-bottom: 0.3rem;
}
.bc-forest .card-n,
.bc-mid .card-n,
.bc-sdg3 .card-n,
.bc-sdg4 .card-n { color: var(--lime); opacity: 0.7; }

.card-title {
  font-family: 'Fraunces', serif;
  font-size: 1rem; font-weight: 800;
  line-height: 1.2; color: var(--forest);
  margin-bottom: 0.4rem;
}
.bc-forest .card-title,
.bc-mid .card-title,
.bc-sdg3 .card-title,
.bc-sdg4 .card-title { color: #fff; }

.card-desc { font-size: 0.78rem; line-height: 1.55; color: var(--muted); }
.bc-forest .card-desc,
.bc-mid .card-desc,
.bc-sdg3 .card-desc,
.bc-sdg4 .card-desc { color: rgba(200,245,216,0.65); }

.card-badge {
  display: inline-block;
  margin-top: 0.7rem; padding: 0.2rem 0.6rem;
  border-radius: 100px; font-size: 0.65rem; font-weight: 600;
  background: rgba(126,217,87,0.15);
  color: var(--leaf); border: 1px solid rgba(126,217,87,0.3);
}
.bc-forest .card-badge,
.bc-sdg3 .card-badge { color: var(--lime); }

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