/* ==========================================================================
   HasanWebs Blog Page — "Insights & Ideas"
   Scoped entirely under .hwb-blog. Loaded only on the Blog page (is_home()).
   Design tokens follow the site's active "Hasan Syed — Warm Ink" system.
   ========================================================================== */

.hwb-blog {
  --hwb-bg: #FFFFFF;
  --hwb-surface: #FFFFFF;
  --hwb-band: #F2EDE4;
  --hwb-ink: #14130F;
  --hwb-body: #4A463F;
  --hwb-muted: #6E6961;
  --hwb-accent: #C9982F;
  --hwb-accent-ink: #8A6A22;
  --hwb-accent-on-dark: #E8C06A;
  --hwb-line: rgba(20,19,15,0.09);
  --hwb-shadow: rgba(20,19,15,0.08);
  --hwb-radius-sm: 10px;
  --hwb-radius-md: 18px;
  --hwb-radius-lg: 22px;
  --hwb-radius-pill: 999px;
  --hwb-header-h: 84px; /* fallback; blog.js sets the live value */
  --hwb-max: 1440px;
  --hwb-gutter: clamp(20px, 4vw, 48px);
  --hwb-sidebar-w: 344px;

  background: var(--hwb-bg);
  color: var(--hwb-body);
}

/* ---------------------------------------------------------------------
   Outer page background + boxed-container fix (targeted refinement pass)
   Root cause: Astra's "Separate Containers" layout mode adds body class
   .ast-separate-container, which (a) paints the page background using
   var(--ast-global-color-5) -- the pale blue (#F0F5FA) behind the content --
   and (b) #primary { margin: 4em 0px; } wraps the main content in its own
   vertical margin, so a white content area appeared to float as a boxed
   card on a blue page. This is a global Astra layout setting used across
   the whole site, so instead of changing it globally we neutralize it here,
   scoped to the Blog page only (body.blog), leaving every other page's
   Astra layout untouched.
   --------------------------------------------------------------------- */
body.blog.ast-separate-container,
body.search-results.ast-separate-container {
  background: #FFFFFF;
}

body.blog.ast-separate-container #primary,
body.blog .ast-separate-container #primary,
body.search-results.ast-separate-container #primary,
body.search-results .ast-separate-container #primary {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: #FFFFFF;
}


.hwb-blog * { box-sizing: border-box; }

.hwb-blog a { text-decoration: none; color: inherit; }

.hwb-blog h1, .hwb-blog h2, .hwb-blog h3, .hwb-blog h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--hwb-ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

html[lang^="ar"] .hwb-blog h1,
html[lang^="ar"] .hwb-blog h2,
html[lang^="ar"] .hwb-blog h3,
html[lang^="ar"] .hwb-blog h4,
html[lang^="ar"] .hwb-blog {
  font-family: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif;
}

.hwb-eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hwb-accent-ink);
  font-weight: 700;
  margin: 0 0 14px;
}

.hwb-eyebrow--dark { color: var(--hwb-accent-on-dark); }

/* ---------------------------------- Hero --------------------------------- */
/* Editorial split hero: content left, visual right. Full-width, sits outside
   the sticky two-column grid below, and shares the page's white ground so it
   reads as one continuous layout rather than a separate boxed panel. */

.hwb-hero {
  background: var(--hwb-bg);
  padding: clamp(56px, 7vw, 96px) var(--hwb-gutter);
}

.hwb-hero__inner {
  max-width: var(--hwb-max);
  margin: 0 auto;
  display: block;
}

.hwb-hero__content { max-width: 640px; }



.hwb-hero__title {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: 20px;
}

.hwb-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--hwb-body);
  margin: 0;
}

.hwb-hero__media {
  position: relative;
  border-radius: var(--hwb-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
  background: var(--hwb-band);
  box-shadow: 0 24px 60px rgba(20,19,15,0.12);
}

.hwb-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------- Shell / Grid ---------------------------- */

/* Astra's "Blog Width" customizer control (theme_mods_astra['astra-settings']['blog-max-width'] = 820)
   caps .ast-container at 820px specifically on the posts-page archive. That setting is dormant/unused
   elsewhere (single posts use a separate 'blog-single-max-width'), so it's safe to neutralize it here,
   scoped to this page only — not touched in wp-admin, not touched globally. */
body.blog .site-content .ast-container,
body.search-results .site-content .ast-container {
  max-width: none;
  width: 100%;
}

.hwb-shell {
  max-width: var(--hwb-max);
  margin: 0 auto;
  padding: 0 var(--hwb-gutter);
}

.hwb-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hwb-sidebar-w);
  gap: clamp(32px, 3vw, 40px);
  /* No align-items:start here on purpose: the sidebar column must stretch to the
     main column's full height so its sticky inner wrapper has room to travel
     and then release naturally at the bottom of this grid. See .hwb-sidebar__inner. */
}

