/* ===========================================================
   CSS PARTILHADO — BLOG (cumulativo e otimizado)
   Todas as regras prefixadas com: .blog-post .post-content
   Abordagem desktop-first + media queries max-width
   -----------------------------------------------------------
   Blocos incluídos:
     • Bloco 01 — "Neste artigo" (sumário / índice do artigo)
     • Bloco 02 — Texto + 3 cartões comparativos
     • Bloco 03 — Imagem (banner) + lista de sinais
     • Bloco 04 — Duas colunas (imagem + texto/lista de erros)
     • Bloco 05 — Fases (caixa + barra lateral com brilho no hover)
     • Bloco 06 — Conclusão (caixa vermelha) + CTA
   =========================================================== */


/* -----------------------------------------------------------
   BASE / PARTILHADO (tipografia comum a todos os blocos)
   ----------------------------------------------------------- */

.blog-post .post-content {
  font-family: 'Ubuntu', sans-serif;
}

.blog-post .post-content p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: #515151;
}

.blog-post .post-content h2 {
  margin: 34px 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #000000;
}


/* -----------------------------------------------------------
   BLOCO 01 — Sumário "Neste artigo"
   ----------------------------------------------------------- */

.blog-post .post-content .ts-summary {
  background: #F2F2F2;
  padding: 20px;
  margin-bottom: 30px;
}

.blog-post .post-content .ts-summary__box {
  border: 1px solid #C7C7C7;
  padding: 28px 30px 32px;
}

.blog-post .post-content .ts-summary__title {
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  color: #000000;
}

.blog-post .post-content .ts-summary__list {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

.blog-post .post-content .ts-summary__list li {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
}

.blog-post .post-content .ts-summary__list li:last-child {
  margin-bottom: 0;
}

.blog-post .post-content .ts-summary__intro {
  margin: 24px 0 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: #515151;
}


/* -----------------------------------------------------------
   BLOCO 02 — Fila de 3 cartões comparativos
   ----------------------------------------------------------- */

.blog-post .post-content .ts-cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin: 0 0 30px;
}

.blog-post .post-content .ts-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 22px 24px 24px 32px;
}


/* -----------------------------------------------------------
   PARTILHADO — Barra lateral + brilhos no hover
   (Bloco 02 cartões e Bloco 05 fases)
   ----------------------------------------------------------- */

.blog-post .post-content .ts-card,
.blog-post .post-content .ts-phase {
  position: relative;
  overflow: hidden;
  background-color: #F2F2F2;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 200% 0;
}

/* Barra lateral colorida */
.blog-post .post-content .ts-card::before,
.blog-post .post-content .ts-phase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--ts-accent, #405B67);
}

/* Faixa de luz que percorre a barra (escondida em repouso) */
.blog-post .post-content .ts-card::after,
.blog-post .post-content .ts-phase::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 40%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateY(120%);
}

/* Hover: brilho diagonal a atravessar a área cinzenta */
.blog-post .post-content .ts-card:hover,
.blog-post .post-content .ts-phase:hover {
  animation: ts-shine-diagonal 1s ease;
}

/* Hover: brilho a percorrer a barra lateral */
.blog-post .post-content .ts-card:hover::after,
.blog-post .post-content .ts-phase:hover::after {
  animation: ts-shine-bar 0.3s ease;
}

@keyframes ts-shine-bar {
  0%   { transform: translateY(120%);  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-210%); opacity: 0; }
}

