/*
 * Página inicial (mockup p00), escopada em .inloft-home. Cor declarada em cada elemento de texto:
 * o Kadence pinta h1–h6, e declaração no elemento vence valor herdado.
 */

.inloft-home {
	--ih-verde: #223829;
	--ih-terracota: #904B2C;
	--ih-terracota-mid: #B35A32;
	--ih-areia: #D4C194;
	--ih-salvia: #BFBB9B;
	--ih-creme: #EAE4D3;
	--ih-offwhite: #F2EEE4;

	--ih-display: var(--inloft-font-display, "Poppins", "Helvetica Neue", Arial, sans-serif);
	--ih-body: var(--inloft-font-body, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	--ih-max: 1200px;

	font-family: var(--ih-body);
	color: var(--ih-verde);
}

/* Sangria total sem criar scroll horizontal. */
.inloft-home__hero,
.inloft-home__regioes,
.inloft-home__colecoes {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── 1. Hero ──────────────────────────────────────────────────────────────── */

.inloft-home__hero {
	position: relative;
	display: grid;
	isolation: isolate;
}

.inloft-home__hero-midia,
.inloft-home__hero-conteudo {
	grid-area: 1 / 1;
}

.inloft-home__hero-midia {
	line-height: 0;
}

/*
 * Briefing: banner a 80% da altura da tela, mostrando o começo do bloco seguinte. svh conta a
 * barra do navegador do celular aberta (o vh é a reserva para navegador antigo); o piso de 320px
 * cabe título, subtítulo e botão no celular deitado. O cover mantém o centro, onde fica o texto.
 */
.inloft-home__hero-img {
	display: block;
	width: 100%;
	height: 80vh;
	height: 80svh;
	min-height: 320px;
	object-fit: cover;
	border-radius: 0;
}

/*
 * Véu para o texto ter contraste. Só o gradiente vertical não chega aos 3:1 e 4,5:1 da WCAG: a
 * foto tem mármore claro bem onde o texto cai. O radial escurece o bloco de texto e solta as
 * laterais, onde a foto tem o que mostrar.
 */
.inloft-home__hero-midia::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(72% 64% at 50% 46%, rgba(34, 56, 41, .80) 0%, rgba(34, 56, 41, .42) 55%, rgba(34, 56, 41, 0) 100%),
		linear-gradient(180deg, rgba(34, 56, 41, .18) 0%, rgba(34, 56, 41, .55) 100%);
	pointer-events: none;
}

.inloft-home__hero-conteudo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 32px 24px;
	text-align: center;
}

.inloft-home__hero-titulo {
	font-family: var(--ih-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 5.5vw, 4rem);
	line-height: 1.1;
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 18px rgba(34, 56, 41, .45);
	text-wrap: balance;
}

.inloft-home__hero-sub {
	font-size: clamp(.95rem, 1.8vw, 1.15rem);
	line-height: 1.5;
	margin: 0;
	/* Branco, igual ao título: em creme o subtítulo não chegava a 4,5:1 sobre a foto. */
	color: #fff;
	text-shadow: 0 1px 12px rgba(34, 56, 41, .5);
}

.inloft-home__hero-cta {
	margin-top: 10px;
	display: inline-block;
	background: var(--ih-creme);
	color: var(--ih-verde);
	font-family: var(--ih-display);
	font-weight: 500;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	padding: 14px 30px;
	border-radius: 0;
	transition: background-color .18s ease, color .18s ease;
}

.inloft-home__hero-cta:hover,
.inloft-home__hero-cta:focus {
	background: var(--ih-terracota);
	color: var(--ih-creme);
}

/* ── Títulos de seção ─────────────────────────────────────────────────────── */

