/* =============================================================
   THE IMPACT ADVANTAGE — PUBLICATIONS PAGE
   Depends on tokens.css + main.css.
   Scope: page hero + .pubs list + .pub card.
   ============================================================= */

/* ── PAGE HERO (compact dark header) ── */
.pub-hero {
  background: var(--bg-dark);
  padding-top: clamp(7rem, 15vh, 11rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  position: relative;
  overflow: hidden;
}

.pub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/leaf-dark.png");
  background-size: cover;
  background-position: right bottom;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

.pub-hero .container { position: relative; z-index: 1; }

.pub-hero__eyebrow { margin-bottom: var(--space-2); }

.pub-hero h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-2);
  max-width: 18ch;
}

.pub-hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-on-dark-muted);
  max-width: 52ch;
  line-height: var(--lh-normal);
}

/* ── PUBLICATIONS LIST ── */
.pubs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── SINGLE PUBLICATION CARD ── */
.pub {
  background: var(--surface-light);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: start;
  transition:
    border-color var(--dur-base) var(--ease-soft),
    box-shadow   var(--dur-base) var(--ease-soft),
    transform    var(--dur-base) var(--ease-out);
}

.pub:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}

/* Meta line: domain (bold, olive) + pipe details (muted) */
.pub__meta {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.pub__meta span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
  color: var(--text-on-light-muted);
}

/* Title */
.pub__body h2 {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  color: var(--text-on-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-3);
}

/* Description — Le constat / Ce que montre / Ce que tu en retires */
.pub__body p {
  font-size: var(--fs-small);
  color: var(--text-on-light-muted);
  line-height: 1.75;
  max-width: 68ch;
}

/* Bold section labels within the description */
.pub__body strong {
  font-weight: var(--fw-semibold);
  color: var(--text-on-light);
}

/* Actions column: download button, right-aligned */
.pub__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  padding-top: 0.2rem;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .pub {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .pub__actions {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .pub { padding: var(--space-4) var(--space-3); }
}