/*
 * cursos.css — ESTILO ÚNICO dos cursos e capacitações (#152), Padrão Priscila.
 * Usado pelo layout único (_cursoLayout.php) e pela página /Cursos.
 * Mudou aqui, mudou em todos os cursos. Mobile first: a base é o celular,
 * os @media só acrescentam para telas maiores.
 *
 * Cores CBSA: azul #002776 · verde #009c3b · ouro #ffdf00 · vermelho #DB2E20
 * Texto branco sobre verde usa o verde escuro #007a2e (contraste 5,5:1; o
 * #009c3b dá só 3,6:1, abaixo do mínimo WCAG AA para texto pequeno).
 */

/* ---------- Cabeçalho e corpo (mesmo visual das matérias) ---------- */
.curso-pagina { background-color: #ffffff; }
.curso-trilha { background: transparent; padding-left: 0; margin-bottom: 0; align-items: center; }
/* Área de toque ≥ 24 px (WCAG 2.5.8) nos links da trilha */
.curso-trilha .breadcrumb-item { display: flex; align-items: center; }
.curso-trilha .breadcrumb-item a { display: inline-block; padding: 6px 0; }

.curso-pagina .page-header { margin-bottom: 24px; border-bottom: 2px solid #e9ecef; padding-bottom: 15px; background-color: transparent; }
.curso-pagina .page-header h1 { overflow-wrap: break-word; hyphens: auto; font-family: 'Montserrat', sans-serif; color: #002776; font-weight: 800; font-size: clamp(22px, 4vw, 32px); text-transform: uppercase; line-height: 1.25; margin: 0 0 10px; }
.curso-pagina .page-subtitulo { font-family: 'Open Sans', sans-serif; font-size: clamp(16px, 2.4vw, 18px); color: #555; line-height: 1.6; margin: 0; }

.curso-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.curso-selo { display: inline-block; padding: 5px 12px; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; background: #002776; color: #fff; }
.curso-selo--tipo { background: #007a2e; }
.curso-selo--inscricoes_abertas { background: #ffdf00; color: #002776; }
.curso-selo--inscricoes_encerradas { background: #DB2E20; }
.curso-selo--concluido { background: #e9ecef; color: #444; }

.curso-pagina .page-corpo p,
.curso-pagina .page-corpo li { font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.8; color: #444; margin-bottom: 16px; }
/* Justificado só em tela larga: no celular abre buracos entre as palavras (WCAG 1.4.8) */
.curso-pagina .page-corpo > p { text-align: left; hyphens: auto; overflow-wrap: break-word; }
.curso-pagina .page-corpo h2 { font-family: 'Montserrat', sans-serif; color: #002776; font-weight: 700; font-size: clamp(19px, 3vw, 22px); margin: 32px 0 15px; text-transform: uppercase; border-left: 5px solid #009c3b; padding-left: 12px; }
.curso-pagina .page-corpo a { color: #002776; text-decoration: underline; }
.curso-pagina .page-destaque { background-color: #f0f4ff; border-left: 5px solid #ffdf00; padding: 20px; margin: 24px 0; font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 600; color: #002776; border-radius: 0 8px 8px 0; }
/* O style.css legado zera as listas do site inteiro (ul { display: contents } / li sem marcador) */
.curso-pagina .materia-lista { display: block; padding-left: 22px; margin: 0 0 20px; list-style: disc outside; }
.curso-pagina .materia-lista li { display: list-item; list-style-type: disc; margin-bottom: 6px; }

/* ---------- Topo: cartaz + ficha (1 coluna no celular, 2 no desktop) ---------- */
.curso-topo { display: grid; gap: 24px; margin-bottom: 32px; }
.curso-cartaz { margin: 0; }
.curso-cartaz img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: 8px; background: #f8f9fa; box-shadow: 0 4px 15px rgba(0, 0, 0, .15); }
/* Cartaz ampliável (#156): o link envolve a imagem; a etiqueta mostra que dá para ampliar */
.curso-cartaz-link { position: relative; display: block; border-radius: 8px; cursor: zoom-in; }
.curso-cartaz-link:focus-visible { outline: 3px solid #ffdf00; outline-offset: 3px; }
.curso-cartaz-ampliar { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
    border-radius: 18px; background: rgba(0, 39, 118, .92); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; }
.curso-cartaz-link:hover .curso-cartaz-ampliar { background: #007a2e; }

.curso-zoom { width: fit-content; height: fit-content; margin: auto; inset: 0; max-width: 96vw; max-height: 96vh; padding: 0; border: 0; border-radius: 8px; background: transparent; overflow: visible; }
.curso-zoom::backdrop { background: rgba(0, 0, 0, .85); }
.curso-zoom img { display: block; max-width: 96vw; max-height: calc(96vh - 60px); width: auto; height: auto; border-radius: 8px; }
.curso-zoom-fechar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 8px auto; padding: 8px 16px; border: 2px solid #fff; border-radius: 22px;
    background: #002776; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; }
.curso-zoom-fechar:hover { background: #007a2e; }
.curso-zoom-fechar:focus-visible { outline: 3px solid #ffdf00; outline-offset: 2px; }

.curso-ficha { background: #f0f4ff; border-radius: 8px; padding: 20px; font-family: 'Open Sans', sans-serif; }
.curso-ficha dl { margin: 0; display: grid; gap: 14px; }
.curso-ficha dt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #002776; margin: 0; }
.curso-ficha dt i { color: #009c3b; width: 20px; }
.curso-ficha dd { margin: 2px 0 0 26px; font-size: 16px; line-height: 1.5; color: #333; }
.curso-ficha dd small { display: block; color: #555; font-size: 14px; }

/* ---------- Ações (inscrição, pagamento, regulamento, agenda) ---------- */
.curso-acoes { display: grid; gap: 10px; margin-top: 20px; }
.btn-curso { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 6px; border: 2px solid #007a2e;
    background: #007a2e; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; text-align: center; text-decoration: none; }
.btn-curso i { color: inherit; }
.btn-curso:hover { background: #002776; border-color: #002776; color: #fff; text-decoration: none; }
.btn-curso--secundario { background: #fff; color: #002776; border-color: #002776; }
.btn-curso--secundario:hover { background: #002776; color: #fff; }
.btn-curso:focus-visible,
.curso-pagina .page-corpo a:focus-visible { outline: 3px solid #ffdf00; outline-offset: 2px; }

.curso-aviso { margin: 20px 0 0; padding: 14px 16px; border-left: 5px solid #002776; background: #fff; border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.5; color: #333; }
.curso-aviso a { color: #002776; font-weight: 700; }

/* ---------- Filtro da página /Cursos (#153) ---------- */
.cursos-filtro { display: grid; gap: 16px; margin: 0 0 32px; padding: 16px; background: #f0f4ff; border-radius: 8px; }
.cursos-filtro fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cursos-filtro legend { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #002776; margin-bottom: 8px; float: none; width: auto; padding: 0; }
.cursos-filtro-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* O botão de opção fica invisível mas continua no teclado e no leitor de tela; o "chip" é o <span> */
.cursos-filtro label { position: relative; margin: 0; cursor: pointer; }
.cursos-filtro input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cursos-filtro label span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid #002776; border-radius: 22px; background: #fff;
    color: #002776; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 15px; }
.cursos-filtro label:hover span { background: #e3eaff; }
.cursos-filtro input:checked + span { background: #002776; color: #fff; }
.cursos-filtro input:checked + span::before { content: "\2713"; content: "\2713" / ""; margin-right: 6px; }
.cursos-filtro input:focus-visible + span { outline: 3px solid #ffdf00; outline-offset: 2px; }
.cursos-filtro-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cursos-filtro-resultado { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 600; color: #333; }
.cursos-filtro-limpar { display: inline-flex; align-items: center; min-height: 44px; color: #002776; font-weight: 700; text-decoration: underline; }
.cursos-filtro-limpar:focus-visible { outline: 3px solid #ffdf00; outline-offset: 2px; }
.cursos-filtro-enviar { min-height: 44px; }
/* [hidden] vence qualquer display definido acima (cartões, grupos e avisos filtrados) */
.cursos-filtro [hidden], .curso-pagina [hidden] { display: none !important; }

/* ---------- Página /Cursos: seções e cartões ---------- */
.cursos-secao { margin-bottom: 40px; }
.cursos-secao-titulo { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #002776; font-size: clamp(19px, 3vw, 24px); text-transform: uppercase; border-left: 5px solid #009c3b; padding-left: 12px; margin: 0 0 20px; }
.cursos-vazio { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #555; background: #f8f9fa; border-radius: 8px; padding: 16px; }
.cursos-ano { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #555; font-size: 18px; margin: 28px 0 14px; }

.cursos-grade { display: grid; grid-template-columns: 1fr; gap: 20px; list-style: none; padding: 0; margin: 0; }
.cursos-grade > li { display: block; margin: 0; }
.curso-cartao { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); transition: box-shadow .2s; }
.curso-cartao:hover { box-shadow: 0 6px 18px rgba(0, 39, 118, .18); }
/* Foco pelo teclado: o contorno fica no cartão inteiro (o link cobre o cartão) */
.curso-cartao:focus-within { outline: 3px solid #ffdf00; outline-offset: 2px; }
.curso-cartao-titulo a:focus { outline: none; }
.curso-cartao-titulo a:focus-visible { text-decoration: underline; }
.curso-cartao img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #f0f4ff; }
.curso-cartao-corpo { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.curso-cartao .curso-cartao-titulo { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.35; color: #002776; margin: 4px 0; }
/* O link do título cobre o cartão inteiro (um só link por cartão, bom para leitor de tela) */
/* .curso-cartao na frente: vence o legado .main-news h3 { line-height: .75 } do style.css */
.curso-cartao .curso-cartao-titulo a { color: inherit; text-decoration: none; line-height: inherit; font-size: inherit; font-weight: inherit; }
.curso-cartao-titulo a::after { content: ""; position: absolute; inset: 0; }
.curso-cartao p { font-family: 'Open Sans', sans-serif; font-size: 15px; color: #555; margin: 0; line-height: 1.5; }
.curso-cartao .curso-selos { margin: 0; }

@media (min-width: 576px) {
    .cursos-grade { grid-template-columns: repeat(2, 1fr); }
    .curso-acoes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .cursos-filtro { grid-template-columns: auto 1fr; align-items: start; column-gap: 32px; }
    .cursos-filtro-rodape { grid-column: 1 / -1; }
    .curso-pagina .page-corpo > p { text-align: justify; }
    /* Cartaz e ficha do mesmo tamanho: o cartaz fica legível sem precisar ampliar */
    .curso-topo { grid-template-columns: 1fr 1fr; align-items: start; }
    .curso-topo--sem-cartaz { grid-template-columns: 1fr; }
    /* Ao lado do cartaz a ficha é estreita: um botão por linha */
    .curso-topo:not(.curso-topo--sem-cartaz) .curso-acoes { grid-template-columns: 1fr; }
}
@media (min-width: 992px) {
    .cursos-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .curso-cartao { transition: none; }
}