/**
 * Widget "Caixa com Lista + Mídia" (widgets/pagina-lista-midia.php)
 *
 * Valores conferidos contra `.radio-grid` / `.radio-highlight` (Abrangência) e
 * `.use-grid` / `.use-copy` / `.mini-gallery` (Audiovisual).
 */

.fjpn-lista-midia {
	background: var(--fjpn-lista-midia-secao-bg, transparent);
	padding-block: var(--fjpn-space-section-py-md);
}

/* ==========================================================================
   1. CABEÇALHO COM ÍCONE
   ========================================================================== */

.fjpn-lista-midia__cabecalho {
	display: flex;
	align-items: center;
	gap: 14px; /* valor do modelo */
	margin-bottom: 16px; /* valor do modelo */
}

.fjpn-lista-midia__cabecalho-icone {
	display: grid;
	place-items: center;
	flex: 0 0 2.875rem; /* 46px, valor do modelo */
	width: 2.875rem;
	height: 2.875rem;
	border-radius: var(--fjpn-radius-lg);
	background: var(--fjpn-lista-midia-icone-bg, var(--fjpn-blue-primary));
	color: var(--fjpn-white);
}

/* O Elementor entrega <i> (fonte) ou <svg> inline; o <svg> não tem dimensão
   intrínseca útil e precisa ser fixado. */
.fjpn-lista-midia__cabecalho-icone svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.fjpn-lista-midia__cabecalho-icone i {
	font-size: 1.25rem;
	line-height: 1;
}

.fjpn-lista-midia__cabecalho-titulo {
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-sm);
	font-weight: var(--fjpn-weight-bold);
	line-height: 1.3;
	color: var(--fjpn-lista-midia-titulo, var(--fjpn-blue-primary));
}

/* ==========================================================================
   2. GRADE
   ========================================================================== */

.fjpn-lista-midia__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px; /* valor do modelo */
	align-items: stretch;
}

@media (min-width: 800px) {
	.fjpn-lista-midia__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Sem galeria a caixa ocupa a linha inteira. É o caso da seção do rádio,
	   em que a coluna da direita recebe a tabela como widget separado. */
	.fjpn-lista-midia--sem-galeria .fjpn-lista-midia__grid {
		grid-template-columns: 1fr;
	}
}

.fjpn-lista-midia__caixa,
.fjpn-lista-midia__galeria {
	min-width: 0; /* item de grade não encolhe abaixo do min-content sem isto */
}

/* ==========================================================================
   3. CAIXA
   ========================================================================== */

.fjpn-lista-midia__caixa {
	padding: 36px 38px; /* valores do modelo */
	border-radius: var(--fjpn-radius-lg);
	background: var(--fjpn-lista-midia-caixa, var(--fjpn-bg-soft));
}

.fjpn-lista-midia__eyebrow {
	display: block;
	margin-bottom: var(--fjpn-gap-icon-text);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-eyebrow);
	font-weight: var(--fjpn-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--fjpn-lista-midia-eyebrow, var(--fjpn-orange-primary));
}

.fjpn-lista-midia__titulo {
	margin: 0 0 var(--fjpn-gap-medium);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-md);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-snug);
	color: var(--fjpn-lista-midia-titulo, var(--fjpn-text-primary));
}

.fjpn-lista-midia__texto {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-lista-midia-texto, var(--fjpn-text-muted));
}

.fjpn-lista-midia__texto p {
	margin: 0 0 var(--fjpn-gap-icon-text);
}

.fjpn-lista-midia__texto > :first-child {
	margin-top: 0;
}

.fjpn-lista-midia__texto > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. LISTA
   Marcador desenhado como ::before, não `list-style`: o modelo usa um ponto
   laranja de 7px, e o marcador nativo não aceita cor própria sem
   `::marker`, que ainda não é consistente entre navegadores para tamanho.
   ========================================================================== */

.fjpn-lista-midia__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 22px; /* valores do modelo */
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.fjpn-lista-midia__item {
	position: relative;
	padding-left: 18px; /* valor do modelo */
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-lista-midia-texto, var(--fjpn-text-muted));
}

/* `top: .68em` alinha o ponto à primeira linha do texto qualquer que seja o
   tamanho da fonte — é o valor do modelo, e sobrevive a quem mexer na
   tipografia pelo painel. */
.fjpn-lista-midia__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fjpn-lista-midia-marcador, var(--fjpn-orange-primary));
}

.fjpn-lista-midia__nota {
	margin: 18px 0 0; /* valor do modelo */
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-lista-midia-nota, var(--fjpn-slate-700));
}

/* ==========================================================================
   5. GALERIA
   ========================================================================== */

.fjpn-lista-midia__galeria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px; /* valor do modelo */
}

/* `.elementor` no início é obrigatório: `.elementor img { height: auto }` tem
   especificidade (0,1,1) e descartaria a altura declarada aqui, deixando as
   fotos com alturas diferentes e a grade desalinhada. */
.elementor .fjpn-lista-midia__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px; /* valor do modelo */
	object-fit: cover;
	border-radius: var(--fjpn-radius-lg);
}

/* ==========================================================================
   6. RESPONSIVO
   ========================================================================== */

@media (max-width: 799px) {
	.fjpn-lista-midia__galeria {
		grid-template-columns: minmax(0, 1fr);
	}

	.elementor .fjpn-lista-midia__img {
		min-height: 230px; /* valor do modelo */
	}
}

@media (max-width: 520px) {
	.fjpn-lista-midia__caixa {
		padding: 26px 22px; /* valores do modelo */
	}

	.fjpn-lista-midia__lista {
		grid-template-columns: minmax(0, 1fr);
	}
}