/* Native adaptation of the approved blog index (Hero B featured article) and article.
   The approved dt-blog rules ship in editorial.css; this file only covers what the native
   markup needs: real links instead of buttons, GET filters, pagination, readable minimum
   sizes (body 16px, metadata 14px) and the WordPress editable body. */

/* ---- index hero ---- */
.bf-grid.bf-solo { grid-template-columns: minmax(0, 1fr); }
.bf-solo .bf-copy { max-width: 760px; }
.bf-topics a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid #3a2a2a; border-radius: 999px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #d9d6cc; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.bf-topics a .n { color: #b9b6ae; }
.bf-topics a:hover, .bf-topics a:focus-visible { border-color: var(--red); color: #fff; background: rgba(221, 67, 67, .1); }
.bf-feat .pic:not(:has(img)) { background: linear-gradient(135deg, #2a0f0f, #0f0b0b); }
.bf-feat .stamp { font-size: 14px; letter-spacing: .12em; height: 30px; }
.bf-feat .cat { font-size: 14px; letter-spacing: .12em; }
.bf-feat .meta { font-size: 14px; letter-spacing: .04em; }
.bf-feat .meta .who img { flex: none; }
.bf-feat h2 { overflow-wrap: anywhere; }
.bf-h1 { overflow-wrap: anywhere; }

/* ---- filters (GET form) ---- */
.bl-search { position: relative; display: flex; align-items: center; color: #5d5b56; }
.bl-search input { -webkit-appearance: none; appearance: none; padding-right: 112px; font-size: 16px; }
.bl-search input::-webkit-search-cancel-button { display: none; }
.bl-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--cream-ink); color: #fff; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease; }
.bl-search button:hover, .bl-search button:focus-visible { background: var(--red); }
.bl-cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; white-space: nowrap; border: 1px solid #cfccc3; border-radius: 999px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.bl-cats a:hover, .bl-cats a:focus-visible { border-color: var(--red); color: var(--red); }
.bl-cats a.on { background: var(--cream-ink); border-color: var(--cream-ink); color: #fff; }
.bl-cats a .n { letter-spacing: .04em; }
.bl-topics-k { font-size: 14px; letter-spacing: .14em; }
.bl-count { font-size: 14px; letter-spacing: .08em; }
.bl-sort select { height: 40px; padding: 0 36px 0 16px; border: 1px solid #cfccc3; border-radius: 999px; background: #fbfaf4; font-family: var(--mono); font-size: 14px; color: var(--cream-ink); cursor: pointer; max-width: 100%; }
.bl-sort select:focus-visible, .bl-search button:focus-visible, .bl-cats a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---- cards ---- */
.bl-card .cat, .bl-cat { font-size: 14px; letter-spacing: .12em; }
.bl-card .pic:not(:has(img)) { background: linear-gradient(135deg, #2a0f0f, #121212); }
.bl-card h3 { overflow-wrap: anywhere; }
.bl-card .ex { font-size: 16px; line-height: 26px; }
.bl-card .meta { font-size: 14px; letter-spacing: .04em; }
.bl-card .meta .who img { flex: none; }
.bl-empty .dt-pill { display: inline-flex; color: var(--cream-ink); border-color: var(--cream-ink); }
.bl-empty .dt-pill:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* Pagination is shared with the reference app in dt-blog.css (editorial/guide bundles). */

/* ---- article header ---- */
.bl-head.no-cover { padding-bottom: 56px; }
.bl-crumbs ol { font-size: 14px; }
.bl-crumbs a:focus-visible, .bl-cat a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.bl-head .bl-h1 { overflow-wrap: anywhere; }
.bl-head .dt-bylines { margin-top: 32px; max-width: 900px; }
.bl-meta dt { font-size: 14px; letter-spacing: .14em; color: #b9b6ae; }
.bl-meta dd { font-size: 15px; }
.bl-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- article body: the editable WordPress content in the approved reading style ---- */
.bl-article .bl-prose { font-family: var(--mono); color: #2a2927; overflow-wrap: anywhere; }
.bl-article .bl-prose > * { max-width: 100%; }
.bl-article .bl-prose > :first-child { margin-top: 0; }
.bl-article .bl-prose > p, .bl-article .bl-prose > .wp-block-paragraph { margin: 20px 0 0; font-size: 16px; line-height: 29px; }
.bl-article .bl-prose :is(h2, h3, h4) { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--ls); text-transform: uppercase; color: var(--cream-ink); scroll-margin-top: 110px; }
.bl-article .bl-prose h2 { margin: 56px 0 0; font-size: 34px; line-height: 1.02; }
.bl-article .bl-prose .bl-keypoints h2 { margin: 0; }
.bl-article .bl-prose .bl-keypoints ul { list-style: none; padding: 0; margin: 18px 0 0; }
.bl-article .bl-prose .bl-keypoints li { list-style: none; padding-left: 24px; margin: 0; }
.bl-article .bl-prose .bl-keypoints li::marker { content: ""; }
.bl-article .bl-prose > h2:first-child { margin-top: 0; }
.bl-article .bl-prose h3 { margin: 40px 0 0; font-size: 26px; line-height: 1.05; }
.bl-article .bl-prose h4 { margin: 32px 0 0; font-size: 21px; line-height: 1.1; }
.bl-article .bl-prose :is(ul, ol) { margin: 20px 0 0; padding-left: 24px; list-style: revert; }
.bl-article .bl-prose li { margin: 10px 0; font-size: 16px; line-height: 27px; }
.bl-article .bl-prose a:not(.dt-btn-solid):not(.dt-btn-ghost) { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(221, 67, 67, .7); transition: color .2s ease, border-color .2s ease; }
.bl-article .bl-prose a:not(.dt-btn-solid):not(.dt-btn-ghost):hover { color: var(--red); }
.bl-article .bl-prose blockquote { margin: 32px 0 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--red); font-size: 18px; line-height: 30px; }
.bl-article .bl-prose :is(figure, .wp-block-image) { margin: 36px 0 0; }
.bl-article .bl-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.bl-article .bl-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 22px; color: #5d5b56; }
.bl-article .bl-prose :is(table, .wp-block-table) { font-size: 14px; }
.bl-article .bl-prose :is(pre, code) { font-size: 14px; }

/* ---- article footer ---- */
.bl-foot .dt-evidence { margin: 0; padding: 0; border: 0; }
.bl-foot .dt-evidence summary { font-family: var(--mono); font-size: 16px; }
.bl-foot .dt-evidence details > div { font-size: 16px; line-height: 27px; }
.bl-tags .k { font-size: 14px; }
.bl-tags a { min-height: 36px; font-size: 14px; }
.bl-editorial .bio { margin-top: 18px; max-width: 66ch; font-family: var(--mono); font-size: 16px; line-height: 27px; color: #2a2927; }
/* The credentials line is the short bio in the article footer; the full bio opens below it. */
.bl-foot .dt-person .cred { max-width: 66ch; font-size: 15px; line-height: 24px; color: #2a2927; }

/* ---- sidebar (scoped so the generic resource sidebar is untouched) ---- */
.bl-article .bl-toc a { font-size: 14px; }
.bl-article .bl-side .k { font-size: 14px; letter-spacing: .14em; }
.bl-article .bl-side h2.k { margin: 0; font-weight: 400; }
.bl-article .bl-popular .cat, .bl-article .bl-popular .n { font-size: 14px; }
.bl-article .bl-popular li a { grid-template-columns: 28px minmax(0, 1fr) 56px; }
.bl-article .bl-popular .t, .bl-article .bl-featured .t { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--ls); text-transform: uppercase; }
.bl-article .bl-popular .t { font-size: 22px; line-height: 1.05; }
.bl-article .bl-featured .t { font-size: 24px; line-height: 1.05; }
.bl-article .bl-featured .lab { font-size: 14px; }
.bl-article .bl-featured .d { font-size: 14px; line-height: 21px; }
.bl-article .bl-side-card .more { font-size: 14px; }
.bl-article .bl-side-card .dt-person .cred { display: none; }
.bl-article .bl-side-card .dt-person .kind { font-size: 14px; letter-spacing: .1em; }
.bl-article .bl-side-card .dt-btn-ghost.dark { white-space: normal; text-align: center; }
.bl-article .bl-popular img, .bl-article .bl-popular li a > span[aria-hidden] { width: 56px; height: 64px; }

/* ---- related ---- */
.bl-related .bl-card .cat a:hover { color: var(--red); }

/* ---- responsive ---- */
@media (max-width: 700px) {
  .bl-search input { padding-right: 104px; }
  .bl-article .bl-prose h2 { font-size: 30px; }
  .bl-article .bl-prose > p, .bl-article .bl-prose > .wp-block-paragraph { font-size: 16px; line-height: 28px; }
  .bf-topics a { min-height: 44px; }
  .bl-cats a { min-height: 44px; }
  .bl-sort select { height: 44px; }
  .bl-pager .nav-links { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-feat, .bf-feat .pic img, .bf-feat .meta .go::after { transition: none; }
  .bf-feat:hover { transform: none; }
}