/* =========================================================================
   SECTION — Apostilas (prévia do catálogo)

   Contraponto visual da vitrine de cursos: onde cursos é banda cinza com card
   paisagem, apostilas é fundo claro com brilho da marca e card retrato em
   formato de livro. Mesmo sistema de tokens, "sala" diferente.

   Mobile-first: a grade nasce como carrossel com espia do próximo card e só
   vira grade de verdade a partir de 768px.
   ====================================================================== */

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

/* Brilho quente atrás da vitrine — a mesma luz difusa que o ecossistema Apple
   usa para destacar produto sobre fundo branco. Puramente decorativo: fica
   fora da árvore de acessibilidade e não intercepta ponteiro. */
.handbooks__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.handbooks__backdrop::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 50%;
    width: min(1100px, 130%);
    aspect-ratio: 2 / 1;
    translate: -50% 0;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(206, 21, 7, 0.09) 0%,
        rgba(206, 21, 7, 0.03) 42%,
        rgba(206, 21, 7, 0) 72%
    );
}

/* -------------------------------------------------------------------------
   Grade
   No celular é um carrossel. Os cards são mais estreitos que os de curso
   (68% contra 82%) porque a capa é retrato: a mesma largura deixaria o card
   mais alto que a tela.
   ---------------------------------------------------------------------- */
.handbooks__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    gap: var(--space-4);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    margin-inline: calc(var(--gutter) * -1);
    /* O respiro vertical reserva espaço para o "lift" do card no hover, que
       seria cortado pelo contexto de rolagem. */
    padding: var(--space-2) var(--gutter) var(--space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.handbooks__cell {
    display: flex;
    scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
   Card
   ---------------------------------------------------------------------- */
.handbook-card {
    /* Tom da capa e do acento, escolhido por item no config. */
    --tone-solid: var(--brand-500);
    --tone-deep:  var(--brand-700);
    --tone-wash:  var(--brand-50);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    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);
}

.handbook-card[data-tone="ink"] {
    --tone-solid: var(--ink-800);
    --tone-deep:  var(--ink-900);
    --tone-wash:  var(--ink-050);
}

.handbook-card[data-tone="bronze"] {
    --tone-solid: var(--bronze-500);
    --tone-deep:  var(--bronze-600);
    --tone-wash:  var(--bronze-050);
}

.handbook-card[data-tone="deep"] {
    --tone-solid: var(--brand-700);
    --tone-deep:  var(--brand-800);
    --tone-wash:  var(--brand-50);
}

.handbook-card:focus-visible {
    border-radius: var(--radius-xl);
}

.handbook-card:active {
    transform: scale(0.99);
}

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

/* -------------------------------------------------------------------------
   Palco da capa — o livro "flutua" sobre uma superfície lavada no tom do
   item, com sombra elíptica embaixo. É a linguagem de foto de produto da
   Apple traduzida para CSS, sem imagem de apoio nenhuma.
   ---------------------------------------------------------------------- */
.handbook-card__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    padding: var(--space-5);
    background-color: var(--tone-wash);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Reflexo de luz no topo do palco: dá volume à superfície lavada. */
.handbook-card__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0) 55%
    );
}

.handbook-card__book {
    position: relative;
    display: block;
    width: 72%;
    max-width: 190px;
    transition: transform var(--dur-slow) var(--ease-spring);
}

/* Sombra de contato: elipse desfocada sob o livro, que se espalha no hover
   como se o objeto subisse. Só `transform`/`opacity` — nada de reflow. */
.handbook-card__book::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7%;
    width: 88%;
    height: 8%;
    translate: -50% 0;
    background: radial-gradient(
        ellipse at center,
        rgba(20, 16, 15, 0.32) 0%,
        rgba(20, 16, 15, 0) 70%
    );
    filter: blur(4px);
    transition:
        transform var(--dur-slow) var(--ease-spring),
        opacity var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
    .handbook-card:hover .handbook-card__book {
        transform: translateY(-8px) rotate(-1.5deg);
    }

    .handbook-card:hover .handbook-card__book::after {
        transform: translateY(6px) scale(1.08);
        opacity: 0.7;
    }
}

/* A capa em si. O canto vivo à esquerda e arredondado à direita é o que faz
   o retângulo ser lido como livro, sem recorrer a 3D (que renderiza
   diferente entre Safari, Firefox e Chrome). */
.handbook-card__cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background-color: var(--tone-solid);
    border-radius: 3px var(--radius-sm) var(--radius-sm) 3px;
    box-shadow:
        0 2px 6px rgba(20, 16, 15, 0.14),
        0 14px 30px rgba(20, 16, 15, 0.18);
}

.handbook-card__cover img {
    border-radius: inherit;
    object-fit: cover;
}

/* Lombada: sequência de faixas claras e escuras na borda esquerda, o mesmo
   truque das capas de livro do Apple Books. Fica por cima da imagem, então
   vale tanto para a capa definitiva quanto para a tipográfica. */
