/*
  blog-list — location blog archive grid.
  Desktop: Figma 500:3111.
  No dedicated mobile frame shipped. Stack the toolbar and cards.
*/

.blog-list {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--color-bg);
  color: var(--color-text);
  /* Hairline under the archive before the CTA band */
  border-block-end: 1px solid var(--color-border-subtle);
}

/* ---------- Decorative sparkle watermark ---------- */

.blog-list__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}

.blog-list__bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Inner content band ---------- */

.blog-list__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xl); /* 32px — header → grid → dots */
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--header-frame-max);
  margin-inline: auto;
  padding-block: var(--blog-list-pad-y-mobile); /* 56px */
  padding-inline: var(--space-md); /* 16px */
}

/* ---------- Header: breadcrumb + query toolbar ---------- */

.blog-list__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  inline-size: 100%;
}

.blog-list__breadcrumb {
  inline-size: 100%;
}

.blog-list__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding-block: var(--space-sm); /* 10px — Figma 500:3113 */
  padding-inline: var(--space-sm);
  list-style: none;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero-text-mobile); /* 16px on small screens */
  line-height: var(--lh-mega-body); /* 30px */
  letter-spacing: var(--ls-mega-body);
  color: var(--color-text-muted);
}

.blog-list__breadcrumb-item {
  display: inline-flex;
  align-items: baseline;
}

.blog-list__breadcrumb-item + .blog-list__breadcrumb-item::before {
  content: "→";
  margin-inline: 0.35em;
  color: var(--color-text-muted);
}

.blog-list__breadcrumb-link {
  color: inherit;
  text-decoration: none;
}

.blog-list__breadcrumb-link:hover {
  text-decoration: underline;
}

.blog-list__breadcrumb-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.blog-list__breadcrumb-current {
  color: inherit;
}

/* Search + sort + category sit in one row on desktop */
.blog-list__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--blog-list-toolbar-gap); /* 16px */
  inline-size: 100%;
}

.blog-list__search {
  display: flex;
  align-items: center;
  gap: var(--space-sm); /* 10px */
  box-sizing: border-box;
  inline-size: 100%;
  padding-block: var(--blog-list-search-pad-y); /* 20px */
  padding-inline-start: var(--blog-list-search-pad-inline-start); /* 16px */
  padding-inline-end: var(--blog-list-search-pad-inline-end); /* 40px */
  border: 1px solid var(--color-text);
  border-radius: var(--radius-blog-list-search); /* 6px */
  background-color: var(--color-bg);
}

.blog-list__search-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.blog-list__search-icon {
  display: block;
  flex-shrink: 0;
  inline-size: var(--blog-list-search-icon); /* 29px */
  block-size: var(--blog-list-search-icon);
  object-fit: contain;
}

.blog-list__search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  color: var(--color-text);
}

.blog-list__search-input::placeholder {
  color: var(--color-text-muted);
}

.blog-list__search-input:focus {
  outline: none;
}

.blog-list__search:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Red pill buttons — Figma 500:3119 / 500:3122 */
.blog-list__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm); /* 10px */
  box-sizing: border-box;
  flex: 1 1 auto;
  /*
    Same height for every chip (69px).
    The sort chip holds a 29px icon, but the category chip only holds
    23px of select text + an 8px chevron, so it rendered ~6px shorter.
    Min height = icon size + top/bottom padding (border-box).
  */
  min-block-size: calc(var(--blog-list-search-icon) + 2 * var(--blog-list-search-pad-y));
  padding-block: var(--blog-list-search-pad-y); /* 20px */
  padding-inline: 2.5rem; /* 40px */
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.blog-list__chip:hover {
  opacity: 0.92;
}

