/* ======================================================================
   Politermica blog — artigos.
   ----------------------------------------------------------------------
   Tres coisas, porque partilham a mesma linguagem visual:
     1. cartao de artigo e carrossel (seccao "Noticias" da landing)
     2. pagina de artigo (hero, corpo, barra lateral)
     3. blocos opcionais para o corpo do artigo, escrito no RTE

   Depende dos tokens de politermica.css.
   ====================================================================== */

/* ======================================================================
   1. CARROSSEL E CARTAO DE ARTIGO
   ====================================================================== */

.ptCarrossel {
    max-width: var(--pt-max);
    margin: 0 auto;
}

/* A janela corta; a pista desliza. */
.ptCarrossel__janela { overflow: hidden; }

.ptCarrossel__pista {
    display: flex;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .ptCarrossel__pista { transition: none; }
}

/* Cada slide ocupa a janela toda — o JS desloca em multiplos de 100%. */
.ptCarrossel__slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
    background: var(--pt-fundo-alt);
    border-radius: var(--pt-raio-cartao);
    overflow: hidden;
}

/* [hidden] perde para display:grid — daí o !important. */
.ptCarrossel__slide[hidden] { display: none !important; }

.ptArtigoMedia {
    position: relative;
    display: block;
    min-height: 340px;
}

.ptArtigoMedia img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ptArtigoEtiqueta {
    position: absolute;
    left: 16px;
    top: 16px;
    background: var(--pt-lima);
    color: #FFFFFF;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 4px;
    pointer-events: none;
}

.ptArtigoCorpo {
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ptArtigoMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--pt-texto-tenue);
    margin-bottom: 14px;
}

.ptArtigoTitulo {
    margin: 0 0 16px;
    font-family: var(--pt-titulos);
    font-size: 30px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ptArtigoTitulo a {
    color: var(--pt-titulo);
    text-decoration: none;
}

.ptArtigoTitulo a:hover { color: var(--pt-verde); }

.ptArtigoResumo {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 27px;
    color: var(--pt-texto-fraco);
    text-wrap: pretty;
}

.ptArtigoLer {
    align-self: flex-start;
    font-family: var(--pt-titulos);
    font-size: 15px;
    font-weight: 500;
    color: var(--pt-verde);
    text-decoration: none;
}

.ptArtigoLer:hover { color: var(--pt-lima); }

.ptCarrossel__pontos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.ptCarrossel__ponto {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pt-borda-forte);
    cursor: pointer;
    transition: background-color .2s ease, width .2s ease;
}

.ptCarrossel__ponto.is-activo {
    width: 28px;
    border-radius: 999px;
    background: var(--pt-lima);
}

.ptNoticias__vazio {
    max-width: var(--pt-max);
    margin: 0 auto;
    color: var(--pt-texto-fraco);
}

/* ======================================================================
   2. PAGINA DE ARTIGO
   ====================================================================== */

.ptArtigo__hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    padding: 220px var(--pt-gutter) 76px;
    overflow: hidden;
    background: var(--pt-preto);
}

.ptArtigo__heroFundo { position: absolute; inset: 0; }

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

/* Gradiente vertical: o texto vive em baixo. */
.ptArtigo__heroVeu {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.92));
}

.ptArtigo__heroConteudo {
    position: relative;
    width: 100%;
    max-width: var(--pt-max);
    margin: 0 auto;
}

.ptArtigo__migalhas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
}

.ptArtigo__migalhas a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.ptArtigo__migalhas a:hover { color: var(--pt-lima); }

.ptArtigo__migalhaActual { color: rgba(255, 255, 255, 0.5); }

.ptArtigo__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 26px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
}

.ptArtigo__etiqueta {
    background: var(--pt-lima);
    color: #FFFFFF;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 999px;
}

.ptArtigo__ponto {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.ptArtigo__titulo {
    margin: 0;
    font-family: var(--pt-titulos);
    font-size: 56px;
    font-weight: 600;
    line-height: 66px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    max-width: 1120px;
    text-wrap: balance;
}

.ptArtigo__seccao {
    background: var(--pt-fundo);
    padding: 80px var(--pt-gutter) 100px;
}

.ptArtigo__grelha {
    max-width: var(--pt-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 88px;
    align-items: start;
}

/* min-width:0 impede que um <pre> ou uma tabela larga estique a coluna. */
.ptArtigo__corpo { min-width: 0; }

/* ----------------------------------------------------------------------
   Corpo escrito no RTE — elementos genericos.
   ---------------------------------------------------------------------- */

.ptArtigo__corpo h2 {
    margin: 48px 0 20px;
    font-family: var(--pt-titulos);
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
    letter-spacing: -0.01em;
    color: var(--pt-titulo);
    text-wrap: balance;
}

.ptArtigo__corpo h2:first-child { margin-top: 0; }

.ptArtigo__corpo h3 {
    margin: 34px 0 14px;
    font-family: var(--pt-titulos);
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    color: var(--pt-titulo);
}

.ptArtigo__corpo p {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 30px;
    color: #4A4A4A;
    text-wrap: pretty;
}

.ptArtigo__corpo ul,
.ptArtigo__corpo ol {
    margin: 0 0 26px;
    padding-left: 0;
    list-style: none;
}

.ptArtigo__corpo ol { counter-reset: ptItem; }

.ptArtigo__corpo li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 28px;
    color: #4A4A4A;
}

.ptArtigo__corpo ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pt-lima);
}

