/* #######################################################################
 * 🐢 TPL — Soap Box Grid CSS
 * Version:    TPL v1.0.2 | TRTL 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);
}

/* Latest header row (portable) */
.sb-latest-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 14px;
}

.sb-latest-all{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--t-green);
  white-space:nowrap;
}
.sb-latest-all:hover{ text-decoration:underline; }

.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;
}

/* Thumb containment authority */
.sb-thumb{
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#e7f7ec,#e8f1ff);
}
.sb-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:0;
  background:linear-gradient(135deg,#e7f7ec,#f3fcf6);
}

.sb-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Hard fallback if WP image fails */
.sb-thumb--fallback{
  background:radial-gradient(circle at 0 0,#0e4727,#02130b);
}

.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; }

/* Skeletons */
.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;
}