/**
 * blog.css -- the post-driven blog: index card grid, article + rail layout,
 * article typography, pagination.
 *
 * Replaces the old `.parent-pageid-21` block, which styled the blog when each
 * article was a child Page composing its own full-bleed section bands. Articles
 * are Posts now: the body comes from the editor as plain h2/p/ul, and it renders
 * in a measured column beside the rail, so the typography lives here instead of
 * being pinned to `.section .container > div[data-reveal]` shapes.
 */

/* ============================================================
   CARD GRID -- index, category archives, search results
   ============================================================ */

.cgh-postgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gp-space-6);
}

.cgh-postcard {
  display: flex;
  flex-direction: column;
  background: var(--gp-static-white);
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-md);
  overflow: hidden;
  transition: transform var(--gp-transition-base), box-shadow var(--gp-transition-base);
}

.cgh-postcard:hover,
.cgh-postcard:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--gp-shadow-md);
}

.cgh-postcard__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gp-bone);
}

.cgh-postcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--gp-transition-moderate);
}

.cgh-postcard:hover .cgh-postcard__img { transform: scale(1.03); }

/* Posts without a thumbnail keep the card's proportions rather than collapsing
   the row to the height of the text. */
.cgh-postcard__img--empty {
  background: linear-gradient(135deg, var(--gp-bone), var(--gp-primary-50));
}

.cgh-postcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  padding: var(--gp-space-5);
  flex: 1 1 auto;
}

.cgh-postcard__title {
  margin: 0;
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h5);
}

.cgh-postcard__title a {
  color: var(--gp-ink);
  text-decoration: none;
}

.cgh-postcard__title a:hover,
.cgh-postcard__title a:focus-visible {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-postcard__excerpt {
  margin: 0;
  max-width: none; /* the global 72ch prose measure is for body copy, not cards */
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
}

/* Author + date sit on the card's baseline whatever the excerpt length. */
.cgh-postcard__meta {
  margin: var(--gp-space-2) 0 0;
  padding-top: var(--gp-space-3);
  margin-top: auto;
  border-top: 1px solid var(--gp-slate-200);
  font-size: var(--gp-text-caption);
  color: var(--gp-slate-700);
  display: flex;
  align-items: center;
  gap: var(--gp-space-2);
  flex-wrap: wrap;
}

/* Author and date each link to their own archive, behind a small icon.
   Underline only on hover, so the row still reads as metadata rather than a
   pair of body links. */
.cgh-postcard__author,
.cgh-postcard__date {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  color: var(--gp-slate-700);
  text-decoration: none;
}

.cgh-postcard__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--gp-accent);
}

.cgh-postcard__author { font-weight: var(--gp-weight-semibold); color: var(--gp-ink); }

.cgh-postcard__author:hover,
.cgh-postcard__author:focus-visible,
.cgh-postcard__date:hover,
.cgh-postcard__date:focus-visible {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-postcard__sep { color: var(--gp-slate-200); }

.cgh-postgrid__empty {
  margin: 0;
  padding: var(--gp-space-7);
  text-align: center;
  color: var(--gp-slate-700);
  background: var(--gp-bone);
  border-radius: var(--gp-radius-md);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.cgh-pagination { margin-top: var(--gp-space-8); }

.cgh-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gp-space-2);
}

.cgh-pagination__item .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: var(--gp-space-3);
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-sm);
  background: var(--gp-static-white);
  color: var(--gp-ink);
  font-weight: var(--gp-weight-semibold);
  text-decoration: none;
  transition: background-color var(--gp-transition-base), color var(--gp-transition-base);
}

.cgh-pagination__item .page-numbers:hover,
.cgh-pagination__item .page-numbers:focus-visible {
  background: var(--gp-primary-50);
  border-color: var(--gp-primary);
  color: var(--gp-primary);
}

.cgh-pagination__item .page-numbers.current {
  background: var(--gp-primary);
  border-color: var(--gp-primary);
  color: var(--gp-static-white);
}