.inloft-home__secao-titulo {
	font-family: var(--ih-display);
	font-weight: 400;
	font-size: clamp(1.15rem, 2.6vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: .16em;
	line-height: 1.3;
	margin: 0 0 12px;
	color: var(--ih-verde);
}

/* Briefing: título inteiro em Poppins Regular, sem bold. O <strong> fica pela semântica. */
.inloft-home__secao-titulo strong {
	font-weight: 400;
}

/* ── 2. Empreendimentos ───────────────────────────────────────────────────── */

.inloft-home__emp {
	max-width: var(--ih-max);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) 24px;
	text-align: center;
}

.inloft-home__emp-lead {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 auto clamp(32px, 4vw, 48px);
	max-width: 56ch;
	color: rgba(34, 56, 41, .78);
}

.inloft-home__emp-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	text-align: left;
}

/*
 * Acima de 480px a trilha tem teto de 300px: com 1fr, poucos cards esticavam até a largura do
 * contêiner e, em 4:5, passavam da altura da tela. O auto-fit colapsa as trilhas vazias e o
 * center centraliza o que existe. 481 é o mesmo corte do home.js; abaixo, carrossel.
 */
@media (min-width: 481px) {
	.inloft-home__emp-lista {
		grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
		justify-content: center;
	}
}

/* ── Celular: carrossel horizontal ────────────────────────────────────────── */

/*
 * Até 480px: carrossel de um card por tela, centralizado, com 40px do próximo à mostra
 * (calha 52 − gap 12). A margem de −24px cancela o padding da seção, o padding de 52px vira a
 * calha e o 100% do card é o content box do scroller: centralização exata, inclusive no primeiro
 * e no último card. vw não serve: conta a barra de rolagem e desalinharia em janela estreita.
 */
@media (max-width: 480px) {
	.inloft-home__emp-lista {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;

		margin-inline: -24px;
		padding-inline: 52px;
		scroll-padding-inline: 52px;

		/* overflow-x torna o overflow-y auto; os 6px impedem o corte do anel de foco do card. */
		padding-block: 6px;

		scrollbar-width: none;
	}

	.inloft-home__emp-lista::-webkit-scrollbar {
		display: none;
	}

	.inloft-home__emp-card {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	/* `translateY` no hover não existe no toque e briga com o snap. */
	.inloft-home__emp-card:hover {
		transform: none;
	}
}

/* ── Carrossel de desktop: setas e bolinhas ───────────────────────────────── */

/* Setas e bolinhas só aparecem quando o home.js encontra mais de uma página. */
.inloft-home__emp-carrossel {
	position: relative;
}

/* Acima de ~1200px a seta cai na calha ao lado dos cards; abaixo, encosta no card — por isso
   fundo sólido e borda. */
.inloft-home__emp-seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;

	background: var(--ih-creme);
	color: var(--ih-verde);
	border: 1px solid var(--ih-salvia);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.inloft-home__emp-seta--ant {
	left: -4px;
}

.inloft-home__emp-seta--prox {
	right: -4px;
}

/* O button:hover/:focus/:active do Kadence (0,1,1) acrescentaria a sombra dele. */
.inloft-home__emp-seta:hover,
.inloft-home__emp-seta:focus,
.inloft-home__emp-seta:active {
	box-shadow: none;
}

.inloft-home__emp-seta:hover,
.inloft-home__emp-seta:focus-visible {
	background: var(--ih-terracota);
	color: var(--ih-creme);
}

.inloft-home__emp-seta:disabled {
	opacity: .4;
	cursor: default;
}

.inloft-home__emp-seta:disabled:hover {
	background: var(--ih-creme);
	color: var(--ih-verde);
}

.inloft-home__emp-paginas {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 20px;
}

/* O botão tem 44px de alvo de toque; a bolinha visível de 9px é o ::before. */
.inloft-home__emp-pagina {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Sem isto, o button:hover/:focus/:active do Kadence (0,1,1) pinta o alvo de 28×44 de laranja,
   e o :focus deixa assim depois do clique. */
.inloft-home__emp-pagina:hover,
.inloft-home__emp-pagina:focus,
.inloft-home__emp-pagina:active {
	background: none;
	box-shadow: none;
}

.inloft-home__emp-pagina::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ih-salvia);
	transition: background-color .18s ease, transform .18s ease;
}

