/* #######################################################################
 * 🐢 TPL — Soap Box Grid CSS
 * Version: v1.0.1
 ####################################################################### */
:root{ --sb-border: rgba(0,0,0,.06); --sb-shadow1: 0 1px 2px rgba(0,0,0,.08); --sb-shadow2: 0 8px 24px rgba(0,0,0,.06) }
html[data-theme="dark"]{ --sb-border: rgba(255,255,255,.08); --sb-shadow1: 0 1px 2px rgba(0,0,0,.5); --sb-shadow2: 0 8px 24px rgba(0,0,0,.35) }
.sb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
@media (max-width:1024px){ .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .sb-grid{grid-template-columns:1fr} }
.sb-card{ display:flex;flex-direction:column; background:#fff; border:1px solid var(--sb-border); border-radius:16px; overflow:hidden; box-shadow:var(--sb-shadow1),var(--sb-shadow2) }
html[data-theme="dark"] .sb-card{ background:#161718 }
.sb-card a{ color:inherit; text-decoration:none; display:block }
.sb-thumb{ width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#e7f7ec,#e8f1ff) }
.sb-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.sb-body{ padding:16px 16px 18px }
.sb-title{ font-size:18px; line-height:1.35; margin:0 0 8px; color:var(--t-fg) }
.sb-excerpt{ color:var(--t-muted); font-size:14px; margin:0 0 10px }
.sb-cta{ color:var(--t-green); font-weight:600; font-size:14px }
.sb-skeleton .sb-thumb{ background:#e9ecef }
.sb-skeleton h3,.sb-skeleton p{ height:14px; background:#e9ecef; border-radius:8px; margin:14px }
.sb-skeleton p{ width:70% }
html[data-theme="dark"] .sb-skeleton .sb-thumb,html[data-theme="dark"] .sb-skeleton h3,html[data-theme="dark"] .sb-skeleton p{ background:#2a2b2d }