.cgh-pagination__item .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* ============================================================
   ARTICLE + RAIL
   ============================================================ */

.cgh-post {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  /* Article column holds a comfortable measure; the rail is fixed so it does
     not stretch on very wide viewports. */
  .cgh-post { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gp-space-9); }
  .cgh-rail-blog { position: sticky; top: calc(var(--gp-nav-height) + var(--gp-space-5)); }
}

.cgh-post__main { min-width: 0; }

.cgh-post__figure {
  margin: 0 0 var(--gp-space-6);
  border-radius: var(--gp-radius-md);
  overflow: hidden;
}

.cgh-post__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   POST / ARCHIVE BANNER
   ============================================================ */

/* The shared hero caps its copy at 22ch/16ch, which suits a short marketing
   headline. An article title is a full sentence, and that cap broke this one
   over six lines down the left third of the banner. Let both run to the
   container width -- container--wide already bounds them at 1440px. */
.cgh-hero-mega--post .cgh-hero-mega__body,
.cgh-hero-mega--post .cgh-hero-mega__heading {
  max-width: none;
}

/* ...but max-width alone did not free them: the shared __inner is a 7fr/5fr
   grid for the form column, and a post banner has no second column, so the
   title was still boxed into the left 737px of a 1312px banner and broke over
   four short lines with the right third empty. One column lets it run the full
   container, and text-wrap:balance then evens out the lines it does need. */
.cgh-hero-mega--post .cgh-hero-mega__inner {
  grid-template-columns: 1fr;
}

/* Post banners also carry --center (client asked for centred banner text on
   every article). That modifier clamps __body to 62ch to keep a centred
   marketing stack readable, which would re-narrow the title this section just
   freed. An article title is the whole banner here, so it keeps the full
   container and only the centring applies. Stated explicitly rather than left
   to blog.css loading after sections.css. */
.cgh-hero-mega--post.cgh-hero-mega--center .cgh-hero-mega__body {
  max-width: none;
}

.cgh-byline {
  margin: 0 0 var(--gp-space-5);
  padding-bottom: var(--gp-space-4);
  border-bottom: 1px solid var(--gp-slate-200);
  /* Opt out of the global 72ch prose measure so the rule under the byline
     spans the article column instead of stopping short of it. */
  max-width: none;
  font-size: var(--gp-text-body-sm);
  color: var(--gp-slate-700);
}

.cgh-byline strong { color: var(--gp-ink); }
.cgh-byline__sep { color: var(--gp-slate-200); margin-inline: var(--gp-space-1); }

/* ============================================================
   ARTICLE TYPOGRAPHY (editor content)
   ============================================================ */

.cgh-post__content { color: var(--gp-ink); }

.cgh-post__content > *:first-child { margin-top: 0; }

.cgh-post__content p,
.cgh-post__content li {
  max-width: none; /* the column is already the measure */
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-slate-700);
}

.cgh-post__content p { margin: 0 0 var(--gp-space-5); }

.cgh-post__content h2,
.cgh-post__content h3,
.cgh-post__content h4 {
  font-family: var(--gp-font-display);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  margin: var(--gp-space-8) 0 var(--gp-space-4);
  scroll-margin-top: calc(var(--gp-nav-height) + var(--gp-space-5));
}

.cgh-post__content h2 { font-size: var(--gp-text-h3); line-height: var(--gp-leading-h3); }
.cgh-post__content h3 { font-size: var(--gp-text-h4); line-height: var(--gp-leading-h4); }
.cgh-post__content h4 { font-size: var(--gp-text-h5); line-height: var(--gp-leading-h5); }

.cgh-post__content ul,
.cgh-post__content ol {
  margin: 0 0 var(--gp-space-5);
  padding-left: var(--gp-space-6);
}

.cgh-post__content li { margin-bottom: var(--gp-space-2); }
.cgh-post__content li strong { color: var(--gp-ink); }

