/* =========================================================================
   PAGE — /apostilas
   Só o que é exclusivo desta rota: o catálogo filtrável e os passos da compra.
   O cabeçalho e a faixa de conversão vêm de `sections/pagina.css`; a vitrine e
   o card vêm de `sections/apostilas.css`, os mesmos da home.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Catálogo
   A prévia da home mora sobre branco com o brilho da marca. Aqui a seção vem
   logo abaixo do cabeçalho, que já é branco: a faixa suave é o que separa as
   duas sem precisar de uma borda dura.
   ---------------------------------------------------------------------- */
.handbooks--catalog {
    background-color: var(--color-bg-subtle);
    border-block: 1px solid var(--color-border);
}

/* A barra de filtros da vitrine de cursos vive dentro de um painel recolhível,
   porque lá são dois eixos mais busca. Aqui são cinco chips e nada mais: no
   celular eles rolam de borda a borda em vez de quebrar em cinco linhas — com
   a largura que cada rótulo tem, `wrap` empilharia um chip por linha e a barra
   ficaria mais alta que o primeiro card. */
.handbooks__filters {
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* O respiro vertical existe para a sombra do chip ativo não ser cortada
       pelo contexto de rolagem. */
    padding-block: var(--space-2);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.handbooks__filters::-webkit-scrollbar {
    display: none;
}

.handbooks__filters > * {
    flex: none;
    scroll-snap-align: start;
}

/* A grade já vem do CSS da vitrine; aqui só encosta na barra de filtros. */
.handbooks--catalog .handbooks__grid {
    margin-top: var(--space-6);
}

/* Reentrada escalonada dos cards a cada troca de filtro (classe aplicada pelo
   JS). O atraso vem do índice recalculado entre os cards visíveis. */
.handbooks__grid.is-filtering .handbooks__cell {
    animation: card-in var(--dur-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}

/* O card é alvo de `/apostilas#slug`: sem a margem, o header fixo cobriria a
   capa da apostila recém-navegada. */
.handbooks--catalog .handbooks__cell {
    scroll-margin-top: calc(var(--header-height) + var(--space-8));
}

.handbooks__empty {
    margin-top: var(--space-8);
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    text-align: center;
}

/* -------------------------------------------------------------------------
   Botão de pedido dentro do card
   Um `<span>` com cara de botão: o card inteiro já é o link para o WhatsApp,
   e aninhar âncoras seria markup inválido.
   ---------------------------------------------------------------------- */
.handbook-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-inline: var(--space-1);
    /* No card do carrossel a pílula tem pouco mais de 200px: sem `nowrap` o
       rótulo quebra em duas linhas e o botão perde a cara de botão. */
    white-space: nowrap;
    padding: 0.6875rem var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition:
        color var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

/* A seta é enfeite e só entra quando sobra largura para ela: no carrossel do
   celular, o rótulo tem prioridade. */
.handbook-card__action-arrow {
    display: none;
    margin-left: auto;
    color: var(--ink-400);
    transition:
        transform var(--dur-base) var(--ease-spring),
        color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
    .handbook-card:hover .handbook-card__action {
        color: #fff;
        background-color: var(--brand-500);
        border-color: var(--brand-500);
    }

    .handbook-card:hover .handbook-card__action-arrow {
        color: #fff;
        transform: translate(2px, -2px);
    }
}

/* O logotipo do WhatsApp é desenhado por preenchimento e mantém a cor da
   marca até o card inteiro virar vermelho — aí o branco garante o contraste. */
@media (hover: hover) {
    .handbook-card:hover .handbook-card__action .icon--brand {
        color: #fff;
    }
}

/* -------------------------------------------------------------------------
   Como comprar — os três passos que substituem o carrinho
   ---------------------------------------------------------------------- */
.buying {
    padding-block: var(--space-section);
    background-color: var(--color-bg);
}

.buying__steps {
    display: grid;
    gap: var(--space-4);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    counter-reset: buying;
}

.buying__step {
    position: relative;
    display: grid;
    /* O número ocupa a primeira coluna nas duas linhas de cabeçalho do card,
       para o texto alinhar sempre pela mesma sarjeta. */
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}

.buying__number {
    grid-row: 1 / 3;
    align-self: start;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-numeric);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: #fff;
    background-color: var(--brand-500);
    border-radius: 50%;
    box-shadow: var(--shadow-brand);
}

.buying__icon {
    display: none;
}

.buying__title {
    grid-column: 2;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.buying__text {
    grid-column: 2;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.buying__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.buying__note .icon {
    flex: none;
    color: var(--brand-500);
}

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

/* Do tablet para cima os passos viram colunas e ganham o ícone: com a largura
   disponível, a leitura passa a ser horizontal, da esquerda para a direita. */
@media (min-width: 768px) {
    /* Com a largura do tablet os chips já cabem em uma ou duas linhas: a barra
       volta a ser centralizada, alinhada ao cabeçalho da seção. */
    .handbooks__filters {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .handbook-card__action {
        justify-content: flex-start;
        padding-inline: var(--space-4);
    }

    .handbook-card__action-arrow {
        display: block;
    }

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

    .buying__step {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-5) var(--space-5);
    }

    .buying__number {
        position: absolute;
        top: calc(var(--space-5) * -1 + 4px);
        left: var(--space-5);
        grid-row: auto;
        width: 34px;
        height: 34px;
        font-size: var(--fs-sm);
    }

    .buying__icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        color: var(--brand-600);
        background-color: var(--brand-50);
        border-radius: var(--radius-md);
    }

    .buying__title,
    .buying__text {
        grid-column: auto;
    }

    /* O respiro no topo evita que o número flutuante encoste no card acima. */
    .buying__steps {
        margin-top: clamp(2.75rem, 2rem + 2vw, 3.75rem);
    }
}

@media print {
    .handbook-card__action {
        display: none !important;
    }
}