/* ===== BLOG ===== */
#blog { background: var(--off); }
.blog-hd { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem; margin-bottom:2.75rem; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }

.blog-card {
  background:white; border-radius:20px; overflow:hidden;
  border:1px solid rgba(34,197,94,0.1);
  transition:transform .3s, box-shadow .3s; cursor:pointer;
}
.blog-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(22,101,52,0.1); }
.blog-img { height:188px; overflow:hidden; position:relative; background:var(--green-soft); }
.blog-img img { width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block; }
.blog-card:hover .blog-img img { transform:scale(1.06); }
.blog-cat {
  position:absolute; top:1rem; left:1rem;
  background:var(--green); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.07em;
  padding:.28rem .75rem; border-radius:100px;
}
.blog-body { padding:1.6rem; }
.blog-meta { font-size:.74rem; color:var(--muted); margin-bottom:.6rem; }
.blog-body h3 { font-size:.97rem; margin-bottom:.6rem; line-height:1.45; }
.blog-body p { font-size:.84rem; color:var(--muted); line-height:1.65; }
.blog-link {
  display:inline-flex; align-items:center; gap:5px;
  color:var(--green); font-size:.84rem; font-weight:600;
  margin-top:.85rem; text-decoration:none;
  border:none; background:none; cursor:pointer; font-family:'Figtree',sans-serif;
  padding:0;
}
.blog-link:hover { color:var(--green-dark); }

/* ===== BLOG MODAL ===== */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(20,83,45,0.5); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  padding:2rem;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:white; border-radius:24px;
  max-width:680px; width:100%;
  max-height:85vh; overflow:hidden;
  position:relative;
  box-shadow:0 40px 120px rgba(22,83,45,0.25);
  animation:modalIn .35s ease;
  display:flex; flex-direction:column;
}
.modal-box-inner {
  overflow-y:auto; padding:2.5rem; flex:1;
  scrollbar-width:thin; scrollbar-color:var(--green-mid) transparent;
}
.modal-box-inner::-webkit-scrollbar { width:6px; }
.modal-box-inner::-webkit-scrollbar-track { background:transparent; }
.modal-box-inner::-webkit-scrollbar-thumb { background:var(--green-mid); border-radius:100px; }
.modal-box-inner::-webkit-scrollbar-thumb:hover { background:var(--green); }
@keyframes modalIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.modal-close {
  position:sticky; top:0; float:right;
  width:36px; height:36px; border-radius:50%;
  background:var(--green-pale); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:18px; color:var(--sage);
  transition:background .2s; flex-shrink:0;
  margin-left:1rem;
}
.modal-close:hover { background:var(--green-soft); }
.modal-cat {
  display:inline-flex; background:var(--green); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.07em;
  padding:.28rem .75rem; border-radius:100px; margin-bottom:1rem;
}
.modal-meta { font-size:.78rem; color:var(--muted); margin-bottom:1.5rem; }
.modal-box h2 { font-size:1.5rem; margin-bottom:1.5rem; line-height:1.25; }
.modal-box .modal-body p { font-size:.95rem; color:var(--body); line-height:1.85; margin-bottom:1.25rem; }
.modal-box .modal-body h4 { font-size:1.05rem; margin:1.5rem 0 .6rem; color:var(--charcoal); }
.modal-box .modal-body ul { padding-left:1.25rem; margin-bottom:1.25rem; }
.modal-box .modal-body ul li { font-size:.95rem; color:var(--body); line-height:1.8; margin-bottom:.4rem; }