/* =============================================================
 * Paginas internas — Fase 06E
 *
 * O problema medido antes desta fase: a Home usava 182 elementos do
 * sistema visual; as internas usavam 16 — o rodape e o pular-para-o-
 * conteudo. Largura de leitura variava de 44ch (busca) a 105ch
 * (convenios) sem intencao. Havia 101 alvos abaixo de 24px em
 * Convenios, 21 na busca, 20 em Convencoes.
 *
 * Esta folha nao inventa componente: usa os de `sistema.css` e resolve
 * o que e proprio de cada pagina — cabecalho, listagens em linha,
 * resultados de busca e a leitura do texto corrido.
 * ============================================================= */

/* ---------- O container, restaurado para as listas ----------
 * `.secm-pagina > *` da largura, centralizacao e respiro lateral a todo
 * filho direto. Mas lista quer `margin: 0; padding: 0` para perder o
 * marcador, e essas duas declaracoes apagam justamente o
 * `margin-inline: auto` e o `padding-inline` do container. Empate de
 * especificidade, e `interno.css` carrega depois: a lista vencia, e as
 * 115 convencoes sangravam de borda a borda enquanto o titulo acima
 * ficava recuado.
 *
 * Dois nomes de classe no seletor resolvem sem truque: 0-2-0 ganha de
 * 0-1-0, e continua legivel para quem vier depois.
 */
.secm-pagina > .secm-documentos,
.secm-pagina > .secm-resultados,
.secm-pagina > .secm-beneficios,
.secm-pagina > .secm-lista {
    max-width: var(--secm-larg-total);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---------- Page hero interno — 06G ----------
 * Nao e o Hero da Home. Aquele e uma faixa de identidade; este e uma
 * abertura de pagina: superficie clara, trilha discreta, titulo, uma
 * linha de apoio e, quando faz sentido, uma acao.
 *
 * O Blocksy imprimia "Arquivos Convencoes Coletivas" — construcao de
 * maquina. As internas declaram o proprio titulo desde a 06E; a 06G lhes
 * da composicao.
 */
.secm-hero-pagina {
    position: relative;
    overflow: hidden;
    background: var(--secm-marca-clara);
    border-bottom: 1px solid var(--secm-borda);
    margin-block: 0 clamp(2rem, 4vw, 3rem);
    padding-block: clamp(1.75rem, 3.6vw, 3rem);
    /* Sangra de ponta a ponta como o hero da Home; o texto nao. */
    max-width: none;
    padding-inline: 0;
}

/*
 * O mesmo arco do Hero da Home, em escala menor e mais discreto: liga as
 * duas pontas do site sem repetir o peso da capa. Nao e imagem, nao e
 * marca, e textura.
 */
.secm-hero-pagina::after {
    content: "";
    position: absolute;
    right: -6%;
    top: -120%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: clamp(1.5rem, 3vw, 2.75rem) solid rgb(11 79 138 / 6%);
    pointer-events: none;
}

.secm-hero-pagina__interno {
    position: relative;
    z-index: 1;
    max-width: var(--secm-larg-total);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.secm-trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    color: var(--secm-texto-suave);
    margin-bottom: .9rem;
}
.secm-trilha a {
    display: inline-block;
    min-height: 24px;
    color: var(--secm-marca);
    text-decoration: none;
}
.secm-trilha a:hover { text-decoration: underline; }
.secm-trilha [aria-current="page"] { color: var(--secm-texto-suave); }

.secm-hero-pagina__olho {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--secm-marca);
    margin: 0 0 .5rem;
}

.secm-hero-pagina__titulo {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.1;
    color: var(--secm-marca-escura);
    margin: 0;
    overflow-wrap: anywhere;
}

.secm-hero-pagina__apoio {
    margin: .75rem 0 0;
    color: var(--secm-texto-suave);
    line-height: 1.6;
    max-width: 62ch;
    font-size: 1.0625rem;
}

.secm-hero-pagina__contagem {
    margin: .6rem 0 0;
    color: var(--secm-marca);
    font-weight: 600;
    font-size: .9375rem;
}

.secm-hero-pagina__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

