/* ============================================
   ESTILOS PARA ARTIGOS
   ============================================ */

/* Hero Section para Artigos */
.hero-articles {
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
   color: var(--white);
   padding: 4rem 0;
   text-align: center;
}

.hero-articles h1 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   color: var(--white);
}

.hero-articles p {
   font-size: 1.2rem;
   opacity: 0.9;
   max-width: 800px;
   margin: 0 auto;
}

/* Breadcrumbs */
.breadcrumbs {
   background-color: var(--light);
   padding: 1rem 0;
   border-bottom: 1px solid var(--border-color);
}

.breadcrumbs ol {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
}

.breadcrumbs li {
   display: flex;
   align-items: center;
}

.breadcrumbs a {
   color: var(--primary);
   text-decoration: none;
   transition: color 0.3s;
}

.breadcrumbs a:hover {
   color: var(--primary-dark);
}

.breadcrumb-separator {
   margin: 0 0.5rem;
   color: var(--gray);
}

.breadcrumbs li:last-child span {
   color: var(--text-secondary);
   font-weight: 500;
}

/* Container de Artigos */
.articles-page-wrapper{
   margin-top: 30px;
}
/* Grid de Artigos */
.articles-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem;
   margin-bottom: 2rem;
}

/* Card de Artigo */
.article-card {
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
   transition: transform 0.3s, box-shadow 0.3s;
   display: flex;
   flex-direction: column;
}

.article-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
}

.article-image {
   width: 100%;
   height: 280px;
   overflow: hidden;
   background: var(--light-gray);
}

.article-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s;
}

.article-card:hover .article-image img {
   transform: scale(1.05);
}

.article-content {
   padding: 1.5rem;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.article-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-bottom: 1rem;
   font-size: 0.875rem;
   color: var(--text-secondary);
}

.article-category a {
   color: var(--primary);
   text-decoration: none;
   font-weight: 500;
   padding: 0.25rem 0.75rem;
   background: var(--light);
   border-radius: 20px;
   transition: all 0.3s;
}

.article-category a:hover {
   background: var(--primary);
   color: var(--white);
}

.article-date,
.article-reading-time {
   display: flex;
   align-items: center;
   gap: 0.25rem;
}

.article-title {
   margin: 0 0 1rem 0;
   font-size: 1.5rem;
   line-height: 1.4;
}

.article-title a {
   color: var(--text-primary);
   text-decoration: none;
   transition: color 0.3s;
}

.article-title a:hover {
   color: var(--primary);
}

.article-excerpt {
   color: var(--text-secondary);
   line-height: 1.6;
   margin-bottom: 1rem;
   flex: 1;
}

.article-read-more {
   color: var(--primary);
   text-decoration: none;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   transition: gap 0.3s;
}

.article-read-more:hover {
   gap: 0.75rem;
}

/* Artigo Individual */
.article-page-wrapper {
   max-width: 1200px;
   margin: 30px auto;
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
   margin-bottom: 2rem;
   box-sizing: border-box;
}

.single-article {
   overflow: hidden;
   margin-bottom: 2rem;
}
.single-article header{
   box-shadow: none;
   z-index: 99;
}
.article-header {
   padding: 2rem;
   border-bottom: 1px solid var(--border-color);
}

.article-meta-top {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 1rem;
   font-size: 0.875rem;
   color: var(--text-secondary);
   align-items: center;
}

.article-header .article-title {
   font-size: 2.5rem;
   margin: 1rem 0;
   line-height: 1.2;
   color: var(--text-primary);
}

.article-header .article-excerpt {
   font-size: 1.2rem;
   color: var(--text-secondary);
   margin-bottom: 1rem;
   line-height: 1.6;
}

.article-author {
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.article-featured-image {
   width: 100%;
   max-height: 500px;
   overflow: hidden;
   background: var(--light-gray);
}

.article-featured-image img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.article-featured-image figcaption {
   margin-top: 0.5rem;
   font-size: 0.9rem;
   color: var(--text-secondary);
   text-align: center;
   font-style: italic;
}

.article-content {
   padding: 2rem;
   line-height: 1.8;
   font-size: 1.1rem;
   color: var(--text-primary);
}

.article-content h1,
/* .article-content h2, */
.article-content h3 {
   margin-top: 2rem;
   margin-bottom: 1rem;
   color: var(--text-primary);
   line-height: 1.3;
}

.article-content h2 {
   margin-top: .8rem;
   margin-bottom: .8rem;
   color: var(--text-primary);
   line-height: 1.3;
}

.article-content h1 {
   font-size: 2rem;
}

.article-content h2 {
   font-size: 1.75rem;
}

.article-content h3 {
   font-size: 1.5rem;
}

.article-content p {
   margin-bottom: 1.5rem;
}

.article-content ul,
.article-content ol {
   margin-bottom: 1.5rem;
   padding-left: 2rem;
}

.article-content li {
   margin-bottom: 0.5rem;
}

/* Artigos Relacionados */
.related-articles {
   padding: 2rem;
   border-top: 1px solid var(--border-color);
   background: var(--light);
}

.related-articles h2 {
   margin-bottom: 1.5rem;
   font-size: 1.75rem;
   color: var(--text-primary);
}

.related-articles-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
}

.related-article-card {
   background: var(--white);
   padding: 1.5rem;
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
}

.related-article-card h3 {
   font-size: 1.2rem;
   margin-bottom: 0.75rem;
}

.related-article-card h3 a {
   color: var(--text-primary);
   text-decoration: none;
   transition: color 0.3s;
}

.related-article-card h3 a:hover {
   color: var(--primary);
}

.related-article-card p {
   color: var(--text-secondary);
   font-size: 0.9rem;
   margin-bottom: 1rem;
   line-height: 1.6;
}

.read-more-link {
   color: var(--primary);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.9rem;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
}

.read-more-link:hover {
   gap: 0.75rem;
}

/* Mensagem quando não há artigos */
.no-articles {
   text-align: center;
   padding: 3rem;
   background: var(--white);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
}

.no-articles p {
   font-size: 1.2rem;
   color: var(--text-secondary);
   margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
   .hero-articles h1 {
      font-size: 2rem;
   }

   .hero-articles p {
      font-size: 1rem;
   }

   .articles-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }

   .article-header .article-title {
      font-size: 1.75rem;
   }

   .article-content {
      padding: 1.5rem;
      font-size: 1rem;
   }

   .related-articles-grid {
      grid-template-columns: 1fr;
   }
}