/* Comparoto — Blog index styles (specific only).
   Base reset + shared components come from base.css + components.css.
   This file must NOT redefine body/html/.btn/.container/.skip/.eyebrow/.btn. */

/* — Masthead — */
.masthead h1 { max-width: 18ch; }
.masthead .lead { margin-top: var(--gap-md); }

/* — Category filter bar — */
.catbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--gap-lg); }
.cat {
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--ink-muted); font-size: 14px; font-weight: 500;
  transition: all 0.15s ease;
}
.cat:hover { color: var(--ink); border-color: var(--ink); }
.cat.active { background: var(--ink); color: var(--on-dark-1); border-color: var(--ink); }
.catbar .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* — Featured hero (À la une) — */
.feature-hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--gap-2xl); align-items: center; }
@media (max-width: 980px) { .feature-hero { grid-template-columns: 1fr; gap: var(--gap-lg); } }
.feature-h1 {
  font-family: var(--font-display); font-size: clamp(34px, 3.7vw, 50px);
  line-height: 1.02; letter-spacing: -0.025em; font-weight: 700;
  margin: 0 0 var(--gap-md);
}
.feature-h1 a { color: inherit; text-decoration: none; }
.feature-h1 a:hover { color: var(--blue); text-decoration: none; }
.feature-dek { font-size: 18px; line-height: 1.5; color: var(--ink-muted); max-width: 50ch; margin: 0 0 var(--gap-lg); }
.feature-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feature-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--gap-lg); }
.feature-media {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 4 / 3;
  background: var(--surface-lowered); box-shadow: var(--shadow-raise);
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-score {
  position: absolute; right: 16px; bottom: 16px;
  background: var(--ink); color: var(--on-dark-1);
  border-radius: var(--radius-md); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-hover); min-width: 96px;
}
.feature-score .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-3); }
.feature-score .val { font-family: var(--font-display); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.feature-score .val .unit { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-3); }

/* — Section head — */

/* — Post grid — */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
@media (max-width: 1080px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.post-card-media {
  position: relative; display: block; aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--surface-lowered);
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.045); }
.svg-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-subtle); }
.svg-ph svg { width: 28%; opacity: 0.4; }
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-subtle); }
.post-card-title { font-family: var(--font-display); font-size: 21px; line-height: 1.18; letter-spacing: -0.012em; font-weight: 700; }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--blue); text-decoration: none; }
.post-card-dek { margin: 0; color: var(--ink-muted); font-size: 14.5px; line-height: 1.5; }
.post-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.post-card-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); }

/* — Category chips (overlay on photos) — */
.chip {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  box-shadow: var(--shadow-hover);
}
.chip-blue { background: var(--blue); color: var(--on-dark-1); }
.chip-coral { background: var(--coral); color: var(--on-dark-1); }
.chip-neutral { background: color-mix(in oklch, var(--on-dark-1) 94%, transparent); color: var(--ink); border: 1px solid var(--border-strong); }

/* — Filter empty state — */
.grid-empty {
  text-align: center; padding: clamp(40px, 6vw, 68px) 24px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-xl);
  background: var(--surface);
}
.grid-empty[hidden] { display: none; }
.grid-empty .ge-icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: var(--radius-pill); background: var(--blue-tint); color: var(--blue);
  display: grid; place-items: center;
}
.grid-empty .ge-icon svg { width: 22px; height: 22px; }
.grid-empty h3 { font-size: 20px; margin: 0 0 6px; }
.grid-empty p { margin: 0; color: var(--ink-muted); max-width: 46ch; margin-inline: auto; }

/* — Newsletter (dark spotlight) — */
.newsletter {
  background: var(--ink); color: var(--on-dark-1);
  border-radius: var(--radius-xl); padding: clamp(36px, 5vw, 64px);
  position: relative; overflow: hidden;
}
.newsletter .eyebrow { color: var(--lime); }
.newsletter h2 { color: var(--on-dark-1); max-width: 16ch; }
.newsletter .lead { color: color-mix(in oklch, var(--on-dark-1) 75%, transparent); margin-top: var(--gap-md); }
.news-inner { max-width: 640px; }
.news-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--gap-lg); }
.news-input {
  flex: 1; min-width: 240px; padding: 13px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--on-dark-1) 22%, transparent);
  background: color-mix(in oklch, var(--on-dark-1) 6%, transparent);
  color: var(--on-dark-1); font: inherit; font-size: 15px;
}
.news-input::placeholder { color: color-mix(in oklch, var(--on-dark-1) 55%, transparent); }
.news-input:focus { outline: 3px solid var(--blue); outline-offset: 2px; border-color: transparent; }
.news-input[aria-invalid="true"] { border-color: var(--coral); }
.news-credits { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.news-credits .pip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--lime); color: var(--lime-ink);
  font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
}
.news-trust {
  margin-top: 14px; font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in oklch, var(--on-dark-1) 55%, transparent);
  text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}

/* — Newsletter form states — */
.news-msg {
  margin-top: 14px; font-size: 14px; line-height: 1.5;
  padding: 11px 15px; border-radius: var(--radius-md); font-weight: 500;
}
.news-msg[hidden] { display: none; }
.news-success { background: color-mix(in oklch, var(--lime) 16%, transparent); color: var(--lime-ink); }
.news-error { background: color-mix(in oklch, var(--coral) 20%, transparent); color: color-mix(in oklch, var(--coral) 60%, var(--on-dark-1)); }
.btn[disabled] { opacity: 0.72; cursor: progress; }