/* =========================================================================
   SECTION — Blog

   A "sala" do blog dentro do sistema de design. Cursos é banda cinza com card
   paisagem; apostilas é fundo claro com brilho da marca e card retrato. Aqui a
   forma não é vitrine: é **capa de jornal**.

   Uma grade de cards iguais diria ao leitor que os cinco artigos valem o
   mesmo, e num blog isso é falso — o mais recente vale mais que os outros
   quatro somados. Então a composição tem dois pesos: o artigo de capa, grande,
   com imagem e resumo; e a coluna de chamadas, só título e data, separadas por
   linha hairline. É a mesma hierarquia da Apple Newsroom, e a mesma que
   qualquer jornal usa há um século, porque funciona.

   Esta folha é compartilhada pelas três superfícies (prévia da home, listagem
   e relacionados no fim do artigo): o card é o mesmo nas três.

   Mobile-first: a composição nasce empilhada, com a capa no topo. Nada de
   carrossel — texto não se lê de lado, e uma manchete cortada na borda da tela
   é uma manchete que ninguém termina de ler.
   ====================================================================== */

.blog {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-section);
    background-color: var(--color-bg);
}

/* Luz difusa vinda do canto superior direito — a mesma linguagem do brilho da
   seção de apostilas, espelhada, para as duas não parecerem a mesma tela. É
   também o que separa o blog da banda cinza da seção Sobre, logo acima, sem
   precisar de uma borda dura. */
.blog__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blog__backdrop::before {
    content: "";
    position: absolute;
    top: -18%;
    right: -10%;
    width: min(880px, 110%);
    aspect-ratio: 1;
    background: radial-gradient(
        circle at 70% 30%,
        rgba(206, 21, 7, 0.07) 0%,
        rgba(206, 21, 7, 0.025) 40%,
        rgba(206, 21, 7, 0) 70%
    );
}

/* -------------------------------------------------------------------------
   Cabeçalho com link ao lado
   Variante do `.section-head` de `components.css`: no desktop o título vai
   para a esquerda e o link para a lista completa ocupa a direita — o lugar
   onde o olho já está quando termina de ler a linha de apoio.
   ---------------------------------------------------------------------- */
.section-head--split {
    align-items: center;
}

.section-head--split .section-head__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

/* No celular o link do cabeçalho some: ele reaparece como botão no fim da
   seção, depois de o leitor ter visto os artigos. Um "ver todos" antes do
   primeiro título é um convite a pular o conteúdo. */
.blog__head-link {
    display: none;
}

/* -------------------------------------------------------------------------
   Composição
   ---------------------------------------------------------------------- */
.blog__board {
    display: grid;
    gap: var(--space-6);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.blog__lead,
.blog__stream {
    display: grid;
}

.blog__stream {
    gap: 0;
}

/* -------------------------------------------------------------------------
   Card de artigo — base comum às três variantes
   ---------------------------------------------------------------------- */
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    transition: transform var(--dur-base) var(--ease-spring);
}

/* O link cobre o card inteiro por `::after`, mas o texto acessível continua
   sendo só o título. É o padrão que dá alvo de toque generoso sem fazer o
   leitor de tela anunciar data, categoria e resumo como rótulo do link. */
.post-card__link {
    color: inherit;
}

.post-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

.post-card__link:focus-visible {
    outline: none;
}

.post-card__link:focus-visible::after {
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
}

/* -------------------------------------------------------------------------
   Mídia
   ---------------------------------------------------------------------- */
.post-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--ink-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.post-card__media img {
    object-fit: cover;
    transition: transform var(--dur-slower) var(--ease-out);
}

/* Véu que escurece a base da imagem: garante o contraste do selo de categoria
   sobre qualquer foto, inclusive as claras. */
.post-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 16, 15, 0.28) 0%, rgba(20, 16, 15, 0) 42%);
    pointer-events: none;
}

/* Sem imagem definitiva, o véu escureceria o marcador tracejado sem ter o que
   proteger — o selo já contrasta sobre o cinza claro do próprio marcador. */
.post-card__media.is-empty::after {
    display: none;
}

@media (hover: hover) {
    .post-card:hover .post-card__media img {
        transform: scale(1.04);
    }

    .post-card:hover .post-card__title {
        color: var(--brand-600);
    }
}

/* Selo de categoria — vidro sobre a imagem, a mesma peça do selo de
   modalidade do card de curso. */
.post-card__badge {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    z-index: 1;
    padding: 0.3125rem 0.6875rem;
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    color: var(--color-text);
    background-color: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
}

/* -------------------------------------------------------------------------
   Corpo
   ---------------------------------------------------------------------- */
.post-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
}

.post-card__kicker {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand-600);
}

.post-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
    transition: color var(--dur-base) var(--ease-out);
}

.post-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

/* A meta encosta no fim do card, para que cards de alturas diferentes na mesma
   linha terminem alinhados pela mesma base. */
.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.post-card__dot {
    color: var(--ink-300);
}

/* -------------------------------------------------------------------------
   Variante "capa" — o artigo de destaque
   ---------------------------------------------------------------------- */
.post-card--capa .post-card__media {
    border-radius: var(--radius-xl);
}

.post-card--capa .post-card__title {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tighter);
}

