/* Blog cards — relies on the page's design tokens (--surface, --line, --accent, --muted, --text, --serif, --radius). */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-5px);border-color:rgba(71,163,220,.45);box-shadow:0 22px 48px rgba(0,0,0,.35)}
.card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-media img{transform:scale(1.05)}
.cover-fallback{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(120% 120% at 20% 0%,rgba(71,163,220,.28),transparent 60%),linear-gradient(160deg,var(--surface-2),var(--surface))}
.cover-fallback span{font:400 clamp(26px,4vw,40px) var(--serif);color:var(--accent);text-align:center;padding:0 16px;text-transform:capitalize}
.ribbon{position:absolute;left:16px;top:16px;background:var(--accent);color:var(--accent-ink);padding:5px 14px;border-radius:999px;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.card-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:24px;line-height:1.22}
.card-body h3 a:hover{color:var(--accent)}
.card-body p{margin:0;color:var(--muted);font-size:15px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:auto;padding-top:6px;color:var(--muted);font-size:13px;letter-spacing:.04em}
.badge-tag,.badge-nl{align-self:flex-start;display:inline-block;padding:3px 13px;border-radius:999px;font:500 12px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.badge-tag{border:1px solid var(--line);color:var(--accent)}
a.badge-tag:hover{border-color:var(--accent)}
.badge-nl{background:rgba(71,163,220,.14);color:var(--accent-2);border:1px solid rgba(71,163,220,.35)}

/* highlighted (latest / pinned) card */
.card-feature{display:grid;grid-template-columns:1.15fr 1fr}
.card-feature .card-media{aspect-ratio:auto;min-height:340px}
.card-feature .card-body{padding:38px 40px;justify-content:center;gap:14px}
.card-feature .card-body h3{font-size:clamp(28px,3.2vw,40px)}
.card-feature .card-body p{font-size:16.5px;-webkit-line-clamp:4}

/* compact card (side list on the homepage) */
.card-compact{flex-direction:row;align-items:stretch}
.card-compact .card-media{aspect-ratio:auto;width:38%;flex:none;min-height:150px}
.card-compact .cover-fallback span{font-size:22px}
.card-compact .card-body{padding:20px 22px;gap:8px}
.card-compact .card-body h3{font-size:20px}

/* homepage featured layout: 1 big + up to 2 compact */
.feat-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:stretch}
.feat-grid .card-feature{grid-column:1;grid-row:1/span 2;grid-template-columns:1fr;grid-template-rows:auto 1fr}
.feat-grid .card-feature .card-media{min-height:0;aspect-ratio:16/9}
.feat-grid .card-feature .card-body{padding:30px 32px}
.feat-grid.solo{grid-template-columns:1fr}
.feat-grid.solo .card-feature{grid-row:auto;grid-template-columns:1.15fr 1fr;grid-template-rows:auto}
.feat-grid.solo .card-feature .card-media{aspect-ratio:auto;min-height:320px}
.feat-side{display:grid;gap:24px;grid-column:2;grid-row:1/span 2;grid-auto-rows:1fr}

.skeleton{border-radius:var(--radius);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;min-height:260px;border:1px solid var(--line)}
@keyframes shimmer{to{background-position:-200% 0}}

@media (max-width:980px){
  .card-feature,.feat-grid.solo .card-feature{grid-template-columns:1fr}
  .card-feature .card-media,.feat-grid.solo .card-feature .card-media{min-height:0;aspect-ratio:16/9}
  .card-feature .card-body{padding:26px}
  .feat-grid{grid-template-columns:1fr}
  .feat-grid .card-feature,.feat-side{grid-column:1;grid-row:auto}
}
@media (max-width:560px){
  .card-compact{flex-direction:column}
  .card-compact .card-media{width:100%;aspect-ratio:16/9;min-height:0}
}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}.card,.card-media img{transition:none}}