@media (max-width: 480px) {
    .secm-hero-pagina__acoes .secm-botao { flex: 1 1 100%; }
}

/*
 * O page hero sangra, entao ele NAO recebe o container que
 * `.secm-pagina > *` aplica aos demais filhos diretos.
 */
.secm-pagina > .secm-hero-pagina {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* ---------- Filtro ---------- */
.secm-filtro { margin-block: 0 clamp(1.75rem, 4vw, 2.5rem); }
.secm-filtro__titulo {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--secm-texto-suave);
    margin: 0 0 .75rem;
}
.secm-filtro__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Listagem em grade (noticias) ---------- */
.secm-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--secm-gap);
    align-items: stretch;
}

/*
 * Cartao de listagem: altura uniforme mesmo com imagens de proporcoes
 * diferentes. Antes da 06E os cartoes de Documentos iam de 126px a
 * 618px na mesma grade — o recorte fixo e o `flex: 1` no texto sao o
 * que alinha a base de todos.
 */
.secm-cartao--lista .secm-cartao__resumo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Listagem em linha (Convencoes e Documentos) ----------
 * Documento nao e cartao com foto: e uma linha com titulo, estado e
 * acao. Em grade de cartoes, 115 convencoes viram 12 paginas de caixas
 * quase vazias.
 */
.secm-documentos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

/*
 * `minmax(0, 1fr)` e o `min-width: 0` nos filhos existem porque item de
 * grade tem largura minima automatica igual ao conteudo: em 320px, o
 * selo com `white-space: nowrap` empurrava a linha para 351px e 45
 * elementos estouravam a viewport.
 */
.secm-documento {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--secm-gap);
    padding: 1.1rem 1.25rem;
    background: var(--secm-fundo);
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.secm-documento:hover { border-color: var(--secm-marca); box-shadow: 0 3px 14px rgb(11 79 138 / 10%); }

.secm-documento__categoria {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--secm-marca);
    margin-bottom: .3rem;
}

/*
 * `overflow-wrap: anywhere` porque o acervo tem titulo que e uma unica
 * palavra sem espaco: "LIMINAR_ACIM_SABADO_17_HORAS" media 293px e
 * estourava a viewport de 320px. O sublinhado nao e ponto de quebra
 * confiavel, e o titulo e do Sindicato — quem se adapta e o desenho.
 */
.secm-documento__titulo,
.secm-cartao__titulo,
.secm-resultado__titulo,
.secm-beneficio__titulo,
.secm-pagina__titulo { overflow-wrap: anywhere; }

.secm-documento__titulo { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.secm-documento__titulo a {
    display: inline-block;
    min-height: 24px;
    color: var(--secm-texto);
    text-decoration: none;
}
.secm-documento__titulo a:hover { color: var(--secm-marca); text-decoration: underline; }

.secm-documento__resumo {
    margin: .4rem 0 0;
    color: var(--secm-texto-suave);
    font-size: .9375rem;
    line-height: 1.5;
    max-width: 68ch;
}

.secm-documento__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: .55rem 0 0;
    color: var(--secm-texto-suave);
    font-size: .875rem;
}
.secm-documento__periodo { font-weight: 600; color: var(--secm-marca-escura); }
.secm-documento__acao { justify-self: end; }

.secm-documento > * { min-width: 0; }

@media (max-width: 599px) {
    .secm-documento { grid-template-columns: 1fr; }
    .secm-documento__acao { justify-self: stretch; }
    .secm-documento__acao .secm-botao { width: 100%; }
    /* Em tela estreita o selo quebra em vez de esticar a linha. */
    .secm-selo { white-space: normal; }
}

/* ---------- Resultados da busca ---------- */
.secm-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.secm-resultado {
    padding: 1.1rem 1.25rem;
    background: var(--secm-fundo);
    border: 1px solid var(--secm-borda);
    border-left: 3px solid var(--secm-marca-clara);
    border-radius: var(--secm-raio);
}
.secm-resultado:hover { border-color: var(--secm-marca); }

