/* =========================================================
   home.css — catálogo de cursos (home, /cursos, /busca)
   Carregado só nas páginas que mostram a grade.
   Tokens e componentes base vêm de base/components/layout.css.
   ========================================================= */

/* ---------------------------------------------------------
   Grade de cursos — no máximo 3 colunas (identidade)
   --------------------------------------------------------- */
.cursos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 560px) { .cursos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cursos-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------
   Card de curso
   --------------------------------------------------------- */
.curso-card { display: flex; }
.curso-card[hidden] { display: none; }

.curso-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.curso-card__link:hover {
    border-color: var(--c-secondary);
    box-shadow: var(--sh-md);
}
@media (prefers-reduced-motion: no-preference) {
    .curso-card__link:hover { transform: translateY(-2px); }
}

/* capa 16:9 com o mesmo enquadramento em todos os cards */
.curso-card__capa {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    background: var(--c-primary-soft);
    overflow: hidden;
}
.curso-card__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.curso-card__inicial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-head);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-secondary);
}

.curso-card__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    padding: var(--s-4);
}
.curso-card__tema {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-secondary-dark);
}
.curso-card__titulo {
    font-family: var(--ff-head);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-primary);
}
.curso-card__resumo {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.curso-card__rodape {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-border);
}
.curso-card__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.curso-card__preco { font-size: var(--fs-lg); }
/* a ÚNICA terracota do card */
.curso-card__cta {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-cta);
}
.curso-card__link:hover .curso-card__cta { color: var(--c-cta-hover); }

/* ---------------------------------------------------------
   Grupos por tema
   --------------------------------------------------------- */
.tema-bloco { margin-bottom: var(--s-7); scroll-margin-top: 96px; }
.tema-bloco[hidden] { display: none; }
.tema-bloco__head { margin-bottom: var(--s-5); }
.tema-bloco__titulo {
    font-size: var(--fs-xl);
    margin-bottom: var(--s-1);
}
.tema-bloco__desc { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }
.tema-bloco__contagem { color: var(--c-muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------
   Card do brinde (fora da grade, sempre)
   --------------------------------------------------------- */
.brinde-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
    background: var(--c-brinde-soft);
    border: 1px solid var(--c-brinde-border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}
@media (min-width: 880px) {
    .brinde-card { grid-template-columns: 320px 1fr; gap: var(--s-6); padding: var(--s-6); }
}
.brinde-card__capa {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
}
.brinde-card__capa img { width: 100%; height: 100%; object-fit: cover; }
.brinde-card__corpo { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.brinde-card__titulo { font-size: var(--fs-lg); margin: 0; color: var(--c-primary); }
.brinde-card__texto { margin: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.6; }
.brinde-card__nota { margin: 0; color: var(--c-brinde); font-size: var(--fs-xs); line-height: 1.6; }

/* ---------------------------------------------------------
   Catálogo (/cursos) — índice de temas no topo
   --------------------------------------------------------- */
.temas-indice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    padding: 0;
    list-style: none;
}