/* ==========================================================================
   Dla architektów + Kontakt — shared page styles
   ========================================================================== */

/* Hero (Kontakt) — nagłówek w jednej linii, stały odstęp pod tekstem
   ========================================================================== */
.page-hero--compact .page-hero__content h1 {
	margin-bottom: 0;
}

/* Section intros
   ========================================================================== */
.architekci-intro { max-width: none; margin-bottom: clamp(32px, 4vw, 56px); }
.architekci-intro h2 { margin-bottom: 0.4em; }

/* Dane rejestrowe (Kontakt) — pod siatką salonów/mapy, w tej samej sekcji
   (żeby nie tworzyć dodatkowej przerwy między sekcją z mapą a formularzem —
   to psuło płynność animacji okręgu w tle). Eyebrow + akapit — te same
   komponenty i style co w reszcie strony (kolor/font-size/wyrównanie
   dziedziczone z main.css, bez żadnych własnych reguł).
   ========================================================================== */
.kontakt-firma-info {
	position: relative;
	z-index: 1;
	margin-top: 100px;
}

/* Akcent — okręgi napędzane scrollem (nie myszką) w prawym dolnym rogu
   sekcji "Współpraca B2B" (Dla architektów, animacja a2 — wychylenie po
   łuku z opóźnieniem fazowym) i sekcji z mapą (Kontakt, animacja a1 —
   pulsacja z przekątnym przesuwem). JS w page-architekci-kontakt.js.
   Kolory zamienione względem pierwotnej mouse-follow wersji, bez opacity.
   ========================================================================== */
.architekci-b2b-section,
.benefit-grid-section,
.kontakt-salony-section { position: relative; overflow: hidden; }
.architekci-b2b-section > .container,
.benefit-grid-section > .container,
.kontakt-salony-section > .container { position: relative; z-index: 1; }

.architekci-b2b-accent,
.kontakt-salony-accent {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(253px, 34.5vw, 529px);
	height: clamp(253px, 34.5vw, 529px);
	z-index: 0;
	pointer-events: none;
}
.architekci-b2b-accent__circle,
.kontakt-salony-accent__circle {
	position: absolute;
	display: block;
	will-change: transform;
	--tx: 0px;
	--ty: 0px;
	--scale: 1;
	transition: none;
	transform: translate(var(--tx), var(--ty)) scale(var(--scale));
}
.architekci-b2b-accent__circle--gold,
.kontakt-salony-accent__circle--gold {
	width: 75%;
	height: 75%;
	right: -12%;
	bottom: -18%;
}
.architekci-b2b-accent__circle--gold circle,
.kontakt-salony-accent__circle--gold circle { fill: var(--color-blue); fill-opacity: 0.9; }
.architekci-b2b-accent__circle--blue,
.kontakt-salony-accent__circle--blue {
	width: 46%;
	height: 46%;
	right: 30%;
	bottom: 26%;
}
.architekci-b2b-accent__circle--blue circle,
.kontakt-salony-accent__circle--blue circle { fill: var(--color-gold); fill-opacity: 0.85; }
@media (max-width: 1680px) {
	.architekci-b2b-accent__circle--blue,
	.kontakt-salony-accent__circle--blue { right: 15%; bottom: 30%; }
}
@media (max-width: 1440px) {
	.architekci-b2b-accent__circle--blue,
	.kontakt-salony-accent__circle--blue { right: calc(15% + 140px); bottom: 30px; }
}
@media (max-width: 1024px) {
	.architekci-b2b-accent__circle--blue,
	.kontakt-salony-accent__circle--blue { right: calc(15% + 90px); }
}

/* Mobile (Kontakt) — akcent chowany całkowicie (za ciasno na siatkę
   salonów/mapy + drobny druk), dane rejestrowe wyśrodkowane razem z eyebrow. */
@media (max-width: 720px) {
	.kontakt-salony-accent { display: none; }
	.kontakt-firma-info { text-align: center; }
}

/* Benefit cards (Dla architektów)
   ========================================================================== */
