/* Free resources page (resources.html). Builds on .resource-card in styles.css. */
.res-grid .resource-card { display: flex; flex-direction: column; gap: 6px; }
.res-grid .resource-card .btn { margin-top: auto; }
.res-grid .resource-card p:not(.res-meta) { margin-bottom: 4px; }
@media (min-width: 640px) and (max-width: 859px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.res-level { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.res-meta { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 12px; }
.res-note { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.res-cta { margin-top: 48px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 20px; }
.res-cta h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 8px; }
.res-cta p { color: var(--text-muted); margin: 0 auto 18px; max-width: 560px; }
.res-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* the guides card stays hidden until "Free AI guides" is launched */
.res-grid [data-launch][hidden] { display: none !important; }