.post-card--capa .post-card__excerpt {
    font-size: var(--fs-base);
}

/* -------------------------------------------------------------------------
   Variante "compacto" — as chamadas da coluna lateral
   Sem imagem: a linha divisória é o que dá ritmo à lista, como no índice de um
   jornal. A primeira não tem borda, para não criar um traço solto sob a capa.
   ---------------------------------------------------------------------- */
.blog__cell--compacto {
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.blog__cell--compacto:first-child {
    padding-top: 0;
    border-top: 0;
}

.post-card--compacto {
    gap: var(--space-2);
}

.post-card--compacto .post-card__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--fs-base);
}

@media (hover: hover) {
    .post-card--compacto:hover {
        transform: translateX(4px);
    }
}

/* -------------------------------------------------------------------------
   Grade de cards

   Mora nesta folha, e não na da listagem, porque DUAS rotas a usam: `/blog` e
   os relacionados no fim de cada artigo — e o artigo não carrega o CSS da
   listagem. O que é exclusivo de `/blog` (busca, filtros, faixa cinza) fica lá.

   Uma coluna no celular: manchete e resumo precisam de largura para serem
   lidos, e dois cards lado a lado em 360px viram duas colunas de recortes.
   ---------------------------------------------------------------------- */
.blog__grid {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

/* Nas grades o card ganha superfície própria — é o que o separa do vizinho
   quando há três lado a lado. Na composição da home ele não tem: ali a
   hierarquia já vem do tamanho, e uma moldura em volta da capa transformaria
   a página de jornal em mais uma vitrine de cards. */
.blog--list .blog__cell,
.blog--related .blog__cell {
    display: flex;
}

.blog--list .post-card,
.blog--related .post-card {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--dur-base) var(--ease-spring),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.blog--list .post-card__link::after,
.blog--related .post-card__link::after {
    border-radius: var(--radius-xl);
}

@media (hover: hover) {
    .blog--list .post-card:hover,
    .blog--related .post-card:hover {
        transform: translateY(-4px);
        border-color: var(--brand-200);
        box-shadow: var(--shadow-md);
    }
}

.blog--list .post-card:active,
.blog--related .post-card:active {
    transform: scale(0.99);
}

/* Relacionados — a mesma grade, sem faixa de fundo: a seção fecha o artigo,
   que já mora sobre branco. */
.blog--related {
    padding-top: 0;
    padding-bottom: var(--space-section);
}

.blog--related .blog__backdrop {
    display: none;
}

.blog--related .blog__grid {
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   Rodapé da seção
   ---------------------------------------------------------------------- */
.blog__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.blog__note {
    max-width: 58ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    text-align: center;
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

/* Tablet — a capa ganha corpo e as chamadas continuam empilhadas embaixo. */
@media (min-width: 600px) {
    .post-card--capa .post-card__body {
        gap: var(--space-3);
    }

    .blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

/* Desktop — a composição de jornal assume: capa à esquerda, coluna de
   chamadas à direita, separadas por uma sarjeta e uma linha vertical. */
@media (min-width: 1024px) {
    .section-head--split {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-8);
        text-align: left;
    }

    .section-head--split .section-head__group {
        align-items: flex-start;
        text-align: left;
    }

    .section-head--split .section-head__title {
        max-width: 20ch;
    }

    .section-head--split .section-head__text {
        max-width: 52ch;
    }

    .blog__head-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        flex: none;
        padding-bottom: var(--space-1);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
        color: var(--brand-600);
        border-bottom: 1px solid transparent;
        transition:
            color var(--dur-fast) var(--ease-out),
            border-color var(--dur-fast) var(--ease-out);
    }

    .blog__head-link .icon {
        transition: transform var(--dur-base) var(--ease-spring);
    }

    .blog__head-link:hover {
        color: var(--brand-700);
        border-bottom-color: var(--brand-300);
    }

    .blog__head-link:hover .icon {
        transform: translate(2px, -2px);
    }

    .blog__board {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
        gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
        align-items: start;
    }

    /* A linha vertical separa as duas colunas como a coluna de um jornal
       separa a manchete das chamadas. Fica no `padding-left` da coluna da
       direita para acompanhar a altura real do conteúdo. */
    .blog__stream {
        padding-left: clamp(2rem, 1rem + 2.5vw, 3rem);
        border-left: 1px solid var(--color-border);
    }

    .blog__cell--compacto:first-child {
        padding-top: 0;
    }

    /* O botão do fim da seção some: no desktop o link já está no cabeçalho, e
       repeti-lo criaria dois destinos idênticos na mesma tela. */
    .blog__footer-cta {
        display: none;
    }

    .blog__footer {
        margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    }

    .blog__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog--list .post-card,
    .blog--related .post-card {
        padding: var(--space-5);
    }
}

/* Sem suporte a backdrop-filter: superfície sólida equivalente. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .post-card__badge {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-card,
    .post-card__media img {
        transition: none;
    }

    .post-card:hover,
    .post-card:hover .post-card__media img {
        transform: none;
    }
}

@media print {
    .blog__backdrop,
    .blog__head-link,
    .blog__footer-cta {
        display: none !important;
    }

    .blog__board {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog__stream {
        padding-left: 0;
        border-left: 0;
    }

    .blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}