.benefit-card {
	padding: clamp(28px, 3vw, 36px) clamp(24px, 3vw, 30px);
}
.benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-bg-soft);
	color: var(--color-blue);
	margin-bottom: 1.2em;
}
.benefit-card h3 { margin-bottom: 0.5em; }
.benefit-card p:last-child { margin-bottom: 0; }

/* CTA panel (Dla architektów) — ujednolicone z blokiem melbex/cta-band
   (nazwy klas .architekci-cta* zmienione na .cta-band*, patrz front-page.css
   i page-na-wymiar.css dla tego samego komponentu na innych podstronach)
   ========================================================================== */
.cta-band {
	background: var(--color-blue);
	background-image: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
	color: #fff;
}
.cta-band--photo {
	position: relative;
	background-size: cover;
	background-position: center;
}
.cta-band--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-ink);
	opacity: 0.8;
}
.cta-band--photo .cta-band__inner { position: relative; z-index: 1; }
.cta-band__inner { max-width: 640px; text-align: center; margin-inline: auto; }
.cta-band .eyebrow { color: var(--color-gold); }
.cta-band h2 { margin-bottom: 0.5em; color: #fff; }
.cta-band p { max-width: 48ch; margin-inline: auto; margin-bottom: 1.6em; color: #dce6ef; }
.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 2rem;
}
.cta-band__outline { color: #fff; }
.cta-band__outline:hover { background: #fff; color: var(--color-blue-dark); }

@media (max-width: 720px) {
	.cta-band__actions { flex-direction: column; align-items: stretch; }
	.cta-band__actions .btn { justify-content: center; }
}

/* Salony + mapa (Kontakt)
   ========================================================================== */
.kontakt-salony-section { padding-top: 20px; }
.kontakt-salony-header { margin-bottom: 1.6em; }
.kontakt-salony-header h2 { margin-bottom: 0; }
.kontakt-map-section {
	grid-template-columns: 1fr 1.3fr;
	align-items: stretch;
}
.salony-list__items { display: flex; flex-direction: column; gap: 20px; }
.salon-item {
	display: flex;
	align-items: stretch;
	gap: clamp(16px, 2vw, 22px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.salon-item:hover {
	border-color: var(--color-blue);
	box-shadow: 0 12px 28px -16px rgba(20, 36, 51, 0.3);
}
.salon-item__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(20px, 2.5vw, 26px);
	padding-left: clamp(20px, 2.5vw, 26px);
}
.salon-item__photo {
	flex: 0 0 clamp(150px, 30%, 200px);
	width: clamp(150px, 30%, 200px);
	min-height: 0;
	object-fit: cover;
}
.salon-item h3 { margin-bottom: calc(0.6em + 5px); font-size: 1.1rem; }
.salon-item__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: calc(0.9em - 5px);
	color: var(--color-body);
}
.salon-item__icon { flex: none; width: 18px; color: var(--color-blue); margin-top: calc(0.15em + 2px); }
.salon-item__address { display: flex; flex-direction: column; min-width: 0; }
.salon-item__address-line { display: block; }
.salon-item__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-blue);
	transition: color 0.2s var(--ease);
}
.salon-item__phone svg { flex: none; width: 18px; height: 18px; position: relative; top: -1px; }
.salon-item__phone:hover { color: var(--color-blue-dark); }

.kontakt-map-panel { display: flex; }
.kontakt-map {
	width: 100%;
	height: 100%;
	min-height: 480px;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 20px 40px -20px rgba(20,36,51,0.25);
	border: 1px solid var(--color-border);
	background: var(--color-bg-soft);
}

@media (max-width: 900px) {
	.kontakt-map-section { grid-template-columns: 1fr; }
	.kontakt-map { height: auto; min-height: 380px; }
}

/* Formularz kontaktowy (Kontakt)
   ========================================================================== */
.kontakt-form-panel { max-width: 640px; margin-inline: auto; }
.kontakt-form-panel h2 { margin-bottom: 0.3em; }
.kontakt-form-panel > p { margin-bottom: 1.6em; }

.contact-form { margin-top: 0.5em; }
.form-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-size: 0.9rem;
	color: var(--color-body);
	cursor: pointer;
	margin-bottom: 24px;
}
.form-field--checkbox input { margin-top: 0.25em; flex: none; }
.form-field--checkbox span { flex: 1; min-width: 0; }

