/*
 * Home — estilos específicos (carregado só na front page).
 * Reutiliza tokens, base e components; aqui só o que é próprio da Home.
 * Referência: design-reference/HOME.dc.html
 */

/* ---------- Hero ---------- */
.ma-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 64px);
	text-align: center;
}

.ma-hero__title {
	max-width: 960px; /* copy nova é mais longa que a do export (820 px): 960 px mantém 2 linhas no desktop */
	margin: 0;
	font-size: var(--text-display-1);
	line-height: var(--leading-tight);
}

.ma-hero__lead {
	max-width: 640px;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-body-lg);
	line-height: var(--leading-body);
}

/* Busca em destaque: só a borda inferior de 2 px (como no HOME). */
.ma-hero-search {
	display: flex;
	width: 100%;
	max-width: 760px;
	margin-top: 12px;
	border-bottom: var(--index-rule-weight) solid var(--accent-primary);
}

.ma-hero-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 18px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 17px;
	line-height: normal;
	outline: none;
}

.ma-hero-search:focus-within {
	outline: 2px solid var(--focus-ring);
	outline-offset: 4px;
}

.ma-hero-search button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	border: 0;
	background: transparent;
	color: var(--text-secondary);
}

.ma-hero-search button:hover {
	color: var(--accent-primary);
}

.ma-hero__examples {
	display: flex;
	font-size: var(--text-body-sm);
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.ma-hero__examples-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-body-sm);
}

.ma-hero__examples-list li + li {
	margin-top: 0;
}

.ma-hero__examples-list li + li::before {
	content: "\00B7";
	margin-right: var(--space-2);
	color: var(--text-secondary);
}

/* ---------- Grades de cards ---------- */
.ma-grid--intents {
	--ma-grid-min: 280px;
}

.ma-grid--guides {
	--ma-grid-min: 220px;
}

/* Territórios: presença vertical de ~180 px; o CTA desce para a base do card. */
.ma-grid--intents .ma-card {
	min-height: 180px;
}

.ma-grid--intents .ma-card__cta,
.ma-grid--problems .ma-card__cta {
	margin-top: auto;
	padding-top: var(--space-3);
}

/* Problemas: 5 cards sem órfão no desktop amplo (1 / 2 / 3 / 5 colunas). */
.ma-grid--problems {
	--ma-grid-gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ma-grid--problems {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.ma-grid--problems {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.ma-grid--problems {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ---------- Duas colunas (mais buscados / guias atualizados) ---------- */
.ma-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--space-8);
}

.ma-columns__title {
	margin: 0 0 var(--space-6);
}

.ma-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-list__row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
	padding: var(--space-4) 0;
	border-bottom: var(--rule-weight) solid var(--border-default);
}

.ma-list__row + .ma-list__row {
	margin-top: 0;
}

.ma-list__row--split {
	justify-content: space-between;
}

.ma-list__num {
	flex: none;
	width: 32px;
	color: var(--text-primary);
	font-family: var(--font-editorial);
	font-size: 26px;
	line-height: 1;
}

.ma-list__title {
	flex: 1;
	color: var(--text-primary);
	font-size: var(--text-body-sm);
	text-decoration: none;
}

.ma-list__row--split .ma-list__title {
	flex: 0 1 auto;
}

.ma-list__date {
	color: var(--text-secondary);
	font-size: var(--text-label);
	white-space: nowrap;
}

/* ---------- Glossário A-Z ---------- */
.ma-letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-letters__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border: var(--rule-weight) solid var(--border-default);
	background: var(--surface-card);
	color: var(--text-primary);
	font-family: var(--font-editorial);
	font-size: var(--text-body-sm);
}

.ma-letters__item + .ma-letters__item {
	margin-top: 0;
}

/* Letra com verbetes: borda mais firme e letra em Deep Green (sem preencher o tile). */
.ma-letters__item.is-filled {
	border-color: var(--border-strong);
	color: var(--accent-primary);
	font-weight: var(--weight-semibold);
}

/* Letra sem verbetes: componente inativo (tracejado, sem contraste exigido). */
.ma-letters__item.is-empty {
	border-style: dashed;
	background: var(--surface-sunken);
	color: var(--text-tertiary);
}

/* ---------- Autor ---------- */
.ma-section--author {
	padding-block: calc(var(--space-8) + var(--space-4));
}

.ma-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
}

.ma-author__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--surface-sunken);
	color: var(--text-secondary);
	font-size: var(--text-label);
}

.ma-author__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 260px;
}

.ma-author__name {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-editorial);
	font-size: 24px;
	font-weight: var(--weight-regular);
	letter-spacing: 0;
}

.ma-author__bio {
	max-width: 640px;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
}

.ma-author__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
}