.secm-resultado__tipo {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 4px;
    background: var(--secm-marca-clara);
    color: var(--secm-marca-escura);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .45rem;
}
.secm-resultado__titulo { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.secm-resultado__titulo a {
    display: inline-block;
    min-height: 24px;
    color: var(--secm-texto);
    text-decoration: none;
}
.secm-resultado__titulo a:hover { color: var(--secm-marca); text-decoration: underline; }
.secm-resultado__resumo { margin: .4rem 0 0; color: var(--secm-texto-suave); font-size: .9375rem; line-height: 1.55; max-width: 72ch; }
.secm-resultado__data { display: block; margin-top: .45rem; color: var(--secm-texto-suave); font-size: .8125rem; }

/* ---------- Leitura: texto corrido ----------
 * Medido antes da 06E: a noticia individual dava 94 caracteres por
 * linha em 1440px. Acima de ~75ch o olho perde a linha seguinte. O
 * limite e `ch`, e nao pixel: acompanha a fonte se ela mudar.
 */
/*
 * A medida vale para o TEXTO, e nao para o container.
 *
 * A primeira tentativa pos `max-width: 72ch` no proprio
 * `.entry-content` — e espremeu o catalogo de Convenios, que e um
 * bloco largo com grade, em meia tela. Limitar os filhos de prosa da
 * a mesma leitura confortavel e deixa bloco largo respirar.
 */
.single .entry-content,
.page .entry-content { padding-inline: clamp(1rem, 4vw, 2rem); }

/*
 * `margin-inline: auto` nao e enfeite. Sem ele, em 1920px o titulo
 * ficava centralizado (e do Blocksy) e o corpo comecava colado na
 * borda esquerda, com meia tela vazia a direita. Medido: container de
 * 1920px, paragrafo de 648px, encostado no zero.
 */
/*
 * UMA coluna, e nao cada bloco centralizado por conta propria.
 *
 * Centralizar cada filho individualmente dava recuos diferentes: o
 * `h2` com 40ch e o `p` com 72ch caiam em bordas esquerdas distintas, e
 * a pagina parecia desalinhada. A coluna e uma so; dentro dela o texto
 * alinha a esquerda.
 */
.single .entry-content,
.page .entry-content,
.secm-pagina--institucional .secm-corpo {
    max-width: calc(var(--secm-larg-texto) + 2 * clamp(1rem, 4vw, 2rem));
    margin-inline: auto;
}

/*
 * 06I — a composicao passa a ser mais larga que a leitura.
 *
 * A regra acima resolvia o desalinhamento da 06G limitando o CORPO
 * INTEIRO a medida de leitura. Funcionava para texto corrido e so para
 * ele: em 1920px sobrava meia tela de branco em torno de uma coluna de
 * 650px, e nenhuma grade de cartoes cabia. Foi exatamente o que a
 * avaliacao humana chamou de "conteudo concentrado numa coluna
 * estreita".
 *
 * A partir daqui sao DUAS medidas. O corpo ocupa a composicao; dentro
 * dele, o texto corrido continua na coluna de leitura, e as pecas do
 * sistema ocupam a largura toda.
 *
 * O seletor e mais especifico que o de cima de proposito: a regra
 * anterior fica no arquivo como historico do que a 06G corrigiu, e nao
 * e apagada para nao perder o registro do porque.
 */
.page .secm-pagina--institucional .entry-content,
.single .secm-pagina--single .entry-content,
.secm-pagina--institucional .secm-corpo,
.secm-pagina--single .secm-corpo {
    max-width: var(--secm-composicao, 1280px);
}

/*
 * Dentro do corpo, so a PROSA fica na medida de leitura. Tudo que e
 * componente do sistema — grade, servicos, CTA, faixa, painel — sai
 * dela e ocupa a composicao.
 */
.secm-corpo > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, dl, pre, figure) {
    max-width: var(--secm-larg-texto);
}

.secm-corpo > :where(h2, h3) {
    max-width: 42ch;
}

.single .entry-content > :where(figure, .wp-block-image, .wp-block-embed, .wp-block-buttons),
.page .entry-content > :where(figure, .wp-block-image, .wp-block-embed, .wp-block-buttons) {
    max-width: var(--secm-largura-larga);
    margin-inline: auto;
}

