/* ==========================================================================
   Artigo Relacionados — Seção "Você Também Pode Gostar" com 3 cards.
   Reusa .blog-card e .blog-lista__grid que já estão em blog-lista.css.
   Este arquivo só adiciona o header centralizado específico da seção.
   ========================================================================== */

.artigo-relacionados {
    padding: 0 0 96px;
    background: var(--color-white);
}

.artigo-relacionados__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ===== Header ===== */

.artigo-relacionados__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    max-width: 978px;
    margin: 0 auto;
}

.artigo-relacionados__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: #252B37;
}

.artigo-relacionados__label-line {
    display: inline-block;
    width: 71px;
    height: 0;
    border-top: 1px solid var(--color-primary);
    flex-shrink: 0;
}

.artigo-relacionados__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2;
    color: #252B37;
}

.artigo-relacionados__description {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: #252B37;
}

/* Cards reusam as classes do blog-lista — precisamos importar o CSS deles.
   Como o $page_css em pages/artigo.php carrega só os artigo-*, dependemos
   das classes duplicadas aqui. Pra evitar duplicação, vamos redeclarar só
   o mínimo necessário. Alternativa mais limpa: incluir 'blog-lista' no
   $page_css da página. Fazemos isso em pages/artigo.php. */

/* ===== Responsivo ===== */

@media (max-width: 1024px) {
    .artigo-relacionados {
        padding: 0 0 72px;
    }

    .artigo-relacionados__inner {
        gap: 40px;
    }

    .artigo-relacionados__title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .artigo-relacionados {
        padding: 0 0 48px;
    }

    .artigo-relacionados__inner {
        gap: 32px;
    }

    .artigo-relacionados__title {
        font-size: 24px;
    }

    .artigo-relacionados__label {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .artigo-relacionados__title {
        font-size: 22px;
    }
}