/* =========================================================================
 * HDM Blog — mobile-first, CLS-free article design system.
 * Scoped under body.hdm-blog-article. Inherits the site font (Sen).
 * Asset is filemtime-versioned (blog.php) so edits bust cache automatically.
 * ========================================================================= */

body.hdm-blog-article {
	--hdmb-ink: #161b22;
	--hdmb-muted: #5b6573;
	--hdmb-faint: #8a93a2;
	--hdmb-line: #e7ebf0;
	--hdmb-soft: #f5f8fc;
	--hdmb-soft-2: #eef3fa;
	--hdmb-bg: #ffffff;
	--hdmb-accent: #1257b8;
	--hdmb-accent-ink: #0c3f8a;
	--hdmb-accent-soft: #e8f0fb;
	--hdmb-pos: #1a9d63;
	--hdmb-neg: #d1495b;
	--hdmb-radius: 14px;
	--hdmb-radius-sm: 10px;
	--hdmb-shadow: 0 1px 2px rgba(20, 27, 38, .05), 0 10px 28px rgba(20, 27, 38, .07);
	--hdmb-shadow-sm: 0 1px 2px rgba(20, 27, 38, .06);
	--hdmb-prose: 100%; /* uniform width — every section matches the site content box, no breakout */
}

/* ---- Shell / layout ---------------------------------------------------- */
body.hdm-blog-article .hdm-blog-shell { background: var(--hdmb-bg); width: 100%; }
/* Let the article use the theme's full content width; we control width inside. */
body.hdm-blog-article #primary.content-area,
body.hdm-blog-article #main.site-main { max-width: 100%; width: 100%; float: none; margin: 0; }
/* Suppress the theme's duplicate breadcrumb + post sidebar (we render our own). */
body.hdm-blog-article .woocommerce-breadcrumb,
body.hdm-blog-article #secondary.widget-area { display: none; }

.hdm-blog {
	max-width: 1197px; /* match the site's .col-full content box for consistency with other pages */
	margin: 0 auto;
	padding: 18px 18px 56px;
	color: var(--hdmb-ink);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.hdm-blog * { box-sizing: border-box; }
.hdm-blog-icon { flex: 0 0 auto; vertical-align: -.15em; }
/* Override the theme's justified body text (.single-post .content-area .site-main p,
   specificity 0-3-1) — justify creates ugly rivers, especially on mobile. */
.hdm-blog, .hdm-blog p, .hdm-blog li, .hdm-blog h1, .hdm-blog h2, .hdm-blog h3,
.hdm-blog h4, .hdm-blog span, .hdm-blog a, .hdm-blog time, .hdm-blog td, .hdm-blog th { text-align: left !important; }

/* Centered readable text column. Rich components (ranking, table, popular)
   intentionally break out to the full 1040px container. */
.hdm-blog-crumbs,
.hdm-blog-title,
.hdm-blog-byline,
.hdm-blog-hero,
.hdm-blog-body > h2, .hdm-blog-body > h3, .hdm-blog-body > h4,
.hdm-blog-body > p, .hdm-blog-body > ul, .hdm-blog-body > ol,
.hdm-blog-body > blockquote, .hdm-blog-body > figure,
.hdm-blog-tldr, .hdm-blog-toc, .hdm-blog-faq, .hdm-blog-sources {
	max-width: var(--hdmb-prose);
	margin-left: auto;
	margin-right: auto;
}

/* ---- Breadcrumb -------------------------------------------------------- */
.hdm-blog-crumbs { margin: 6px 0 14px; }
.hdm-blog-crumbs ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--hdmb-faint);
}
.hdm-blog-crumbs li { display: flex; align-items: center; gap: 6px; }
.hdm-blog-crumbs li:not(:last-child)::after { content: "/"; color: var(--hdmb-line); }
.hdm-blog-crumbs a { color: var(--hdmb-muted); text-decoration: none; }
.hdm-blog-crumbs a:hover { color: var(--hdmb-accent); }
.hdm-blog-crumbs [aria-current="page"] span { color: var(--hdmb-faint); }

