/* ==========================================================================
   Blog listing page
   ========================================================================== */

.blog-toolbar {
  display: grid;
  gap: var(--sp-5);
  margin-block-end: var(--sp-6);
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--c-border);
}

/* Filters stay on one line; they scroll sideways when the screen is too narrow */
.blog-toolbar .filters {
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  padding-block: 4px;
  scrollbar-width: none;
}

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

.blog-toolbar .filter-btn {
  flex-shrink: 0;
  padding-inline: 1rem;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .blog-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(0, max-content);
    align-items: center;
  }

  /* Pushes the buttons to the far side without clipping them when they overflow */
  .blog-toolbar .filters > :first-child {
    margin-inline-start: auto;
  }
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search__icon {
  position: absolute;
  inset-inline-start: 1rem;
  inline-size: 20px;
  block-size: 20px;
  color: var(--c-faint);
  pointer-events: none;
}

.search__input {
  inline-size: 100%;
  min-block-size: 52px;
  padding-inline: 3rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}

.search__input::placeholder {
  color: var(--c-faint);
}

.search__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), 0.18);
}

.search__input::-webkit-search-cancel-button {
  display: none;
}

.search__clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  color: var(--c-muted);
}

.search__clear:hover {
  color: var(--c-text);
  background: rgba(var(--c-accent-rgb), 0.12);
}

.search__clear svg {
  inline-size: 16px;
  block-size: 16px;
}

.blog-status {
  margin-block-end: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.articles-grid.is-switching .article-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

/* search highlight */
.article-card mark {
  color: inherit;
  background: rgba(var(--c-spark-rgb), 0.28);
  border-radius: 3px;
  padding-inline: 2px;
}

.noscript-list {
  display: grid;
  gap: var(--sp-3);
}

.noscript-list a {
  color: var(--c-accent);
}

.cta-newsletter {
  inline-size: min(100%, 480px);
}

.cta-newsletter .newsletter__row {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.cta-newsletter .newsletter__input {
  color: #fff;
}

.cta-newsletter .newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.cta-newsletter .newsletter__msg.is-error {
  color: #fecaca;
}

.cta-newsletter .newsletter__msg.is-success {
  color: #bbf7d0;
}

/* ---------- Featured article (large horizontal card) ---------- */
.blog-featured {
  margin-block-end: var(--sp-6);
}

@media (min-width: 900px) {
  .article-card--featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }

  .article-card--featured .article-card__media {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 340px;
  }

  .article-card--featured .article-card__body {
    justify-content: center;
    gap: var(--sp-4);
    padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  }

  .article-card--featured .article-card__title {
    font-size: var(--fs-xl);
    line-height: 1.45;
  }

  .article-card--featured .article-card__excerpt {
    flex-grow: 0;
    font-size: var(--fs-base);
  }
}