/* Blog: the post index (home.php, archive.php, search.php) and the single post
   (single.php). Loaded only on those views — see inc/enqueue.php.

   This sheet adds no design language of its own. The hero band, the content
   wrapper, the breadcrumbs and the pagination all come from pages.css, and the
   card here is the same white/border/radius panel as .bpx-sitemap. Everything
   below uses the tokens already defined in theme.css — same font, same navy,
   same accent — so the blog reads as part of the site rather than a visitor. */

/* ============================================================
   Two-column blog layout
   Widens the standard .bpx-page-wrap (900px) to make room for the sidebar,
   then splits it into article and aside.
   ============================================================ */
.bpx-page-wrap.bpx-blog-layout {
  max-width: 1140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 38px;
  align-items: start;
}

/* The article column owns the reading measure, so the prose rule in theme.css
   that caps .bpx-article__content at 760px can stand down here. */
.bpx-blog-layout .bpx-article__content {
  max-width: none;
}

@media (max-width: 980px) {
  .bpx-page-wrap.bpx-blog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ── Sidebar ── */
.bpx-blog-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (min-width: 981px) {
  .bpx-blog-layout__aside {
    /* Clears the sticky header (82px) plus a little breathing room. */
    position: sticky;
    top: 102px;
  }
}

.bpx-widget {
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  padding: 20px 22px;
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
}

.bpx-widget__title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bpx-navy);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bpx-border-soft);
  position: relative;
}

.bpx-widget__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 2px;
  background: var(--bpx-accent);
}

.bpx-widget__list,
.bpx-widget__posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bpx-widget__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--bpx-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--bpx-border-soft);
  transition: color 0.15s;
}

.bpx-widget__list li:last-child .bpx-widget__link {
  border-bottom: 0;
  padding-bottom: 0;
}

.bpx-widget__link:hover,
.bpx-widget__link.is-active {
  color: var(--bpx-accent);
}

.bpx-widget__count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--bpx-ink-muted);
  background: var(--bpx-surface-alt);
  border-radius: 999px;
  padding: 3px 9px;
}

.bpx-widget__link:hover .bpx-widget__count,
.bpx-widget__link.is-active .bpx-widget__count {
  background: var(--bpx-accent);
  color: var(--bpx-white);
}

.bpx-widget__post {
  padding: 11px 0;
  border-bottom: 1px solid var(--bpx-border-soft);
}

.bpx-widget__post:first-child {
  padding-top: 0;
}

.bpx-widget__post:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.bpx-widget__post a {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bpx-navy);
  text-decoration: none;
  transition: color 0.15s;
}

.bpx-widget__post a:hover {
  color: var(--bpx-accent);
}

.bpx-widget__post time {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--bpx-ink-muted);
}

/* The sidebar search stacks its field and button rather than sitting on one
   row like the full-width form in pages.css. */
.bpx-widget .search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.bpx-widget .search-form label {
  flex: 1 1 100%;
  margin: 0;
}

.bpx-widget .search-form .search-field {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--bpx-ink-strong);
  background: var(--bpx-white);
  padding: 11px 14px;
  border: 1px solid var(--bpx-border-strong);
  border-radius: var(--bpx-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bpx-widget .search-form .search-field:focus {
  outline: none;
  border-color: var(--bpx-accent);
  box-shadow: 0 0 0 3px var(--bpx-surface);
}

.bpx-widget .search-form .search-submit {
  flex: 1 1 100%;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--bpx-white);
  background: var(--bpx-accent);
  border: 0;
  border-radius: var(--bpx-radius);
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.15s;
}

.bpx-widget .search-form .search-submit:hover {
  background: var(--bpx-accent-hover);
}

/* ── Call to action panel ── */
.bpx-widget--cta {
  background: var(--bpx-navy);
  border-color: var(--bpx-navy);
}

.bpx-widget__title--light {
  color: var(--bpx-white);
  border-bottom-color: var(--bpx-border-light);
}

.bpx-widget__title--light::after {
  background: var(--bpx-accent-bright);
}

.bpx-widget--cta p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bpx-on-dark);
}

.bpx-widget__cta {
  display: block;
  text-align: center;
  background: var(--bpx-accent);
  color: var(--bpx-white);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: var(--bpx-radius);
  transition: background 0.15s;
}

.bpx-widget__cta:hover {
  background: var(--bpx-accent-hover);
  color: var(--bpx-white);
}

/* ============================================================
   Listing
   ============================================================ */
