/*
 * The blog listing and its categories.
 *
 * The French blog is still on the Divi grid it always was, so there is nothing
 * to copy there. This is the site's own language applied to a listing: the
 * card from the French design system's `.post-card` — a 180px image, a meta
 * line, a headline, a link at the foot — laid out on our grid.
 */

.blog {
  background: var(--ds-surface);
}

.blog-hero {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--ds-line);
  background: linear-gradient(180deg, var(--ds-surface-tint), var(--ds-surface));
}

.blog-list {
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--ds-section-gap);
}

.blog-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--ds-line);
  background: var(--ds-surface-sunk);
}

.blog-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.blog-label {
  margin: 0;
  color: var(--ds-muted);
  font-size: var(--ds-text-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-hero__title {
  max-width: 20ch;
}

.blog-hero__lead {
  max-width: 62ch;
}

/* Categories ----------------------------------------------------------- */

.blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-body);
  font-size: var(--ds-text-small);
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
}

.blog-chip:hover,
.blog-chip:focus-visible {
  border-color: var(--ds-muted);
  color: var(--ds-ink);
}

.blog-chip.is-active {
  border-color: var(--ds-ink);
  background: var(--ds-ink);
  color: oklch(0.985 0 0);
}

.blog-chip__count {
  color: var(--ds-muted);
  font-size: var(--ds-text-label);
  font-variant-numeric: tabular-nums;
}

.blog-chip.is-active .blog-chip__count {
  color: oklch(0.82 0.01 264);
}

/* The cards ------------------------------------------------------------ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: 16px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-md);
}

/*
 * The image is a second link to the same place, so it is hidden from assistive
 * technology and taken out of the tab order: one card, one stop.
 */
.blog-card__image {
  display: block;
  height: 180px;
  background: var(--ds-surface-sunk);
}

.blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
  color: var(--ds-body);
  font-size: var(--ds-text-label);
  font-weight: 500;
}

.blog-card__category {
  color: var(--ds-accent-text);
  text-transform: capitalize;
}

.blog-card__title {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ds-tracking-tight);
}

.blog-card__title a {
  color: var(--ds-ink);
  text-decoration: none;
}

/* The whole card is the target; the title carries the actual link. */
.blog-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.blog-card {
  position: relative;
}

.blog-card__excerpt {
  margin: 0 0 1.25rem;
  color: var(--ds-body);
  font-size: var(--ds-text-small);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--ds-ink);
  font-size: var(--ds-text-small);
  font-weight: 500;
}

.blog-card__more svg {
  width: 1em;
  height: 1em;
  transition: transform 0.22s ease;
}

.blog-card:hover .blog-card__more svg {
  transform: translateX(3px);
}

.blog-empty {
  margin: 0;
  color: var(--ds-body);
}

.blog-empty a {
  color: var(--ds-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Closing -------------------------------------------------------------- */

.blog-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.blog-cta__inner .ds-h2 {
  max-width: 20ch;
}

.blog-cta__inner p {
  margin: 0.85rem 0 0;
  max-width: 52ch;
  color: var(--ds-body);
}

.blog-cta__inner .ds-button {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* On the sunk band the muted grey misses 4.5:1, as it does on every ground
   that is not white. Specificity, not `!important`, to beat the rule above. */
.blog-cta__inner .blog-note {
  color: var(--ds-body);
  font-size: var(--ds-text-label);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__more svg {
    transition: none;
  }

  .blog-card:hover {
    transform: none;
  }
}