.inloft-home__emp-pagina[aria-current="true"]::before {
	background: var(--ih-terracota);
	transform: scale(1.25);
}

.inloft-home__emp-pagina:hover::before,
.inloft-home__emp-pagina:focus-visible::before {
	background: var(--ih-terracota);
}

/*
 * Card inteiro clicável por link esticado: o ::after do botão do rodapé cobre o card. Continua um
 * link por card (envolver tudo num <a> aninharia âncoras). Corpo e imagem são static, então o
 * inset: 0 resolve contra este relative.
 */
.inloft-home__emp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ih-offwhite);
	border: 1px solid var(--ih-salvia);
	border-radius: 0;
	overflow: hidden;
	transition: transform .18s ease;
}

.inloft-home__emp-card:hover {
	transform: translateY(-2px);
}

.inloft-home__emp-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Com o card inteiro clicável, o texto do botão responde ao hover do card todo. */
.inloft-home__emp-card:hover .inloft-home__emp-btn {
	color: var(--ih-terracota-mid);
}

/* O anel vai para o card, que é o alvo. Sem :has(), a regra cai e o botão fica com o anel do
   mu-plugin de tipografia. */
.inloft-home__emp-card:has(.inloft-home__emp-btn:focus-visible) {
	outline: 2px solid var(--ih-terracota);
	outline-offset: 2px;
}

/* Obrigatório: o display de autor vence o [hidden] do navegador. Sem isto, card, setas e bolinhas
   escondidos pelo home.js seguem na tela e no Tab. */
.inloft-home__emp-card[hidden],
.inloft-home__emp-seta[hidden],
.inloft-home__emp-paginas[hidden] {
	display: none;
}

/*
 * A proporção fica no invólucro, não só na foto: a regra de baixo usa combinador filho, e um
 * <picture> ou wrapper de lazy-load em volta da <img> devolveria a altura ao arquivo original.
 * Também segura o card de foto apagada (vira texto alternativo) sem esticar os vizinhos da linha.
 */
.inloft-home__emp-img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.inloft-home__emp-img > img,
.inloft-home__emp-img > .inloft-ph {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

.inloft-home__emp-corpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	flex: 1;
}

.inloft-home__emp-eyebrow {
	font-family: var(--ih-display);
	font-size: .6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0;
	color: var(--ih-terracota);
}

.inloft-home__emp-nome {
	font-family: var(--ih-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0;
	color: var(--ih-verde);
}

/* Sem text-transform: o rótulo já sai certo de inloft_child_regiao_rotulo() ("Barra da Tijuca"),
   e capitalize poria de volta a maiúscula no conectivo. */
.inloft-home__emp-regiao {
	font-size: .875rem;
	margin: 0;
	color: rgba(34, 56, 41, .72);
}

/* margin-top: auto alinha o botão no rodapé de todos os cards da linha; o respiro vem do padding,
   porque outro margin-top anularia o auto. */
.inloft-home__emp-btn {
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--ih-display);
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.5;
	color: var(--ih-terracota);
	text-decoration: none;
	border-top: 1px solid var(--ih-salvia);
	transition: color .18s ease;
}

.inloft-home__emp-btn:hover,
.inloft-home__emp-btn:focus {
	color: var(--ih-terracota-mid);
}

/* ── 3. Regiões (bloco verde) ─────────────────────────────────────────────── */

.inloft-home__regioes {
	background: var(--ih-verde);
	padding: clamp(48px, 7vw, 88px) 24px;
	text-align: center;
}

