*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	color: #3a2a1e;
	overflow: hidden;
}

/* ── Página ── */
.home {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: clamp(28px, 5vh, 60px) 40px clamp(20px, 3vh, 40px);
	gap: clamp(20px, 3vh, 44px);
	overflow: hidden;
}

/* ── Background em camada fixa do tamanho da viewport ──
   background-size: 100% 100% mostra a imagem INTEIRA (incluindo a faixa de baixo),
   preenchendo a tela sem cortar. A imagem é 16:9; como a viewport quase nunca é
   exatamente 16:9, há uma distorção mínima — imperceptível neste mármore.
   'fixed' mantém a camada colada à viewport (estável na rolagem do mobile). */
.home::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #f1ebe1 url('assets/backgrounds/bg-home.png') center center / 100% 100% no-repeat;
}

/* ── Header ── */
.home__header {
	display: flex;
	justify-content: center;
	width: 100%;
}

.logo-empreendimento {
	width: clamp(240px, 26vw, 420px);
	height: auto;
}

/* ── Grid de cards ──
   1 coluna esquerda (mais larga) com 2 cards horizontais empilhados + 3 colunas
   verticais à direita. align-items: stretch faz todas as colunas terem a MESMA
   altura, o que alinha os rótulos inferiores. */
.cards {
	/* flex: 0 1 auto → o bloco de cards tem altura do CONTEÚDO (não estica na vertical);
	   o space-between do .home centraliza o bloco entre header e footer. */
	flex: 0 1 auto;
	min-height: 0;
	display: grid;
	/* proporção das colunas: horizontal : vertical = 740 : 283 = 2.615 : 1 */
	grid-template-columns: 2.615fr repeat(3, 1fr);
	gap: clamp(14px, 1.8vw, 30px);
	width: 100%;
	/* teto = 740 + 3×283 + 3×30 de gap → cards no tamanho-alvo em telas grandes */
	max-width: 1680px;
	align-items: stretch;
}

/* ── Card base ── */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: #3a2a1e;
	min-height: 0;
	gap: clamp(8px, 1.4vh, 16px);
}

