/* ═══════════════════════════════════════════════════════════════
   APTTE — FOLHA DE DADOS · índice do registro técnico
   O hub do blog: um registro de documentos, não uma grade de cards.
   Carrega depois de article.css, que já define os tokens.
   ═══════════════════════════════════════════════════════════════ */

.blog-hero {
  border-bottom: 2px solid var(--ink);
  padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
  background: var(--paper);
  position: relative;
}

.blog-hero-blob { display: none; }

.blog-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.blog-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-variation-settings: "wdth" 116;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 18ch;
  text-wrap: balance;
}

.blog-hero p {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--graphite-mute);
  font-size: 1.05rem;
  line-height: 1.7;
}

.blog-section {
  padding-block: clamp(36px, 5vw, 60px);
}

.section-label { display: none; }

.section-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 26ch;
  text-wrap: balance;
}

.section-subtitle {
  margin-top: 12px;
  color: var(--graphite-mute);
  font-size: 0.98rem;
  max-width: 64ch;
}

/* ── registro: uma linha por documento ── */

.blog-grid {
  display: block;
  margin-top: 28px;
  border-top: 2px solid var(--ink);
}

/* O card tem um único filho em fluxo (.article-card-body); a linha é
   composta dentro dele, com a tag na margem esquerda em subgrade. */
.article-card {
  display: block;
  padding: 16px 4px;
  border: none;
  border-bottom: 1px solid var(--rule-hair);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: background 0.16s;
}

.article-card:hover {
  background: var(--paper-2);
  transform: none;
}

.article-card > * {
  transition: transform 0.2s var(--ease-draw);
}

.article-card:hover > * {
  transform: translateX(8px);
}

.article-card-img { display: none; }

.article-card-body {
  padding: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: 24px;
  align-items: baseline;
}

.article-card .article-tag {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.article-card-title {
  grid-column: 2;
  grid-row: 1;
}

.article-card-desc {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.article-tag {
  font-family: "Martian Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-mute);
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
}

.article-card-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--graphite);
  margin: 0;
}

.article-card-desc {
  font-size: 0.86rem;
  color: var(--graphite-mute);
  line-height: 1.6;
  margin-top: 4px;
  max-width: 76ch;
}

.article-card-body .article-card-meta {
  grid-column: 2;
  grid-row: 2;
  margin-top: 8px;
  justify-content: space-between;
}

.article-card-meta,
.article-card-meta-left {
  font-family: "Martian Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--graphite-mute);
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

.read-more {
  font-family: "Martian Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-mute);
}

.article-card:hover .read-more { color: var(--ink); }

.text-gradient {
  color: var(--ink);
  font-weight: 600;
}

.reveal,
.reveal.visible,
.delay-1,
.delay-2,
.delay-3 {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .article-card-body {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .article-card-desc {
    grid-column: 2;
    grid-row: 2;
    margin-top: 6px;
  }

  .article-card-body .article-card-meta {
    grid-column: 2;
    grid-row: 3;
  }

  .article-card .article-tag {
    grid-row: 1 / span 3;
  }
}

@media (max-width: 620px) {
  .article-card-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .article-card .article-tag,
  .article-card-title,
  .article-card-desc,
  .article-card-body .article-card-meta {
    grid-column: 1;
    grid-row: auto;
  }

  .read-more { display: none; }
}