/*
 * Imagem destacada com limite. Em 1920px ela saia com a largura da
 * tela e mais de mil pixels de altura: engolia a noticia inteira antes
 * da primeira linha de texto. `max-height` em `vh` a mantem dentro de
 * uma tela sem cortar o essencial, e `object-fit` evita distorcao.
 *
 * A MEDIDA E A MESMA DO CORPO, E NAO OUTRA.
 *
 * Ate aqui a figura usava `--secm-largura-larga` (1160px) enquanto o
 * corpo da materia usa `--secm-composicao` (1280px). Duas caixas
 * centradas com larguras diferentes NUNCA compartilham a borda
 * esquerda: medido em 1440px, a foto comecava em 172px e o primeiro
 * paragrafo em 112px — 60px de desencontro, constante acima de 1280px
 * porque (1280 - 1160) / 2 = 60. Abaixo de 1160px as duas caixas
 * batem no viewport e o defeito desaparece, o que explica por que so
 * aparece no desktop.
 *
 * Nao se corrige isso com `margin-left`: corrige-se dando a foto o
 * mesmo container do texto. O `padding-inline` ja era igual; agora a
 * largura tambem e. A prosa dentro do corpo continua limitada a
 * `--secm-larg-texto` e alinhada a esquerda, entao ela nasce no mesmo
 * eixo sem precisar ocupar a largura inteira da foto.
 */
.secm-destaque-single {
    max-width: var(--secm-composicao, 1280px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.secm-destaque-single img {
    max-height: 62vh;
    object-fit: cover;
    object-position: center;
}

.single .entry-content > *,
.page .entry-content > * {
    margin-block: 0 1.15em;
}

/* Bloco largo do plugin: ocupa o container inteiro, nao a medida. */
.entry-content .secm-convenios { max-width: none; width: 100%; }

/*
 * O autor sai; a data e a categoria ficam.
 *
 * Todo conteudo do site foi migrado sob a conta `sindicato`, entao
 * "SINDICATO" aparece como autor em cada noticia, convencao, documento
 * e beneficio. Nao e informacao: e o nome do importador. A politica
 * editorial nao publica autoria individual, e um autor unico repetido
 * em 952 itens so ocupa espaco e rouba um alvo de toque.
 *
 * A data e a categoria continuam, porque essas informam.
 *
 * O seletor nao usa `.page`: `/beneficios/convenios/` e um `beneficio`,
 * nao uma pagina — foi assim que a primeira tentativa errou o alvo.
 */
.entry-header .entry-meta .meta-author,
.entry-meta > .meta-author { display: none; }

/* Data e categoria continuam clicaveis, e agora com alvo de 24px. */
.entry-meta a {
    display: inline-block;
    min-height: 24px;
}

/* Catalogo e listagem nao tem data de publicacao que interesse. */
.secm-pagina .entry-header .entry-meta,
.single-beneficio .entry-header .entry-meta { display: none; }

.single .entry-content h2,
.page .entry-content h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    line-height: 1.25;
    color: var(--secm-marca-escura);
    margin-block: 2em .6em;
}
.single .entry-content h3,
.page .entry-content h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.3;
    color: var(--secm-marca-escura);
    margin-block: 1.75em .5em;
}

.single .entry-content ul,
.single .entry-content ol,
.page .entry-content ul,
.page .entry-content ol { padding-left: 1.35em; }
.single .entry-content li,
.page .entry-content li { margin-bottom: .4em; }

/*
 * O `:not(.wp-block-button__link):not(.secm-botao)` nao e detalhe.
 *
 * Sem ele, esta regra (0-2-1) vencia a do botao de bloco (0-1-0) e
 * pintava o texto do botao com a MESMA cor do fundo dele: medido,
 * `rgb(11,79,138)` sobre `rgb(11,79,138)`. O botao "Falar com o
 * Sindicato" existia, tinha 186x46, e era invisivel.
 *
 * 06I — `.secm-botao` entrou na exclusao pelo MESMO motivo, e o defeito
 * voltou identico de roupa nova. O CTA das internas colocou um botao
 * dourado dentro do `.entry-content`; esta regra venceu
 * `.secm-botao--primario` e trocou o texto de #241a00 para o azul da
 * marca. Medido: 2.58:1 — reprovacao real de AA num botao de acao.
 *
 * Duas fases, dois botoes, a mesma causa: regra de link de prosa nao
 * pode alcancar botao.
 */