.hwb-main { min-width: 0; }

.hwb-section { margin-bottom: clamp(56px, 6vw, 84px); }

.hwb-section__title {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-bottom: 24px;
}

/* --------------------------------- Cards --------------------------------- */

.hwb-card {
  background: var(--hwb-surface);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px var(--hwb-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hwb-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px var(--hwb-shadow);
}

.hwb-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hwb-band);
}

.hwb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hwb-card:hover .hwb-card__media img { transform: scale(1.05); }

.hwb-card__media-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hwb-band), var(--hwb-bg));
}

.hwb-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.hwb-card__cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--hwb-accent-ink);
  align-self: flex-start;
}

.hwb-card__cat:hover { color: var(--hwb-accent); }

.hwb-card__title {
  font-size: 1.08rem;
  line-height: 1.35;
}

.hwb-card__title a:hover { color: var(--hwb-accent-ink); }

.hwb-card__excerpt {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--hwb-body);
  margin: 0;
}

.hwb-card__meta {
  margin: auto 0 0;
  font-size: 0.8rem;
  color: var(--hwb-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---- Picks grid: one large featured + two compact ---- */

.hwb-picks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr);
  grid-template-rows: auto auto;
  gap: 28px;
}

.hwb-card--featured {
  grid-row: 1 / 3;
}

.hwb-card--featured .hwb-card__media { aspect-ratio: 16 / 11; }

.hwb-card--featured .hwb-card__title { font-size: 1.5rem; }

.hwb-card--compact .hwb-card__media { aspect-ratio: 16 / 10; }

/* ---- Essentials / Recent grids ---- */

.hwb-essentials__grid,
.hwb-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ------------------------------ Category pills --------------------------- */

.hwb-cats__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hwb-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hwb-surface);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius-pill);
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hwb-ink);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.hwb-cat-pill:hover {
  border-color: var(--hwb-accent);
  background: var(--hwb-band);
  transform: translateY(-2px);
}

.hwb-cat-pill__count {
  background: var(--hwb-band);
  color: var(--hwb-muted);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--hwb-radius-pill);
  padding: 2px 8px;
}

.hwb-cat-pill:hover .hwb-cat-pill__count { background: var(--hwb-surface); }

/* --------------------------------- Empty --------------------------------- */

.hwb-empty {
  color: var(--hwb-muted);
  font-style: italic;
}

/* ------------------------------- Pagination ------------------------------ */

.hwb-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hwb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--hwb-radius-pill);
  background: var(--hwb-surface);
  border: 1px solid var(--hwb-line);
  color: var(--hwb-ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.hwb-pagination .page-numbers.current {
  background: var(--hwb-accent);
  border-color: var(--hwb-accent);
  color: var(--hwb-ink);
}

.hwb-pagination .page-numbers:not(.current):not(.dots):hover {
  border-color: var(--hwb-accent);
}

/* -------------------------------- Sidebar --------------------------------- */

.hwb-sidebar { min-width: 0; }

.hwb-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--hwb-header-h) + 24px);
}

.hwb-side-card {
  background: var(--hwb-surface);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius-md);
  padding: 22px;
  box-shadow: 0 1px 2px var(--hwb-shadow);
}

.hwb-side-card .hwb-side-card__title {
  font-size: 1rem;
  margin-bottom: 18px; /* 2026-09-01i: FIX \u2014 raised selector specificity (.hwb-side-card .hwb-side-card__title, 0,2,0) so this actually beats '.hwb-blog h1,h2,h3,h4{margin:0}' (0,1,1) in assets/css/blog.css line ~2163, which was silently zeroing every previous margin-bottom value (10px\u219216px\u219218px\u219222px) regardless of source order, since specificity always wins over order. */
}

.hwb-side-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--hwb-body);
  margin: 0;
}

.hwb-side-search form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hwb-band);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius-md);
  padding: 6px 6px 6px 18px;
}

html[lang^="ar"] .hwb-side-search form { padding: 6px 18px 6px 6px; }

.hwb-side-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 6px 0;
  outline: none;
  color: var(--hwb-ink);
}