.cgh-post__content a:not(.btn) {
  color: var(--gp-primary);
  text-underline-offset: 3px;
}

/* :not(.btn) above matters. `.cgh-post__content a` outranks `.btn--primary`
   on specificity, so it was painting royal-blue label text onto the cardinal
   button in the mid-article CTA -- 1.6:1, unreadable. Buttons keep their own
   colours; only prose links take the royal blue. */
.cgh-post__content a:not(.btn):hover,
.cgh-post__content a:not(.btn):focus-visible { text-decoration: underline; }

.cgh-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gp-radius-md);
}

.cgh-post__content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--gp-space-5);
  font-size: var(--gp-text-body-sm);
}

.cgh-post__content th,
.cgh-post__content td {
  border: 1px solid var(--gp-slate-200);
  padding: var(--gp-space-3);
  text-align: left;
}

.cgh-post__content th { background: var(--gp-bone); color: var(--gp-ink); }

/* Key takeaways / at-a-glance callout carried over from the composed pages. */
.cgh-post__content .cgh-quick-summary {
  margin: 0 0 var(--gp-space-7);
  padding: var(--gp-space-5) var(--gp-space-6);
  background: var(--gp-bone);
  border-left: 4px solid var(--gp-accent);
  border-radius: var(--gp-radius-sm);
}

.cgh-post__content .cgh-quick-summary__list {
  margin: 0;
  padding-left: var(--gp-space-5);
}

.cgh-post__content .cgh-quick-summary__lede > p:last-child { margin-bottom: 0; }
.cgh-post__content .cgh-quick-summary__lede { margin-top: var(--gp-space-4); }

/* --- Mid-article CTA (.cgh-inline-cta) ------------------------------- */
/* Shipped in the post bodies with no CSS at all, so it rendered as a bold
   paragraph and a stray button loose on the page background between two
   <hr>s. Client flagged it. Give it the same bone card + gold edge as the
   quick-summary callout so it reads as a deliberate break in the article. */
.cgh-post__content .cgh-inline-cta {
  margin: var(--gp-space-7) 0;
  padding: var(--gp-space-6);
  background: var(--gp-bone);
  border-left: 4px solid var(--gp-accent);
  border-radius: var(--gp-radius-sm);
}

.cgh-post__content .cgh-inline-cta > p {
  margin: 0 0 var(--gp-space-5);
  color: var(--gp-ink);
}

.cgh-post__content .cgh-inline-cta > p:last-child { margin-bottom: 0; }

/* The label is a full sentence, and .btn ships white-space:nowrap for short
   marketing labels -- it overflowed the column on the way to 640px. Let this
   one wrap and centre. */
.cgh-post__content .cgh-inline-cta .btn {
  white-space: normal;
  text-wrap: balance;
}

/* The post bodies bracket the CTA in <hr>s, which were doing the delimiting
   back when the block had no styling. The card delimits itself now, and the
   two loose grey rules just read as leftovers. */
.cgh-post__content hr:has(+ .cgh-inline-cta),
.cgh-post__content .cgh-inline-cta + hr { display: none; }

@media (max-width: 640px) {
  .cgh-post__content .cgh-inline-cta { padding: var(--gp-space-5); }
  .cgh-post__content .cgh-inline-cta .btn { display: flex; width: 100%; }
}

/* --- Related articles (detail page only) ----------------------------- */
/* Same card as the index, sized for the narrower article column: two up,
   dropping to one where the column itself has gone full width. */
.cgh-related {
  margin-top: var(--gp-space-8);
  padding-top: var(--gp-space-6);
  border-top: 1px solid var(--gp-slate-200);
}

.cgh-related__heading {
  margin: 0 0 var(--gp-space-5);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
}

.cgh-postgrid--related {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gp-space-4);
}

