/* Blog index: the ledger list on page-blog.php.

   Enqueued only on that template, the same one-stylesheet-per-template rule
   css/post.css and its siblings follow. Everything here selects g80-blog__*
   component classes the template owns, so unlike post.css there are no bare
   element selectors inferring meaning from editor output; the scoping is
   consistency rather than containment, but it still keeps this sheet out of
   every other page's cascade.

   The values are lifted from css/post.css so the index and the posts it
   leads to read as one surface: the 1160px rail, the 13px/#767676 crumb and
   date treatment, the red kicker, #e5e5e5 hairlines, 6px image radii. Where
   the two sheets share a number, post.css is the source; a change there
   should be mirrored here. */

.g80-blog {
  max-width: 1160px;
  margin-inline: auto;
}

/* --- Breadcrumbs ---------------------------------------------------------
   The trail single.php uses, one step shorter: this page is /newsroom/blog,
   so Blog is the current step rather than a link. */
.g80-blog__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 26px;
  font-size: 13px;
  line-height: 1.4;
}

.g80-blog__crumbs a {
  color: #767676;
}

.g80-blog__crumbs a:hover,
.g80-blog__crumbs a:focus-visible {
  color: #1a1a1a;
}

.g80-blog__crumb-sep {
  color: #d2d2d2;
}

.g80-blog__crumb-current {
  color: #1a1a1a;
  font-weight: 500;
}

/* --- Masthead ------------------------------------------------------------ */
.g80-blog__masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.g80-blog__heading {
  margin: 16px 0 0;
  font-size: 52px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1a1a1a;
}

.g80-blog__count {
  flex-shrink: 0;
  padding-bottom: 8px;
  font-size: 13px;
  color: #767676;
}

.g80-blog__dek {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 21px;
  line-height: 1.55;
  color: #555555;
  text-wrap: pretty;
}

/* --- Ledger rows ---------------------------------------------------------
   One row per post: category and date on a left rail, title and excerpt in
   the middle, thumbnail on the right. The whole row is one anchor, so every
   colour below is set explicitly rather than inherited from the link. */
.g80-blog__list {
  margin-top: 44px;
  border-top: 1px solid #e5e5e5;
}

.g80-blog__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid #e5e5e5;
}

.g80-blog__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.g80-blog__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9f0712;
}

.g80-blog__date {
  font-size: 13px;
  color: #767676;
}

.g80-blog__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  text-wrap: balance;
  transition: color 0.18s ease;
}

.g80-blog__row:hover .g80-blog__title,
.g80-blog__row:focus-visible .g80-blog__title {
  color: #9f0712;
}

/* Excerpts are trimmed to 30 words in the template, but word length still
   varies the line count between rows; the clamp is what keeps the ledger's
   rows even. */
.g80-blog__excerpt {
  margin: 12px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.g80-blog__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}

/* A post with no featured image keeps its slot, so the rail of thumbnails
   stays a rail. Same placeholder field the header's product tiles use. */
.g80-blog__thumb--empty {
  background: linear-gradient(to bottom, #d4d4d4, #f5f5f5);
}

/* --- Pagination ----------------------------------------------------------
   Unreachable until a tenth post exists; styled so the day it appears it
   matches the theme's control geometry rather than core's bare links. */
.g80-blog__pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.g80-blog__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  color: #1a1a1a;
  transition: border-color 0.18s ease;
}

.g80-blog__pagination a.page-numbers:hover,
.g80-blog__pagination a.page-numbers:focus-visible {
  border-color: #c8c8c8;
  color: #1a1a1a;
}

.g80-blog__pagination .page-numbers.current {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

/* --- Empty state --------------------------------------------------------- */
.g80-blog__empty {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.g80-blog__empty-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: #1a1a1a;
}

.g80-blog__empty-copy {
  margin: 12px 0 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
}

/* The 46px/4px button geometry the post CTA and block buttons use. */
.g80-blog__empty-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 4px;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.18s ease;
}

.g80-blog__empty-button:hover,
.g80-blog__empty-button:focus-visible {
  background: #333333;
  color: #ffffff;
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1023px) {
  .g80-blog__heading {
    font-size: 42px;
  }

  .g80-blog__row {
    grid-template-columns: 130px minmax(0, 1fr) 240px;
    gap: 28px;
  }

  .g80-blog__title {
    font-size: 25px;
  }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The trail's last step repeats the h1 directly beneath it, the same
     redundancy single.php trims on phones. */
  .g80-blog__crumbs {
    padding-top: 22px;
    gap: 7px;
    font-size: 12.5px;
  }

  .g80-blog__crumbs > span:nth-last-child(-n + 2) {
    display: none;
  }

  .g80-blog__heading {
    margin-top: 12px;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.022em;
  }

  .g80-blog__count {
    padding-bottom: 5px;
  }

  .g80-blog__dek {
    margin-top: 16px;
    font-size: 18px;
  }

  /* Rows collapse to text beside a square thumbnail: meta and text stack in
     the first column, the image spans both their rows on the right. */
  .g80-blog__list {
    margin-top: 28px;
  }

  .g80-blog__row {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 0 18px;
    align-items: start;
    padding: 26px 0;
  }

  .g80-blog__meta {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .g80-blog__date {
    font-size: 12.5px;
  }

  .g80-blog__title {
    margin-top: 10px;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }

  .g80-blog__excerpt {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
  }

  .g80-blog__thumb {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 104px;
    aspect-ratio: 1 / 1;
    margin-top: 2px;
  }
}