/* learning-hub.html — blog index (mobile-first) */

/* featured guide */
.feature { display:block; background:#fff; border:1px solid var(--border-subtle); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); transition:transform .15s ease, box-shadow .15s ease; }
.feature:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.feature-img { aspect-ratio:16/9; background:#111; }
.feature-img img { width:100%; height:100%; object-fit:cover; }
.feature-body { padding:28px 22px; }
.feature-body h2 { font-size:clamp(24px,5vw,34px); margin:14px 0 10px; }
.feature-body p { color:var(--fg-muted); font-size:15px; line-height:1.7; }
.readmore { display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--green-hover); }
@media (min-width:768px){
  .feature { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; }
  .feature-img { height:100%; aspect-ratio:auto; min-height:300px; }
  .feature-body { padding:40px 36px; }
}

/* posts grid */
.posts { display:grid; grid-template-columns:1fr; gap:22px; margin-top:32px; }
.post { background:#fff; border:1px solid var(--border-subtle); border-radius:16px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
.post:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.post-thumb { position:relative; aspect-ratio:16/10; background:#111; }
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-cat { position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 10px; border-radius:999px; }
.post-body { padding:20px; }
.post-meta { font-size:12px; color:var(--fg-subtle); }
.post-body h3 { font-size:17px; line-height:1.3; font-weight:700; margin:8px 0; }
.post:hover h3 { color:var(--green-hover); }
.post-body p { font-size:13.5px; line-height:1.6; color:var(--fg-muted); }

@media (min-width:768px){ .posts { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .posts { grid-template-columns:repeat(3,1fr); gap:24px; } }