.ptArtigo__corpo ol > li::before {
    counter-increment: ptItem;
    content: counter(ptItem) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pt-lima);
    font-weight: 600;
}

.ptArtigo__corpo a {
    color: var(--pt-verde);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ptArtigo__corpo a:hover { color: var(--pt-lima); }

.ptArtigo__corpo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pt-raio-cartao);
    display: block;
    margin: 8px 0;
}

.ptArtigo__corpo figure { margin: 34px 0; }

.ptArtigo__corpo figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 20px;
    color: var(--pt-texto-tenue);
}

.ptArtigo__corpo table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: 15px;
}

.ptArtigo__corpo th,
.ptArtigo__corpo td {
    border: 1px solid var(--pt-borda);
    padding: 10px 14px;
    text-align: left;
}

.ptArtigo__corpo th { background: var(--pt-fundo-alt); font-weight: 600; }

/* Tabelas largas rolam dentro de si em vez de esticarem a pagina. */
.ptArtigo__corpo .ptTabelaScroll { overflow-x: auto; }

/* ----------------------------------------------------------------------
   3. Blocos opcionais do design, para usar no corpo do artigo.
   ---------------------------------------------------------------------- */

/* Caixa de abertura, contorno lima. */
.ptArtigo__corpo .ptDestaque {
    border: 1px solid var(--pt-lima);
    background: #FBFCF2;
    border-radius: 10px;
    padding: 28px 32px;
    margin: 0 0 48px;
}

.ptArtigo__corpo .ptDestaque p {
    margin: 0;
    font-size: 20px;
    line-height: 32px;
    color: #5F6600;
}

/* Duas colunas de listas tecnicas ("Especialidades desenvolvidas"). */
.ptArtigo__corpo .ptFicha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 32px;
}

.ptArtigo__corpo .ptFicha > div {
    background: var(--pt-fundo-alt);
    border-radius: var(--pt-raio-cartao);
    padding: 24px 26px;
}

.ptArtigo__corpo .ptFicha h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
}

.ptArtigo__corpo .ptFicha ul { margin: 0; }

.ptArtigo__corpo .ptFicha li {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 6px;
}

.ptArtigo__corpo .ptFicha li::before { top: 9px; width: 5px; height: 5px; }

/* Listas COMPRIDAS da ficha passam a duas colunas, automaticamente.
   -----------------------------------------------------------------------
   O design poe assim a "Redes e Infraestruturas Tecnicas" do artigo do
   Hospital de Santa Maria: tem 9 itens e, numa coluna so, ficava uma tira
   comprida ao lado de outra com tres.

   O :has() evita ter de marcar a lista com uma classe no HTML guardado na
   base de dados — o que obrigaria a mexer no conteudo dos artigos sempre
   que uma lista crescesse. Assim e o CSS que decide: 8 ou mais itens, duas
   colunas. Hoje so a de 9 itens dispara (as outras tem 3 a 6), e um artigo
   novo com uma lista longa fica bem sem ninguem se lembrar disto.

   :has() e suportado em todos os browsers desde o final de 2023. Onde nao
   for, a lista fica numa coluna — que e o comportamento antigo, nao uma
   avaria. */
.ptArtigo__corpo .ptFicha ul:has(> li:nth-child(8)),
.ptArtigo__corpo .ptFicha ul.ptListaDupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

@media (max-width: 680px) {
    .ptArtigo__corpo .ptFicha ul:has(> li:nth-child(8)),
    .ptArtigo__corpo .ptFicha ul.ptListaDupla { grid-template-columns: 1fr; }
}

/* Linha de indicadores (prazos, areas). */
.ptArtigo__corpo .ptNumeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    border: 1px solid var(--pt-borda);
    border-radius: var(--pt-raio-cartao);
    padding: 26px;
    margin: 0 0 32px;
}

.ptArtigo__corpo .ptNumeros strong {
    display: block;
    font-family: var(--pt-titulos);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pt-verde);
    margin-bottom: 6px;
}

.ptArtigo__corpo .ptNumeros span {
    font-size: 13px;
    line-height: 19px;
    color: var(--pt-texto-fraco);
}

