/*
 * Instalados (Instalados.dc.html, InstaladosMobile.dc.html): fotos em colunas
 * e a foto ampliada. Celular primeiro; o computador começa em 900px.
 */

.ir-instalados {
	padding-top: 12px;
	padding-bottom: 32px;
}

.ir-instalados__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.ir-instalados__cabeca {
	flex: 1 1 420px;
}

.ir-instalados__titulo {
	margin: 0;
	font-size: 26px;
	font-weight: var(--ir-peso-fino);
	line-height: 1.1;
}

.ir-instalados__titulo strong {
	font-weight: var(--ir-peso-destaque);
}

.ir-instalados__intro {
	max-width: 560px;
	margin: 10px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 14px;
	line-height: 1.6;
}

.ir-instalados__nota {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 14px;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave-2);
	font-size: 13px;
}

.ir-instalados__nota-total {
	color: var(--ir-cor-secundaria);
}

/*
 * Colunas no estilo "alvenaria", com as alturas do mockup em sequência de 10
 * (a foto é recortada para caber; a ampliada mostra a foto inteira). Com as
 * proporções reais, as colunas ficavam com vãos de até 450px.
 */
.ir-instalados__grade {
	columns: 2;
	column-gap: 10px;
	--ir-foto-1: 240px;
	--ir-foto-2: 180px;
	--ir-foto-3: 210px;
	--ir-foto-4: 180px;
	--ir-foto-5: 240px;
	--ir-foto-6: 200px;
	--ir-foto-7: 220px;
	--ir-foto-8: 180px;
	--ir-foto-9: 210px;
	--ir-foto-10: 190px;
}

.ir-instalados__item:nth-child(10n+1) { --ir-foto: var(--ir-foto-1); }
.ir-instalados__item:nth-child(10n+2) { --ir-foto: var(--ir-foto-2); }
.ir-instalados__item:nth-child(10n+3) { --ir-foto: var(--ir-foto-3); }
.ir-instalados__item:nth-child(10n+4) { --ir-foto: var(--ir-foto-4); }
.ir-instalados__item:nth-child(10n+5) { --ir-foto: var(--ir-foto-5); }
.ir-instalados__item:nth-child(10n+6) { --ir-foto: var(--ir-foto-6); }
.ir-instalados__item:nth-child(10n+7) { --ir-foto: var(--ir-foto-7); }
.ir-instalados__item:nth-child(10n+8) { --ir-foto: var(--ir-foto-8); }
.ir-instalados__item:nth-child(10n+9) { --ir-foto: var(--ir-foto-9); }
.ir-instalados__item:nth-child(10n) { --ir-foto: var(--ir-foto-10); }

/*
 * Com JavaScript (instalados.js), cada foto vai para a coluna mais curta e a
 * última de cada coluna estica até todas terminarem juntas. O script lê as
 * colunas e a largura mínima destas variáveis.
 */
.ir-instalados__grade {
	--ir-colunas: 2;
	--ir-coluna-min: 0px;
}

.ir-instalados__grade.is-alvenaria {
	position: relative;
	columns: auto;
}

.ir-instalados__grade.is-alvenaria .ir-instalados__item {
	position: absolute;
	margin: 0;
}

.ir-instalados__item {
	margin: 0 0 10px;
	break-inside: avoid;
}

.ir-instalados__foto {
	display: block;
	border-radius: var(--ir-raio-botao);
	cursor: zoom-in;
}

.ir-instalados__foto img {
	display: block;
	width: 100%;
	height: var(--ir-foto, 220px);
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo-suave);
	object-fit: cover;
}

.ir-instalados__foto:focus-visible {
	outline: 2px solid var(--ir-preto);
	outline-offset: 3px;
}

.ir-instalados__vazio {
	margin: 0;
	padding: 32px 0;
	color: var(--ir-cor-secundaria);
	font-size: 15px;
}

.ir-instalados__mande {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 24px;
	padding: 22px 18px;
	border: 1.5px solid var(--ir-whatsapp);
	border-radius: 24px;
}

.ir-instalados__mande > div {
	flex: 1 1 360px;
}

.ir-instalados__mande-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: var(--ir-peso-fino);
}

.ir-instalados__mande-titulo strong {
	font-weight: var(--ir-peso-destaque);
}

.ir-instalados__mande p {
	margin: 6px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 14px;
}

.ir-instalados__mande .ir-botao {
	flex: 0 1 auto;
	min-height: 54px;
	padding: 0 22px;
	font-size: 13px;
}

.ir-instalados__tom {
	display: flex;
	width: 100%;
	margin-top: 16px;
}

/* ---------- Foto ampliada ---------- */

.ir-ampliada {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 16px;
	border: 0;
	background: transparent;
	color: var(--ir-fundo);
}

.ir-ampliada[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

/* Fundo escuro só atrás da foto ampliada, como no mockup (a foto em si não leva película). */
.ir-ampliada::backdrop {
	background: rgba(17, 17, 17, 0.92);
}

.ir-ampliada__fechar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--ir-raio-pilula);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	cursor: pointer;
}

.ir-ampliada__foto {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 74vh;
	border-radius: 16px;
	object-fit: contain;
}

.ir-ampliada__navegacao {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
}

.ir-ampliada__seta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--ir-fundo);
	border-radius: var(--ir-raio-pilula);
	background: transparent;
	color: var(--ir-fundo);
	cursor: pointer;
}

.ir-ampliada__seta[hidden] {
	display: none;
}

.ir-ampliada__fechar .ir-icone,
.ir-ampliada__seta .ir-icone {
	width: 20px;
	height: 20px;
}

.ir-ampliada :focus-visible {
	outline: 2px solid var(--ir-fundo);
	outline-offset: 3px;
}

.ir-ampliada__posicao {
	min-width: 56px;
	text-align: center;
}

/* ---------- Computador ---------- */

@media (min-width: 900px) {
	.ir-instalados {
		padding-bottom: 72px;
	}

	.ir-instalados__topo {
		margin: 12px 0 28px;
	}

	.ir-instalados__titulo {
		font-size: 40px;
	}

	.ir-instalados__intro {
		font-size: 16px;
	}

	.ir-instalados__grade {
		columns: 3 300px;
		column-gap: 16px;
		--ir-colunas: 3;
		--ir-coluna-min: 300px;
		--ir-foto-1: 420px;
		--ir-foto-2: 300px;
		--ir-foto-3: 360px;
		--ir-foto-4: 300px;
		--ir-foto-5: 420px;
		--ir-foto-6: 340px;
		--ir-foto-7: 380px;
		--ir-foto-8: 300px;
		--ir-foto-9: 360px;
		--ir-foto-10: 320px;
	}

	.ir-instalados__item {
		margin-bottom: 16px;
	}

	.ir-instalados__foto,
	.ir-instalados__foto img {
		border-radius: var(--ir-raio-card);
	}

	.ir-instalados__mande {
		margin-top: 40px;
		padding: 36px 40px;
	}

	.ir-instalados__mande-titulo {
		font-size: 24px;
	}
}