.handbook-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(20, 16, 15, 0.34) 0,
        rgba(20, 16, 15, 0.12) 3px,
        rgba(255, 255, 255, 0.26) 5px,
        rgba(255, 255, 255, 0.08) 9px,
        rgba(255, 255, 255, 0) 16px
    );
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Capa tipográfica — substitui o marcador tracejado padrão do `media-slot`
   enquanto a arte definitiva não é enviada pela cliente. A seção nunca
   aparece "quebrada" nem em produção nem na apresentação do site.
   ---------------------------------------------------------------------- */
.handbook-card__cover.is-empty .media-slot__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Anula o `place-items: center` herdado do marcador padrão do `media-slot`:
       numa capa de livro o texto é alinhado à esquerda, como na lombada. */
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
    text-align: left;
    color: #fff;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 48%),
        var(--tone-deep);
    border: 0;
    border-radius: inherit;
}

.handbook-card__cover-kicker {
    font-size: 0.625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    opacity: 0.72;
}

.handbook-card__cover-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

.handbook-card__cover-author {
    padding-top: var(--space-2);
    font-size: 0.625rem;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    opacity: 0.85;
}

/* -------------------------------------------------------------------------
   Selo de edição
   ---------------------------------------------------------------------- */
.handbook-card__edition {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: 0.3125rem 0.625rem;
    font-size: 0.625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    white-space: nowrap;
    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
   ---------------------------------------------------------------------- */
.handbook-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline: var(--space-1);
}

.handbook-card__target {
    display: flex;
    /* No celular a linha do público-alvo quebra em duas: alinhado ao topo, o
       ícone acompanha a primeira linha em vez de flutuar no meio do bloco. */
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--tone-solid);
}

/* No tom escuro o texto do público-alvo perderia o vínculo com a marca. */
.handbook-card[data-tone="ink"] .handbook-card__target {
    color: var(--color-text-soft);
}

.handbook-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    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);
}

@media (hover: hover) {
    .handbook-card:hover .handbook-card__title {
        color: var(--brand-600);
    }
}

.handbook-card__summary {
    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);
}

/* Disciplinas cobertas — a informação que decide a compra. */
.handbook-card__subjects {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) 0.375rem;
    margin-top: var(--space-1);
}

.handbook-card__subjects li {
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-text-soft);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.handbook-card__pages {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.handbook-card__pages .icon {
    color: var(--ink-400);
}

/* -------------------------------------------------------------------------
   Rodapé — formatos de entrega e investimento
   ---------------------------------------------------------------------- */
.handbook-card__footer {
    display: flex;
    /* No card estreito do carrossel os dois formatos mais o preço não cabem
       na mesma linha: o preço desce inteiro para a linha de baixo, encostado
       à direita, em vez de quebrar a lista de formatos ao meio. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-4);
    margin-inline: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.handbook-card__formats {
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.handbook-card__formats li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.handbook-card__formats .icon {
    color: var(--ink-400);
}

.handbook-card__price {
    flex: none;
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--brand-600);
}

/* -------------------------------------------------------------------------
   Faixa de garantias — responde formato, conteúdo, método e pagamento antes
   da pergunta chegar no WhatsApp.
   ---------------------------------------------------------------------- */
.handbooks__benefits {
    display: grid;
    gap: var(--space-3);
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.handbooks__benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.handbooks__benefit-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    color: var(--brand-600);
    background-color: var(--brand-50);
    border-radius: var(--radius-sm);
}

.handbooks__benefit-text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.handbooks__benefit-text strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.handbooks__benefit-text small {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

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

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

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

/* Telas estreitas mas não minúsculas: mais espia do próximo card. */
@media (min-width: 480px) {
    .handbooks__grid {
        grid-auto-columns: 54%;
    }
}

/* Tablet — o carrossel dá lugar a duas colunas fixas e as garantias pareiam. */
@media (min-width: 768px) {
    .handbooks__grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }

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

/* Desktop — as quatro capas lado a lado e a faixa de garantias em linha. */
@media (min-width: 1024px) {
    .handbooks__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .handbook-card {
        padding: var(--space-4);
    }

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

@media (min-width: 1280px) {
    .handbooks__grid {
        gap: var(--space-5);
    }

    .handbook-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))) {
    .handbook-card__edition {
        background-color: rgba(255, 255, 255, 0.96);
    }

    .handbooks__benefit {
        background-color: var(--color-surface);
    }
}

/* O "levitar" do livro é enfeite: some por completo quando o sistema pede
   menos movimento. O leve lift do card continua, porque ali o deslocamento é
   a resposta ao ponteiro — a mesma decisão já tomada no card de curso. */
@media (prefers-reduced-motion: reduce) {
    .handbook-card__book,
    .handbook-card__book::after {
        transition: none;
    }

    .handbook-card:hover .handbook-card__book,
    .handbook-card:hover .handbook-card__book::after {
        transform: none;
    }
}