/* Área da imagem — preenche a altura disponível da coluna (média cortada por object-fit) */
.card__media {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 12px 34px rgba(58, 34, 18, 0.24);
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

/* Cards horizontais: proporção fixa 740 : 210 (igual à arte exportada, 1480×420).
   Define a altura da coluna esquerda e, por consequência (align-items: stretch),
   a dos verticais — que ficam em ~283 : 488. */
.card--wide .card__media {
	flex: none;
	aspect-ratio: 740 / 210;
}

/* Label abaixo da imagem */
.card__label {
	text-align: center;
	font-size: clamp(12px, 1vw, 17px);
	font-weight: 600;
	letter-spacing: 0.18em;
	color: #74441E;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

/* ── Coluna esquerda: dois cards horizontais empilhados ──
   space-between joga qualquer sobra de altura da coluna para o vão do meio,
   mantendo o rótulo de ÁREAS DE LAZER na base — alinhado aos 3 verticais. */
.cards-stack {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(14px, 1.8vw, 30px);
	min-height: 0;
}

.cards-stack .card {
	/* intrínseco: altura = mídia (aspect fixo) + rótulo */
	flex: none;
	min-height: 0;
}

/* ── Card ativo ── */
.card--active {
	cursor: pointer;
	transition: transform 0.3s;
}

.card--active .card__media {
	transition: box-shadow 0.3s;
}

.card--active:hover {
	transform: translateY(-5px);
}

.card--active:hover .card__media {
	box-shadow: 0 22px 56px rgba(58, 34, 18, 0.4);
}

.card--active:hover .card__img {
	transform: scale(1.05);
}

/* ── Card desativado (em breve) ── */
.card--disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.card--disabled .card__img {
	filter: grayscale(35%);
}

/* Badge "Em breve" sobre a imagem */
.card__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(58, 34, 18, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3px;
	padding: 8px 18px;
	font-size: clamp(10px, 0.85vw, 13px);
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
	backdrop-filter: blur(4px);
}

/* ── Footer ── */
.home__footer {
	display: flex;
	justify-content: center;
	width: 100%;
}

.logo-construtora {
	width: clamp(150px, 16vw, 260px);
	max-width: 70vw;
	height: auto;
	opacity: 0.92;
	/* sobe o logo da construtora (aumente p/ subir mais; diminua p/ descer) */
	margin-bottom: clamp(12px, 3vh, 40px);
}

/* ────────────────────────────────
   Responsivo — 4K (≥ 2560px)
──────────────────────────────── */
@media (min-width: 2560px) {
	.cards {
		/* mantém o teto p/ os cards não crescerem além do tamanho-alvo em 4K */
		max-width: 1750px;
	}
}

/* ────────────────────────────────
   Responsivo — Tablet / paisagem estreita (≤ 1024px)
   Reflui para layout rolável (não cabe tudo em uma tela).
──────────────────────────────── */
@media (max-width: 1024px) {
	html {
		height: auto;
	}

	body {
		height: auto;
		overflow-y: auto;
	}

	.home {
		height: auto;
		min-height: 100%;
		overflow: visible;
		justify-content: flex-start;
		padding: 32px 24px;
		gap: 26px;
	}

	/* fora do 16:9 (tablet/celular) o 100% 100% distorceria demais → volta p/ cover
	   ancorado na base (sem distorção; a faixa de baixo continua visível) */
	.home::before {
		background-size: cover;
		background-position: center bottom;
	}

	.cards {
		flex: none;
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
		gap: 20px;
	}

	/* fora do desktop a mídia volta a ter proporção fixa (não preenche altura) */
	.card__media {
		flex: none;
		aspect-ratio: 283 / 488;
	}

	.card--wide .card__media {
		aspect-ratio: 740 / 210;
	}

	/* os 2 cards horizontais ocupam a largura toda, empilhados, acima dos verticais */
	.cards-stack {
		grid-column: 1 / -1;
	}
}

/* ────────────────────────────────
   Responsivo — Mobile (≤ 620px)
──────────────────────────────── */
@media (max-width: 620px) {
	/* As mídias têm proporção fixa (251×75 nos banners, 120×75 na dupla), então o
	   bloco de cards tem altura intrínseca e é centrado no espaço disponível.
	   overflow-y: auto fica como rede de segurança em telas muito baixas. */
	.home {
		height: 100dvh;
		padding: 20px 16px 72px;   /* base inferior reservada p/ o rodapé fixo */
		gap: clamp(14px, 3vh, 32px);  /* espaço logo ↔ 1º card (encolhe em telas baixas) */
		overflow-y: auto;
		justify-content: flex-start;
	}

	.home__header {
		flex: none;
	}

	.logo-empreendimento {
		width: min(48vw, 160px);
	}

	/* Mobile: 3 banners largos (Apartamentos, Áreas de Lazer, Vista dos Andares) e,
	   na última linha, Localização + Implantação lado a lado. A ordem do DOM já é
	   essa, então basta 2 colunas com os banners ocupando a linha inteira.
	   Imagens usam a versão -mob (753×225 nos banners, 360×225 na dupla). */
	.cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		/* 11 / 251 → a dupla fecha exatamente a largura de um banner (120 + 120) */
		column-gap: 4.4%;
		row-gap: clamp(8px, 1.6vh, 16px);
		/* Escala com o aparelho — sem teto fixo em px.
		   1) 84% da largura útil → ~77% da tela, como na referência.
		   2) O bloco tem altura ≈ 1.2 × largura + folgas/legendas (~22dvh + 131px),
		      então (65.3dvh − 110px) é a maior largura que ainda cabe na altura
		      livre; só entra em ação em telas baixas (paisagem, aparelhos curtos).
		   3) Piso de 200px: abaixo disso é melhor rolar do que encolher demais. */
		width: min(84%, max(200px, calc(65.3dvh - 110px)));
		margin-inline: auto;
		align-self: center;
		flex: 1 1 auto;            /* ocupa a altura disponível */
		min-height: 0;
		align-content: center;     /* bloco centrado entre o logo e o rodapé */
	}

	/* Banners ocupam a linha inteira; a dupla divide a última linha */
	.cards-stack,
	.card--vistas {
		grid-column: 1 / -1;
	}

	.card {
		gap: clamp(5px, 1vh, 10px);
	}

	/* Banner largo — 251 × 75 */
	.card__media,
	.card--wide .card__media {
		flex: none;
		aspect-ratio: 251 / 75;
		height: auto;
		border-radius: 14px;
	}

	/* Dupla da última linha — 120 × 75 */
	.card--localizacao .card__media,
	.card--implantacao .card__media {
		aspect-ratio: 120 / 75;
	}

	.card picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	.card__img {
		height: 100%;
		object-fit: cover;
	}

	/* Apartamentos e Áreas de Lazer viram 2 banners empilhados (mesmo ritmo das
	   demais linhas) */
	.cards-stack {
		display: flex;
		flex-direction: column;
		gap: clamp(8px, 1.6vh, 16px);
		width: 100%;
	}

	.cards-stack .card {
		flex: none;
		min-width: 0;
		min-height: 0;
	}

	.card__label {
		flex: none;
		font-size: clamp(11px, 1.6vh, 13px);
		letter-spacing: 0.12em;
	}

	/* Legenda um pouco menor nos 2 cards estreitos, p/ "IMPLANTAÇÃO 3D" caber */
	.card--localizacao .card__label,
	.card--implantacao .card__label {
		font-size: clamp(10px, 1.4vh, 12px);
		letter-spacing: 0.06em;
	}

	.card--active:hover {
		transform: none;
	}

	.card--active:hover .card__img {
		transform: none;
	}

	/* Rodapé (logo construtora) ancorado no FUNDO DA TELA, não após o último card */
	.home__footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: 38px;
		pointer-events: none;
		z-index: 5;
	}

	.logo-construtora {
		width: min(62vw, 210px);
		margin-bottom: 0;
	}
}