.inloft-home__regioes-titulo {
	font-family: var(--ih-display);
	font-weight: 400;
	font-size: clamp(1.2rem, 2.8vw, 1.75rem);
	line-height: 1.35;
	margin: 0 auto clamp(32px, 4vw, 48px);
	color: var(--ih-creme);
	text-wrap: balance;
}

.inloft-home__circulos {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--ih-max);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(20px, 4vw, 48px);
}

.inloft-home__circulo {
	flex: 0 1 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.inloft-home__circulo-titulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(130px, 17vw, 168px);
	height: clamp(130px, 17vw, 168px);
	padding: 16px;
	border-radius: 50%;
	font-family: var(--ih-body);
	font-weight: 400;
	font-size: .8125rem;
	letter-spacing: var(--inloft-btn-tracking, .15em);
	line-height: 1.35;
	text-align: center;
}

/*
 * Briefing: todo círculo em #904B2C, com ou sem empreendimento, e sem trocar de cor no hover —
 * a interação fica nos nomes abaixo. O grupo vazio continua dizendo "em breve" embaixo.
 */
.inloft-home__circulo .inloft-home__circulo-titulo {
	background: var(--ih-terracota);
	color: var(--ih-creme);
}

.inloft-home__circulo-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

/*
 * Briefing: o nome é texto solto, sem a caixa em volta, e o hover só sublinha — mesma cor e
 * mesma fonte. O padding vertical fica para o alvo de toque no celular.
 */
.inloft-home__circulo-lista a {
	display: block;
	padding: 6px 0;
	font-size: .8125rem;
	color: var(--ih-creme);
	text-decoration: none;
	text-underline-offset: 4px;
}

.inloft-home__circulo-lista a:hover,
.inloft-home__circulo-lista a:focus {
	color: var(--ih-creme);
	text-decoration: underline;
}

.inloft-home__circulo-vazio {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(234, 228, 211, .5);
}

/* ── 4. Coleções (bloco terracota) ────────────────────────────────────────── */

.inloft-home__colecoes {
	background: var(--ih-terracota);
}

.inloft-home__colecoes-link {
	position: relative;
	display: grid;
	isolation: isolate;
	text-decoration: none;
}

.inloft-home__colecoes-midia,
.inloft-home__colecoes-texto {
	grid-area: 1 / 1;
}

.inloft-home__colecoes-midia {
	line-height: 0;
}

.inloft-home__colecoes-img {
	display: block;
	width: 100%;
	height: clamp(240px, 34vw, 420px);
	object-fit: cover;
	border-radius: 0;
}

/*
 * Véu em duas camadas: terracota 28% + scrim radial #472617 atrás do texto. Só terracota não
 * chega a 4,5:1 sem apagar o moodboard. background-color e background-image separados: o hover
 * troca só a cor, e o atalho background apagaria o scrim.
 */
.inloft-home__colecoes-midia::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(144, 75, 44, .28);
	background-image: radial-gradient(72% 64% at 50% 50%,
		rgba(71, 38, 23, .58) 0%, rgba(71, 38, 23, .28) 55%, rgba(71, 38, 23, 0) 100%);
	pointer-events: none;
	transition: background-color .25s ease;
}

.inloft-home__colecoes-link:hover .inloft-home__colecoes-midia::after {
	background-color: rgba(144, 75, 44, .42);
}

.inloft-home__colecoes-texto {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Sem gap: o respiro até a moldura é o margin-top do título, em em, que acompanha o clamp()
	   da fonte; um gap fixo sobrava no celular. */
	padding: 24px;
	text-align: center;
}

/* Briefing: a frase vira o título do bloco, em Poppins Regular. Ela também nomeia a seção
   (aria-labelledby). */
