/* ═══════════════════════════════════════════════════════════════
   LEX — publicacoes.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.pub-hero__content .display { font-size: clamp(44px, 6.4vw, 88px); }
.pub-hero__sub { max-width: 40ch; }

/* ── Features MIT / HBR ─────────────────────────────────────── */
.pub-features {
  display: grid;
  gap: 0;
}
.pub-feature {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-blue-ghost);
}
.pub-feature:last-child { border-bottom: 1px solid var(--color-blue-ghost); }
.pub-feature__brand { display: flex; flex-direction: column; gap: 4px; }
.pub-feature__wordmark {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-black);
  line-height: 1;
}
.pub-feature__sub {
  font-size: var(--text-subhead);
  font-weight: var(--font-light);
  color: var(--color-blue);
}
.pub-feature__text .body-text { max-width: 56ch; font-size: clamp(16px, 1.5vw, 19px); }

/* ── Cabeçalho do conteúdo + filtro ─────────────────────────── */
.pub-content__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.pub-content__head .label { display: block; margin-bottom: var(--space-md); }

.pub-filter { display: flex; gap: var(--space-xs); }
.pub-filter__btn {
  padding: 12px var(--space-md);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  letter-spacing: 0.03em;
  color: var(--color-gray-mid);
  border: 1px solid var(--color-blue-ghost);
  border-radius: var(--radius-sm);
  transition: color var(--duration-mid), border-color var(--duration-mid), background var(--duration-mid);
}
.pub-filter__btn:hover { color: var(--color-black); border-color: var(--color-blue); }
.pub-filter__btn.is-active {
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
}

/* ── Grid de artigos ────────────────────────────────────────── */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.pub-article {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.pub-article[hidden] { display: none; }
.pub-article__media {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-md);
  position: relative;
}
.pub-article__link { display: block; color: inherit; text-decoration: none; }
.pub-article__link:hover .pub-article__title { color: var(--color-blue); }
.pub-article__media img { transition: transform var(--duration-slow) var(--ease-smooth); }
.pub-article:hover .pub-article__media img { transform: scale(1.04); }
.pub-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-gray-mid);
  font-size: var(--text-body);
}
.pub-article__pub {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-white);
  color: var(--color-blue);
  font-size: var(--text-label);
  font-weight: var(--font-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 12px;
}
.pub-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-black);
  margin-bottom: var(--space-sm);
}
.pub-article__date {
  font-size: var(--text-label);
  color: var(--color-gray-light);
  font-variant-numeric: tabular-nums;
}
.pub-article__title {
  font-size: var(--text-subhead);
  font-weight: var(--font-light);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-black);
  transition: color var(--duration-mid) var(--ease-out);
}
.pub-article:hover .pub-article__title { color: var(--color-blue); }

/* CTA final azul: garante contraste */
.cta-final--blue .display { color: var(--color-white); }
.cta-final--blue em { color: var(--color-white); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pub-feature { grid-template-columns: 1fr; gap: var(--space-md); }
  .pub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pub-grid { grid-template-columns: 1fr; }
  .pub-content__head { align-items: flex-start; }
}