/**
 * Section: Autores
 * Salvar em: home/page-autores.css
 * Enfileirar em inc/assets.php do mesmo jeito que page-hero.css
 */

.autores-section,
.autores-section *,
.autores-section *::before,
.autores-section *::after {
	box-sizing: border-box;
}

.autores-section {
	background: #020b18;
	padding: 40px 24px;
	position: relative;
	overflow-x: hidden; /* cinto de segurança contra qualquer vazamento residual */
	width: 100%;
}

/* linha inferior com brilho, igual ao efeito das linhas do header */
.autores-bottom-line {
	position: relative;
	height: 1px;
	background: linear-gradient(90deg, transparent, #6b5636 20%, #c98f4a 50%, #6b5636 80%, transparent);
	margin-top: 40px;
}

.autores-bottom-line::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45%;
	height: 24px;
	background: radial-gradient(ellipse at center, rgba(255, 199, 122, 0.35) 0%, rgba(255, 199, 122, 0.1) 45%, transparent 75%);
	pointer-events: none;
}

.autores-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
}

/* Cabeçalho "AUTORES" com linhas laterais */
.autores-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.autores-line {
	height: 1px;
	background: linear-gradient(90deg, transparent, #6b5636);
	flex: 5 1 40px;
	min-width: 24px;
}

.autores-header .autores-line:last-child {
	background: linear-gradient(90deg, #6b5636, transparent);
	flex: 1 1 24px;
}

/* abaixo de 870px as linhas ficam desproporcionais (uma bem maior que
   a outra) e o título "AUTORES" parece descentralizado — aqui as duas
   voltam a ter o mesmo tamanho, centralizando o título de novo */
@media (max-width: 870px) {

   .autores-section {
		background: var(--navy-950, #0a0f1c);
	}
	
	.autores-line,
	.autores-header .autores-line:last-child {
		flex: 1 1 0;
	}
}

.autores-title {
	color: #c98f4a;
	font-size: clamp(20px, 3vw, 28px);
	letter-spacing: 5px;
	font-weight: 600;
	white-space: normal;
	text-align: center;
	margin: 0;
}

@media (min-width: 900px) {
	.autores-title {
		white-space: nowrap;
	}
}

/* Grid de itens: colunas de tamanho FIXO e igual, empilha em blocos
   previsíveis (4 → 2 → 1) em vez de recalcular larguras no meio do caminho */
.autores-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 40px;
}

/* os spans de divisor do HTML não entram mais no fluxo do grid */
.autores-divider {
	display: none;
}

.autores-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-width: 0; /* evita que o texto force o item a crescer além da coluna */
}

/* divisor vertical como borda, só faz sentido no layout de 4 colunas */
@media (min-width: 1280px) {
	.autores-item:not(:nth-child(4n+1)) {
		border-left: 1px solid rgba(201, 143, 74, 0.25);
		padding-left: 24px;
	}
}

/* Tablet: 2 colunas fixas e iguais.
   Vai até 1279px porque abaixo disso as 4 colunas ficam apertadas
   demais e forçam hifenização feia em palavras como "APLICAÇÕES" */
@media (max-width: 1279px) and (min-width: 601px) {
	.autores-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}
}

.autores-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c98f4a;
}

.autores-icon svg {
	width: 100%;
	height: 100%;
}

.autores-content {
	min-width: 0;
}

.autores-content h3 {
	color: #c98f4a;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.3;
	letter-spacing: 1px;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}

.autores-content p {
	color: #d7d2c8;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: 1px;
	margin: 0;
	opacity: 0.85;
	overflow-wrap: break-word;
}

/* Responsivo */
@media (max-width: 600px) {
	.autores-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.autores-header {
		gap: 12px;
	}

	.autores-icon {
		width: 52px;
		height: 52px;
	}

	.autores-content h3 {
		font-size: 15px;
	}

	.autores-content p {
		font-size: 14px;
	}
}