.blog-list__chip:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.blog-list__chip-icon {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.blog-list__chip-icon--sort {
  inline-size: var(--blog-list-search-icon); /* 29px */
  block-size: var(--blog-list-search-icon);
}

.blog-list__chip-icon--chevron {
  inline-size: 0.875rem; /* 14px */
  block-size: 0.5rem; /* 8px */
}

/* Category filter — native select styled inside the red chip */
.blog-list__category-form {
  flex: 1 1 auto;
  margin: 0;
}

.blog-list__category-select {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  inline-size: 100%;
  padding: 0;
}

.blog-list__category-select:focus {
  outline: none;
}

/*
  The select carries the chip padding itself, so it fills the whole button.
  That way a click anywhere on the red chip opens the dropdown,
  not only a click on the text.
*/
.blog-list__chip--category .blog-list__category-select {
  align-self: stretch;
  padding-block: var(--blog-list-search-pad-y); /* 20px */
  padding-inline-start: 2.5rem; /* 40px */
  /* 40px side padding + 14px chevron + 10px gap, so text never sits under the chevron */
  padding-inline-end: 4rem;
}

/* Native option list opens on a white panel, so the inherited white text was invisible */
.blog-list__category-select option {
  color: var(--color-text);
  background-color: var(--color-bg);
}

.blog-list__chip--category {
  position: relative;
  min-inline-size: 12rem;
  /* Padding moved onto the select (see above) */
  padding: 0;
}

/* Chevron floats over the select's right padding; clicks pass through to the select */
.blog-list__chip--category .blog-list__chip-icon--chevron {
  position: absolute;
  inset-inline-end: 2.5rem; /* 40px — matches the old chip padding */
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.blog-list__title-link {
  color: inherit;
  text-decoration: none;
}

.blog-list__title-link:hover {
  color: var(--color-primary);
}

.blog-list__empty {
  margin: 0;
  font-family: var(--font-body-alt);
  font-size: var(--fs-blog-list-excerpt);
  line-height: var(--lh-blog-list-excerpt);
  color: var(--color-text-muted);
}

/* ---------- Card grid ---------- */

.blog-list__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--blog-list-grid-gap); /* 32px */
  margin: 0;
  padding: 0;
  inline-size: 100%;
  list-style: none;
}

.blog-list__item {
  inline-size: 100%;
  max-inline-size: var(--blog-list-card-w-mobile); /* 288px */
}

.blog-list__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg); /* 24px on mobile — tighter than desktop 60px */
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--blog-list-card-pad-mobile); /* 24px */
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.blog-list__media {
  margin: 0;
  inline-size: 100%;
  overflow: hidden;
  /* Hold the 399×247 Figma ratio so cards do not jump as images load */
  aspect-ratio: 399 / 247;
  background-color: var(--color-divider);
}

.blog-list__media-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-width: 100%;
  object-fit: cover;
}

.blog-list__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blog-list-copy-gap); /* 15px */
  inline-size: 100%;
}

.blog-list__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-blog-list-title); /* 24px */
  line-height: var(--lh-blog-list-title); /* 36px */
  color: var(--color-text);
}

.blog-list__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blog-list-meta-gap); /* 16px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-list__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm); /* 10px */
}

.blog-list__meta-icon {
  display: block;
  flex-shrink: 0;
  inline-size: var(--blog-list-icon-meta); /* 25px */
  block-size: var(--blog-list-icon-meta);
  object-fit: contain;
}

.blog-list__meta-text {
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  color: var(--color-text);
}

.blog-list__excerpt {
  margin: 0;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-size: var(--fs-blog-list-excerpt); /* 16px */
  line-height: var(--lh-blog-list-excerpt); /* 20px */
  letter-spacing: var(--ls-blog-list-excerpt);
  color: var(--color-text);
}

.blog-list__tags {
  margin: 0;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  text-decoration: underline;
  color: var(--color-text-muted);
}

.blog-list__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm); /* 10px */
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  text-decoration: none;
  color: var(--color-primary);
}

.blog-list__cta:hover {
  text-decoration: underline;
}

.blog-list__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.blog-list__cta-icon {
  display: block;
  flex-shrink: 0;
  inline-size: 0.4375rem; /* 7px */
  block-size: 0.875rem; /* 14px */
}

/* ---------- Pagination dots — Figma 696:3960 ---------- */

