/**
 * Home
 *
 * Carregada só na página inicial e nas páginas de dor. O que é reusado
 * fora daqui — catálogo, régua, tabela de linhas, seção — vive em
 * componentes.css, porque o arquivo de soluções também usa.
 *
 * Estrutura e ritmo apenas: a direção visual entra pelos tokens.
 */

/* ---------------------------------------------------------------------
 * Abertura
 *
 * Texto e foto empilham no celular e dividem a largura no desktop. A foto
 * preenche a célula inteira, sem respiro interno — é a regra do catálogo
 * e vale aqui também.
 * ------------------------------------------------------------------ */

.abertura {
	display: grid;
	gap: var(--e-9) var(--e-8);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--secao-y);
}

@media (min-width: 60rem) {
	.abertura {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * Sem foto, a abertura volta a ser uma coluna só. Em duas colunas com a
	 * direita vazia, a página abre com metade da tela em branco — que lê
	 * como erro de carregamento, não como respiro.
	 */
	.abertura--sem-foto {
		grid-template-columns: minmax(0, 1fr);
	}
}

.abertura--sem-foto .abertura__titulo {
	max-width: 22ch;
}

.abertura__titulo {
	margin-top: var(--e-5);
	max-width: 18ch;
	font-size: var(--t-3xl);
}

.abertura__chamada,
.abertura__prosa {
	margin-top: var(--e-6);
	max-width: 52ch;
	font-size: var(--t-md);
	color: var(--texto-2);
}

.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	margin-top: var(--e-7);
}

.abertura__foto {
	margin: 0;
	min-width: 0;
}

.abertura__foto img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--superficie);
	box-shadow: var(--fio-interno);
}

.abertura__foto figcaption {
	margin-top: var(--e-3);
	max-width: 62ch;
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	color: var(--texto-3);
}

/* ---------------------------------------------------------------------
 * Banda escura — obras
 *
 * A única inversão de papel da página. Sangra de borda a borda, porque a
 * foto de obra precisa de largura para não virar miniatura.
 * ------------------------------------------------------------------ */

.banda {
	margin-top: var(--secao-y);
	padding-block: var(--secao-y);
	background: var(--contra-fundo);
	color: var(--contra-mudo);

	/*
	 * A banda escapa da faixa e vai de borda a borda.
	 *
	 * O .home tem largura máxima e respiro lateral; a margem negativa leva a
	 * banda até a borda da janela e o padding devolve o conteúdo exatamente
	 * para onde ele estava. O par 50%/50vw é o que mantém o alinhamento com
	 * o resto da página em qualquer largura.
	 */
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

.banda .secao__titulo,
.banda .cartao__titulo {
	color: var(--contra-texto);
}

.banda .cartao__meta {
	color: var(--contra-mudo);
}

.banda .secao__topo {
	margin-bottom: var(--bloco-y);
}

.obras {
	display: grid;
	gap: var(--e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.obras .cartao,
.obras .cartao__link {
	background: transparent;
	color: inherit;
	text-decoration: none;
}

.obras .cartao__imagem img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Cartão de dor
 *
 * Maior que o item de catálogo de propósito: é a primeira escolha que a
 * pessoa faz, e precisa ser a mais fácil de acertar. Sem sombra e sem
 * deslocamento no hover — a direção aprovada não tem relevo.
 * ------------------------------------------------------------------ */

.grade--dores {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.cartao-dor {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	height: 100%;
	padding: var(--e-6);
	background: var(--fundo-2);
	border-left: var(--borda-forte) solid var(--acento);
	box-shadow: var(--fio-interno);
	text-decoration: none;
	color: inherit;
	transition: background var(--transicao);
}

.cartao-dor:hover {
	background: var(--superficie);
	color: inherit;
}

.cartao-dor__titulo {
	font-size: var(--t-lg);
}

.cartao-dor__texto {
	font-size: var(--t-sm);
	color: var(--texto-2);
}

.cartao-dor__contagem {
	margin-top: auto;
	padding-top: var(--e-3);
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

/* ---------------------------------------------------------------------
 * Outras dores, no pé da página de dor
 * ------------------------------------------------------------------ */

.outras-dores {
	margin-top: var(--secao-y);
	padding-top: var(--bloco-y);
	border-top: var(--borda-fina) solid var(--linha-divisoria);
}

.outras-dores ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
}