/*
 * DiviTorque — Blog (C10 archive + C11 single).
 * Built from semantic tokens + global components. Source: 03-DESIGN-GUIDE.md C10/C11.
 */

/* ─── Hero + category chips ───────────────────────────────────────── */
.dt-blog-hero { padding: 0 0 clamp(20px, 3vw, 36px); }
.dt-blog-hero .dt-wrap { max-width: 820px; }
.dt-blog-tags { justify-content: center; }
.dt-blog-hero .dt-eyebrow { margin-bottom: 12px; }
.dt-blog-hero__title { font-size: var(--text-3xl); font-weight: var(--fw-semi); line-height: var(--lh-display); letter-spacing: -.022em; }
.dt-blog-hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); margin-top: 14px; }
.dt-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.dt-blog-tag { font-size: var(--text-sm); font-weight: var(--fw-med); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 8px 16px; }
.dt-blog-tag:hover { color: var(--color-text); border-color: var(--gray-300); }
.dt-blog-tag.is-current { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.dt-blog-tag:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ─── Listing ─────────────────────────────────────────────────────── */
.dt-blog-body { max-width: 760px; margin-inline: auto; padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(48px, 7vw, 80px); }
.dt-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }

/* ─── Simple post list (archive) — hairline-divided rows, no images ─── */
.dt-blog-list { display: flex; flex-direction: column; max-width: 760px; margin-inline: auto; }
.dt-post-row { position: relative; padding: clamp(22px, 3vw, 30px) 0; border-top: 1px solid var(--color-border); }
.dt-post-row:first-child { border-top: none; padding-top: 0; }
.dt-post-row__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: var(--text-sm); color: var(--color-text-faint);
	font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.dt-post-row__cat { color: var(--color-text); font-weight: var(--fw-med); }
.dt-post-row__dot { color: var(--color-text-faint); }
.dt-post-row__title {
	font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-semi);
	line-height: var(--lh-heading); letter-spacing: -.015em; margin: 0 0 8px;
}
.dt-post-row__title a { color: var(--color-text); }
/* Stretched link — whole row clickable, accessible name stays the title. */
.dt-post-row__link::after { content: ""; position: absolute; inset: 0; }
.dt-post-row:hover .dt-post-row__title a { text-decoration: underline; text-underline-offset: 3px; }
.dt-post-row__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 3px; }
.dt-post-row__excerpt { max-width: 64ch; margin: 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-body); }
/* Related list re-centers inside the surface band. */
.dt-article-related__list { max-width: 680px; margin-inline: auto; text-align: left; }

/* ─── Post card ───────────────────────────────────────────────────── */
.dt-post-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dt-post-card:hover { transform: translateY(-2px); border-color: var(--gray-300); box-shadow: var(--shadow-md); }
.dt-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--color-surface); overflow: hidden; }
.dt-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.dt-post-card:hover .dt-post-card__media img { transform: scale(1.03); }
.dt-post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; }
.dt-post-card__cat { align-self: flex-start; }
.dt-post-card__title { font-size: var(--text-lg); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.dt-post-card__title a:hover { text-decoration: underline; }
.dt-post-card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); }
.dt-post-meta { font-size: 13px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* Featured: side-by-side on wide screens */
.dt-post-card--feature { display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.dt-post-card--feature .dt-post-card__media { aspect-ratio: auto; height: 100%; min-height: 280px; }
.dt-post-card--feature .dt-post-card__body { justify-content: center; padding: clamp(24px, 4vw, 48px); }
.dt-post-card--feature .dt-post-card__title { font-size: var(--text-xl); }
@media (max-width: 760px) { .dt-post-card--feature { grid-template-columns: 1fr; } .dt-post-card--feature .dt-post-card__media { min-height: 0; aspect-ratio: 16 / 9; } }

@media (prefers-reduced-motion: reduce) {
	.dt-post-card, .dt-post-card__media img { transition: none; }
	.dt-post-card:hover { transform: none; }
	.dt-post-card:hover .dt-post-card__media img { transform: none; }
}

/* ─── Newsletter strip ────────────────────────────────────────────── */
.dt-blog-news { background: var(--color-surface); padding: clamp(40px, 6vw, 72px) 0; }
.dt-blog-news__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dt-blog-news__title { font-size: var(--text-xl); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.dt-blog-news__sub { color: var(--color-text-muted); margin-top: 6px; font-size: var(--text-sm); }
.dt-blog-news__form { display: flex; gap: 8px; }
.dt-blog-news__form input { min-width: 0; width: 260px; max-width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text); }
.dt-blog-news__form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ─── Single article ──────────────────────────────────────────────── */
.dt-article { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 80px); }
.dt-article__header { max-width: 68ch; margin: 0 auto; text-align: center; }
.dt-article__cat { display: inline-block; margin-bottom: 16px; }
.dt-article__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); line-height: var(--lh-heading); letter-spacing: -.02em; }
.dt-article__meta { display: flex; align-items: center; justify-content: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 18px; }
.dt-share { display: inline-flex; gap: 14px; font-size: 13px; }
.dt-share a { color: var(--color-text-muted); }
.dt-share a:hover { color: var(--color-text); text-decoration: underline; }
.dt-share a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.dt-article__cover { margin: clamp(28px, 5vw, 48px) auto 0; max-width: 820px; border-radius: var(--radius-xl); overflow: hidden; }
.dt-article__cover img { width: 100%; height: auto; display: block; }

/* ─── Article body prose (single centered column) ─────────────────── */
.dt-article__body { max-width: 68ch; margin: clamp(32px, 5vw, 56px) auto 0; font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--color-text); }
.dt-article__body > * { margin: 0 0 1.2em; }
.dt-article__body h2 { font-size: var(--text-xl); font-weight: var(--fw-semi); letter-spacing: -.01em; margin: 1.8em 0 .6em; }
.dt-article__body h3 { font-size: var(--text-lg); font-weight: var(--fw-semi); margin: 1.5em 0 .5em; }
.dt-article__body a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.dt-article__body ul, .dt-article__body ol { padding-left: 1.4em; }
.dt-article__body li { margin: 0 0 .5em; }
.dt-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.dt-article__body figure { margin: 1.6em 0; }
.dt-article__body figcaption { font-size: var(--text-sm); color: var(--color-text-faint); text-align: center; margin-top: 8px; }
.dt-article__body blockquote { border-left: 3px solid var(--color-border); padding-left: 20px; color: var(--color-text-muted); font-size: var(--text-xl); }
.dt-article__body pre { background: var(--gray-900); color: var(--gray-50); padding: 18px 20px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-sm); }
.dt-article__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--color-surface); padding: 2px 6px; border-radius: 6px; }
.dt-article__body pre code { background: none; padding: 0; }

/* ─── Related ─────────────────────────────────────────────────────── */
.dt-article-related { background: var(--color-surface); padding: clamp(48px, 7vw, 88px) 0; }
.dt-article-related__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); text-align: center; margin-bottom: 32px; }
.dt-article-related .dt-wrap { max-width: var(--container); }