/**
 * Strona kontaktu — layout + globe (pozycja globu 1:1 z mockupem Contact.html).
 */

@layer templates {

/* Glob wystaje poza viewport — blokuj poziomy scroll dokumentu, nie obcinaj w .site-main */
html:has(body.page-slug-contact),
body.page-slug-contact {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html:has(body.page-slug-contact),
	body.page-slug-contact {
		overflow-x: clip;
	}
}

body.page-slug-contact .entry-header {
	display: none;
}

/* Odstęp od góry — tylko w .contact-section.ct (mockup), nie w .site-main */
body.page-slug-contact .site-main {
	padding-top: 0;
	padding-inline: 0;
}

body.page-slug-contact .site-main,
body.page-slug-contact .site-container,
body.page-slug-contact .entry-content {
	overflow-x: visible;
}

@supports (overflow: clip) {
	body.page-slug-contact .site-main {
		overflow-x: visible;
	}
}

/* Sekcja biur — pełna szerokość pod formularzem; glob wystaje w prawo i pod footer */
body.page-slug-contact .site-main .entry-content > .our-offices-block,
body.page-slug-contact .site-main .entry-content > .our-offices {
	margin-top: 48px;
	overflow: visible;
}

/* ============================================================
   Our Offices — globe (mockup Contact.html: .offices / .off-wrap / .globe-wrap)
   ============================================================ */

.our-offices-block,
.our-offices.offices {
	position: relative;
	overflow: visible;
}

.our-offices__container,
.our-offices .off-wrap {
	position: relative;
	min-height: 300px;
	overflow: visible;
}

/* Glob: wypchnięty w prawo poza kontener, top -80px, stałe 700x700, pod tekstem i footerem */
.our-offices__globe {
	position: absolute;
	right: calc(-1 * (var(--sec-px, 80px) + max(0px, (100vw - 1488px) / 2) + 220px));
	top: -80px;
	width: 700px;
	height: 700px;
	z-index: 0;
	pointer-events: none;
	display: block;
	overflow: visible;
}

.our-offices__globe canvas,
.our-offices__globe > div,
.our-offices__globe .our-offices__globe-inner,
.our-offices__globe .our-offices__globe-fallback-img,
.our-offices__globe img {
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	object-fit: contain;
}

@media (max-width: 1040px) {
	.our-offices__container,
	.our-offices .off-wrap {
		min-height: 0;
	}

	.our-offices__globe {
		position: relative;
		inset: auto;
		right: auto;
		top: auto;
		width: min(80%, 340px);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 28px auto 0;
	}
}

}