/**
 * Home gateway (/) — layout de tela cheia, sem scroll, em qualquer altura de
 * viewport (a pedido do cliente: só header + 2 cards + rodapé, nada rola).
 *
 * O resto do site usa espaçamentos fixos (rem) porque as páginas normais têm
 * conteúdo variável e scroll é esperado. Aqui não — então cada consumidor
 * fixo de altura vertical (padding do header-gateway, do hub, do rodapé, a
 * margem do bloco de heading, e a altura dos cards) vira clamp()/dvh, pra
 * encolher em telas baixas em vez de estourar a viewport.
 *
 * `body.home` é a classe que o WordPress já adiciona automaticamente na
 * home — nenhuma outra página tem essa classe, então isso não vaza pro
 * resto do site.
 */

body.home {
	height: 100dvh;
	overflow: hidden;
}

body.home .wp-site-blocks {
	display: flex;
	flex-direction: column;
	height: 100dvh;
}

body.home .wp-site-blocks > header,
body.home .wp-site-blocks > footer {
	flex: 0 0 auto;
}

body.home .wp-site-blocks > main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	margin-top: 0 !important;
}

/* Header e rodapé da gateway usam padding fixo (2.5rem / 1rem) — precisa
   encolher em telas baixas, senão sobra pouco espaço pros cards. */
body.home .wp-site-blocks > header > .wp-block-group {
	padding-top: clamp(0.5rem, 3dvh, 2.5rem) !important;
	padding-bottom: clamp(0.5rem, 3dvh, 2.5rem) !important;
}

body.home .coisasdecasa-footer--gateway {
	padding-top: clamp(0.375rem, 1.5dvh, 1rem) !important;
	padding-bottom: clamp(0.375rem, 1.5dvh, 1rem) !important;
}

/* Seção do hub (coisasdecasa/linha-hub) — mesmo raciocínio pro padding fixo
   do pattern e pra margem do bloco de heading. */
body.home .coisasdecasa-linha-hub {
	padding-top: clamp(0.75rem, 3dvh, 4rem) !important;
	padding-bottom: clamp(0.75rem, 3dvh, 4rem) !important;
}

body.home .coisasdecasa-linha-hub > .wp-block-group:first-child {
	margin-bottom: clamp(0.5rem, 2dvh, 32px) !important;
}

body.home .coisasdecasa-linha-hub h2 {
	font-size: clamp(1.125rem, 3dvh, 1.75rem);
	margin: 0;
}

body.home .coisasdecasa-linha-hub p {
	font-size: clamp(0.8125rem, 2dvh, 1rem);
	margin: 0;
}

/* Cards — no resto do site a largura define a altura (aspect-ratio). Aqui
   inverte: a altura vem de dvh (encolhe em tela baixa) e a largura segue a
   proporção, senão os cards nunca diminuem numa viewport baixa. */
body.home .coisasdecasa-linha-hub__grid {
	justify-content: center;
	align-items: center;
	row-gap: clamp(0.5rem, 2dvh, 1.5rem);
}

body.home .coisasdecasa-linha-card {
	flex: 0 1 auto;
	height: clamp(140px, 38dvh, 340px);
	width: min(90vw, calc(clamp(140px, 38dvh, 340px) * 5 / 3));
	aspect-ratio: 5 / 3;
}

/* Logo da pre-home maior que a do header padrão. */
body.home .coisasdecasa-logo__badge {
	height: 112px;
	transform: rotate(-20deg);
}

body.home .coisasdecasa-logo__word {
	font-size: 1.888rem;
}

/* <600px de largura os cards empilham (regra já existente em
   linha-hub.css) — o orçamento de altura por card cai, porque agora são 2
   cards na vertical dividindo o mesmo espaço, não 1 linha só. */
@media (max-width: 600px) {
	body.home .coisasdecasa-linha-card {
		height: clamp(150px, 27dvh, 240px);
		width: min(90vw, 420px);
		aspect-ratio: auto;
	}

	body.home .coisasdecasa-linha-card__body {
		padding: 1rem 1.25rem 1.25rem;
	}

	body.home .coisasdecasa-linha-card__icon {
		display: none;
	}

	body.home .coisasdecasa-linha-card__body h3 {
		font-size: 1.125rem;
		margin-bottom: 0.25rem;
	}

	body.home .coisasdecasa-linha-card__body p {
		font-size: 0.8125rem;
		line-height: 1.35;
		margin-bottom: 0.625rem;
	}

	body.home .coisasdecasa-linha-card__cta {
		padding: 0.45rem 1.1rem;
		font-size: 0.8125rem;
	}

	/* Logo menor e centralizada no mobile. */
	body.home .coisasdecasa-logo {
		justify-content: center;
		gap: 0.5rem;
	}

	body.home .coisasdecasa-logo__badge {
		height: 72px;
	}

	body.home .coisasdecasa-logo__word {
		font-size: 1.5rem;
	}
}