@keyframes ts-shine-diagonal {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Cor de acento por cartão (barra lateral + rótulo) */
.blog-post .post-content .ts-card--c1 { --ts-accent: #7A8991; }
.blog-post .post-content .ts-card--c2 { --ts-accent: #405B67; }
.blog-post .post-content .ts-card--c3 { --ts-accent: #EE1D52; }

.blog-post .post-content .ts-card__label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--ts-accent, #405B67);
}

.blog-post .post-content .ts-card__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.blog-post .post-content .ts-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #515151;
}


/* -----------------------------------------------------------
   BLOCO 03 — Imagem (banner) + lista de sinais
   ----------------------------------------------------------- */

.blog-post .post-content .ts-figure {
  margin: 0 0 30px;
  overflow: hidden;
}

.blog-post .post-content .ts-figure img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.blog-post .post-content .ts-figure:hover img {
  transform: scale(1.04);
}

.blog-post .post-content .ts-signals {
  margin: 0 0 30px;
}

.blog-post .post-content .ts-signal {
  margin: 0 0 18px;
}

.blog-post .post-content .ts-signal:last-child {
  margin-bottom: 0;
}

.blog-post .post-content .ts-signal__title {
  position: relative;
  margin: 0 0 4px;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #EE1D52;
}

/* Marcador circular (reproduz o ponto da imagem) */
.blog-post .post-content .ts-signal__title::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  background: #EE1D52;
  border-radius: 50%;
}

.blog-post .post-content .ts-signal__text {
  margin: 0;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: #515151;
}


/* -----------------------------------------------------------
   BLOCO 04 — Duas colunas (imagem + texto/lista de erros)
   ----------------------------------------------------------- */

.blog-post .post-content .ts-split {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  margin: 0 0 30px;
}

.blog-post .post-content .ts-split__media {
  flex: 0 0 34%;
  max-width: 34%;
  margin: 0;
  overflow: hidden;
}

.blog-post .post-content .ts-split__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.blog-post .post-content .ts-split__media:hover img {
  transform: scale(1.04);
}

.blog-post .post-content .ts-split__body {
  flex: 1 1 0;
  min-width: 0;
}

/* O primeiro elemento da coluna de texto alinha pelo topo da imagem */
.blog-post .post-content .ts-split__body > :first-child {
  margin-top: 0;
}

.blog-post .post-content .ts-split__body .ts-signals {
  margin-bottom: 0;
}

/* Citação de fecho dentro de um sinal */
.blog-post .post-content .ts-signal__quote {
  margin: 8px 0 0;
  padding-left: 26px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: #515151;
}


/* -----------------------------------------------------------
   BLOCO 05 — Fases (caixa cinzenta + barra lateral com brilho)
   ----------------------------------------------------------- */

.blog-post .post-content .ts-phase {
  margin: 0 0 30px;
  padding: 24px 32px 24px 50px;
}

/* Cor de acento por fase (barra + título) */
.blog-post .post-content .ts-phase--p1 { --ts-accent: #7A8991; }
.blog-post .post-content .ts-phase--p2 { --ts-accent: #405B67; }
.blog-post .post-content .ts-phase--p3 { --ts-accent: #EF8AA2; }
.blog-post .post-content .ts-phase--p4 { --ts-accent: #E50140; }
.blog-post .post-content .ts-phase--p5 { --ts-accent: #C40038; }

.blog-post .post-content .ts-phase__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ts-accent, #405B67);
}

.blog-post .post-content .ts-phase__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #515151;
}


/* -----------------------------------------------------------
   BLOCO 06 — Conclusão (caixa vermelha) + CTA
   ----------------------------------------------------------- */

.blog-post .post-content .ts-conclusion {
  position: relative;
  overflow: hidden;
  margin: 0 0 30px;
  padding: 22px;
  background-color: #E50140;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 200% 0;
}

/* Brilho diagonal no hover (mesma animação das caixas cinzentas) */
.blog-post .post-content .ts-conclusion:hover {
  animation: ts-shine-diagonal 1s ease;
}

.blog-post .post-content .ts-conclusion__inner {
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 28px 32px 30px;
}

.blog-post .post-content .ts-conclusion__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

.blog-post .post-content .ts-conclusion__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #FFFFFF;
}

.blog-post .post-content .ts-cta {
  margin: 16px 0 30px;
  text-align: center;
}

.blog-post .post-content .ts-cta__lead {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
}


/* ===========================================================
   TABLET — 601px a 1024px
   =========================================================== */
@media (max-width: 1024px) {

  /* Bloco 01 */
  .blog-post .post-content .ts-summary {
    padding: 18px;
  }
  .blog-post .post-content .ts-summary__box {
    padding: 26px 26px 28px;
  }

  /* Bloco 02 */
  .blog-post .post-content .ts-cards {
    gap: 18px;
  }
  .blog-post .post-content .ts-card {
    padding: 20px 20px 22px;
  }

  /* Bloco 04 */
  .blog-post .post-content .ts-split {
    gap: 24px;
  }
  .blog-post .post-content .ts-split__media {
    flex-basis: 36%;
    max-width: 36%;
  }
}


/* ===========================================================
   MOBILE — ≤ 600px
   =========================================================== */
@media (max-width: 600px) {

  /* Base */
  .blog-post .post-content h2 {
    font-size: 18px;
  }

  /* Bloco 01 */
  .blog-post .post-content .ts-summary {
    padding: 14px;
  }
  .blog-post .post-content .ts-summary__box {
    padding: 20px 18px 22px;
  }
  .blog-post .post-content .ts-summary__title {
    margin-bottom: 18px;
  }
  .blog-post .post-content .ts-summary__list li {
    font-size: 15px;
  }
  .blog-post .post-content .ts-summary__intro {
    margin-top: 20px;
    font-size: 13px;
  }

  /* Bloco 02 — cartões empilhados */
  .blog-post .post-content .ts-cards {
    flex-direction: column;
    gap: 16px;
  }
  .blog-post .post-content .ts-card {
    flex: 0 0 auto;
  }

  /* Bloco 04 — colunas empilhadas (imagem em cima) */
  .blog-post .post-content .ts-split {
    flex-direction: column;
    gap: 20px;
  }
  .blog-post .post-content .ts-split__media {
    flex-basis: auto;
    max-width: 100%;
  }

  /* Bloco 05 — fases */
  .blog-post .post-content .ts-phase {
    padding: 20px 20px 20px 40px;
  }

  /* Bloco 06 — conclusão */
  .blog-post .post-content .ts-conclusion {
    padding: 16px;
  }
  .blog-post .post-content .ts-conclusion__inner {
    padding: 22px 20px 24px;
  }
}