.cgh-postgrid--related .cgh-postcard__body { padding: var(--gp-space-4); }
.cgh-postgrid--related .cgh-postcard__title { font-size: var(--gp-text-body-lg); }
.cgh-postgrid--related .cgh-postcard__excerpt { display: none; }

.cgh-post__content .cgh-legal-disclaimer,
.cgh-post .cgh-legal-disclaimer {
  display: block;
  margin: var(--gp-space-8) 0 0;
  padding: var(--gp-space-5);
  background: var(--gp-bone);
  border-radius: var(--gp-radius-sm);
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
}

/* ============================================================
   BLOG RAIL
   ============================================================ */

.cgh-rail-blog {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-6);
  min-width: 0;
}

.cgh-rail-blog__block {
  padding: var(--gp-space-5);
  background: var(--gp-static-white);
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-md);
}

.cgh-rail-blog__title {
  margin: 0 0 var(--gp-space-4);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
}

.cgh-rail-blog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cgh-rail-blog__list li + li { border-top: 1px solid var(--gp-slate-200); }

.cgh-rail-blog__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-space-3);
  padding: var(--gp-space-3) 0;
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-ink);
  text-decoration: none;
}

.cgh-rail-blog__list a:hover,
.cgh-rail-blog__list a:focus-visible { color: var(--gp-primary); }

.cgh-rail-blog__list a.is-current { color: var(--gp-primary); font-weight: var(--gp-weight-bold); }

.cgh-rail-blog__count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 0.1em 0.45em;
  border-radius: var(--gp-radius-full);
  background: var(--gp-bone);
  color: var(--gp-slate-700);
  font-size: var(--gp-text-caption);
  text-align: center;
}

/* wp_get_archives writes its own <li><a>Month</a>&nbsp;(n)</li>, so the count is
   loose text rather than a element we can style. Keep the row on one line. */
.cgh-rail-blog__list--archive li { font-size: var(--gp-text-caption); color: var(--gp-slate-700); }
.cgh-rail-blog__list--archive a { display: inline; padding-block: var(--gp-space-3); }

/* --- Search box --- */

.cgh-railsearch { display: flex; gap: var(--gp-space-2); }

.cgh-railsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--gp-input-padding);
  /* --gp-input-border is the whole shorthand ("1.5px solid ..."), not a colour.
     Wrapping it in `1px solid var(...)` made the declaration invalid, which is
     why the field rendered with no border at all. */
  border: var(--gp-input-border);
  border-radius: var(--gp-input-radius);
  background: var(--gp-input-bg);
  color: var(--gp-ink);
  font-family: var(--gp-font-body);
  font-size: 1rem; /* 16px floor: stops iOS Safari auto-zoom on focus */
  transition: border-color var(--gp-transition-base), box-shadow var(--gp-transition-base);
}

.cgh-railsearch__input:focus-visible {
  outline: none;
  border-color: var(--gp-input-focus-border);
  box-shadow: var(--gp-input-focus-ring);
}

.cgh-railsearch__submit {
  flex: 0 0 auto;
  padding-inline: var(--gp-space-4);
}

.cgh-railsearch__submit svg { width: 18px; height: 18px; }

/* --- Recent posts --- */

.cgh-rail-blog__recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
}

.cgh-rail-blog__recent-link {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--gp-space-3);
  align-items: start;
  text-decoration: none;
}

.cgh-rail-blog__recent-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--gp-radius-sm);
  display: block;
}

.cgh-rail-blog__recent-img--empty {
  background: linear-gradient(135deg, var(--gp-bone), var(--gp-primary-50));
}

.cgh-rail-blog__recent-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cgh-rail-blog__recent-title {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
}

.cgh-rail-blog__recent-link:hover .cgh-rail-blog__recent-title,
.cgh-rail-blog__recent-link:focus-visible .cgh-rail-blog__recent-title { color: var(--gp-primary); }

.cgh-rail-blog__recent-date {
  font-size: var(--gp-text-caption);
  color: var(--gp-slate-700);
}