/* ---- Header / title / byline ------------------------------------------ */
.hdm-blog-title {
	font-size: clamp(1.8rem, 4vw + 1rem, 2.7rem);
	line-height: 1.16; letter-spacing: -.015em; font-weight: 800;
	margin: 0 0 18px; color: var(--hdmb-ink);
}
.hdm-blog-byline { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.hdm-blog-byline__chip {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 13px;
	background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius);
	padding: 12px 18px 12px 14px; box-shadow: var(--hdmb-shadow-sm); max-width: 100%;
}
.hdm-blog-byline__avatar { flex: 0 0 auto; }
.hdm-blog-byline__photo, .hdm-blog-byline__initials {
	width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; object-fit: cover;
	background: linear-gradient(140deg, var(--hdmb-accent), var(--hdmb-accent-ink)); color: #fff; font-weight: 800; font-size: 1.2rem;
}
.hdm-blog-byline__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hdm-blog-byline__name { font-weight: 800; font-size: 1rem; color: var(--hdmb-ink); }
.hdm-blog-byline__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-byline__name a:hover { color: var(--hdmb-accent); }
.hdm-blog-byline__title { color: var(--hdmb-muted); font-size: .85rem; }
.hdm-blog-byline__meta {
	display: flex; flex-wrap: wrap; gap: 18px 28px;
	padding-top: 16px; border-top: 1px solid var(--hdmb-line);
}
.hdm-blog-byline__metaitem { display: flex; align-items: center; gap: 10px; }
.hdm-blog-byline__metaicon {
	width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
	background: var(--hdmb-accent-soft); color: var(--hdmb-accent);
}
.hdm-blog-byline__metatext { display: flex; flex-direction: column; line-height: 1.25; }
.hdm-blog-byline__metalabel { font-size: .72rem; color: var(--hdmb-faint); font-weight: 600; }
.hdm-blog-byline__metaval { font-size: .9rem; font-weight: 700; color: var(--hdmb-ink); }
.hdm-blog-byline__reviewer { display: inline-flex; align-items: center; gap: 6px; color: var(--hdmb-pos); font-size: .85rem; font-weight: 600; margin: 0; }

/* ---- Hero -------------------------------------------------------------- */
.hdm-blog-hero { margin: 22px 0 8px; }
.hdm-blog-hero__img { width: 100%; height: auto; display: block; border-radius: var(--hdmb-radius); background: var(--hdmb-soft); }

/* ---- Body typography (prose capped to a readable measure) -------------- */
.hdm-blog-body { margin-top: 8px; }
.hdm-blog-body > h2, .hdm-blog-body > h3, .hdm-blog-body > h4,
.hdm-blog-body > p, .hdm-blog-body > ul, .hdm-blog-body > ol,
.hdm-blog-body > blockquote, .hdm-blog-body > figure,
.hdm-blog-tldr, .hdm-blog-toc { max-width: var(--hdmb-prose); }
.hdm-blog-body > h2, .hdm-blog-ranking__title, .hdm-blog-faq__title, .hdm-blog-sources__title, .hdm-blog-tableblock__caption {
	font-size: clamp(1.4rem, 1.6vw + 1rem, 1.75rem); line-height: 1.25; letter-spacing: -.01em; font-weight: 800;
	margin: 2em 0 .5em; scroll-margin-top: 90px;
}
.hdm-blog-body > h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 1.5em 0 .4em; scroll-margin-top: 90px; }
.hdm-blog-body > h4 { font-size: 1.08rem; font-weight: 700; margin: 1.3em 0 .35em; }
.hdm-blog-body p { margin: 0 0 1.1em; }
.hdm-blog-body a:not([class]) { color: var(--hdmb-accent-ink); text-underline-offset: 2px; }
.hdm-blog-body a:not([class]):hover { color: var(--hdmb-accent); }
.hdm-blog-body ul, .hdm-blog-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.hdm-blog-body li { margin: .35em 0; }
.hdm-blog-body img { max-width: 100%; height: auto; border-radius: var(--hdmb-radius-sm); }
.hdm-blog-body figure { margin: 1.4em 0; }
.hdm-blog-body figcaption { font-size: .8125rem; color: var(--hdmb-faint); text-align: center; margin-top: 6px; }
.hdm-blog-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--hdmb-accent); color: var(--hdmb-muted); font-style: italic; }

/* ---- Responsive video / map embeds (CLS-free via aspect-ratio) -------- */
.hdm-blog-video, .hdm-blog-embed { margin: 1.4em 0; }
.hdm-blog-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--hdmb-radius); overflow: hidden; }
.hdm-blog-video iframe, .hdm-blog-video video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain;
}
.hdm-blog-embed { aspect-ratio: 16 / 9; border-radius: var(--hdmb-radius); overflow: hidden; border: 1px solid var(--hdmb-line); }
.hdm-blog-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Video/map lead-in line (the "Watch ... in action" pointer) */
.hdm-blog-video-lead { font-weight: 600; margin-bottom: .4em !important; }

