/*
 * CSS do pattern `tmc-eleicoes/pagina-agregador`.
 *
 * AUTOSSUFICIÊNCIA (fatia 8b): funciona no template PADRÃO de qualquer
 * tema clássico WordPress (tmc-theme incluído). NÃO depende de:
 *   - theme.json / align-wide / align-full (tmc-theme não tem theme.json)
 *   - core CSS variables (--wp--preset--* etc)
 *   - container próprio com max-width fixo (tema é dono do container)
 *
 * O pattern usa `.wp-block-group` do core que renderiza como `<section>`.
 * Sem CSS externo, o group vira um div sem largura própria — herda 100%
 * do container do tema. Se o tema não tiver container (raro), fica full
 * width. Aceitável.
 *
 * NÃO setamos max-width no `.tmc-el-pagina-agregador` — o tema já
 * constrange dentro do `.container` do page.php (tmc-theme). Ao aplicar
 * no theme default do Playground (twentytwentyfive block theme), o
 * layout constrained do tema faz o mesmo.
 */

.tmc-el-pagina-agregador {
    /* Sem max-width — deixa o tema decidir. */
    /* Sem font-family — herda body do tema (pode usar Figtree ou o que for). */
    display: flex;
    flex-direction: column;
    gap: 32px; /* ref recon §3.8: .page-wrapper gap 32px */
    color: inherit;
}

/*
 * B3.1 — `.page-wrapper` envolvendo header + fonte-bar + layout main/aside
 * (publis BBR ficam FORA — full-bleed acima e abaixo).
 *
 * Padrão dual da A3.2:
 *  - Front tema clássico: WP core envolve os children do wp:group em
 *    `.wp-block-group__inner-container` → grid tem que ir no inner.
 *  - Editor iframado (WP 6.3+): não injeta inner-container → grid vai
 *    direto no wrapper via `.editor-styles-wrapper`.
 *
 * NÃO duplicamos padding/max-width do `.tmc-el-pagina-agregador` pai:
 * pai não tem max-width nem padding próprios (deixa o tema constrained
 * decidir). Aqui `max-width:1280px` + `padding:16px` são explícitos do
 * page-wrapper, sem herança conflitante.
 */
.page-wrapper > .wp-block-group__inner-container,
.editor-styles-wrapper .page-wrapper {
    max-width: 1280px;
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fafafa;
    padding: 16px;
}

/*
 * B3.5 — Share do tema: `.share-title` (o "Compartilhe" antes dos ícones)
 * é o único token do widget que NÃO vem do tema — o resto (share__box,
 * icon-*, etc.) é herdado do CSS do tmc-theme.
 */
.share-title {
    font-size: 12px;
    text-transform: uppercase;
}


@media (max-width: 900px) {
    .share-title  {
        display: none;
    }

    .page-wrapper > .wp-block-group__inner-container,
    .editor-styles-wrapper .page-wrapper {
        margin-top: 0 !important;
    }
}

.tmc-el-header {
    display: flex;
    flex-direction: column;
    gap: 6px; /* ref recon §2:47: .page-header-text gap 6px */
    /* Sem padding próprio — bordas do container do tema já dão respiro. */
    margin: 0;
}

/*
 * B3.1.1 (re-aplicado após edição concorrente ter removido o bloco)
 * — Título (h1) + widget de share na MESMA linha, ambos filhos diretos
 * do `.tmc-el-header` (que é flex-column). Padrão dual A3.2:
 *  - Front tema clássico: WP core envolve os children do wp:group em
 *    `.wp-block-group__inner-container` → flex vai no inner.
 *  - Editor iframado: sem inner-container → flex direto no wrapper via
 *    `.editor-styles-wrapper`.
 * `justify-content: space-between` alinha título à esquerda e widget
 * de share à direita (decisão Filipe — não usar gap).
 *
 * OUTER width fix: o pai `.tmc-el-header` tem `layout:flex vertical`,
 * e WP core aplica `align-items: flex-start` no flex-vertical — os
 * filhos ficam com width=conteúdo (não stretched). Sem `width:100%`
 * no wrapper OUTER, a row shrinka pro tamanho do h1+share; o
 * `space-between` acaba não separando nada porque o container tem
 * width mínima. Forçar 100% aqui garante que ocupe a largura total
 * do header em ambos os contextos.
 */

