/* Blog list: guides and tools, the tipping-economy series, then every post. */

.blog-home p,
.blog-home h1,
.blog-home h2,
.blog-home h3 {
  margin: 0;
}

.blog-home ol,
.blog-home ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Hero and the two doors --- */

.blog-home__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: clamp(40px, 6vw, 72px) var(--spacing-xl) 40px;
  text-align: center;
}

.blog-home__title {
  max-width: 16ch;
  font-family: var(--font-family-bricolage);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.blog-home__subtitle {
  max-width: 56ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text-secondary);
}

.blog-doors {
  width: 100%;
  max-width: 760px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  text-align: left;
}

.blog-door {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.blog-door:hover {
  transform: translateY(-2px);
}

.blog-door--tools { background: #effae6; }
.blog-door--series { background: var(--panel-sky); }

.blog-door__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.blog-door--tools .blog-door__icon { background: #9fe870; color: var(--interactive-primary); }
.blog-door--series .blog-door__icon { background: #d3f2ff; color: var(--eyebrow-two); }

.blog-door__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-door__kicker {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.blog-door__title {
  font-family: var(--font-family-bricolage);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Section headings and format chips --- */

.blog-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-section-head__kicker {
  font-family: var(--font-family-bricolage);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.blog-section-head__kicker--tools { color: #2f6b12; }
.blog-section-head__kicker--series { color: var(--eyebrow-two); }

.blog-section-head__title {
  font-family: var(--font-family-bricolage);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.blog-format {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.blog-format--outil { background: #9fe870; color: var(--interactive-primary); }
.blog-format--guide { background: #e3f6d5; color: var(--interactive-primary); }
.blog-format--etude { background: var(--panel-sky); color: var(--eyebrow-two); }
.blog-format--comparatif { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.blog-format--analyse { background: #f1e9ff; color: #5b2bb5; }
.blog-format--tribune { background: var(--interactive-primary); color: white; }

/* --- Guides and tools --- */

.blog-tools {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 48px var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}

.blog-tool {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 28px;
  background: #effae6;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.blog-tool:nth-child(even) {
  background: var(--panel-amber);
}

.blog-tool:hover {
  transform: translateY(-2px);
}

.blog-tool__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-tool__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #9fe870;
  color: var(--interactive-primary);
}

.blog-tool:nth-child(even) .blog-tool__icon {
  background: var(--chip-amber-bg);
  color: var(--chip-amber-fg);
}

.blog-tool__icon .icon {
  width: 26px;
  height: 26px;
}

.blog-tool__title {
  font-family: var(--font-family-bricolage);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.blog-tool__teaser {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.blog-tool__cta {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--interactive-primary);
}

/* --- The tipping-economy series --- */

.blog-series {
  padding: clamp(56px, 7vw, 96px) var(--spacing-xl);
  background: linear-gradient(180deg, rgb(216 236 253 / 0) 0%, #d8ecfd 12%, #d8ecfd 88%, rgb(216 236 253 / 0) 100%);
}

/* Same text column as the bands above and below, which pad inside the max. */
.blog-series__inner {
  max-width: calc(var(--home-max) - 2 * var(--spacing-xl));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-series__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: end;
  gap: 24px 60px;
}

.blog-series__title {
  font-family: var(--font-family-bricolage);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.blog-series__intro {
  font-size: 18px;
  line-height: 1.5;
}

.blog-series__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Every post --- */

.blog-all {
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 56px var(--spacing-xl) 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-margin-top: 24px;
}

.blog-all__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-filter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgb(21 51 0 / 7%);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.blog-filter--active {
  background: var(--interactive-primary);
  color: white;
}

.blog-all__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border-soft);
}

.blog-all__list li {
  border-bottom: 1px solid var(--color-border-soft);
}

.post-card {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 32px;
  padding: 24px 8px;
  color: var(--text-primary);
  text-decoration: none;
}

.post-card:hover .post-card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-card__date {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-card__title {
  font-family: var(--font-family-bricolage);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.post-card__snippet {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 48rem) {
  .post-card {
    grid-template-columns: minmax(0, 1fr);
  }
}