.blog-list {
  padding: 50px 0 100px;
  background-color: var(--white);
  /* The filter row is sized in vw, which counts the scrollbar — clip the few
     pixels of overhang so the page itself never scrolls sideways. */
  overflow-x: clip;
  @media (max-width: 1179px) {
    padding: 40px 0 80px;
  }
  @media (max-width: 767px) {
    padding: 30px 0 60px;
  }
}

.blog-list-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media (max-width: 1179px) {
    gap: 32px;
  }
  @media (max-width: 767px) {
    gap: 28px;
  }
}

.blog-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  @media (max-width: 600px) {
    flex-direction: column;
    align-items: stretch;
  }
}

.blog-list-dropdown {
  display: none;
  flex: none;
  width: 284px;
  @media (max-width: 1179px) {
    display: flex;
  }
  @media (max-width: 600px) {
    width: 100%;
  }
}

/* The panel carries the full category names, so let it outgrow the trigger and
   hang off its right edge rather than truncating to trigger width. */
.blog-list-dropdown .dropdown-listbox {
  left: auto;
  right: 0;
  width: max-content;
  z-index: 1111;
  @media (max-width: 600px) {
    width: 100%;
  }
}

/* Match the trigger text: grey chevron while the placeholder shows, off-black
   once a category is picked. */
.blog-list-dropdown .dropdown-trigger.has-value .dropdown-chevron svg path {
  fill: var(--off-black);
}

.blog-list-title {
  margin: 0;
  font: var(--heading-h2);
  letter-spacing: var(--letter-spacing-m2);
  color: var(--dark);
}

/* One scrolling row rather than a wrapping block: with nine categories the pills
   would otherwise take a second line and push the grid down. blog-list.js keeps
   the active pill in view. The scrollbar is hidden because the row sits directly
   above the cards, where a track would read as a divider.

   The row breaks out of the container's gutters and runs the full width of the
   window, then pads itself back so the first pill still lines up under the
   title. Held to the container's 1152px it would clip the last pill a few pixels
   inside the gutter, which reads as broken rather than as scrollable; given the
   whole window the pills fit outright at desktop widths, and where they still
   don't, the row runs off the edge of the screen the way a scroller should. */
.blog-list-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
  scroll-padding-inline: calc((100vw - 100%) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  @media (max-width: 1179px) {
    display: none;
  }
}

.blog-list-filters::-webkit-scrollbar {
  display: none;
}

.blog-list-filter {
  /* Never squeeze to fit the row — the row scrolls instead. */
  flex: 0 0 auto;
  padding: 6px 16px;
  border: 1px solid var(--ash);
  border-radius: var(--radius-8);
  background-color: var(--pearl);
  font: var(--button);
  color: var(--off-black);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition:
    background-color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.blog-list-filter:hover,
.blog-list-filter:focus-visible,
.blog-list-filter:focus {
  background-color: var(--ash);
  border: 1px solid var(--ash);
  color: var(--dark);
}

.blog-list-filter.is-active {
  border-color: var(--burnt-orange);
  background-color: var(--burnt-orange);
  color: var(--white);
}

.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(307px, 1fr));
  gap: 24px;
  @media (max-width: 449px) {
    grid-template-columns: 1fr;
  }
}

.blog-list-item {
  display: flex;
}

.blog-list-item > .blog-card {
  flex: 1;
}

.blog-list-item[hidden],
.blog-list-item.is-hidden-at-load,
.blog-list-grid[hidden],
.blog-list-empty[hidden],
.blog-list-pagination[hidden] {
  display: none !important;
}

.blog-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 80px 0;
  text-align: center;
  @media (max-width: 1179px) {
    padding: 60px 0;
    gap: 20px;
  }
  @media (max-width: 767px) {
    gap: 16px;
    padding: 40px 0;
  }
}

.blog-list-empty-art {
  display: block;
  @media (max-width: 767px) {
    width: 180px;
    height: auto;
  }
}

.blog-list-empty-title {
  margin: 0;
  font: var(--heading-h4);
  letter-spacing: var(--letter-spacing-m1);
  color: var(--off-black);
  margin-top: 8px;
}

.blog-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  @media (max-width: 767px) {
    gap: 6px;
  }
}

.blog-list-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-8);
  background-color: var(--ivory);
  font: var(--button);
  color: var(--off-black);
  text-decoration: none;
  box-shadow: none;
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
  /* Nine controls have to share a phone's width, so the whole block shrinks. */
  @media (max-width: 767px) {
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
    font: var(--body-b5);
  }
}

.blog-list-pagination button.page-numbers {
  cursor: pointer;
}

.blog-list-pagination button.page-numbers:not(.current):hover,
.blog-list-pagination button.page-numbers:not(.current):focus-visible {
  background-color: var(--ash);
  color: var(--dark);
}

/* The page you are already on isn't a target: no hover styling (the hover rule
   above excludes it) and no pointer cursor. */
.blog-list-pagination .page-numbers.current {
  background-color: var(--burnt-orange);
  color: var(--white);
  cursor: default;
}

.blog-list-pagination .page-numbers.dots {
  background-color: transparent;
  color: var(--off-black);
  padding: 0;
  min-width: 28px;
  @media (max-width: 767px) {
    min-width: 12px;
  }
}

.blog-list-page-icon {
  display: inline-flex;
}

.blog-list-page-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  @media (max-width: 767px) {
    width: 18px;
    height: 18px;
  }
}

.blog-list-page-icon.next svg {
  transform: rotate(180deg);
}