/* =========================================================
   Colunas & Colunistas — estilos do front-end
   ========================================================= */

.coluna-widget {
	--coluna-cor: #1b4f9c;
	--coluna-fundo: #ffffff;
	--coluna-texto: #1a1a1a;
	--coluna-suave: #666a70;
	--coluna-linha: rgba(0, 0, 0, .1);
	--coluna-raio: 10px;

	box-sizing: border-box;
	max-width: 100%;
	font-family: inherit;
	color: var(--coluna-texto);
	line-height: 1.45;
	text-align: left;
}

.coluna-widget *,
.coluna-widget *::before,
.coluna-widget *::after {
	box-sizing: border-box;
}

/* ---------- Escala de tamanhos ---------- */
.coluna-tam-pp { --av: 44px; --av-mini: 32px; --fs-nome: 13px; --fs-cargo: 10px; --fs-titulo: 14px; --fs-resumo: 12px; --gap: 8px;  --pad: 10px; }
.coluna-tam-p  { --av: 62px; --av-mini: 40px; --fs-nome: 15px; --fs-cargo: 11px; --fs-titulo: 16px; --fs-resumo: 13px; --gap: 10px; --pad: 14px; }
.coluna-tam-m  { --av: 86px; --av-mini: 54px; --fs-nome: 18px; --fs-cargo: 12px; --fs-titulo: 19px; --fs-resumo: 14.5px; --gap: 13px; --pad: 18px; }
.coluna-tam-g  { --av: 122px; --av-mini: 72px; --fs-nome: 23px; --fs-cargo: 13px; --fs-titulo: 25px; --fs-resumo: 16.5px; --gap: 17px; --pad: 24px; }

/* ---------- Peças comuns ---------- */
.coluna-avatar,
.coluna-avatar-mini {
	display: block;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: #e8eaed;
}

.coluna-avatar { width: var(--av); height: var(--av); }
.coluna-avatar-mini { width: var(--av-mini); height: var(--av-mini); }

.coluna-avatar-vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--coluna-cor);
	color: #fff;
	font-weight: 700;
	letter-spacing: .5px;
	font-size: calc(var(--fs-nome) * .95);
}

.coluna-nome {
	margin: 0;
	font-size: var(--fs-nome);
	font-weight: 800;
	line-height: 1.2;
	color: var(--coluna-cor);
	letter-spacing: -.01em;
}

.coluna-cargo {
	margin: 2px 0 0;
	font-size: var(--fs-cargo);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--coluna-suave);
}

.coluna-materia-titulo {
	margin: var(--gap) 0 0;
	font-size: var(--fs-titulo);
	font-weight: 700;
	line-height: 1.28;
	color: var(--coluna-texto);
}

.coluna-materia-titulo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--coluna-cor), var(--coluna-cor));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease;
}

.coluna-materia-titulo a:hover,
.coluna-materia-titulo a:focus {
	background-size: 100% 2px;
	color: var(--coluna-cor);
}

.coluna-resumo {
	margin: calc(var(--gap) * .55) 0 0;
	font-size: var(--fs-resumo);
	color: var(--coluna-suave);
	line-height: 1.55;
}

.coluna-data {
	display: block;
	margin-top: calc(var(--gap) * .45);
	font-size: calc(var(--fs-resumo) * .85);
	color: var(--coluna-suave);
	opacity: .85;
}

.coluna-risco {
	display: block;
	width: 38px;
	height: 3px;
	margin: calc(var(--gap) * .8) auto 0;
	border-radius: 3px;
	background: var(--coluna-cor);
}

.coluna-botao {
	display: inline-block;
	margin-top: var(--gap);
	padding: .5em 1.1em;
	border-radius: 999px;
	background: var(--coluna-cor);
	color: #fff !important;
	font-size: calc(var(--fs-resumo) * .92);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.4;
	transition: filter .2s ease, transform .2s ease;
}

