/* ============================================================
   XD4 Robotics — Blog
   Complementa css/styles.css. Nao redefine nada das paginas
   institucionais: so acrescenta as classes do blog.
   ============================================================ */

/* Coluna estreita para leitura confortavel (~72 caracteres) */
.container-narrow {
  max-width: 760px;
}

/* ---- Topo escuro -------------------------------------------------------
   O .nav do site e transparente no topo e so fica claro ao rolar, com o
   logo branco. Por isso o cabecalho do blog precisa ser escuro: sem isso o
   logo branco ficaria invisivel sobre fundo claro.
   ----------------------------------------------------------------------- */
.blog-hero,
.post-head {
  background: var(--dark);
  color: #fff;
  padding: 190px 0 80px;
}

.blog-hero h1,
.post-head h1 {
  color: #fff;
  margin: 10px 0 0;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.blog-hero-sub {
  color: var(--gray-light);
  max-width: 620px;
  margin-top: 22px;
  font-size: 1.08rem;
  line-height: 1.65;
}

/* ---- Listagem de posts ---- */
.blog-list-section { padding: 90px 0 120px; }

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}

.post-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--bg);
}

.post-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11, 18, 32, 0.08);
}

.post-card > a {
  display: block;
  padding: 32px 34px;
  text-decoration: none;
  color: inherit;
}

.post-card h2 {
  margin: 10px 0 12px;
  font-size: 1.5rem;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.post-card-excerpt {
  color: var(--gray);
  line-height: 1.65;
  margin: 0 0 18px;
}

.post-card-cta {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--blue);
  letter-spacing: 0.02em;
}

.post-card-meta,
.post-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0;
}

.post-meta { color: var(--gray-light); margin-top: 20px; }
.post-dot { margin: 0 9px; opacity: 0.5; }

.post-topic {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 0.74rem;
}

.post-empty {
  color: var(--gray);
  font-size: 1.05rem;
  padding: 40px 0;
}

/* ---- Post ---- */
.post-back {
  display: inline-block;
  margin-bottom: 30px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.post-back:hover { color: #fff; }

.post-lede {
  color: var(--gray-light);
  font-size: 1.16rem;
  line-height: 1.6;
  margin-top: 22px;
}

.post-cover {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-top: -46px;
  position: relative;
  display: block;
}

.post-body {
  padding: 70px 0 100px;
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--ink);
}

.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.5em; }

.post-body h2 {
  margin: 2.4em 0 0.7em;
  font-size: 1.7rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.post-body h3 {
  margin: 2em 0 0.6em;
  font-size: 1.28rem;
  line-height: 1.3;
}

.post-body ul,
.post-body ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.post-body li { margin-bottom: 0.55em; }

.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--cyan); }

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 2.2em 0;
}

.post-body blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--cyan);
  color: var(--gray);
  font-size: 1.12rem;
}

.post-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.post-body pre {
  background: var(--dark-2);
  color: #E6EAF0;
  border-radius: var(--radius);
  padding: 22px 24px;
  overflow-x: auto;
  margin: 2em 0;
  font-size: 0.9rem;
  line-height: 1.6;
}
.post-body pre code { background: none; border: none; padding: 0; color: inherit; }

.post-body table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 0.97rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.post-body th { background: var(--bg-tint); font-weight: 600; }

.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

/* ---- CTA no fim do post ---- */
.post-cta { text-align: center; }
.post-cta h2 { margin-bottom: 12px; }
.post-cta p { color: var(--gray); margin-bottom: 28px; }

/* ---- Seletor PT/EN como links (no blog cada idioma e uma URL) ---- */
.lang-toggle-links a,
.lang-toggle-links span.active {
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.lang-toggle-links a:hover { opacity: 1; }
.lang-toggle-links .active { opacity: 1; font-weight: 600; }

@media (max-width: 720px) {
  .blog-hero, .post-head { padding: 150px 0 60px; }
  .post-card > a { padding: 26px 22px; }
  .post-cover { margin-top: -30px; }
  .post-body { padding: 50px 0 70px; }
}