/*
 * Padrão de imagem do portal: 16:8 (2 para 1) em todas as fotos de matéria (cartões, destaques e capas de bloco).
 * O formato vem de uma variável só: para mudar o padrão do portal inteiro, troque --ct-img-ratio.
 * Carrega por último, de propósito, para valer sobre os formatos antigos (16:9, 16:10) de cada bloco.
 *
 * Não entram: fotos quadradas ou verticais (retratos, classificados, vídeos curtos), miniaturas pequenas de lista e os players
 * de vídeo, que seguem o formato do próprio vídeo.
 */
:root {
    --ct-img-ratio: 16 / 8;
    --ct-img-grande-mobile-ratio: 16 / 8;
    --ct-img-foco: center 30%; /* corta mais embaixo que em cima: cabeças e rostos ficam */
}

/* Categorias e listagens: destaques e grade */
body .ct-cat-grid-item .ccgi-img-wrap img,
body .ct-cat-feat-img,
body .ct-cat-feat-img img {
    aspect-ratio: var(--ct-img-ratio);
    object-fit: cover;
    object-position: var(--ct-img-foco);
}

/* Capa: Em foco, Memória, fileira de editorias, Esportes, Opinião e demais cartões */
body .cx-cob-thumb img,
body .cx-esp-img img,
body .cx-cob-img img,
body .ct-capa-cats-foto img,
body .ct-img-16-10 {
    aspect-ratio: var(--ct-img-ratio);
    object-fit: cover;
    object-position: var(--ct-img-foco);
}
body .ct-capa-cats-foto {
    aspect-ratio: var(--ct-img-ratio);
}
body .cgc-thumb-box {
    aspect-ratio: var(--ct-img-ratio);
}
body .cgc-thumb-box img {
    object-fit: cover;
    object-position: var(--ct-img-foco);
}


body .ct-capa-cats-foto img { display: block; width: 100%; height: 100%; }

/*
 * Categoria: os três destaques. A foto grande ocupa exatamente a altura das duas fotos menores mais o título da primeira,
 * e todas as fotos são 16:8. Para isso o título das menores tem altura fixa (3 linhas) e a coluna da grande é calculada a
 * partir da largura: grande = (2 x (largura - espaço) + 2 x --cd-tg) / 3, menor = o resto.
 */
