/* Blog page (template-parts/page-blog.php). Ported from the Blog tab of the design artifact (index + pages.css), scoped under .gx.
   Shared header/CTA rules live in pg-common.scss, article cards in pg-cards.scss. rem is converted to px because legacy pages run under a fluid root
   font-size. Plain CSS on purpose. */
.gx .pg-blogpage {
  background: var(--color-bg);
}
.gx .pg-blog {
  padding-bottom:var(--section-y);
}
.gx .pg-feature {
  margin:0;
  padding:0;
  list-style:none;
}
.gx .pg-post--featured .post__link {
  display:grid;
  gap:var(--space-4);
}
@media (min-width:768px) {
  .gx .pg-post--featured .post__link {
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    grid-template-rows:1fr auto auto 1fr;
    column-gap:var(--space-10);
    row-gap:var(--space-4);
  }
  .gx .pg-post--featured .post__media {
    grid-row:1/-1;
  }
  .gx .pg-post--featured .post__title {
    grid-column:2;
    grid-row:2;
    align-self:end;
    font-size:var(--text-2xl);
  }
  .gx .pg-post--featured .pg-post__excerpt {
    grid-column:2;
    grid-row:3;
  }
  .gx .pg-post--featured .post__meta {
    grid-column:2;
    grid-row:4;
    align-self:start;
  }
}
.gx .pg-post__excerpt {
  color:var(--color-text-subtle);
}
.gx .pg-blog .post__media {
  aspect-ratio:1200 / 630;
}
.gx .pg-filter {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-block:var(--space-16) var(--space-8);
  padding-top:var(--space-8);
  border-top:var(--border-hair) solid var(--color-border);
}
.gx .pg-filter--stack {
  margin-block:var(--space-6) 0;
  padding-top:0;
  border-top:0;
}
.gx .pg-chip {
  display:inline-flex;
  align-items:center;
  min-height:var(--control-h);
  padding-inline:var(--space-4);
  border:var(--border-hair) solid var(--color-border-strong);
  border-radius:var(--radius-full);
  background:transparent;
  color:var(--color-text);
  font:inherit;
  font-size:var(--text-sm);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.gx .pg-chip:hover {
  background:var(--color-bg-sunken);
}
.gx .pg-chip:active {
  background:var(--cream-200);
}
.gx .pg-chip:focus-visible {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
.gx .pg-chip[aria-pressed="true"] {
  background:var(--color-inverse-bg);
  border-color:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .pg-chip:disabled {
  opacity:.5;
  cursor:not-allowed;
}
.gx .pg-empty {
  padding-block:var(--space-10);
  color:var(--color-text-muted);
}
.gx .pg-bhead__stats {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-6);
  margin-top:var(--space-8);
  color:var(--color-text-muted);
  font-family:var(--font-mono);
  font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
}
.gx .pg-bhead__stats b {
  color:var(--color-accent-active);
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
}
.gx .pg-blog .pg-grid {
  margin-top:var(--space-16);
}
.gx .pg-blog .pg-filter+.pg-grid {
  margin-top:0;
}
.gx .pg-pagination {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
  margin-top:var(--space-12);
}
.gx .pg-pagination .current {
  background:var(--color-inverse-bg);
  border-color:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .pg-pagination .dots {
  border-color:transparent;
}

/* v196: topic filter sits right under the head, above the featured post */
.gx .pg-filter {align-items:center}
.gx .pg-filter__label {flex-basis:100%;margin:0 0 var(--space-1);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.gx .pg-chip__n {margin-left:var(--space-2);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.gx .pg-chip[aria-pressed="true"] .pg-chip__n {color:var(--color-inverse-muted)}
.gx .pg-blog .pg-filter:first-child {margin-block:0 var(--space-10);padding-top:0;border-top:0}
.gx .pg-feature + .pg-grid {margin-top:var(--space-16)}
.gx .pg-feature[hidden] + .pg-grid {margin-top:0}
.gx .pg-feature[hidden], .gx .pg-post[hidden] {display:none}

/* v196 pressed state of topic and share chips (changes doc 12a) */
.gx .pg-chip:not([aria-pressed="true"]):active, .gx .pg-share__list .pg-chip:active {background:var(--color-border);transform:scale(var(--press-scale))}
@media (prefers-reduced-motion:reduce) {
  .gx .pg-chip:active, .gx .pg-share__list .pg-chip:active {transform:none}
}

/* blog images are 1200x630 (social-share size): the card frame uses the same ratio, so nothing is cropped */