body.page-template-tmc-eleicoes-page {
    background: #fafafa;
}
 
.tmc-el-title-row {
    width: 100%;
}

.tmc-el-title-row > .wp-block-group__inner-container,
.editor-styles-wrapper .tmc-el-title-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.turno-label {
    font-size: 20px;
    font-weight: 600;
    color: #050505;
}

@media (max-width: 900px) {
    .turno-label {
        font-size: 18px;
    }   
}

.tmc-el-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    background: #dcfce7;
    border-radius: 100px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #008732;
    white-space: nowrap;
    text-transform: uppercase;
    margin: 0;
}

.tmc-el-title {
    /* ref recon §3.1: 40px + @900px 36px, color #050505 */
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: #050505;
    margin: 0;
}

.tmc-el-cargo {
    /* ref recon §3.1: 30px + @900px 22px, color #484a48 (h2 do cargo) */
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #484a48;
    margin: 0;
}

.tmc-el-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #484a48;
    line-height: 1.4;
    width: 100%;
    margin: 0;
}

@media (max-width: 900px) {
    .tmc-el-title { font-size: 28px; }
    .tmc-el-cargo { font-size: 16px; }
    .tmc-el-subtitle { font-size: 14px; }
}

/* ── Navegação do agregador (PAR-4 dropdown estados) ─────────────
 * Injetada em runtime via includes/navegacao-agregador.php antes do
 * primeiro bloco listagem/fonte-bar (patterns.php:89). Paridade visual
 * do legado eleicoes-plugin/assets/front/agregador.css:469-618 —
 * classes prefixadas `tmc-el-` para isolar do CSS antigo.
 */
.tmc-el-navegacao-agregador {
    display: none;
    flex-direction: column;
    gap: 12px;
}

/* ── PAR-5 pills de cargo ────────────────────────────────────────
 * Paridade visual do legado eleicoes-plugin/assets/front/agregador.css:636-661
 * (.navegacao-btn). Fica entre o header e o accordion de estados.
 */
