/* Blog — identidade CORPRECISION */



.blog-hero {

  padding: 28px 0 40px;

  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);

  border-bottom-left-radius: 48px;

  border-bottom-right-radius: 48px;

}



.blog-hero .sub-heading {

  color: var(--color-primary);

  font-weight: 600;

  text-transform: uppercase;

  font-size: 0.85rem;

  letter-spacing: 1px;

  display: block;

  margin-bottom: 8px;

}



.blog-hero h1 {

  font-size: 2.25rem;

  line-height: 1.15;

  margin-bottom: 12px;

  max-width: 720px;

}



.blog-hero p {

  color: var(--color-text-light);

  font-size: 1rem;

  max-width: 600px;

  margin: 0;

}



.blog-list-section {

  padding: 40px 0 72px;

}



.blog-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  align-items: start;

}



.blog-card {

  background: var(--color-white);

  border-radius: var(--border-radius-lg);

  box-shadow: var(--shadow-card);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border: 1px solid rgba(0, 0, 0, 0.03);

}



.blog-card-cover-link {

  display: block;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  max-height: 200px;

  background: var(--color-light);

  line-height: 0;

}



.blog-card-cover {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

  transition: transform 0.4s ease;

}



.blog-card:hover .blog-card-cover {

  transform: scale(1.04);

}



.blog-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-float);

}



.blog-card-body {

  padding: 20px 20px 24px;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.blog-card-eyebrow {

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  color: var(--color-primary);

  margin-bottom: 8px;

}



.blog-card h2 {

  font-size: 1.1rem;

  line-height: 1.35;

  margin-bottom: 8px;

  color: var(--color-dark);

}



.blog-card h2 a {

  color: inherit;

  text-decoration: none !important;

}



.blog-card h2 a:hover {

  color: var(--color-primary);

}



.blog-card-excerpt {

  font-size: 0.9rem;

  color: var(--color-text-light);

  line-height: 1.55;

  margin-bottom: 14px;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.blog-card-meta {

  font-size: 0.8rem;

  color: var(--color-text-light);

  margin-bottom: 12px;

}



.blog-card-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--color-primary);

  font-weight: var(--weight-medium);

  font-size: 0.9rem;

  margin-top: auto;

}



.blog-empty {

  text-align: center;

  padding: 48px 20px;

  color: var(--color-text-light);

}



/* Artigo individual — capa integrada ao hero */

.article-hero-stack {

  background: var(--color-dark);

  border-bottom-left-radius: 48px;

  border-bottom-right-radius: 48px;

  overflow: hidden;

}



.article-hero-cover {

  position: relative;

  line-height: 0;

  max-height: 280px;

  overflow: hidden;

  background: var(--color-dark);

}



.article-hero-cover-img {

  width: 100%;

  height: 280px;

  object-fit: cover;

  object-position: center 30%;

  display: block;

  margin: 0;

  padding: 0;

  border: 0;

  vertical-align: top;

}



.article-hero-cover-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(4, 28, 58, 0.05) 0%, rgba(4, 28, 58, 0.55) 100%);

  pointer-events: none;

}



.article-hero-blog {

  padding: 32px 0 36px;

}



.article-hero-blog .article-back {

  color: rgba(255, 255, 255, 0.85);

  margin-bottom: 16px;

  display: inline-flex;

}



.article-hero-blog .eyebrow {

  font-size: 0.75rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--color-primary);

  font-weight: 600;

  margin-bottom: 12px;

  display: block;

}



.article-hero-blog h1 {

  color: var(--color-white);

  font-size: 2rem;

  line-height: 1.2;

  max-width: 820px;

  margin-bottom: 16px;

}



.article-hero-blog .article-meta-row {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.65);

}



.article-body-blog {

  max-width: 780px;

  margin: 0 auto;

  padding: 40px 20px 64px;

}



.article-body-blog .lead {

  font-size: 1.15rem;

  line-height: 1.8;

  color: var(--color-text-main);

  margin-bottom: 24px;

}



.article-body-blog h2 {

  font-size: 1.45rem;

  color: var(--color-secondary);

  margin: 40px 0 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid #e2e8f0;

}



.article-body-blog p {

  font-size: 1rem;

  line-height: 1.85;

  color: var(--color-text-main);

  margin-bottom: 18px;

}



.article-body-blog img {

  display: block;

  max-width: 100%;

  height: auto;

  margin: 24px auto;

  border-radius: var(--border-radius-md);

  object-fit: cover;

}



.article-body-blog p:has(> img:only-child) {

  margin: 24px 0;

  line-height: 0;

}



.article-body-blog p:has(> img:only-child) img {

  margin: 0 auto;

}



.article-body-blog ul {

  margin: 16px 0 24px;

  padding-left: 0;

  list-style: none;

}



.article-body-blog ul li {

  padding: 10px 0 10px 20px;

  border-bottom: 1px solid #e2e8f0;

  position: relative;

  line-height: 1.65;

}



.article-body-blog ul li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 1.1em;

  width: 8px;

  height: 2px;

  background: var(--color-primary);

}



.article-body-blog .insight {

  border-left: 4px solid var(--color-primary);

  padding: 20px 24px;

  background: var(--color-light);

  margin: 28px 0;

  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;

}



.article-body-blog .insight p {

  margin: 0;

  font-style: italic;

  color: var(--color-dark);

  font-size: 1.05rem;

}



.article-body-blog a {

  color: var(--color-primary);

  text-decoration: underline !important;

}



.article-back {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 32px;

  color: var(--color-primary);

  font-weight: var(--weight-medium);

}



.article-cta-inline {

  background: var(--color-dark);

  color: var(--color-white);

  padding: 32px 28px;

  border-radius: var(--border-radius-lg);

  text-align: center;

  margin-top: 40px;

}



.article-cta-inline h3 {

  color: var(--color-white);

  font-size: 1.35rem;

  margin-bottom: 12px;

}



.article-cta-inline p {

  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 24px;

}



@media (max-width: 991px) {

  .blog-grid {

    grid-template-columns: 1fr;

    max-width: 420px;

    margin: 0 auto;

  }



  .blog-hero h1 {

    font-size: 1.85rem;

  }



  .article-hero-blog h1 {

    font-size: 1.55rem;

  }



  .article-hero-cover-img {

    height: 220px;

  }



  .article-hero-cover {

    max-height: 220px;

  }

}



@media (max-width: 767px) {

  .blog-hero {

    padding: 24px 0 32px;

    border-bottom-left-radius: 32px;

    border-bottom-right-radius: 32px;

  }



  .blog-hero h1 {

    font-size: 1.55rem;

  }



  .article-hero-stack {

    border-bottom-left-radius: 32px;

    border-bottom-right-radius: 32px;

  }



  .article-hero-blog {

    padding: 24px 0 28px;

  }

}