.hwb-side-search input::placeholder { color: var(--hwb-muted); }

.hwb-side-search button {
  border: 0;
  cursor: pointer;
  background: var(--hwb-accent);
  color: var(--hwb-ink);
  width: 38px;
  height: 38px;
  border-radius: var(--hwb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.hwb-side-search button:hover { transform: translateY(-1px); }

/* Search icon fix (targeted refinement pass): the inline SVG's HTML
   width/height attributes were not being honoured inside the flex button
   (computed width resolved to 0), making the button look like a blank
   gold pill. Force explicit CSS sizing so the icon always renders. */

.hwb-side-search button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}


.hwb-side-search:focus-within form {
  border-color: var(--hwb-accent);
}

.hwb-side-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.hwb-side-cat-list li + li { border-top: 1px solid var(--hwb-line); }

.hwb-side-cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hwb-ink);
}

.hwb-side-cat-list a:hover { color: var(--hwb-accent-ink); }

.hwb-side-cat-list__count {
  font-size: 0.76rem;
  color: var(--hwb-muted);
  font-weight: 600;
}

.hwb-side-rows { display: flex; flex-direction: column; gap: 16px; }

.hwb-row { display: flex; gap: 12px; align-items: flex-start; }

.hwb-row__media {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--hwb-radius-sm);
  overflow: hidden;
  background: var(--hwb-band);
  display: block;
}

.hwb-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hwb-row__body { min-width: 0; }

.hwb-row__cat {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--hwb-accent-ink);
  margin-bottom: 2px;
}

.hwb-row__title {
  font-size: 0.9rem;
  line-height: 1.35;
  margin: 0 0 4px;
  font-family: 'Space Grotesk', sans-serif;
}

html[lang^="ar"] .hwb-row__title { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.hwb-row__title a:hover { color: var(--hwb-accent-ink); }

.hwb-row__meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--hwb-muted);
  display: flex;
  gap: 6px;
}

/* ---- Sidebar dark project CTA ---- */

.hwb-side-cta {
  background: var(--hwb-ink);
  border-radius: var(--hwb-radius-md);
  padding: 26px 22px;
  color: #fff;
}

.hwb-side-cta__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hwb-accent-on-dark);
  font-weight: 700;
  margin: 0 0 8px;
}

.hwb-side-cta__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.hwb-side-cta__body {
  font-size: 0.87rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0 0 18px;
}

.hwb-side-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--hwb-accent);
  color: var(--hwb-ink);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 13px 20px;
  border-radius: var(--hwb-radius-pill);
  transition: transform 0.2s ease;
}

.hwb-side-cta__btn:hover { transform: translateY(-2px); }

/* -------------------------- Pre-footer value CTA -------------------------- */

.hwb-value-cta {
  background: var(--hwb-ink);
  margin-top: clamp(64px, 8vw, 100px);
  padding: clamp(56px, 8vw, 96px) var(--hwb-gutter);
}

.hwb-value-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.hwb-value-cta__title {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 14px;
}

.hwb-value-cta__body {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.hwb-value-cta__btn {
  display: inline-flex;
  align-items: center;
  background: var(--hwb-accent);
  color: var(--hwb-ink);
  font-weight: 700;
  padding: 15px 34px;
  border-radius: var(--hwb-radius-pill);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hwb-value-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,152,47,0.3); }

/* -------------------------------- RTL ------------------------------------ */

html[dir="rtl"] .hwb-cat-pill,
html[dir="rtl"] .hwb-pagination { direction: rtl; }

html[dir="rtl"] .hwb-side-search svg { transform: scaleX(-1); }

/* ------------------------------ Focus states ------------------------------ */

.hwb-blog a:focus-visible,
.hwb-blog button:focus-visible,
.hwb-blog input:focus-visible {
  outline: 2px solid var(--hwb-accent);
  outline-offset: 2px;
}

/* -------------------------------- Motion ---------------------------------- */

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

/* ------------------------------- Tablet (≤1024px) ------------------------- */
/* Sidebar collapses beneath main content; sticky is disabled entirely. */