/* Leaflet — dopasowanie do stylu marki
   ========================================================================== */
.kontakt-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.08) contrast(0.92); }
.melbex-map-pin { filter: drop-shadow(0 4px 8px rgba(20, 36, 51, 0.35)); }
.leaflet-popup-content-wrapper {
	border-radius: var(--radius);
	box-shadow: 0 16px 32px -12px rgba(20, 36, 51, 0.35);
}
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font-body); }
.leaflet-popup-tip { box-shadow: 0 4px 10px rgba(20, 36, 51, 0.15); }
.melbex-map-popup { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.melbex-map-popup__photo {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 4px;
}
.melbex-map-popup strong { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.melbex-map-popup span { font-size: 0.85rem; color: var(--color-body); margin-bottom: 6px; }
.melbex-map-popup__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-top: 4px;
	padding: 0.6em 1em;
	border-radius: var(--radius);
	background: var(--color-blue);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.85rem;
	text-align: center;
	transition: background-color 0.2s var(--ease);
}
.melbex-map-popup__phone span { color: #fff; position: relative; top: 4px; }
.melbex-map-popup__phone:hover { background: var(--color-blue-dark); }
.melbex-map-popup__phone-icon { flex: none; transform-origin: 70% 30%; }
.melbex-map-popup__phone:hover .melbex-map-popup__phone-icon {
	animation: melbex-phone-ring 0.4s ease-in-out 2;
}
@keyframes melbex-phone-ring {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(-18deg); }
	40% { transform: rotate(14deg); }
	60% { transform: rotate(-10deg); }
	80% { transform: rotate(6deg); }
}

/* Mobile RWD — teksty/nagłówki/ikony wyśrodkowane, layouty dopasowane
   ========================================================================== */
@media (max-width: 720px) {
	.architekci-intro,
	.kontakt-salony-header { text-align: center; }
	.architekci-intro p { margin-inline: auto; }

	/* Współpraca B2B — grid 2x3 + mniejszy tekst w boxach */
	.benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.benefit-card { padding: 18px 12px; text-align: center; }
	.benefit-card__icon { width: 42px; height: 42px; margin-inline: auto; margin-bottom: 0.8em; }
	.benefit-card h3 { font-size: 0.92rem; margin-bottom: 0.35em; }
	.benefit-card p { font-size: 0.78rem; line-height: 1.45; }

	/* Jak wygląda współpraca — pionowa linia procesu zamiast poziomej */
	.process-steps {
		position: relative;
		gap: 20px;
	}
	.process-steps::after {
		content: '';
		position: absolute;
		z-index: 0;
		left: 50%;
		top: 62px;
		bottom: 62px;
		width: 2px;
		background: repeating-linear-gradient(180deg, var(--color-border) 0 8px, transparent 8px 16px);
	}

	/* Salony — zdjęcie na górze w formacie 3:1, treść wyśrodkowana */
	.salon-item { flex-direction: column; }
	.salon-item__photo { order: -1; flex: none; width: 100%; height: auto; aspect-ratio: 3 / 1; }
	.salon-item__body {
		align-items: center;
		text-align: center;
		padding-inline: clamp(20px, 5vw, 26px);
	}
	.salon-item__row { justify-content: center; }
	.salon-item__address { align-items: center; }

	/* Formularz kontaktowy — nagłówek wyśrodkowany (eyebrow jest inline-block, więc
	   centrujemy na rodzicu, nie na nim samym), pola formularza zostają wyrównane
	   do lewej (czytelniejsze etykiety/inputy), przycisk wysyłki wyśrodkowany */
	.kontakt-form-panel { text-align: center; }
	.contact-form { text-align: left; }
	.contact-form button[type="submit"] { display: flex; margin-inline: auto; }
}

.grecaptcha-badge { visibility: hidden; }
.form-recaptcha-note { margin: 0 0 1em; font-size: 0.78rem; line-height: 1.5; opacity: 0.75; }
.form-recaptcha-note a { text-decoration: underline; }