.inloft-home__colecoes-eyebrow {
	font-family: var(--ih-display);
	font-size: clamp(1.15rem, 2.6vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
	max-width: 26ch;
	color: #fff;
	text-shadow: 0 2px 14px rgba(71, 38, 23, .5);
}

/* Moldura da marca (1px creme, medida no mockup p00), hoje CTA do bloco (briefing): botão padrão,
   caixa alta a .15em, hover laranja. */
.inloft-home__colecoes-titulo {
	font-family: var(--inloft-btn-font, var(--ih-body));
	font-size: clamp(.8125rem, 1.2vw, 1rem);
	font-weight: var(--inloft-btn-weight, 400);
	text-transform: uppercase;
	letter-spacing: var(--inloft-btn-tracking, .15em);
	color: #fff;
	text-shadow: 0 2px 18px rgba(71, 38, 23, .5);
	border: 1px solid var(--ih-creme);
	padding: .9em 1.6em;
	margin-top: 1.5em;
	transition: background-color .18s ease, border-color .18s ease;
}

.inloft-home__colecoes-link:hover .inloft-home__colecoes-titulo,
.inloft-home__colecoes-link:focus-visible .inloft-home__colecoes-titulo {
	background-color: var(--inloft-btn-hover-bg, #904B2C);
	border-color: var(--inloft-btn-hover-bg, #904B2C);
	text-shadow: none;
}

/* ── 5. Vídeo da fundadora ────────────────────────────────────────────────── */

.inloft-home__video {
	max-width: var(--ih-max);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) 24px;
}

/* Linha de cima: título + botão | descrição. O vídeo vem embaixo, na largura toda. */
.inloft-home__video-topo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 56px);
	align-items: start;
	margin-bottom: clamp(24px, 4vw, 40px);
}

.inloft-home__video-titulo {
	font-family: var(--ih-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 14px;
	color: var(--ih-verde);
}

.inloft-home__video-desc {
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
	color: rgba(34, 56, 41, .8);
	max-width: 42ch;
}

/* Botão padrão, vazado: borda fina, SF Pro em caixa alta a .15em, hover laranja. */
.inloft-home__video-cta {
	display: inline-block;
	background: transparent;
	color: var(--ih-verde);
	border: 1px solid var(--ih-verde);
	font-family: var(--inloft-btn-font, var(--ih-body));
	font-weight: var(--inloft-btn-weight, 400);
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: var(--inloft-btn-tracking, .15em);
	text-decoration: none;
	padding: 12px 26px;
	border-radius: 0;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.inloft-home__video-cta:hover,
.inloft-home__video-cta:focus {
	background: var(--inloft-btn-hover-bg, #904B2C);
	border-color: var(--inloft-btn-hover-bg, #904B2C);
	color: var(--inloft-btn-hover-color, #EAE4D3);
}

.inloft-home__video-midia {
	position: relative;
	margin: 0;
}

.inloft-home__video-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.inloft-home__video-legenda {
	position: absolute;
	left: 16px;
	top: 16px;
	padding: 8px 14px;
	background: rgba(34, 56, 41, .82);
	border-radius: 0;
	font-family: var(--ih-display);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--ih-creme);
}

/* ── Placeholder sob texto sobreposto ────────────────────────────────────── */

/* No hero e nas coleções o texto fica sobre a imagem: a etiqueta do placeholder desce para o
   canto inferior esquerdo para não colidir com ele. */
.inloft-home__hero .inloft-ph__info,
.inloft-home__colecoes .inloft-ph__info {
	top: auto;
	bottom: 14px;
	left: 16px;
	transform: none;
	width: auto;
	align-items: flex-start;
	text-align: left;
	padding: 0;
}

/* ── Foco visível ─────────────────────────────────────────────────────────── */

.inloft-home a:focus-visible {
	outline: 2px solid var(--ih-areia);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Responsivo ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.inloft-home__video-topo {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.inloft-home__circulo {
		flex: 1 1 100%;
		max-width: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inloft-home__emp-seta,
	.inloft-home__emp-pagina::before,
	.inloft-home__emp-card,
	.inloft-home__hero-cta,
	.inloft-home__video-cta,
	.inloft-home__colecoes-midia::after {
		transition: none;
	}
}