/* ---- Key takeaways (TL;DR) -------------------------------------------- */
.hdm-blog-tldr {
	background: linear-gradient(180deg, var(--hdmb-accent-soft), var(--hdmb-soft));
	border: 1px solid var(--hdmb-soft-2); border-radius: var(--hdmb-radius); padding: 18px 20px; margin: 22px 0;
}
.hdm-blog-tldr__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 10px; color: var(--hdmb-accent-ink); }
.hdm-blog-tldr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hdm-blog-tldr__list li { display: flex; gap: 9px; align-items: flex-start; }
.hdm-blog-tldr__list .hdm-blog-icon { color: var(--hdmb-pos); margin-top: 3px; }

/* ---- Table of contents ------------------------------------------------- */
.hdm-blog-toc { border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); padding: 14px 18px; margin: 22px 0; background: var(--hdmb-bg); }
.hdm-blog-toc__title { display: flex; align-items: center; gap: 7px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hdmb-faint); margin: 0 0 8px; }
.hdm-blog-toc__list { margin: 0; padding-left: 1.1em; display: grid; gap: 5px; }
.hdm-blog-toc__list a { color: var(--hdmb-muted); text-decoration: none; }
.hdm-blog-toc__list a:hover, .hdm-blog-toc__list a.is-active { color: var(--hdmb-accent); }

/* ---- Ranking cards ----------------------------------------------------- */
.hdm-blog-ranking { margin: 30px 0; }
.hdm-blog-ranking__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hdm-blog-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%;
	border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); background: var(--hdmb-bg);
	box-shadow: var(--hdmb-shadow-sm); transition: box-shadow .18s ease, transform .18s ease;
}
.hdm-blog-card:hover { box-shadow: var(--hdmb-shadow); transform: translateY(-2px); }
.hdm-blog-card--top { border-color: var(--hdmb-accent); box-shadow: 0 0 0 1px var(--hdmb-accent), var(--hdmb-shadow); }

.hdm-blog-card__media {
	position: relative; background: linear-gradient(160deg, #fff, var(--hdmb-soft));
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.hdm-blog-card__img { width: 100%; max-height: 230px; object-fit: contain; aspect-ratio: 16 / 10; }
.hdm-blog-card__rank {
	position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px;
	background: var(--hdmb-ink); color: #fff; font-weight: 800; font-size: .82rem;
	padding: 5px 11px; border-radius: 999px; box-shadow: var(--hdmb-shadow-sm);
}
.hdm-blog-card--top .hdm-blog-card__rank { background: var(--hdmb-accent); }
.hdm-blog-card--top .hdm-blog-card__rank .hdm-blog-icon { color: #ffd64a; }

.hdm-blog-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hdm-blog-card__tag {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
	background: var(--hdmb-accent-soft); color: var(--hdmb-accent-ink);
	font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
}
.hdm-blog-card__tag .hdm-blog-icon { color: var(--hdmb-accent); }
.hdm-blog-card__name { font-size: 1.22rem; font-weight: 800; line-height: 1.25; margin: 0; }
.hdm-blog-card__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-card__name a:hover { color: var(--hdmb-accent); }
.hdm-blog-card__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; }
.hdm-blog-card__brand { color: var(--hdmb-faint); font-size: .85rem; }
.hdm-blog-card__price { color: var(--hdmb-accent-ink); font-weight: 800; font-size: 1.18rem; margin-left: auto; }
.hdm-blog-card__blurb { color: var(--hdmb-muted); font-size: .95rem; }
.hdm-blog-card__proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 22px; margin-top: 4px; }
.hdm-blog-card__pros, .hdm-blog-card__cons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; align-content: start; }
.hdm-blog-card__pclabel { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--hdmb-faint); }
.hdm-blog-card__pros li, .hdm-blog-card__cons li { display: flex; gap: 8px; align-items: flex-start; }
.hdm-blog-card__pros .hdm-blog-icon { color: var(--hdmb-pos); margin-top: 2px; }
.hdm-blog-card__cons .hdm-blog-icon { color: var(--hdmb-neg); margin-top: 2px; }
.hdm-blog-card__cta {
	display: inline-flex; justify-content: center; align-items: center; gap: 7px;
	background: var(--hdmb-accent); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
	padding: 12px 20px; border-radius: var(--hdmb-radius-sm); margin-top: auto; align-self: flex-start; transition: background .15s ease;
}
.hdm-blog-card__cta, .hdm-blog-card__cta:hover, .hdm-blog-card__cta:visited { color: #fff; }
.hdm-blog-card__cta:hover { background: var(--hdmb-accent-ink); }
.hdm-blog-card__cta .hdm-blog-icon { transition: transform .15s ease; }
.hdm-blog-card__cta:hover .hdm-blog-icon { transform: translateX(3px); }

/* ---- Comparison table -------------------------------------------------- */
.hdm-blog-tableblock { margin: 26px 0; }
.hdm-blog-tableblock__caption { margin: 0 0 10px; }
.hdm-blog-tablewrap { overflow-x: auto; border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); -webkit-overflow-scrolling: touch; }
.hdm-blog-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 540px; }
.hdm-blog-table th, .hdm-blog-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--hdmb-line); }
.hdm-blog-table thead th { background: var(--hdmb-soft); font-weight: 700; position: sticky; top: 0; }
.hdm-blog-table th[scope="row"] { font-weight: 700; color: var(--hdmb-ink); }
.hdm-blog-table tbody tr:last-child th, .hdm-blog-table tbody tr:last-child td { border-bottom: 0; }