.coluna-botao:hover,
.coluna-botao:focus {
	filter: brightness(1.12);
	transform: translateY(-1px);
	color: #fff !important;
}

.coluna-extras {
	margin: var(--gap) 0 0;
	padding: 0 0 0 1em;
	list-style: disc;
	font-size: var(--fs-resumo);
}

.coluna-extras li { margin-bottom: .35em; }
.coluna-extras a { color: inherit; text-decoration: none; }
.coluna-extras a:hover { color: var(--coluna-cor); text-decoration: underline; }

.coluna-aviso {
	padding: 12px 14px;
	border-left: 4px solid #d98500;
	background: #fff8e6;
	color: #6b4b00;
	font-size: 13px;
	border-radius: 4px;
}

/* =========================================================
   Modelo: RETRATO (vertical)
   ========================================================= */
.coluna-modelo-retrato {
	padding: var(--pad);
	text-align: center;
	background: var(--coluna-fundo);
	border: 1px solid var(--coluna-linha);
	border-radius: var(--coluna-raio);
	border-top: 3px solid var(--coluna-cor);
}

.coluna-modelo-retrato .coluna-avatar {
	margin: 0 auto var(--gap);
	border: 3px solid var(--coluna-fundo);
	box-shadow: 0 0 0 2px var(--coluna-cor);
}

.coluna-modelo-retrato .coluna-corpo { margin-top: var(--gap); }
.coluna-modelo-retrato .coluna-data { text-align: center; }

/* =========================================================
   Modelo: FAIXA (horizontal)
   ========================================================= */
.coluna-modelo-faixa {
	padding: var(--pad);
	background: var(--coluna-fundo);
	border: 1px solid var(--coluna-linha);
	border-left: 4px solid var(--coluna-cor);
	border-radius: var(--coluna-raio);
}

.coluna-modelo-faixa .coluna-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pad);
}

/* Se o espaço ficar estreito demais, o texto desce em vez de espremer. */
.coluna-modelo-faixa .coluna-corpo { flex: 1 1 min(190px, 100%); min-width: 0; }
.coluna-modelo-faixa .coluna-materia-titulo { margin-top: calc(var(--gap) * .8); }

/* =========================================================
   Modelo: CAPA (vertical, imagem de fundo)
   ========================================================= */
.coluna-modelo-capa { border-radius: var(--coluna-raio); overflow: hidden; }
.coluna-capa-link { display: block; text-decoration: none; color: #fff; }

.coluna-capa-fundo {
	position: relative;
	min-height: calc(var(--av) * 2.6);
	padding: var(--pad);
	display: flex;
	align-items: flex-end;
	background-color: #232a33;
	background-size: cover;
	background-position: center;
	transition: transform .4s ease;
}

.coluna-modelo-capa:hover .coluna-capa-fundo { transform: scale(1.03); }

.coluna-capa-sombra {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 100%);
}

.coluna-capa-conteudo { position: relative; width: 100%; }

.coluna-capa-autor {
	display: flex;
	align-items: center;
	gap: calc(var(--gap) * .7);
	margin-bottom: calc(var(--gap) * .7);
}

.coluna-modelo-capa .coluna-avatar-mini {
	border: 2px solid rgba(255,255,255,.85);
}

.coluna-modelo-capa .coluna-nome {
	display: block;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.coluna-modelo-capa .coluna-cargo { display: block; color: rgba(255,255,255,.8); }
.coluna-modelo-capa .coluna-materia-titulo { color: #fff; margin-top: 0; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.coluna-modelo-capa .coluna-resumo { color: rgba(255,255,255,.85); }
.coluna-modelo-capa .coluna-data { color: rgba(255,255,255,.7); }

/* =========================================================
   Modelo: ASSINATURA (horizontal minimalista)
   ========================================================= */
.coluna-modelo-assinatura { padding: calc(var(--pad) * .5) 0; }

.coluna-modelo-assinatura .coluna-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--gap);
}

