/* Sourcing guides: index cards and long-form article reading layout. */
.dc-guides { padding-block: 32px 80px; background: #fff; color: var(--dc-tone-graphite, #16242c); }
.dc-guides .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 0; color: var(--dc-tone-muted, #53646e); }
.dc-guides .breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.dc-guides-head { max-width: 760px; margin: 28px 0 48px; }
.dc-guides-head .eyebrow, .dc-guide-head .eyebrow, .dc-guide-cta .eyebrow { margin-bottom: 12px; color: var(--dc-tone-accent-ink, #705338); text-transform: uppercase; }

.dc-guides-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
.dc-guide-card { display: flex; flex-direction: column; border: 1px solid #dce1e5; background: #fff; }
.dc-guide-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f1f3f5; }
.dc-guide-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px; }
.dc-collection-refresh #primary .dc-guide-card h2, .dc-collection-refresh #primary .dc-guide-card h3 { margin: 0; font-size: 22px; line-height: 1.4; }
.dc-collection-refresh #primary .dc-guide-card p { margin: 0; font-size: 16px; color: var(--dc-tone-muted, #53646e); }
.dc-guide-card .text-link { margin-top: auto; align-self: flex-start; }
.dc-collection-refresh #primary .dc-guide-meta { margin: 0; font-size: 14px; color: var(--dc-tone-muted, #53646e); }

.dc-guide-shell { max-width: 820px; }
.dc-guide-head { margin: 28px 0 32px; }
.dc-collection-refresh #primary .dc-guide-head h1 { margin: 0 0 16px; font-size: 46px; }
.dc-guide-cover { margin: 0 0 40px; background: #f1f3f5; }
.dc-guide-cover img { display: block; width: 100%; max-height: 520px; object-fit: contain; }

.dc-prose { overflow-wrap: break-word; }
.dc-collection-refresh #primary .dc-prose h2 { margin: 56px 0 16px; font-size: 32px; }
.dc-collection-refresh #primary .dc-prose h3 { margin: 36px 0 12px; font-size: 23px; }
.dc-collection-refresh #primary .dc-prose p { margin: 0 0 20px; }
.dc-collection-refresh #primary .dc-prose :is(ul, ol) { margin: 0 0 24px; padding-left: 1.3em; }
.dc-collection-refresh #primary .dc-prose li { margin-bottom: 8px; }
.dc-prose a { color: #236c91; text-decoration: underline; text-underline-offset: 3px; }
.dc-prose strong { font-weight: 600; }
.dc-prose .dc-table-wrap { margin: 0 0 28px; overflow-x: auto; }
.dc-prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.55; }
.dc-prose th, .dc-prose td { padding: 12px 14px; border: 1px solid #dce1e5; text-align: left; vertical-align: top; }
.dc-prose th { background: #edf1f3; font-weight: 600; }
.dc-prose .dc-note { margin: 0 0 28px; padding: 20px 24px; border-left: 3px solid var(--dc-tone-metal, #b49471); background: #f6f4f1; }
.dc-collection-refresh #primary .dc-prose .dc-note p:last-child { margin-bottom: 0; }

.dc-guide-cta { margin-top: 56px; padding: 36px; background: var(--dc-tone-graphite, #16242c); color: #fff; }
.dc-collection-refresh #primary .dc-guide-cta h2 { margin: 0 0 12px; font-size: 30px; color: #fff; }
.dc-collection-refresh #primary .dc-guide-cta p { color: #dce3e7; }
.dc-collection-refresh #primary .dc-guide-cta .eyebrow { color: #cab49c; }
.dc-guide-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dc-collection-refresh #primary .dc-guide-cta .button { background: #fff; color: var(--dc-tone-graphite, #16242c); border-color: #fff; }
.dc-collection-refresh #primary .dc-guide-cta .button-secondary { background: transparent; color: #fff; border-color: #8a9aa3; }
.dc-collection-refresh #primary .dc-guide-cta .button-secondary:hover { background: #22343d; }

.dc-guide-related { margin-top: 72px; padding-top: 48px; border-top: 1px solid #dce1e5; }
.dc-collection-refresh #primary .dc-guide-related h2 { margin: 0 0 28px; font-size: 30px; }

.dc-guides .navigation.pagination { margin-top: 48px; }
.dc-guides .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-guides .nav-links :is(a, span) { padding: 8px 14px; border: 1px solid #dce1e5; }

@media (max-width: 520px) {
	.dc-guides-list { grid-template-columns: 1fr; gap: 20px; }
	.dc-collection-refresh #primary .dc-guide-head h1 { font-size: 34px; }
	.dc-collection-refresh #primary .dc-prose h2 { font-size: 26px; }
	.dc-guide-cta { padding: 28px 22px; }
}