/* ---- FAQ (CSS-first accordion, no CLS) -------------------------------- */
.hdm-blog-faq { margin: 30px 0; max-width: var(--hdmb-prose); }
.hdm-blog-faq__list { display: grid; gap: 10px; }
.hdm-blog-faq__item { border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); background: var(--hdmb-bg); overflow: hidden; }
.hdm-blog-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; font-weight: 700; cursor: pointer; list-style: none; color: var(--hdmb-ink); }
.hdm-blog-faq__q::-webkit-details-marker { display: none; }
.hdm-blog-faq__q .hdm-blog-icon { color: var(--hdmb-faint); transition: transform .2s ease; }
.hdm-blog-faq__item[open] .hdm-blog-faq__q .hdm-blog-icon { transform: rotate(180deg); }
.hdm-blog-faq__item[open] .hdm-blog-faq__q { color: var(--hdmb-accent-ink); }
.hdm-blog-faq__a { padding: 0 16px 16px; color: var(--hdmb-muted); font-size: .96rem; }
.hdm-blog-faq__a p:last-child { margin-bottom: 0; }

/* ---- Sources ----------------------------------------------------------- */
.hdm-blog-sources { margin: 28px 0; padding: 18px 20px; background: var(--hdmb-soft); border-radius: var(--hdmb-radius); max-width: var(--hdmb-prose); }
.hdm-blog-sources__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 10px; }
.hdm-blog-sources__list { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; font-size: .9rem; }
.hdm-blog-sources__list a { color: var(--hdmb-accent-ink); }
.hdm-blog-sources__badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .72rem; color: var(--hdmb-pos); font-weight: 700; }

/* ---- Popular picks (curated high-sale-intent recommendations) ---------- */
.hdm-blog-popular { margin: 32px 0; padding: 20px; border: 1px solid var(--hdmb-soft-2); border-radius: var(--hdmb-radius); background: linear-gradient(180deg, var(--hdmb-accent-soft), var(--hdmb-bg) 130px); }
.hdm-blog-popular__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.hdm-blog-popular__head > .hdm-blog-icon { color: var(--hdmb-accent); margin-top: 3px; }
.hdm-blog-popular__title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.hdm-blog-popular__intro { color: var(--hdmb-muted); font-size: .9rem; margin: 4px 0 0; }
.hdm-blog-popular__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hdm-blog-pcard { display: flex; gap: 14px; align-items: center; text-decoration: none; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 12px; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.hdm-blog-pcard:hover { box-shadow: var(--hdmb-shadow-sm); border-color: var(--hdmb-accent); transform: translateY(-1px); }
.hdm-blog-pcard__media { flex: 0 0 108px; align-self: stretch; background: #fff; border: 1px solid var(--hdmb-line); border-radius: 8px; padding: 6px; display: grid; place-items: center; }
.hdm-blog-pcard__img { width: 100%; height: 86px; object-fit: contain; display: block; }
.hdm-blog-pcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hdm-blog-pcard__name { font-weight: 700; color: var(--hdmb-ink); font-size: .98rem; line-height: 1.3; }
.hdm-blog-pcard__reason { color: var(--hdmb-muted); font-size: .84rem; line-height: 1.35; }
.hdm-blog-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.hdm-blog-pcard__price { color: var(--hdmb-accent-ink); font-weight: 800; font-size: 1.02rem; }
.hdm-blog-pcard__cta { display: inline-flex; align-items: center; gap: 4px; color: var(--hdmb-accent); font-weight: 700; font-size: .85rem; }
.hdm-blog-pcard:hover .hdm-blog-pcard__cta { text-decoration: underline; }

/* ---- Author box (multi-card: identity + quote bio + expertise rows) ---- */
.hdm-blog-authorbox { margin: 44px 0 0; padding: 0; }
.hdm-blog-authorbox__eyebrow { margin: 0 0 14px; }
.hdm-blog-authorbox__eyebrow-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: #eafaf1; border: 1px solid #c3e9d3; color: var(--hdmb-pos);
	text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; font-weight: 800; padding: 9px 14px; border-radius: 11px;
}
.hdm-blog-authorbox__card { background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius); box-shadow: var(--hdmb-shadow-sm); }
.hdm-blog-authorbox__identity { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 14px; }
.hdm-blog-authorbox__avatar { position: relative; flex: 0 0 auto; }
.hdm-blog-authorbox__photo, .hdm-blog-authorbox__initials {
	width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
	background: linear-gradient(140deg, var(--hdmb-accent), var(--hdmb-accent-ink)); color: #fff; font-weight: 800; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(18,87,184,.28);
}
.hdm-blog-authorbox__badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--hdmb-accent); box-shadow: var(--hdmb-shadow-sm); }
.hdm-blog-authorbox__id { min-width: 0; }
.hdm-blog-authorbox__name { font-size: 1.25rem; font-weight: 800; margin: 0; line-height: 1.2; color: var(--hdmb-ink); }
.hdm-blog-authorbox__name a { color: var(--hdmb-ink); text-decoration: none; }
.hdm-blog-authorbox__role { color: var(--hdmb-accent-ink); font-weight: 600; font-size: .9rem; margin: 4px 0 0; line-height: 1.4; }