.ct-cat-destaque {
    --cd-gc: 24px;                      /* espaço entre as colunas */
    --cd-tg: 94.3px;                    /* título das menores: margem de cima (10) + 3 linhas (66,3) + margem de baixo (18) */
    display: grid;
    grid-template-columns: calc((2 * (100% - var(--cd-gc)) + 2 * var(--cd-tg)) / 3) minmax(0, 1fr);
    column-gap: var(--cd-gc);
    margin-bottom: 36px;
    align-items: start;
}
.ct-cat-destaque .ct-cd-foto { margin: 0; }
.ct-cat-destaque .ct-cd-foto--0 { grid-column: 1; grid-row: 1 / 4; align-self: stretch; }
body .ct-cat-destaque .ct-cd-foto--0 img { height: 100%; aspect-ratio: auto; }
.ct-cat-destaque .ct-cd-foto--1 { grid-column: 2; grid-row: 1; }
.ct-cat-destaque .ct-cd-foto--2 { grid-column: 2; grid-row: 3; }
.ct-cat-destaque .ct-cd-texto--0 { grid-column: 1; grid-row: 4; padding-top: 16px; }
.ct-cat-destaque .ct-cd-texto--1 { grid-column: 2; grid-row: 2; }
.ct-cat-destaque .ct-cd-texto--2 { grid-column: 2; grid-row: 4; }
.ct-cat-destaque h3.ct-cd-texto {
    margin: 10px 0 18px;
    height: calc(3 * 1.3em);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-cat-destaque h3.ct-cd-texto a { color: #111; text-decoration: none; }
.ct-cat-destaque h3.ct-cd-texto a:hover { color: var(--cat-cor, var(--cor-primaria)); }
.ct-cat-destaque .ct-cd-texto--0 h2 {
    margin: 0 0 8px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.ct-cat-destaque .ct-cd-texto--0 h2 a { color: #111; text-decoration: none; }
.ct-cat-destaque .ct-cd-texto--0 h2 a:hover { color: var(--cat-cor, var(--cor-primaria)); }
.ct-cat-destaque .ct-cat-destaque-olho { margin: 0; font-size: 15px; line-height: 1.5; color: #4b5563; }

/* Com menos de três destaques: uma só (largura toda) ou duas lado a lado, no mesmo formato */
.ct-cat-destaque--1 { grid-template-columns: minmax(0, 1fr); }
.ct-cat-destaque--1 .ct-cd-foto--0 { grid-row: 1; align-self: start; }
body .ct-cat-destaque--1 .ct-cd-foto--0 img { height: auto; aspect-ratio: var(--ct-img-ratio); }
.ct-cat-destaque--1 .ct-cd-texto--0 { grid-row: 2; }
.ct-cat-destaque--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ct-cat-destaque--2 .ct-cd-foto--0 { grid-row: 1; align-self: start; }
body .ct-cat-destaque--2 .ct-cd-foto--0 img { height: auto; aspect-ratio: var(--ct-img-ratio); }
.ct-cat-destaque--2 .ct-cd-texto--0 { grid-row: 2; }
.ct-cat-destaque--2 .ct-cd-foto--1 { grid-row: 1; }
.ct-cat-destaque--2 .ct-cd-texto--1 { grid-row: 2; }

/* Telas menores: a grande em cima, as duas menores lado a lado embaixo */
@media (max-width: 991px) {
    .ct-cat-destaque { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ct-cat-destaque .ct-cd-foto--0 { grid-column: 1 / -1; grid-row: 1; align-self: start; }
    body .ct-cat-destaque .ct-cd-foto--0 img { height: auto; aspect-ratio: var(--ct-img-ratio); }
    .ct-cat-destaque .ct-cd-texto--0 { grid-column: 1 / -1; grid-row: 2; padding-bottom: 20px; }
    .ct-cat-destaque .ct-cd-foto--1 { grid-column: 1; grid-row: 3; }
    .ct-cat-destaque .ct-cd-texto--1 { grid-column: 1; grid-row: 4; }
    .ct-cat-destaque .ct-cd-foto--2 { grid-column: 2; grid-row: 3; }
    .ct-cat-destaque .ct-cd-texto--2 { grid-column: 2; grid-row: 4; }
}
@media (max-width: 600px) {
    .ct-cat-destaque { grid-template-columns: minmax(0, 1fr); }
    .ct-cat-destaque .ct-cd-foto--1, .ct-cat-destaque .ct-cd-foto--2, .ct-cat-destaque .ct-cd-texto--1, .ct-cat-destaque .ct-cd-texto--2 { grid-column: 1; }
    .ct-cat-destaque .ct-cd-foto--1 { grid-row: 3; } .ct-cat-destaque .ct-cd-texto--1 { grid-row: 4; }
    .ct-cat-destaque .ct-cd-foto--2 { grid-row: 5; } .ct-cat-destaque .ct-cd-texto--2 { grid-row: 6; }
    .ct-cat-destaque .ct-cd-texto--0 h2 { font-size: 23px; }
}

/* Destaques da categoria: a própria âncora da foto é o item da grade (o seletor da grade comum não a alcança) */
body .ct-cd-foto img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ct-img-ratio);
    object-fit: cover;
    object-position: var(--ct-img-foco);
}

/* Com os três destaques no computador, a foto grande não "empurra" as linhas: ela ocupa o espaço que as duas menores e o título
   da primeira já definem (a foto fica solta dentro da caixa e a caixa é esticada pela grade). */
@media (min-width: 992px) {
    body .ct-cat-destaque--3 .ct-cd-foto--0 { position: relative; min-height: 0; }
    body .ct-cat-destaque--3 .ct-cd-foto--0 img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}

/* A âncora da foto é o próprio item da grade: leva o que a grade comum dá ao "ccgi-img-wrap" (caixa relativa, cantos, corte) */
body .ct-cd-foto {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--ct-img-radius, 8px);
}
body .ct-cd-foto:hover img { filter: var(--ct-img-hover-filtro); }
body .ct-cd-foto img { transition: filter var(--ct-img-hover-duracao, .6s) ease; }

/* Sidebar: cartão dos destaques (foto 16:8, chapéu colorido e título em serifa embaixo), igual em todas as páginas com sidebar */
body .ct-side-card { display: block; margin-bottom: 20px; color: inherit; text-decoration: none; }
body .ct-side-card:last-child { margin-bottom: 0; }
body .ct-side-card-foto { display: block; overflow: hidden; border-radius: var(--ct-img-radius, 8px); background: #f1f5f9; }
body .ct-side-card-foto img { display: block; width: 100%; aspect-ratio: var(--ct-img-ratio); object-fit: cover; object-position: var(--ct-img-foco); transition: filter var(--ct-img-hover-duracao, .6s) ease; }
body .ct-side-card:hover .ct-side-card-foto img { filter: var(--ct-img-hover-filtro); }
body .ct-side-card-chapeu { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
body .ct-side-card-chapeu .ct-side-feed-chapeu { margin-bottom: 0; }
body .ct-side-card-titulo { display: block; margin-top: 5px; font-family: var(--font-serif, Georgia, serif); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #111; transition: color .2s ease; }
body .ct-side-card:hover .ct-side-card-titulo { color: var(--cat-cor, var(--cor-primaria, #2271b1)); }

/* Sidebar: Memória da Cidade no mesmo cartão e no mesmo cabeçalho dos Destaques */
body .ct-side-memoria { margin-bottom: 25px; }
body .ct-side-card-local { display: block; margin-top: 6px; font-size: 12.5px; color: #5b6472; }
body .ct-side-card-local i { margin-right: 4px; font-size: 11px; }
body .ct-side-ver-todos { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 700; }
body .ct-side-ver-todos i { font-size: 10px; }

/* Página Vídeos: duração do vídeo sobre a foto, no canto */
body .ct-tv-duracao { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
body .ct-tv-duracao i { font-size: 9px; margin-right: 3px; }

/* Cabeçalho de bloco (título com a barrinha vermelha e o link "Ver todos" à direita): vem da capa, e as outras páginas que o usam
   (como a de Vídeos) não carregavam esse estilo. */
body:not(.home) .ct-guia-header-simple { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border, #e5e7eb); margin-bottom: 30px; }
body:not(.home) .ct-guia-header-simple .cgh-left { position: relative; padding-bottom: 10px; color: #111; letter-spacing: -.4px; }
body:not(.home) .ct-guia-header-simple .cgh-left:after { content: ''; position: absolute; left: 0; bottom: -1px; width: 40px; height: 3px; background: var(--cor-secao, #e3262e); }
body:not(.home) .ct-guia-header-simple .cgh-left h2,
body:not(.home) .ct-guia-header-simple .cgh-left h3 { margin: 0; font-family: var(--font-heading, inherit); font-size: 26px; font-weight: 700; line-height: 120%; letter-spacing: -.04rem; color: #111; }
body:not(.home) .ct-guia-header-simple .cgh-left p { margin: 2px 0 0; font-size: 14px; color: #777; }
body:not(.home) .ct-guia-header-simple .cgh-right { display: flex; align-items: center; gap: 15px; }
body:not(.home) .ct-guia-header-simple .ct-see-all { font-size: 14px; font-weight: 600; color: var(--cor-primaria, #e3262e); text-decoration: none; white-space: nowrap; }
body:not(.home) .ct-guia-header-simple .ct-see-all:hover { text-decoration: underline; }

/* Páginas cujo conteúdo abre fora da grade principal (como a de Vídeos): respiro entre o caminho de migalhas e o título */
body .ct-pagina-topo { padding-top: 30px; }
body .ct-pagina-topo .ct-arq-header { margin-bottom: 8px; }