/*
 * CSS ESPECÍFICO DA PÁGINA: Sumário (rota /article-list — View Fasciculo/Sumario.cshtml).
 * Contém SOMENTE ajustes para celular. O desktop permanece inalterado pois todas as
 * regras estão dentro de media queries (max-width: 768px e max-width: 480px).
 *
 * Princípios:
 *   - Layout alinhado à ESQUERDA, igual ao desktop (sem centralizar nada à força).
 *   - Cards de artigo IDÊNTICOS aos da home no mobile: thumb escondida, texto 100%,
 *     mesma fonte/tamanho do componente compartilhado (previous-numbers-article-list.css).
 *   - Header de seção (.previous-numbers-section-title + .previous-numbers-section-line)
 *     permanece em uma linha só (título + faixa laranja ao lado), sem margin-bottom extra.
 *
 * Tudo está escopado em .sumario-page para não vazar para outras views.
 */

@media (max-width: 768px) {

    /* ===== Container externo ===== */
    .sumario-page {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    .sumario-page .row.no-padding,
    .sumario-page .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* ===== Breadcrumb ===== */
    .sumario-page .k-breadcrumbs {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sumario-page .breadcrumb {
        padding: 8px 4px;
        font-size: 12px;
        line-height: 1.45;
        margin: 0 0 10px 0;
        word-break: break-word;
    }

    .sumario-page .breadcrumb > li {
        font-size: 12px;
    }

    /* ===== Cabeçalho (título da edição + capa + crédito) =====
       Alinhamento à esquerda, igual ao desktop. O Bootstrap 3 já empilha
       os .col-lg-*/.col-md-* abaixo de 992px — apenas damos respiro. */
    .sumario-page .news-title-meta {
        padding: 0;
        margin-bottom: 8px;
    }

    .sumario-page .page-title {
        font-size: 22px;
        line-height: 1.25;
        margin: 6px 0 4px 0;
        padding-bottom: 10px;
        word-break: break-word;
    }

    .sumario-page .col-lg-12.col-md-12 > .col-lg-3.col-md-3 {
        padding: 0;
        margin-bottom: 16px;
    }

    .sumario-page .col-lg-3.col-md-3 > .col-lg-6.col-md-6 {
        padding: 0 8px 0 0;
    }

    .sumario-page .col-lg-3.col-md-3 > .col-lg-6.col-md-6 img {
        height: 110px !important;
        width: auto;
        max-width: 100%;
    }

    .sumario-page .credito-capa {
        text-align: left;
        margin: 4px 0 0 0;
    }

    .sumario-page .credito-capa p {
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 4px 0;
    }

    /* ===== TOC (lista âncora de seções, quando volume >= 15) ===== */
    .sumario-page ul.no-padding {
        padding: 4px 0 10px 18px !important;
        font-size: 14px;
        line-height: 1.7;
    }

    .sumario-page ul.no-padding a {
        word-break: break-word;
    }

    /* ===== Header de cada seção (título preto + linha laranja) =====
       Mantém EXATAMENTE o layout do desktop: título e linha lado a lado,
       sem margin-bottom extra que separaria a faixa do título. */
    .sumario-page .previous-numbers-section-header {
        margin: 18px 0 12px 0;
    }

    .sumario-page .previous-numbers-section-header .previous-numbers-section-title {
        font-size: 14px;
        line-height: 1.3;
        padding: 6px 12px;
        margin: 0 !important;
    }

    /* ===== Cards de artigo: IGUAL à home no mobile =====
       Replica exatamente o tratamento mobile aplicado em
       pages/home.css → .home-tabs-articles (thumb oculta, texto 100%).
       Não altera fontes/margens: herda do componente compartilhado
       (previous-numbers-article-list.css), garantindo paridade visual
       com os cards da home. */
    .sumario-page .abo-article-list .home-tab-article-thumb-col,
    .sumario-page .abo-article-list .home-tab-article-thumb-link,
    .sumario-page .abo-article-list .home-tab-article-thumb-img {
        display: none !important;
    }

    .sumario-page .abo-article-list .home-tab-article-row {
        flex-direction: row;
        gap: 0;
    }

    .sumario-page .abo-article-list .home-tab-article-text-col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* ===== Ações (ABSTRACT | PDF | FULL TEXT) =====
       Apenas garante quebra de linha confortável e alvo de toque ≥ ~32px,
       sem alterar a tipografia base do componente. */
    .sumario-page .previous-numbers-actions {
        flex-wrap: wrap;
        gap: 4px 0;
        margin-top: 6px !important;
    }

    .sumario-page .previous-numbers-actions .pn-action {
        padding: 8px 10px !important;
        line-height: 1.2;
    }

    .sumario-page .previous-numbers-actions .pn-action:first-child,
    .sumario-page .previous-numbers-actions .pn-action-abstract {
        padding-left: 0 !important;
    }

    /* ===== Painel ABSTRACT (abre via JS) =====
       Padding lateral + topo/base + leve realce à esquerda em laranja
       para separar visualmente do card do artigo. */
    .sumario-page .section-abstract {
        padding: 12px 14px;
        margin: 8px 0 4px 0;
        font-size: 13.5px;
        line-height: 1.6;
        background-color: #fafafa;
        border-left: 3px solid #eb8602;
    }

    .sumario-page .section-abstract p {
        margin: 0 0 8px 0;
    }
}

@media (max-width: 480px) {

    .sumario-page {
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        max-width: 395px;
    }

    .sumario-page .page-title {
        font-size: 19px;
        padding-bottom: 8px;
    }

    .sumario-page .breadcrumb,
    .sumario-page .breadcrumb > li {
        font-size: 11.5px;
        padding: 6px 2px;
    }

    .sumario-page .previous-numbers-section-header .previous-numbers-section-title {
        font-size: 13px;
        padding: 5px 10px;
    }

    .sumario-page .col-lg-3.col-md-3 > .col-lg-6.col-md-6 img {
        height: 92px !important;
    }

    .sumario-page .credito-capa p {
        font-size: 12.5px;
    }

    .sumario-page .previous-numbers-actions .pn-action {
        padding: 8px 8px !important;
    }

    .sumario-page .section-abstract {
        padding: 10px 12px;
        font-size: 13px;
    }
}