/* ============================================================
   Contato › Escritórios (RJ/SP): foto + mapa + endereço sobreposto.
   Namespaced em .page-contato.
   ============================================================ */

.page-contato .ct-offices {
	/* inset que alinha o texto sobreposto ao gutter do conteúdo (.stage) */
	--ct-inset: max(var(--mx), calc((100vw - var(--stage)) / 2 + var(--mx)));
	padding-block: clamp(3rem, 2rem + 3vw, 80px) 0;
	display: flex; flex-direction: column; gap: 0;   /* bandas contíguas, sem gaps (fiel ao Figma) */
}

.page-contato .ct-office { display: flex; flex-direction: column; }   /* foto + mapa colados */

/* foto com nome da cidade sobreposto (bottom-left) */
.page-contato .ct-office__photo {
	position: relative; width: 100%; aspect-ratio: 1280 / 621; overflow: hidden;
	background-size: cover; background-position: center;
}
.page-contato .ct-office__photo::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,18,0) 55%, rgba(20,20,18,.5) 100%);
}
.page-contato .ct-office__city {
	position: absolute; z-index: 1; left: var(--ct-inset); bottom: clamp(26px, 3.2vw, 44px);
	font-size: clamp(1.55rem, 1.2rem + 1vw, 32px); line-height: 1; font-weight: 500; color: #fff;
}

/* mapa escurecido/dessaturado com endereço sobreposto (fiel ao tom editorial do Figma) */
.page-contato .ct-office__map {
	position: relative; width: 100%; aspect-ratio: 1280 / 598; overflow: hidden;
	background-color: var(--leto-charcoal);
}
.page-contato .ct-office__mapimg {
	position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat;
	filter: grayscale(1) brightness(.56) contrast(1.08);
}
.page-contato .ct-office__map::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,18,.1) 30%, rgba(20,20,18,.74) 100%);
}
.page-contato .ct-office__info {
	position: absolute; z-index: 1; left: var(--ct-inset); right: var(--ct-inset);
	bottom: clamp(28px, 3.4vw, 46px);
	display: flex; flex-direction: column; gap: clamp(1.4rem, 2.4vw, 2.2rem); max-width: 760px;
}
.page-contato .ct-office__addr {
	font-size: clamp(1.55rem, 1.2rem + 1vw, 32px); line-height: 1.12; font-weight: 500; color: #fff;
}
.page-contato .ct-office__meta {
	font-size: 18px; line-height: 1.3; font-weight: 500; color: #fff;
}

@media (max-width: 720px) {
	.page-contato .ct-office__addr { font-size: 1.1rem; }
}