.tmc-el-cargo-pills {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.tmc-el-cargo-pill {
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid #050505;
    background: #fff;
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}

.tmc-el-cargo-pill.is-active,
.tmc-el-cargo-pill:hover,
.tmc-el-cargo-pill:focus {
    background: #050505;
    color: #fff;
    border-color: #050505;
    outline: none;
}

@media (max-width: 768px) {
    .tmc-el-cargo-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tmc-el-cargo-pills::-webkit-scrollbar {
        display: none;
    }
    .tmc-el-cargo-pill {
        flex-shrink: 0;
    }
}

.tmc-el-estados-accordion {
    position: relative;
}

.tmc-el-estados-accordion__content {
    border-radius: 100px;
    border: 1px solid #d8dbd8;
    background: #fff;
    padding: 12px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    height: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.tmc-el-estados-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #050505;
    border: none;
    cursor: pointer;
    gap: 12px;
    text-align: left;
    border-radius: 100px;
    height: 100%;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit;
}

.tmc-el-estados-accordion__trigger-text {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tmc-el-estados-accordion__selected {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.tmc-el-estados-accordion__trigger-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tmc-el-estados-accordion__chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tmc-el-estados-accordion.is-open .tmc-el-estados-accordion__chevron {
    transform: rotate(180deg);
}

.tmc-el-estados-accordion__panel {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.28s ease,
        padding-bottom 0.28s ease;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
    /* Sem top/margin-bottom negativos aqui: eles empurravam o próximo
     * elemento 50px pra cima, causando clip do chip do card e do link
     * "Pesquisa completa" (fatia PAR-3c). Panel fechado tem max-height:0
     * + overflow:hidden — colapsa sozinho sem precisar de offsets. */
}

.tmc-el-estados-accordion.is-open .tmc-el-estados-accordion__panel {
    padding-top: 16px;
    padding-bottom: 16px;
    border-color: #d8dbd8;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    margin-top: 12px;
    max-height: none;
}

.tmc-el-estados-accordion__label {
    font-size: 11px;
    font-weight: 600;
    color: #484a48;
    letter-spacing: 0.08em;
}

.tmc-el-estados-accordion__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tmc-el-estado-pill {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(216, 216, 216, 0.4);
    background: rgba(216, 216, 216, 0.4);
    font-size: 16px;
    font-weight: 400;
    color: #050505;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.tmc-el-estado-pill.is-active,
.tmc-el-estado-pill:hover,
.tmc-el-estado-pill:focus {
    background: #050505;
    color: #fff;
    font-weight: 600;
    outline: none;
}

.tmc-el-estados-accordion__recolher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #050505;
    align-self: center;
    padding: 4px 8px;
}

/* Mobile: pills roláveis lateralmente, sem quebra */
@media (max-width: 768px) {
    .tmc-el-estados-accordion__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tmc-el-estados-accordion__pills::-webkit-scrollbar {
        display: none;
    }
    .tmc-el-estado-pill {
        flex-shrink: 0;
    }
}

.tmc-el-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
    margin: 0;
}

.tmc-el-share__label {
    font-size: 12px;
    font-weight: 600;
    color: #484a48;
    letter-spacing: 0.04em;
}

/*
 * Overrides !important necessários — o pattern renderiza dentro de
 * `.post__content` do tmc-theme (page.php:10, single.php etc), que
 * tem cascade agressivo sobre <ul>/<li>:
 *
 *   main-bundle.css:2485-2493 — body:is(single-post,page-template-default,…)
 *     main article .post__content ul:not(.splide__list) {
 *       padding-left: var(--gap-default); margin-bottom: 1.5rem; display: grid;
 *     }
 *   main-bundle.css:2495-2505 — mesma cadeia + `li` — margin-bottom:20px,
 *     font-size:1.25rem, line-height:2.12rem.
 *   main-bundle.css:2506-2520 — mesma cadeia + `li::before` — position:absolute,
 *     8×8 dot com background-color:var(--main-text). É o "bullet" real do
 *     tema (não é list-style:disc — é pseudo-elemento).
 *   main-bundle.css:3684-3688 — `.post__content ul:not(.splide__list)` —
 *     list-style:disc + margin/padding-left:1.5rem.
 *
 * Specificity das regras do tema: (0,3,5) na variante body:is. Nossas
 * classes standalone `.tmc-el-share__list` são (0,1,0) — perdem sempre.
 * Não dá pra ganhar por chain-de-classes sem :is(:root)-hacks feios.
 * Autossuficiência aqui exige !important nos properties que o tema
 * pisa (list-style, margin, padding, display) + neutralização do
 * pseudo-elemento ::before.
 */
.tmc-el-share__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.tmc-el-share__list li {
    margin: 0 !important;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

/* Neutraliza o dot::before do tema (main-bundle.css:2506-2520). */
.tmc-el-share__list li::before {
    content: none !important;
    display: none !important;
}

.tmc-el-share__list a,
.tmc-el-share__list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #d8dbd8;
    color: #050505;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    line-height: 1;
    padding: 0;
}

.tmc-el-share__list a:hover,
.tmc-el-share__list a:focus,
.tmc-el-share__list button:hover,
.tmc-el-share__list button:focus {
    background: #050505;
    color: #fff;
    outline: none;
}

/* ── Layout grid (main + sidebar) — recon §3.8 + A3.2 ─────────────
 * Canonical owner: pattern-agregador.css. Enqueue único via
 * enqueue_block_assets em tmc-eleicoes.php (dispara front + editor).
 *
 * Por que dois seletores em vez de `.tmc-el-page-layout` seco:
 *  - Front (tema clássico tmc-theme): o core envolve os children do
 *    wp:group em `.wp-block-group__inner-container`. Ou seja, main
 *    e aside NÃO são filhos diretos do `.tmc-el-page-layout` — são
 *    netos, com o inner-container no meio. Grid no wrapper externo
 *    não pega os netos → sidebar empilha. Grid tem que morar no
 *    inner-container.
 *  - Editor (WP 6.3+ iframe canvas): não injeta inner-container. O
 *    wp:group renderiza com main/aside como filhos diretos do
 *    `.tmc-el-page-layout`. Fallback via `.editor-styles-wrapper`
 *    aplica o grid direto no wrapper.
 */

/* Front — tema clássico injeta inner-container */
.tmc-el-page-layout > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

/* Editor — canvas iframado, sem inner-container */
.editor-styles-wrapper .tmc-el-page-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

.tmc-el-page-layout-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.tmc-el-sidebar {
    /* B2.10: SEM position:sticky. Decisão do Filipe — publi não sticka
     * (evita interferência com fixed do LMR e com a auto-refresh do slot).
     * A3.1 reintroduziu por engano; removida aqui. */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0; /* impede que o iframe do LMR estoure a coluna */
    position: sticky;
    top: 75px;
}

/*
 * B2.11 — Contenção da publicidade LMR dentro da sidebar (BAND-AID).
 *
 * FATO: O partial `themes/tmc-theme/template-parts/home-modules/
 * group_publicidade.php` emite `<div class="pubad lmr patrocinado"
 * data-pos="LMR" data-device="desktop">` (via tmc_get_publicidade em
 * `themes/tmc-theme/core/front/home-subhomes.php:266-275`). Ele NÃO
 * controla o iframe interno que o adserver injeta — se o criativo LMR
 * for maior que a coluna da sidebar (400px por default), o iframe
 * transborda para a main.
 *
 * BAND-AID (escopado APENAS a `.tmc-el-sidebar`, não vaza globalmente):
 * força max-width:100% no wrapper `.pubad` e no iframe filho. Sem isso
 * o iframe expande até o próprio width intrínseco do criativo.
 * `overflow-x: hidden` só na `.pubad` DENTRO da sidebar — não no wrap
 * da main, que pode ter conteúdo que precisa vazar (tooltip do
 * gráfico p.ex.).
 *
 * PENDÊNCIA EXTERNA (não é fix desta fatia): a causa raiz é o size
 * mapping do slot LMR aceitando criativo mais largo que 400px. Ad-ops
 * precisa restringir tamanhos aceitos no slot LMR-sidebar. Registrado
 * no TASK_LOG desta fatia.
 */
.tmc-el-sidebar .pubad {
    max-width: 100%;
    overflow-x: hidden;
}
.tmc-el-sidebar .pubad iframe {
    max-width: 100%;
}

@media (max-width: 900px) {
    .tmc-el-page-layout > .wp-block-group__inner-container,
    .editor-styles-wrapper .tmc-el-page-layout {
        grid-template-columns: 1fr;
    }
    .tmc-el-sidebar {
        max-width: 100%;
    }
}

/* ── PAR-3 Hub de cargo ──────────────────────────────────────────
 * Grid de minis (um por UF) injetado via the_content nas pages de cargo
 * (governador, senador). Referência visual: `.estados-home-grid` do
 * legado (recon-fidelidade-visual-agregador). Layout bruto — fino de
 * spacing/tipografia fica pro fechamento do bloco PAR.
 */
.tmc-el-hub-cargo {
    margin: 24px 0;
}

.tmc-el-hub-cargo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

@media (max-width: 640px) {
    .tmc-el-hub-cargo__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Tabs de turno DENTRO do hub-cargo — estilo discreto (texto pequeno
 * com underline no ativo), paridade com o estado-card do legado
 * eleicoes-plugin. Escopado por cascade em `.tmc-el-hub-cargo__grid`,
 * o que MANTÉM o estilo default do bloco mini (pill preto grande)
 * pra trio-home, sidebar-pesquisas e demais patterns — sem tocar em
 * src/blocks/mini/style.scss.
 */
.tmc-el-hub-cargo__grid .tmc-eleicoes-mini__tabs {
    gap: 16px;
    border-bottom: 1px solid #ececec;
    padding-bottom: 0;
}

.tmc-el-hub-cargo__grid .tmc-eleicoes-mini__tab {
    flex: 0 0 auto;
    padding: 6px 0;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #484a48;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.tmc-el-hub-cargo__grid .tmc-eleicoes-mini__tab:hover,
.tmc-el-hub-cargo__grid .tmc-eleicoes-mini__tab:focus {
    background: transparent;
    color: #050505;
    outline: none;
}

.tmc-el-hub-cargo__grid .tmc-eleicoes-mini__tab.is-active {
    background: transparent;
    color: #050505;
    border-bottom-color: #050505;
    font-weight: 600;
}