@media (max-width: 1024px) {
  .hwb-columns {
    grid-template-columns: 1fr;
  }
  .hwb-sidebar__inner {
    position: static;
    top: auto;
  }
  .hwb-sidebar {
    margin-top: 8px;
    padding-top: 28px;
    border-top: 1px solid var(--hwb-line);
  }
  .hwb-section { margin-bottom: 40px; }
  .hwb-picks__grid {
    grid-template-columns: 1fr 1fr;
  }
  .hwb-card--featured { grid-column: 1 / 3; grid-row: auto; }

  /* Medium desktop / tablet: 2 columns, never a single long feed. */
  .hwb-essentials__grid,
  .hwb-recent__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------- Mobile (≤640px) -------------------------- */
/* One clean vertical flow; only curated sidebar content re-appears, not all of it. */

@media (max-width: 640px) {
  .hwb-hero { padding: 40px 20px 40px; }
  .hwb-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: start;
  }
  .hwb-hero__content { max-width: none; }
  .hwb-hero__media { aspect-ratio: 4 / 3; order: 2; }
  .hwb-hero__content { order: 1; }
  .hwb-hero__title { font-size: 2.1rem; }
  .hwb-hero__sub { margin: 0; }
  .hwb-picks__grid { grid-template-columns: 1fr; gap: 20px; }
  .hwb-card--featured { grid-column: auto; }
  .hwb-card--featured .hwb-card__title { font-size: 1.2rem; }
  .hwb-card--featured .hwb-card__media { aspect-ratio: 3 / 2; }

  /* Recent Articles: compact, plain cards - smaller image, tighter body,
     no excerpt - deliberately plainer than Important Articles below. */
  .hwb-recent__grid { grid-template-columns: 1fr; gap: 16px; }
  .hwb-recent__grid .hwb-card__media { aspect-ratio: 16 / 9; }
  .hwb-recent__grid .hwb-card__body { padding: 14px 16px 16px; gap: 6px; }
  .hwb-recent__grid .hwb-card__title { font-size: 0.98rem; }

  /* Important Articles for New Business Owners: kept visually distinct from
     Recent Articles - slightly larger image + its own excerpt line (see
     hasanwebs_render_card's 'essential' variant) so the two sections don't
     look like duplicates of each other. */
  .hwb-essentials__grid { grid-template-columns: 1fr; gap: 18px; }
  .hwb-essentials__grid .hwb-card__media { aspect-ratio: 3 / 2; }
  .hwb-card--essential .hwb-card__cat {
    background: var(--hwb-band);
    padding: 3px 10px;
    border-radius: var(--hwb-radius-pill);
  }

  .hwb-cats__row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .hwb-cat-pill { flex: 0 0 auto; }

  /* Trim the sidebar hard on mobile: search now lives ONLY in the sidebar
     (the hero no longer has one) so it stays visible here; one project CTA
     (the full-width one before the footer) is enough - showing the dark
     sidebar CTA too would put two identical CTAs back to back. */
  .hwb-side-about { display: none; }
  .hwb-side-cta { display: none; }
  .hwb-side-mostread .hwb-row:nth-child(n + 4) { display: none; }

  .hwb-value-cta { margin-top: 40px; padding-top: 48px; padding-bottom: 48px; }
}
/* ==========================================================================
   Targeted refinement pass (2026-09-01f): heading-to-content spacing on
   mobile, and a sticky "Browse by Category" pill row on mobile only.
   Nothing here touches the desktop/tablet layout, the sidebar's own
   category list (.hwb-side-cat-list), or any other section.
   ========================================================================== */

/* ---- mobile-only: more deliberate gap under each section heading ---- */
@media (max-width: 640px) {
  .hwb-section__title { margin-bottom: 20px; }
  /* Category pills and card grids read tighter than plain text against a
     heading, so those two get slightly more room. Still inside the
     requested 18–24px range — not extra blank space, just deliberate. */
  .hwb-cats .hwb-section__title,
  .hwb-essentials .hwb-section__title,
  .hwb-recent .hwb-section__title,
  .hwb-picks .hwb-section__title {
    margin-bottom: 22px;
  }
  /* Safeguard: any paragraph sitting directly under a section heading
     (now or in future) gets its own breathing room instead of inheriting
     the heading's tight line-height spacing. */
  .hwb-section__title + p { margin-top: 14px; }
}

/* ---- mobile-only: sticky "Browse by Category" pill row ----
   This targets ONLY .hwb-cats, the horizontal-pill section between the
   Picks and Essentials sections. It does NOT affect .hwb-side-cat-list,
   the plain list-style categories card that appears later in the
   mobile-stacked sidebar — that stays exactly as it is, non-sticky.
   Reuses --hwb-header-h, the same live-measured header-height variable
   already used for the desktop sidebar's sticky offset (see blog.js). */