.single .entry-content a:not(.wp-block-button__link):not(.secm-botao),
.page .entry-content a:not(.wp-block-button__link):not(.secm-botao) { color: var(--secm-marca); text-underline-offset: .18em; }
.single .entry-content a:not(.wp-block-button__link):not(.secm-botao):hover,
.page .entry-content a:not(.wp-block-button__link):not(.secm-botao):hover { color: var(--secm-marca-escura); }

.single .entry-content img,
.page .entry-content img { height: auto; border-radius: var(--secm-raio); }

.single .entry-content blockquote,
.page .entry-content blockquote {
    border-left: 3px solid var(--secm-marca-clara);
    padding-left: 1.1rem;
    margin-inline: 0;
    color: var(--secm-texto-suave);
    font-style: normal;
}

/* Video e embed sem estourar a coluna nem provocar salto de layout. */
.single .entry-content .wp-block-embed__wrapper iframe,
.page .entry-content .wp-block-embed__wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Botao de bloco do Gutenberg dentro do sistema: media 4.31:1 no azul
 * padrao do Blocksy, abaixo dos 4.5:1 do AA. */
.wp-block-button__link {
    background-color: var(--secm-marca);
    color: #ffffff;
    border-radius: var(--secm-raio);
    min-height: 46px;
    display: inline-flex;
    align-items: center;
}
.wp-block-button__link:hover { background-color: var(--secm-marca-escura); color: #ffffff; }

/* ---------- Volta ---------- */
.secm-voltar {
    display: inline-block;
    min-height: 24px;
    margin-block: 1.5rem;
    color: var(--secm-marca);
    font-weight: 600;
    text-decoration: none;
}
.secm-voltar:hover { text-decoration: underline; }

/* ---------- Convenios: o bloco vem do plugin, o desenho vem daqui ----
 * A marcacao `.secm-convenios__*` e do `secm-institucional` e nao pode
 * mudar nesta fase — design mora no tema. Aqui a lista com marcadores
 * vira catalogo consultavel.
 */
.secm-convenios__intro { font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; color: var(--secm-texto-suave); }

.secm-convenios__aviso {
    border-left: 3px solid var(--secm-acento);
    background: #fdf6e3;
    border-radius: 0 var(--secm-raio) var(--secm-raio) 0;
    padding: 1rem 1.15rem;
    margin-block: 1.5rem;
    max-width: 72ch;
}
.secm-convenios__aviso p { margin: 0; line-height: 1.6; color: #4a3c12; }

.secm-convenios__busca { margin-block: 1.75rem; }
.secm-convenios__busca label { display: block; font-weight: 600; margin-bottom: .4rem; color: var(--secm-marca-escura); }
.secm-convenios__busca-linha { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 44rem; }
.secm-convenios__campo {
    flex: 1 1 14rem;
    min-height: 46px;
    padding: .6rem .9rem;
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    font-size: 1rem;
}
.secm-convenios__campo:focus { border-color: var(--secm-marca); }

/* Media 4.31:1 no azul padrao do Blocksy — abaixo do AA. */
.secm-convenios__botao {
    min-height: 46px;
    padding: .7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--secm-raio);
    background: var(--secm-marca);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}
.secm-convenios__botao:hover { background: var(--secm-marca-escura); }

.secm-convenios__nav ul,
.secm-convenios__grupo > ul,
.secm-convenios ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.secm-convenios__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-block: 1rem 2rem;
}
.secm-convenios__nav a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .45rem .9rem;
    border: 1px solid var(--secm-borda);
    border-radius: 999px;
    background: var(--secm-fundo);
    color: var(--secm-marca-escura);
    text-decoration: none;
    font-size: .9375rem;
}
.secm-convenios__nav a:hover { border-color: var(--secm-marca); background: var(--secm-marca-clara); }

.secm-convenios__grupo { margin-block: clamp(2rem, 4vw, 3rem); }
.secm-convenios__grupo > h2,
.secm-convenios h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    color: var(--secm-marca-escura);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--secm-marca-clara);
    margin-block: 0 1.25rem;
}

