/* guides section styles (owned by the guides workstream) */

/* Hub */
.guides-hub__lede { font-size: 1.15rem; color: var(--muted); }
.guide-cards { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin: 2rem 0 3rem; }
.guide-card { display: flex; flex-direction: column; position: relative; }
.guide-card:hover { border-color: var(--navy-2); }
.guide-card__title { font-size: 1.2rem; margin: 0 0 .5rem; }
.guide-card__title a { color: var(--navy); }
.guide-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
.guide-card__title a:hover { color: var(--accent-dark); }
.guide-card__desc { color: var(--muted); font-size: .98rem; flex: 1; }
.guide-card__date { font-size: .85rem; color: var(--muted); margin: 0; }

/* Article */
.guide__header { margin-bottom: 1.5rem; }
.guide__meta { color: var(--muted); font-size: .95rem; margin: 0; }
.guide__body h2 { margin-top: 1.8em; }
.guide__body li { margin-bottom: .35em; }
.guide__body li > ul, .guide__body li > ol { margin: .35em 0 0; }
.guide__body p:last-child em { color: var(--muted); font-size: .92rem; }
.guide__body p:last-child { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem; }
.guide__body a { text-underline-offset: 2px; }

/* CTA box with the lead form */
.guide-cta { background: var(--sand); border-radius: var(--radius); padding: 1.5rem; margin-top: 2.5rem; }
.guide-cta h2 { margin-top: 0; }
@media (max-width: 560px) { .guide-cta { padding: 1rem; } .guide-cta .lead-form { padding: 1rem; } }

/* Related guides */
.guide-related { margin-top: 2.5rem; }
.guide-related ul { padding-left: 1.2rem; }