/* ============================================================================
   ATIVE-ARTIGOS.CSS
   Objetivo: layout final e estável para listagem e artigo individual.

   Contratos desta camada:
   - Não define SEO nem conteúdo; só estrutura/estilo.
   - Tudo é escopado por classe de página (evita vazar para a HOME).
   - Padding do topo (nav-h) é responsabilidade do body (ative-global-utilities.css).
   ============================================================================ */

.page-artigos-index .ative-artigos-header {
  padding: 2.5rem 0 1.25rem;
}

.page-artigos-index .ative-artigos-title {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.page-artigos-index .ative-artigos-lead {
  margin: 0.5rem 0 0;
  max-width: 70ch;
  color: var(--text-muted);
}

.page-artigos-index .ative-artigos-list {
  padding: 1.25rem 0 3rem;
}

.page-artigos-index .ative-artigos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .page-artigos-index .ative-artigos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Card */
.page-artigos-index .ative-artigos-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.page-artigos-index .ative-artigos-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.page-artigos-index .ative-artigos-card-media {
  display: block;
  background: var(--surface-2);
}

.page-artigos-index .ative-artigos-card-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-artigos-index .ative-artigos-card-body {
  padding: 1rem 1rem 1.1rem;
}

.page-artigos-index .ative-artigos-card-title {
  margin: 0 0 0.35rem;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

.page-artigos-index .ative-artigos-card-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.page-artigos-index .ative-artigos-card-title a:hover {
  text-decoration: underline;
}

.page-artigos-index .ative-artigos-card-excerpt {
  margin: 0;
  color: var(--text-muted);
}

.page-artigos-index .ative-artigos-card-meta {
  margin: 0.65rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ============================================================================
   Artigo individual
   ============================================================================ */

.page-artigo .ative-article-hero {
  padding: 2rem 0 1rem;
}

.page-artigo .ative-article-breadcrumb {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.page-artigo .ative-article-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.page-artigo .ative-article-breadcrumb a:hover {
  text-decoration: underline;
}

.page-artigo .ative-article-title {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.page-artigo .ative-article-meta {
  margin: 0.6rem 0 1.25rem;
  color: var(--text-muted);
}

.page-artigo .ative-article-figure {
  margin: 0 auto; /* centraliza */
  max-width: var(--article-hero-max-w); /* limita hero em desktop */
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sombra-media);
}

.page-artigo .ative-article-hero-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Corpo do artigo */
.page-artigo .ative-article-body {
  padding: 1.25rem 0 3.25rem;
}

.page-artigo .ative-article-content {
  max-width: var(--article-content-max);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* CTA pode ser um pouco mais largo que o texto para não ficar “amador” */
.page-artigo .ative-article-content .ative-cta {
  max-width: var(--article-hero-max-w);
  margin-left: auto;
  margin-right: auto;
}

/* Wrapper do CTA: permite largura maior que o texto */
.page-artigo .ative-article-cta-wrap {
  max-width: var(--article-hero-max-w);
  margin: 3rem auto;
  padding: 0 1rem; /* respiro lateral em telas menores */
}

/* CTA ocupa toda a largura do wrapper */
.page-artigo .ative-article-cta-wrap .ative-cta {
  width: 100%;
}

.page-artigo .ative-article-cta-wrap + * {
  margin-top: 4rem;
}

.page-artigo .ative-article-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: var(--fonte-display);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}

.page-artigo .ative-article-content p {
  margin: 0 0 1.1rem;
}

/* Links editoriais (não afeta botões) */
.page-artigo .ative-article-content a:not(.btn) {
  color: var(--text-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.page-artigo .ative-article-content ul,
.page-artigo .ative-article-content ol {
  padding-left: 1.25rem;
}

.page-artigo .ative-article-content li {
  margin: 0.35rem 0;
}

/* CTA do artigo: dar largura mínima ao botão principal para evitar 3 linhas */
.page-artigo .ative-article-cta-wrap .btn-primary {
  min-width: 190px; /* ajuste fino: 200–260px dependendo do seu grid */
}

/* =========================================================
   HOME — Artigos em destaque
   Objetivo: 3 cards por linha no desktop, cards baixos,
   sem sobreposição (tudo no fluxo) e crop controlável.
   ========================================================= */

/* Grid responsivo */
#artigos-home .ative-artigos-grid--home {
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  #artigos-home .ative-artigos-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablet */
  }
}

@media (min-width: 992px) {
  #artigos-home .ative-artigos-grid--home {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop */
  }
}

/* Card SEM absolute. Isso evita a seção seguinte invadir. */
#artigos-home .ative-artigos-card--home {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Se o CSS do módulo usa absolute no body, zera aqui */
#artigos-home .ative-artigos-card--home .ative-artigos-card-body {
  position: static;
}

/* Mídia baixa (crop controlado) */
#artigos-home .ative-artigos-card--home .ative-artigos-card-media {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem; /* ajuste se seu padrão for outro */
}

#artigos-home .ative-artigos-card--home .ative-artigos-card-media img {
  width: 100%;
  height: 180px; /* DESKTOP: baixo */
  object-fit: cover;
  object-position: center 45%; /* default razoável */
  display: block;
}

@media (max-width: 767.98px) {
  #artigos-home .ative-artigos-card--home .ative-artigos-card-media img {
    height: 165px; /* MOBILE: um pouco mais alto */
  }
}

/* Texto com altura previsível (não deixa um card “crescer” e bagunçar o botão) */
#artigos-home .ative-artigos-card--home .ative-artigos-card-title {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* limite do título */
  overflow: hidden;
}

#artigos-home .ative-artigos-card--home .ative-artigos-card-excerpt {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* -webkit-line-clamp: 3; limite da descrição */
  overflow: hidden;
}

/* Ajustes finos de enquadramento por artigo (crop) */
#artigos-home .ative-artigos-card--home[data-slug='fisioterapia-pelvica-em-brasilia'] img {
  object-position: center 19%;
}

#artigos-home .ative-artigos-card--home[data-slug='perda-de-urina-ao-esforco'] img {
  object-position: center 60%;
}

#artigos-home .ative-artigos-card--home[data-slug='bexiga-hiperativa-urgencia-urinaria'] img {
  object-position: center 37%;
}