/* Especialidade: cada uma vira um cartao dobravel, nao um marcador. */
.secm-convenios details,
.secm-convenios__especialidade {
    background: var(--secm-fundo);
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    padding: 0;
    margin-bottom: .6rem;
    overflow: hidden;
}
.secm-convenios summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    padding: .7rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--secm-marca-escura);
    list-style: none;
}
.secm-convenios summary::-webkit-details-marker { display: none; }
.secm-convenios summary::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--secm-marca);
    border-bottom: 2px solid var(--secm-marca);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    flex: none;
}
.secm-convenios details[open] > summary::before { transform: rotate(45deg); }
.secm-convenios summary:hover { background: var(--secm-marca-clara); }

/*
 * O resumo da especialidade e nome + contagem na mesma linha. Em 320px
 * a contagem ("2 conveniados") era empurrada para fora da viewport.
 * Deixar a linha quebrar resolve sem esconder o numero.
 */
.secm-convenio__resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    min-width: 0;
}
.secm-convenio__total { flex: 0 0 auto; color: var(--secm-texto-suave); font-weight: 400; font-size: .875rem; }
.secm-convenios summary > * { min-width: 0; }
.secm-convenios details > *:not(summary) { padding: 0 1.1rem 1rem; }

.secm-convenios__lista-especialidades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: .6rem;
}

/* Conveniado: bloco de dados, nao anuncio. */
/*
 * Telefone e link de conveniado sao os alvos mais tentados com o
 * polegar, e eram os menores da pagina: medidos em 96 elementos abaixo
 * de 24px de altura. `inline-block` com altura minima resolve sem
 * mudar o texto nem a marcacao, que e do plugin.
 */
.secm-convenios a {
    display: inline-block;
    min-height: 24px;
}

.secm-convenios__conveniado {
    border-top: 1px solid var(--secm-borda);
    padding-top: .75rem;
    margin-top: .75rem;
}
.secm-convenios__conveniado:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.secm-convenios__conveniado strong { color: var(--secm-marca-escura); }

.secm-convenios__vazio {
    border: 1px dashed var(--secm-borda);
    border-radius: var(--secm-raio);
    background: var(--secm-fundo-suave);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
}

.secm-convenios__resultado,
.secm-convenios__voltar-grupos { font-size: .9375rem; }
.secm-convenios__resultado a,
.secm-convenios__voltar-grupos a {
    display: inline-block;
    min-height: 24px;
    color: var(--secm-marca);
    font-weight: 600;
}

/* ---------- Secao ativa no menu ----------
 * Nao depender so de cor: o Blocksy ja aplica a cor de destaque, e ela
 * sozinha nao serve para quem nao a distingue. A barra embaixo diz a
 * mesma coisa por forma.
 */
.ct-header [data-id="menu"] .current-menu-item > a,
.ct-header [data-id="menu"] .current-menu-ancestor > a,
.ct-header [data-id="menu"] .current_page_parent > a {
    position: relative;
    font-weight: 700;
}
.ct-header [data-id="menu"] .current-menu-item > a::after,
.ct-header [data-id="menu"] .current-menu-ancestor > a::after,
.ct-header [data-id="menu"] .current_page_parent > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35rem;
    height: 3px;
    border-radius: 2px;
    background: var(--secm-marca);
}

/* No painel lateral do celular a barra embaixo nao cabe; a marca vai
 * na lateral, que e onde o olho corre a lista. */
@media (max-width: 999px) {
    #offcanvas .current-menu-item > a,
    #offcanvas .current-menu-ancestor > a {
        border-left: 3px solid var(--secm-acento);
        padding-left: .75rem;
    }
    .ct-header [data-id="menu"] .current-menu-item > a::after { display: none; }
}

/* ---------- Corpo das paginas institucionais ---------- */
.secm-pagina--institucional .secm-corpo {
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/*
 * A classe que a revisao editorial da 06G aplica ao primeiro paragrafo.
 * Maior que o corpo, menor que o titulo — e o que faz a pagina comecar
 * dizendo alguma coisa em vez de despejar texto.
 */
.secm-lead {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--secm-texto);
}

