/**
 * 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;
}

/* Kotwica pozycjonowania globu (.contact-page-globe) — niezależna od wysokości
   poprzedzających bloków (contact-section, our-offices, contact-info). */
body.page-slug-contact .entry-content {
	position: relative;
}

@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-block,
.our-offices.offices {
	position: relative;
	overflow: visible;
}

/* ============================================================
   Glob strony Contact — element niezależny od bloków our-offices/
   contact-info, dokleja się na końcu .entry-content (inc/contact-page-globe.php).

   .contact-page-globe-section to mały, ograniczony kontener — ta sama
   szerokość/centrowanie/padding co .offices (content-max 1488px) — więc
   glob nigdy nie "ucieka" poza tę kolumnę: bez formuły zależnej od 100vw
   (por. kfb-labs/assets/css/contact.css .our-offices-globe-section), stałe
   odsunięcie w prawo. Na bardzo szerokich ekranach margines między kolumną
   treści a krawędzią viewportu tylko rośnie, więc glob w końcu w całości
   się w nim mieści — nigdy nie wypada poza widok.

   Pionowa pozycja (`top` na .contact-page-globe) jest liczona w JS
   (assets/js/contact-page-globe-init.js) względem realnej wysokości sekcji
   "Our offices" — CSS nie może tego policzyć, bo sekcja leży w DOM za
   blokami o zmiennej wysokości (contact-section, oferty).

   Delikatnie wchodzi pod stopkę (ujemny margin-bottom na mobile / JS top) —
   kfb-footer ma własne, kryjące tło i renderuje się później w DOM, więc
   naturalnie przykrywa nachodzący fragment globu bez potrzeby z-index.
   ============================================================ */

.contact-page-globe-section {
	position: relative;
	max-width: var(--content-max, 1488px);
	margin: 0 auto;
	padding: 0 var(--sec-px, 80px);
	height: 0;
	overflow: visible;
}

.contact-page-globe {
	position: absolute;
	right: calc(-1 * (var(--sec-px, 80px) + 80px));
	top: 0;
	width: 700px;
	height: 700px;
	z-index: 0;
	pointer-events: none;
	display: block;
	overflow: visible;
}

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

@media (max-width: 1040px) {
	.contact-page-globe-section {
		height: auto;
		padding: 0;
	}

	.contact-page-globe {
		position: relative;
		inset: auto;
		right: auto;
		top: auto;
		width: min(80%, 340px);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 32px auto -40px;
	}
}

}