.coluna-barra {
	flex: 0 0 auto;
	width: 4px;
	align-self: stretch;
	border-radius: 4px;
	background: var(--coluna-cor);
}

.coluna-modelo-assinatura .coluna-corpo { flex: 1 1 min(180px, 100%); min-width: 0; }
.coluna-modelo-assinatura .coluna-materia-titulo { margin-top: calc(var(--gap) * .7); }

/* A barra colorida acompanha a altura só quando está lado a lado. */
.coluna-modelo-assinatura .coluna-flex > .coluna-barra { min-height: var(--av-mini); }

/* =========================================================
   Modelo: CARTÃO (vertical, cabeçalho colorido)
   ========================================================= */
.coluna-modelo-cartao {
	background: var(--coluna-fundo);
	border: 1px solid var(--coluna-linha);
	border-radius: var(--coluna-raio);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.coluna-cartao-topo {
	height: calc(var(--av) * .62);
	background: var(--coluna-cor); /* fallback */
	background: linear-gradient(135deg, var(--coluna-cor), color-mix(in srgb, var(--coluna-cor) 65%, #000));
	position: relative;
}

.coluna-cartao-topo .coluna-avatar {
	position: absolute;
	left: var(--pad);
	bottom: calc(var(--av) * -.42);
	border: 4px solid var(--coluna-fundo);
}

.coluna-cartao-corpo {
	padding: var(--pad);
	padding-top: calc(var(--av) * .5 + var(--gap));
}

/* =========================================================
   Modelo: LISTA COMPACTA (sidebar)
   ========================================================= */
.coluna-modelo-lista {
	padding: var(--pad);
	background: var(--coluna-fundo);
	border: 1px solid var(--coluna-linha);
	border-radius: var(--coluna-raio);
}

.coluna-lista-cabecalho {
	display: flex;
	align-items: center;
	gap: calc(var(--gap) * .8);
	padding-bottom: calc(var(--gap) * .8);
	border-bottom: 2px solid var(--coluna-cor);
}

.coluna-lista-itens {
	margin: var(--gap) 0 0;
	padding: 0;
	list-style: none;
}

.coluna-lista-itens li {
	padding: calc(var(--gap) * .6) 0;
	border-bottom: 1px solid var(--coluna-linha);
	font-size: var(--fs-titulo);
	line-height: 1.3;
}

.coluna-lista-itens li:last-child { border-bottom: 0; }

.coluna-lista-itens a {
	color: var(--coluna-texto);
	text-decoration: none;
	font-weight: 600;
}

.coluna-lista-itens a:hover { color: var(--coluna-cor); }

/* =========================================================
   Grade de várias colunas — shortcode [colunas]
   ========================================================= */
.colunas-grade {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(var(--colunas-qtd, 3), minmax(0, 1fr));
	align-items: stretch;
}

.colunas-grade > .coluna-widget { height: 100%; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 900px) {
	.colunas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.colunas-grade { grid-template-columns: 1fr; }

	/* tamanho G vira M no celular para não estourar a tela */
	.coluna-tam-g { --av: 86px; --av-mini: 54px; --fs-nome: 18px; --fs-titulo: 19px; --fs-resumo: 14.5px; --gap: 13px; --pad: 18px; }
}

@media (max-width: 420px) {
	.coluna-modelo-faixa .coluna-flex,
	.coluna-modelo-assinatura .coluna-flex {
		flex-direction: column;
	}

	.coluna-barra { width: 100%; height: 4px; align-self: flex-start; }
}

/* =========================================================
   Modo escuro (só se o tema do site usar)
   ========================================================= */
@media (prefers-color-scheme: dark) {
	.coluna-widget {
		--coluna-fundo: #1b1f24;
		--coluna-texto: #e9ecef;
		--coluna-suave: #a6adb5;
		--coluna-linha: rgba(255, 255, 255, .12);
	}

	.coluna-avatar-vazio { background: var(--coluna-cor); }
	.coluna-aviso { background: #3a2f14; color: #ffd98a; }
}