/* ==========================================================================
   Socequi blog — pagina de artigo
   --------------------------------------------------------------------------
   <- _design-reference/Lps/src/app/pages/ArticlePage.tsx

   Divide-se em duas partes:
     1. Layout da pagina  (hero, grelha, barra lateral, navegacao)
     2. Corpo do artigo   (.sqArtTexto) — estiliza o HTML guardado em
        noticias_noticia_pt.texto, incluindo as classes .sqArtLista,
        .sqArtDestaque e .sqArtTabela usadas pelo conteudo.
   ========================================================================== */


/* ==========================================================================
   1. LAYOUT
   ========================================================================== */

.sqArtigoPagina {
    background-color: #fff;
}

/* --- hero ---------------------------------------------------------------- */

.sqArtHero {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.sqArtHeroImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* degrade de baixo para cima: o titulo assenta na zona escura */
.sqArtHero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(0, 62, 126, .8) 0%,
                rgba(0, 62, 126, .3) 50%,
                rgba(0, 62, 126, 0) 100%);
}

.sqArtHeroInterior {
    max-width: 72rem;
    margin: 0 auto;
}

.sqArtBreadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 1.25rem 1rem 0;
}

.sqArtBreadcrumb .sqArtHeroInterior {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.sqArtBreadcrumb a {
    color: rgba(255, 255, 255, .8);
    font-size: .75rem;
    text-decoration: none;
    transition: color .2s ease;
}

.sqArtBreadcrumb a:hover { color: #fff; }

.sqArtBreadcrumb span {
    color: rgba(255, 255, 255, .6);
    font-size: .75rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sqArtBreadcrumb .sqIcone {
    width: .75rem;
    height: .75rem;
    color: rgba(255, 255, 255, .5);
    flex: 0 0 auto;
}

.sqArtHeroTitulo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0 1rem 2rem;
}

.sqArtMetaTopo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.sqArtMetaTopo span {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
}

.sqArtMetaTopo .sqIcone {
    width: .875rem;
    height: .875rem;
}

/* a etiqueta de categoria reutiliza o estilo dos cartoes da landing */
.sqArtMetaTopo .sqArtigoEtiqueta,
.sqArtOutroTexto .sqArtigoEtiqueta,
.sqArtOutroCartaoTexto .sqArtigoEtiqueta {
    position: static;
    font-size: .75rem;
    padding: .25rem .75rem;
}

.sqArtHeroTitulo h1 {
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    max-width: 48rem;
    font-size: clamp(1.3rem, 3vw, 2rem);
}

/* --- contentor e grelha -------------------------------------------------- */

.sqArtContentor {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.sqArtVoltar {
    padding: 1.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.sqArtVoltar a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--sq-azul);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.sqArtVoltar .sqIcone {
    width: 1rem;
    height: 1rem;
    color: var(--sq-lima);
    transition: transform .2s ease;
}

.sqArtVoltar a:hover .sqIcone { transform: translateX(-4px); }

.sqArtGrelha {
    display: grid;
    gap: 2.5rem;
    align-items: start;
    padding: 2.5rem 0;
}

.sqArtCorpo { min-width: 0; }

/* --- CTA dentro do artigo ------------------------------------------------ */

.sqArtCta {
    margin-top: 3rem;
    background-color: var(--sq-azul);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.sqArtCtaTitulo {
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    margin: 0 0 .25rem;
}

.sqArtCtaTexto {
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
    line-height: 1.65;
    margin: 0;
}

.sqArtCta .sqBtn { flex: 0 0 auto; white-space: nowrap; }

/* --- anterior / seguinte ------------------------------------------------- */

.sqArtNav {
    margin-top: 2.5rem;
    display: grid;
    gap: 1rem;
}

.sqArtNavItem {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.25rem 0;
    border-top: 1px solid #e5e7eb;
    text-decoration: none;
    transition: border-color .2s ease;
}

.sqArtNavItem:hover { border-color: rgba(0, 62, 126, .3); }

.sqArtNavItem .sqIcone {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--sq-lima);
    flex: 0 0 auto;
    margin-top: .125rem;
    transition: transform .2s ease;
}

.sqArtNavItem:hover .sqIcone { transform: translateX(-4px); }
.sqArtNavItemDir:hover .sqIcone { transform: translateX(4px); }

.sqArtNavLabel {
    color: #999;
    font-size: .75rem;
    margin: 0 0 .25rem;
}

.sqArtNavTitulo {
    color: var(--sq-azul);
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.4;
    margin: 0;
}

/* --- barra lateral ------------------------------------------------------- */

/* Escondida abaixo de 1024px: o conteudo dela aparece na versao movel
   (.sqArtOutrosMovel) no fim da pagina, como no design. */
.sqArtLateral { display: none; }

.sqArtCartaoInfo {
    background-color: #F5F5F5;
    border-radius: 1rem;
    padding: 1.25rem;
}

.sqArtCartaoCategoria {
    color: var(--sq-azul);
    font-weight: 700;
    font-size: .875rem;
    margin: 0 0 .25rem;
}

.sqArtCartaoMeta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sqArtCartaoMeta span {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: #999;
    font-size: .75rem;
}

.sqArtCartaoMeta .sqIcone { width: .875rem; height: .875rem; }

.sqArtCartaoBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background-color: var(--sq-azul);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    padding: .75rem 1rem;
    border-radius: var(--sq-raio-lg);
    text-decoration: none;
    transition: background-color .2s ease;
}

.sqArtCartaoBtn:hover { background-color: #002d5e; color: #fff; }
.sqArtCartaoBtn .sqIcone { width: .875rem; height: .875rem; }

.sqArtOutrosTitulo {
    color: var(--sq-azul);
    font-weight: 700;
    font-size: .875rem;
    margin: 0 0 1rem;
}

.sqArtOutrosLista {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sqArtOutroItem {
    display: flex;
    gap: .75rem;
    padding: .5rem;
    margin: 0 -.5rem;
    border-radius: var(--sq-raio-lg);
    text-decoration: none;
    transition: background-color .2s ease;
}

.sqArtOutroItem:hover { background-color: #F5F5F5; }

.sqArtOutroImg {
    width: 5rem;
    height: 4rem;
    border-radius: .5rem;
    overflow: hidden;
    flex: 0 0 auto;
}

.sqArtOutroImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.sqArtOutroItem:hover .sqArtOutroImg img { transform: scale(1.05); }

.sqArtOutroTexto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .375rem;
    min-width: 0;
}

.sqArtOutroTexto .sqArtigoEtiqueta {
    font-size: .5625rem;
    padding: .125rem .5rem;
    align-self: flex-start;
}

.sqArtOutroTexto p {
    color: var(--sq-azul);
    font-weight: 600;
    font-size: .75rem;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- outros artigos, versao movel ---------------------------------------- */

.sqArtOutrosMovel {
    background-color: #F5F5F5;
    padding: 2.5rem 0;
}

.sqArtOutrosGrelhaMovel {
    display: grid;
    gap: 1rem;
}

.sqArtOutroCartao {
    display: flex;
    gap: 1rem;
    background-color: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s ease;
}

.sqArtOutroCartao:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

.sqArtOutroCartaoImg {
    width: 7rem;
    flex: 0 0 auto;
    overflow: hidden;
}

.sqArtOutroCartaoImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sqArtOutroCartaoTexto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 1rem 1rem 0;
    min-width: 0;
}

.sqArtOutroCartaoTexto .sqArtigoEtiqueta {
    font-size: .625rem;
    align-self: flex-start;
}

.sqArtOutroCartaoTexto p {
    color: var(--sq-azul);
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   2. CORPO DO ARTIGO
   --------------------------------------------------------------------------
   Estiliza o HTML guardado em noticias_noticia_pt.texto. As classes
   .sqArtLista / .sqArtDestaque / .sqArtTabela sao escritas no proprio
   conteudo (ver _sql/conteudo-inicial.sql), por isso tem de continuar a
   existir aqui mesmo que o corpo passe a ser editado no backoffice.
   ========================================================================== */

.sqArtTexto {
    color: #444;
    font-size: .875rem;
    line-height: 1.75;
}

.sqArtTexto > *:first-child { margin-top: 0; }

.sqArtTexto p {
    margin: 0 0 .75rem;
}

.sqArtTexto h2 {
    color: var(--sq-azul);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 2rem 0 .75rem;
}

.sqArtTexto h3 {
    color: var(--sq-texto);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.4;
    margin: 1.5rem 0 .5rem;
}

.sqArtTexto a {
    color: var(--sq-azul);
    text-decoration: underline;
}

.sqArtTexto img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sq-raio-lg);
    margin: 1.5rem 0;
}

/* --- listas com marcador lima (.sqArtLista) ------------------------------ */

.sqArtTexto ul,
.sqArtLista {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.sqArtTexto li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.sqArtTexto li::before {
    content: '';
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background-color: var(--sq-lima);
    flex: 0 0 auto;
    margin-top: .5rem;
}

/* listas numeradas mantem o numero em vez do ponto */
.sqArtTexto ol {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}

.sqArtTexto ol li { display: list-item; }
.sqArtTexto ol li::before { content: none; }

/* --- caixa de destaque (.sqArtDestaque) --------------------------------- */

.sqArtDestaque {
    background-color: rgba(0, 62, 126, .05);
    border-left: 4px solid var(--sq-lima);
    border-radius: 0 var(--sq-raio-lg) var(--sq-raio-lg) 0;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    color: var(--sq-texto);
}

.sqArtDestaque p { margin: 0; }
.sqArtDestaque p + p { margin-top: .25rem; font-size: .8125rem; }
.sqArtDestaque strong { color: var(--sq-azul); }

/* --- tabela comparativa (.sqArtTabela) ---------------------------------- */

/* O wrapper com overflow-x e criado em JS (socequi.js) para a tabela poder
   deslizar horizontalmente sem obrigar a pagina inteira a fazer scroll. */
.sqArtTabelaScroll {
    overflow-x: auto;
    margin: 0 0 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.sqArtTabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .75rem;
    min-width: 34rem;
}

.sqArtTabela thead tr { background-color: var(--sq-azul); }

.sqArtTabela th {
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: .75rem 1rem;
}

.sqArtTabela th:first-child { border-top-left-radius: var(--sq-raio-lg); }
.sqArtTabela th:last-child  { border-top-right-radius: var(--sq-raio-lg); }

.sqArtTabela tbody tr:nth-child(odd)  { background-color: #f9fafb; }
.sqArtTabela tbody tr:nth-child(even) { background-color: #fff; }

.sqArtTabela td { padding: .75rem 1rem; color: #444; }
.sqArtTabela td:first-child { font-weight: 600; color: var(--sq-azul); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 640px) {
    .sqArtHero          { height: 380px; }
    .sqArtBreadcrumb    { padding: 1.25rem 2rem 0; }
    .sqArtBreadcrumb span { max-width: 24rem; }
    .sqArtHeroTitulo    { padding: 0 2rem 2.5rem; }
    .sqArtContentor     { padding: 0 2rem; }
    .sqArtGrelha        { padding: 3.5rem 0; }
    .sqArtTexto         { font-size: 1rem; }
    .sqArtTexto h2      { font-size: 1.25rem; }

    .sqArtCta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.75rem 2rem;
    }

    .sqArtNav               { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sqArtNavItemDir        { flex-direction: row-reverse; text-align: right; }
    .sqArtOutrosGrelhaMovel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .sqArtHero { height: 460px; }
}

@media (min-width: 1024px) {
    .sqArtBreadcrumb { padding: 1.25rem 4rem 0; }
    .sqArtHeroTitulo { padding: 0 4rem 2.5rem; }
    .sqArtContentor  { padding: 0 4rem; }

    .sqArtGrelha {
        grid-template-columns: 1fr 280px;
        gap: 4rem;
    }

    .sqArtLateral {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: sticky;
        top: 1.5rem;
    }

    /* na versao desktop os "outros artigos" vivem so na barra lateral */
    .sqArtOutrosMovel { display: none; }
}

/* --------------------------------------------------------------------------
   Tabelas dentro do corpo do artigo

   Os artigos 2 e 4 trazem tabelas comparativas do documento original. O
   contentor .sqArtTabela e' quem rola no telemovel — sem ele a tabela empurra
   a pagina toda para o lado, e o body passa a ter scroll horizontal.
   -------------------------------------------------------------------------- */
.sqArtTexto .sqArtTabela {
    overflow-x: auto;
    margin: 2rem 0;
    -webkit-overflow-scrolling: touch;
}

.sqArtTexto table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .9375rem;
}

.sqArtTexto thead th {
    background-color: var(--sq-azul);
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: .75rem 1rem;
    vertical-align: bottom;
}

.sqArtTexto tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid #E5E5E5;
    vertical-align: top;
    color: var(--sq-texto);
}

.sqArtTexto tbody tr:nth-child(even) { background-color: #FAFAFA; }

.sqArtTexto tbody td:first-child { font-weight: 600; color: var(--sq-azul); }