.bpx-postgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The newest post leads, spanning the full width with its image alongside. */
.bpx-postgrid__item--lead {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .bpx-postgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Card ──
   Same panel treatment as .bpx-sitemap in pages.css. */
.bpx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.bpx-card:hover {
  border-color: var(--bpx-accent);
  box-shadow: 0 22px 46px -28px rgba(var(--bpx-navy-rgb), 0.6);
  transform: translateY(-2px);
}

/* Two columns only when there is an image to fill the second one. */
.bpx-postgrid__item--lead .bpx-card--media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

@media (max-width: 700px) {
  .bpx-postgrid__item--lead .bpx-card--media {
    display: flex;
  }
}

.bpx-card__media {
  display: block;
  background: var(--bpx-surface);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.bpx-postgrid__item--lead .bpx-card--media .bpx-card__media {
  aspect-ratio: auto;
  min-height: 220px;
  /* Image column sits second so the headline leads on the reading order and
     on the page. */
  order: 2;
}

@media (max-width: 700px) {
  .bpx-postgrid__item--lead .bpx-card--media .bpx-card__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
    order: 0;
  }
}

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

.bpx-card:hover .bpx-card__media img {
  transform: scale(1.04);
}

.bpx-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px;
}

.bpx-postgrid__item--lead .bpx-card__body {
  padding: 28px;
  justify-content: center;
}

.bpx-card__title {
  margin: 10px 0 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
}

.bpx-postgrid__item--lead .bpx-card__title {
  font-size: 27px;
}

.bpx-card__title a {
  color: var(--bpx-navy);
  text-decoration: none;
  transition: color 0.15s;
}

.bpx-card:hover .bpx-card__title a {
  color: var(--bpx-accent);
}

/* The whole card is clickable, but the accessible name still comes from the
   real link text rather than an empty wrapper. */
.bpx-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bpx-card__excerpt {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bpx-ink-body);
}

.bpx-card__more {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bpx-accent);
  text-decoration: none;
}

.bpx-card__more::after {
  content: " \2192";
}

/* ── Meta line: category, date, reading time ── */
.bpx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--bpx-ink-muted);
}

.bpx-meta__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.bpx-meta__term {
  position: relative;
  z-index: 1; /* clears the stretched card link */
  color: var(--bpx-accent);
  font-weight: 700;
  text-decoration: none;
}

.bpx-meta__term:hover {
  color: var(--bpx-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Result count above the grid ── */
.bpx-listing__count {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bpx-ink-muted);
}

/* ── Empty state ── */
.bpx-listing-empty {
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  padding: 34px 26px;
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
}

.bpx-listing-empty__title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--bpx-navy);
}

.bpx-listing-empty p {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--bpx-ink-body);
}

.bpx-listing-empty p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Single post
   ============================================================ */

/* Post meta sits under the hero, above the article body. */
.bpx-post__meta {
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bpx-border);
}

.bpx-post__figure {
  margin: 0 0 28px;
}

.bpx-post__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bpx-radius-lg);
}

.bpx-post__caption {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bpx-ink-muted);
}

/* ── Article footer ── */
.bpx-post__footer {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--bpx-border);
}

.bpx-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bpx-post__tags a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--bpx-navy);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--bpx-border-strong);
  border-radius: var(--bpx-radius);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.bpx-post__tags a:hover {
  color: var(--bpx-white);
  background: var(--bpx-accent);
  border-color: var(--bpx-accent);
}

/* ── Previous / next ── */
.bpx-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}

.bpx-postnav__link {
  display: block;
  padding: 18px 20px;
  text-decoration: none;
  background: var(--bpx-white);
  border: 1px solid var(--bpx-border);
  border-radius: var(--bpx-radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bpx-postnav__link:hover {
  border-color: var(--bpx-accent);
  box-shadow: 0 18px 42px -32px rgba(var(--bpx-navy-rgb), 0.55);
}

.bpx-postnav__link--next {
  grid-column: 2;
  text-align: right;
}

.bpx-postnav__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bpx-ink-muted);
  margin-bottom: 6px;
}

.bpx-postnav__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bpx-navy);
}

.bpx-postnav__link:hover .bpx-postnav__title {
  color: var(--bpx-accent);
}

@media (max-width: 560px) {
  .bpx-postnav {
    grid-template-columns: 1fr;
  }

  .bpx-postnav__link--next {
    grid-column: 1;
    text-align: left;
  }
}

/* ============================================================
   Related posts
   ============================================================ */
.bpx-related {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--bpx-border);
}

.bpx-related__heading {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--bpx-navy);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bpx-border-soft);
}

/* Three equal columns that collapse together rather than one at a time, so the
   row never leaves a single orphan card on its own line. The compact card
   variant keeps all three the same height without needing align-items. */
.bpx-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .bpx-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Compact card (related articles) ──
   No excerpt, shorter meta, clamped title. A full listing card in a third of
   the column width wraps into a wall of text and leaves the row ragged. */
.bpx-card--compact .bpx-card__media {
  aspect-ratio: 16 / 9;
}

/* Placeholder for posts with no featured image, so every card in the row is
   the same shape instead of some starting with an image and some with text. */
.bpx-card__media--empty {
  display: grid;
  place-items: center;
  background: var(--bpx-surface);
  color: var(--bpx-accent);
  font-size: 30px;
  opacity: 0.45;
}

.bpx-card--compact .bpx-card__body {
  padding: 16px 18px;
}

.bpx-card--compact .bpx-meta {
  font-size: 12px;
}

.bpx-card--compact .bpx-card__title {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.35;
  /* Three lines maximum: past that a card stops being a summary and the row
     stops lining up. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}