/* ---------- Cartao de contato ao pe da pagina ---------- */
.secm-contato-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--secm-gap);
    align-items: center;
    background: var(--secm-marca-clara);
    border-radius: var(--secm-raio);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-block: clamp(2.5rem, 5vw, 4rem);
}

.secm-contato-card__titulo {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.2;
    color: var(--secm-marca-escura);
    margin: 0;
}

.secm-contato-card__apoio {
    margin: .6rem 0 0;
    color: var(--secm-texto-suave);
    line-height: 1.6;
    max-width: 46ch;
}

.secm-contato-card__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .8rem;
}

.secm-contato-card__lista li {
    display: grid;
    gap: .15rem;
    color: var(--secm-texto);
    line-height: 1.5;
}

.secm-contato-card__rotulo {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--secm-marca);
}

.secm-contato-card__lista a {
    display: inline-block;
    min-height: 24px;
    font-weight: 600;
    color: var(--secm-marca-escura);
    text-decoration: none;
    border-bottom: 1px solid var(--secm-borda);
}
.secm-contato-card__lista a:hover { border-bottom-color: var(--secm-marca); }

/*
 * Alvo de toque dos links que ficam sozinhos.
 *
 * A auditoria da 06G achou 51 alvos abaixo de 24px. A maioria e link
 * dentro de frase — "Telefone: (14) 3413-1059" —, e para esses a
 * WCAG 2.5.8 tem excecao explicita: link em linha de texto corrido nao
 * precisa de area minima, porque aumenta-la quebraria o paragrafo.
 *
 * O que NAO tem excecao e o link que ocupa o paragrafo inteiro, como
 * "Consultar as Convencoes Coletivas": ali ele funciona como botao e
 * precisa de area de toque. Estes ganham altura.
 */
.secm-corpo p > a:only-child,
.secm-corpo li > a:only-child {
    display: inline-block;
    min-height: 24px;
    padding-block: 0.15rem;
}

/*
 * Para os que continuam em linha, padding vertical.
 *
 * `:only-child` nao pegava o paragrafo com dois links lado a lado
 * ("Conhecer os beneficios · Ver os convenios"), nem o telefone dentro
 * da frase. Em elemento inline o padding vertical NAO muda a altura da
 * linha — o paragrafo nao reflui —, mas entra na caixa do link e na
 * area que o dedo acerta. E o unico jeito de dar alvo a um link no meio
 * de um texto sem quebrar o texto.
 */
.secm-corpo a,
.secm-contato-card a,
.secm-rodape a {
    padding-block: 0.34em;
}

/*
 * A capa do Jornal e um link que so contem a imagem. Como `a` e inline,
 * a caixa dele nascia com a altura da linha e nao da figura: 258x300 de
 * imagem dentro de um alvo de 19px. `display: block` faz o link ocupar
 * a propria capa, que e o que o visitante ve e clica.
 */
.secm-jornal__capa-link {
    display: block;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
}

/*
 * Respiro antes do rodape.
 *
 * A captura de /beneficios/ em 390px mostrou o ultimo cartao encostado
 * na faixa azul-escura do rodape, sem um pixel entre os dois. Acontecia
 * em todas as internas: a pagina terminava exatamente onde o rodape
 * comecava. O ultimo elemento nao carrega margem inferior por conta
 * propria, entao o respiro e da pagina.
 */
.secm-pagina {
    padding-bottom: var(--secm-secao-gap);
}

/*
 * Dentro de caixa, o primeiro filho nao empurra.
 *
 * A regra de ritmo zera a margem superior dos filhos DIRETOS de
 * `.entry-content`. Um `h2` dentro de um grupo nao e filho direto, e
 * ficava com a margem padrao do tema: nos dois cartoes de
 * /contribuicoes/ isso abria noventa pixels de nada entre a borda da
 * caixa e o titulo. A caixa ja tem padding; a margem do filho e
 * duplicacao.
 */
.secm-corpo :where(.wp-block-group, .secm-cartao, .wp-block-column) > :first-child {
    margin-block-start: 0;
}

.secm-corpo :where(.wp-block-group, .secm-cartao, .wp-block-column) > :last-child {
    margin-block-end: 0;
}