.blog-list__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* 12px */
  min-block-size: 0.75rem;
}

.blog-list__page {
  position: relative;
  display: block;
  flex-shrink: 0;
  inline-size: 0.75rem; /* 12px */
  block-size: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-text);
  text-decoration: none;
}

.blog-list__page.is-active {
  background-color: var(--color-primary);
}

.blog-list__page:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.blog-list__page-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Local intro (franchise) — inside sparkle band ---------- */

.blog-list__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg); /* 24px mobile stack */
  inline-size: 100%;
  text-align: center;
}

.blog-list__intro-title {
  margin: 0;
  inline-size: 100%;
  max-inline-size: var(--blog-list-intro-max);
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-blog-list-intro-title-mobile);
  line-height: var(--lh-blog-list-intro-title-mobile);
  letter-spacing: var(--ls-blog-list-excerpt);
  text-transform: uppercase;
  color: var(--color-text-heading);
}

.blog-list__intro-text {
  margin: 0;
  inline-size: 100%;
  max-inline-size: var(--blog-list-intro-max);
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-size: var(--fs-blog-list-excerpt);
  line-height: var(--lh-mega-body); /* 30px — matches local intro lead */
  letter-spacing: var(--ls-blog-list-excerpt);
  color: var(--color-text);
}

/* ---------- Numbered pagination ---------- */

.blog-list__pagination {
  inline-size: 100%;
}

.blog-list__pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-list__pagination-link,
.blog-list__pagination-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.25rem;
  min-block-size: 2.25rem;
  padding-inline: 0.75rem;
  border-radius: 0.25rem;
  font-family: var(--font-body-alt);
  font-size: var(--fs-blog-list-excerpt);
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-text);
}

.blog-list__pagination-link:hover {
  color: var(--color-primary);
}

.blog-list__pagination-item.is-active .blog-list__pagination-link {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.blog-list__pagination-item.is-dots .blog-list__pagination-label {
  min-inline-size: auto;
  padding-inline: 0.25rem;
}

/* ---------- Tablet — 2-column grid ---------- */
/* --bp-md: 768px */

@media (min-width: 768px) and (max-width: 1023px) {
  .blog-list__inner {
    padding-inline: var(--header-pad-x);
  }

  .blog-list__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--blog-list-grid-gap);
  }

  .blog-list__item {
    max-inline-size: none;
  }
}

/* ---------- Desktop — Figma 500:3111 ---------- */
/* --bp-lg: 1024px */

@media (min-width: 1024px) {
  .blog-list__intro {
    gap: var(--space-xl); /* 32px */
  }

  .blog-list__intro-title {
    font-size: var(--fs-blog-list-intro-title);
    line-height: 1;
    letter-spacing: 0;
  }

  .blog-list__intro-text {
    font-size: var(--fs-cta-v2-body); /* 18px */
  }

  .blog-list__bg-img {
    block-size: var(--blog-list-bg-h); /* 199.5% */
    inset-block-start: -0.01%;
  }

  .blog-list__inner {
    padding-block: var(--blog-list-pad-y); /* 120px */
    padding-inline: var(--header-pad-x); /* clamps toward 220px */
  }

  .blog-list__breadcrumb-list {
    font-size: var(--fs-hero-text); /* 18px — Figma 500:3114 */
  }

  .blog-list__search {
    flex: 0 0 var(--blog-list-search-w); /* 355px */
    inline-size: var(--blog-list-search-w);
    max-inline-size: var(--blog-list-search-w);
  }

  .blog-list__chip {
    flex: 0 0 auto;
  }

  .blog-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--blog-list-grid-gap); /* 32px */
  }

  .blog-list__item {
    max-inline-size: none;
  }

  .blog-list__card {
    /* Figma 500:3128 — 40px sides, 60px top/bottom, 60px image→copy */
    gap: var(--blog-list-card-inner-gap);
    padding-block: var(--blog-list-card-pad-y);
    padding-inline: var(--blog-list-card-pad-x);
    block-size: 100%;
  }
}