/**
 * @file
 * Blog hero styles.
 */

.blog-hero {
  background: var(--color-background-alt);
  padding: 64px var(--page-gutter) 56px;
}

.blog-hero .container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.blog-hero__title {
  font-size: 50px;
  line-height: 1.08;
  font-weight: var(--font-weight-bold);
  letter-spacing: -1.8px;
  max-width: 760px;
  margin: 0;
}

.blog-hero__description {
  font-size: 17.5px;
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 620px;
  margin: 18px 0 0;
}

.blog-hero__filters {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.blog-filter {
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-filter.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 40px var(--page-gutter-mobile) 36px;
  }

  .blog-hero__title {
    font-size: 32px;
    letter-spacing: -1.2px;
  }

  .blog-hero__description {
    font-size: 15px;
  }
}