.hdm-blog-authorbox__bio {
	position: relative; overflow: hidden; margin-bottom: 14px; padding: 18px 22px 20px;
	background: linear-gradient(160deg, var(--hdmb-accent-soft), var(--hdmb-soft));
	border: 1px solid var(--hdmb-soft-2); border-radius: var(--hdmb-radius);
}
.hdm-blog-authorbox__quote { display: block; color: var(--hdmb-accent); opacity: .55; line-height: 0; margin-bottom: 4px; }
.hdm-blog-authorbox__bio p { color: var(--hdmb-ink); font-size: .96rem; margin: 0; position: relative; z-index: 1; }
.hdm-blog-authorbox__watermark { position: absolute; right: -16px; bottom: -28px; color: var(--hdmb-accent); opacity: .07; pointer-events: none; }

.hdm-blog-authorbox__expertise-label { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--hdmb-muted); margin: 0 0 10px; }
.hdm-blog-authorbox__expertise-label .hdm-blog-icon { color: var(--hdmb-pos); }
.hdm-blog-authorbox__topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hdm-blog-authorbox__topic { display: flex; align-items: center; gap: 12px; background: var(--hdmb-bg); border: 1px solid var(--hdmb-line); border-radius: var(--hdmb-radius-sm); padding: 11px 14px; }
.hdm-blog-authorbox__topicicon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--hdmb-accent-soft); color: var(--hdmb-accent); }
.hdm-blog-authorbox__topiclabel { flex: 1; color: var(--hdmb-accent-ink); font-weight: 700; font-size: .92rem; }
.hdm-blog-authorbox__topiccheck { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #eafaf1; color: var(--hdmb-pos); }
.hdm-blog-authorbox__links { margin: 16px 0 0; }
.hdm-blog-authorbox__links a { display: inline-flex; align-items: center; gap: 4px; color: var(--hdmb-accent-ink); font-size: .82rem; font-weight: 600; text-decoration: none; margin-right: 12px; }
.hdm-blog-authorbox__links a:hover { text-decoration: underline; }

/* ---- Desktop (≥760px): uniform-width sections, media-object cards ------ */
@media (min-width: 760px) {
	.hdm-blog { padding: 30px 30px 76px; }

	/* ranking: responsive grid of vertical cards (2-3 across, instead of full-width rows) */
	.hdm-blog-ranking__list { grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); align-items: stretch; }

	/* popular picks: fill the width */
	.hdm-blog-popular__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

	/* byline: chip + meta side by side */
	.hdm-blog-byline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
	.hdm-blog-byline__meta { padding-top: 0; border-top: 0; }

	/* author section uses the horizontal space: identity + bio (left), expertise (right) */
	.hdm-blog-authorbox { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
	.hdm-blog-authorbox__eyebrow { grid-column: 1 / -1; grid-row: 1; }
	.hdm-blog-authorbox__identity { grid-column: 1; grid-row: 2; }
	.hdm-blog-authorbox__bio { grid-column: 1; grid-row: 3; margin-bottom: 0; }
	.hdm-blog-authorbox__expertise { grid-column: 2; grid-row: 2 / span 2; }
	.hdm-blog-authorbox__links { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .hdm-blog * { transition: none !important; } }