@media (max-width: 640px) {
  .hwb-cats {
    position: sticky;
    top: var(--hwb-header-h);
    z-index: 40;
    background: var(--hwb-bg);
    /* Bleed edge-to-edge so cards/images scrolling underneath never show
       through the sides — .hwb-main is inset by --hwb-gutter via the
       .hwb-shell wrapper, so cancel that inset here and re-apply it as
       padding instead. */
    margin-inline: calc(-1 * var(--hwb-gutter));
    padding: 14px var(--hwb-gutter) 16px;
    margin-bottom: 0; /* replaces .hwb-section's normal bottom margin while stuck-capable; the essentials section below still gets its own top rhythm from .hwb-section */
  }
  .hwb-cats + .hwb-section,
  .hwb-cats + section {
    margin-top: 32px;
  }
  .hwb-cats .hwb-section__title {
    margin-bottom: 14px; /* compact heading inside the strip itself */
  }
  .hwb-cats .hwb-cats__row {
    padding-bottom: 2px; /* the strip is compact; less scroll-shadow room needed */
  }
  /* Distinguish the strip only once it's actually pinned, toggled by blog.js
     via IntersectionObserver — not a permanent border, so it reads as part
     of the normal page until it truly sticks. */
  .hwb-cats.is-stuck {
    border-bottom: 1px solid var(--hwb-line);
    box-shadow: 0 6px 16px rgba(20,19,15,0.06);
  }
}
/* ---- sidebar-heading spacing refinement (2026-09-01g) ----
   Mobile gets a touch more room than the 16px desktop/tablet baseline
   above, per spec (16-20px mobile, 14-18px desktop/tablet - 16px base
   already satisfies both, this nudges mobile to the higher end). One rule,
   reused by all three sidebar cards (.hwb-side-search, .hwb-side-cats,
   .hwb-side-mostread) since they all share .hwb-side-card__title. */
@media (max-width: 640px) {
  .hwb-side-card .hwb-side-card__title { margin-bottom: 24px; } /* 2026-09-01i: specificity fix, same-specificity-raise as base rule above */
}
/* ==========================================================================
   Desktop/tablet main-section-heading spacing fix (2026-09-01j)
   Root cause (same class of bug as the 2026-09-01i sidebar fix): the base
   rule ".hwb-section__title { margin-bottom: 24px; }" is specificity
   (0,1,0), which LOSES to ".hwb-blog h1, .hwb-blog h2, .hwb-blog h3,
   .hwb-blog h4 { margin: 0; }" at (0,1,1) — so that 24px never actually
   rendered on desktop/tablet. It only ever looked correct on mobile because
   the existing mobile-only rule further down this file happens to use
   ".hwb-cats .hwb-section__title, .hwb-essentials .hwb-section__title,
   .hwb-recent .hwb-section__title, .hwb-picks .hwb-section__title"
   (0,2,0), which accidentally has enough specificity to win. This block
   gives the SAME desktop/tablet win explicitly, scoped to ≥641px only, so
   the existing ≤640px rules are completely untouched and keep winning at
   mobile exactly as before.
   ========================================================================== */
@media (min-width: 641px) {
  /* Browse by Category: pill row reads lighter than a card grid, so a
     slightly smaller but still clearly visible gap. Tablet + desktop. */
  .hwb-cats .hwb-section__title {
    margin-bottom: 20px;
  }
  /* Most Popular / Editor's Picks, Important Articles for New Business
     Owners, Recent Articles: card grids read denser, so a bit more room. */
  .hwb-picks .hwb-section__title,
  .hwb-essentials .hwb-section__title,
  .hwb-recent .hwb-section__title {
    margin-bottom: 22px;
  }
}
@media (min-width: 1200px) {
  /* Full desktop: nudge the three card-grid sections to the upper end of
     the requested 18–24px range. Browse by Category stays at 20px — it's
     a compact row, not a card grid, so it doesn't need the extra room. */
  .hwb-picks .hwb-section__title,
  .hwb-essentials .hwb-section__title,
  .hwb-recent .hwb-section__title {
    margin-bottom: 24px;
  }
}

/* ---- article-card internal hierarchy (desktop/tablet only): title →
   excerpt → metadata get a touch more breathing room. .hwb-card__body
   uses flex "gap", not margin, so it isn't affected by the margin:0 issue
   above — this is a plain value increase, explicitly scoped to ≥641px so
   the mobile-specific card gaps (6–8px, set elsewhere in this file for
   .hwb-recent__grid .hwb-card__body) are completely unaffected. ---- */
@media (min-width: 641px) {
  .hwb-card__body {
    gap: 12px;
  }
}