/* Citacao com barra lateral. */
.ptArtigo__corpo .ptCitacao,
.ptArtigo__corpo blockquote {
    margin: 0 0 32px;
    padding: 22px 28px;
    border-left: 4px solid var(--pt-lima);
    background: var(--pt-fundo-alt);
    border-radius: 0 var(--pt-raio) var(--pt-raio) 0;
}

.ptArtigo__corpo .ptCitacao p,
.ptArtigo__corpo blockquote p {
    margin: 0;
    font-style: italic;
    font-size: 17px;
    line-height: 29px;
    color: var(--pt-texto);
}

/* Faixa verde de fecho. */
.ptArtigo__corpo .ptCta {
    background: var(--pt-verde);
    border-radius: var(--pt-raio-cartao);
    padding: 40px;
    margin: 48px 0 0;
    color: #FFFFFF;
}

.ptArtigo__corpo .ptCta h2,
.ptArtigo__corpo .ptCta h3 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-size: 26px;
    line-height: 34px;
}

.ptArtigo__corpo .ptCta p {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 26px;
}

.ptArtigo__corpo .ptCta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pt-lima);
    color: #FFFFFF;
    font-family: var(--pt-titulos);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: var(--pt-raio);
}

.ptArtigo__corpo .ptCta a:hover { background: var(--pt-lima-hover); color: #FFFFFF; }

/* ----------------------------------------------------------------------
   Barra lateral
   ---------------------------------------------------------------------- */

.ptArtigo__barra {
    position: sticky;
    top: 32px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ptArtigo__voltar {
    font-family: var(--pt-titulos);
    font-size: 16px;
    font-weight: 500;
    color: var(--pt-verde);
    text-decoration: none;
}

.ptArtigo__voltar:hover { color: var(--pt-lima); }

.ptArtigo__barraTitulo {
    margin: 0 0 14px;
    font-family: var(--pt-titulos);
    font-size: 19px;
    font-weight: 500;
    color: var(--pt-texto);
}

.ptArtigo__relLista {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ptArtigo__rel { text-decoration: none; display: block; }

.ptArtigo__relMedia {
    position: relative;
    display: block;
    height: 128px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--pt-fundo-alt);
}

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

.ptArtigo__relEtiqueta {
    position: absolute;
    left: 12px;
    top: 12px;
    background: #FFFFFF;
    color: var(--pt-texto);
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
}

.ptArtigo__relData {
    display: block;
    font-size: 13px;
    color: var(--pt-texto-tenue);
    margin-bottom: 5px;
}

.ptArtigo__relTitulo {
    display: block;
    font-family: var(--pt-titulos);
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    color: var(--pt-texto);
}

.ptArtigo__rel:hover .ptArtigo__relTitulo { color: var(--pt-verde); }

.ptArtigo__ajuda {
    background: var(--pt-fundo-alt);
    border-radius: var(--pt-raio-cartao);
    padding: 26px 24px;
}

.ptArtigo__ajuda p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 23px;
    color: var(--pt-texto-fraco);
}

.ptArtigo__ajudaBotao {
    display: block;
    text-align: center;
    background: var(--pt-preto);
    color: #FFFFFF;
    font-family: var(--pt-titulos);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: var(--pt-raio);
    transition: background-color .2s ease;
}

.ptArtigo__ajudaBotao:hover { background: var(--pt-lima); color: #FFFFFF; }

/* ======================================================================
   RESPONSIVO
   ====================================================================== */

@media (max-width: 1280px) {
    .ptArtigo__grelha { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
    .ptArtigo__titulo { font-size: 44px; line-height: 54px; }
    .ptArtigo__hero   { min-height: 520px; padding-top: 190px; }
    .ptArtigoTitulo   { font-size: 26px; line-height: 34px; }
}

@media (max-width: 992px) {
    .ptArtigo__grelha { grid-template-columns: 1fr; gap: 48px; }
    /* Deixa de fazer sentido colar a barra quando ela passa para baixo. */
    .ptArtigo__barra  { position: static; }
    .ptArtigo__titulo { font-size: 34px; line-height: 44px; }
    .ptArtigo__hero   { min-height: 420px; padding: 160px var(--pt-gutter) 56px; }
    .ptArtigo__seccao { padding: 56px var(--pt-gutter) 72px; }

    .ptCarrossel__slide { grid-template-columns: 1fr; }
    .ptArtigoMedia      { min-height: 240px; }
    .ptArtigoCorpo      { padding: 30px; }

    .ptArtigo__corpo h2 { font-size: 26px; line-height: 36px; }
}

@media (max-width: 680px) {
    .ptArtigo__titulo { font-size: 26px; line-height: 34px; }
    .ptArtigo__corpo .ptFicha,
    .ptArtigo__corpo .ptNumeros { grid-template-columns: 1fr; }
    .ptArtigo__corpo .ptCta     { padding: 28px; }
    .ptArtigoTitulo   { font-size: 22px; line-height: 30px; }
}