/* ============================================================
   SWITALSKI.LAW — Contact page (Faza 6.4). BESPOKE stylesheet:
   a 1:1 port of components/contact.jsx inline styles plus the
   "Contact - Mateusz Switalski.html" <style> block. Loaded ONLY on
   /contact-us/ and /pl/kontakt/ (inc/enqueue.php).

   NOT a replacement for contact.css — that file owns the shared
   .sl-cta brief-form block (Faza 4.1b) and this page LOADS IT and
   reuses it, exactly as the design reuses <ContactBriefForm>. The
   only form rules here are the three things this page does
   differently (section padding, grid offset, no secondary link).

   Nothing here derives from hub.css — the Contact design is its own
   layout and has NO table-of-contents rail.

   Mostly dark (--ink); the discovery-call section is the one light
   band (--paper-warm). Every value is a token.

   Breakpoints per tokens.css consolidation: 640 / 920 / 1100 (the
   prototype's 560 folds up into 640, its 1000 into 1100).
   ============================================================ */

body.sl-contact-page {
	background: var(--bg-dark);
	color: var(--fg-inv);
}

/* Eyebrow spacing — common.jsx Eyebrow carries marginBottom 16 */
.sl-contact-page .t-eyebrow {
	margin: 0 0 var(--s-4);
}

/* Shared inner container — maxWidth 1180, as every contact.jsx section */
.sl-contact__inner {
	max-width: var(--mw-1180);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* Keyboard visibility on the dark surface */
.sl-contact-channel:focus-visible,
.sl-contact-channel__v:focus-visible,
.sl-contact-channel__copy:focus-visible,
.sl-contact-call__fallback a:focus-visible {
	outline: var(--bw-2) solid var(--gold);
	outline-offset: var(--sp-2);
}

/* ------------------------------------------------------------
   §1 — Hero (ContactHero)
   ------------------------------------------------------------ */
.sl-contact-hero {
	position: relative;
	overflow: hidden;
	background: var(--bg-dark);
	color: var(--fg-inv);
	padding: var(--s-10) var(--s-6) var(--sp-56);
}

.sl-contact-hero__mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at center, var(--cta-mesh-dot) 1px, transparent 1.4px);
	background-size: var(--s-6) var(--s-6);
	opacity: var(--contact-mesh-opacity);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 30%, var(--ink-pure) 0%, transparent 85%);
	mask-image: radial-gradient(ellipse 75% 70% at 70% 30%, var(--ink-pure) 0%, transparent 85%);
}

.sl-contact-hero__h1 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-ct-h1);
	line-height: 0.9;
	letter-spacing: -0.025em;
	margin: var(--sp-6) 0 0;
	color: var(--paper);
}

.sl-contact-hero__intro {
	font-family: var(--font-body);
	font-size: var(--t-ct-intro);
	line-height: 1.6;
	color: var(--n-200);
	margin: var(--sp-28) 0 0;
	max-width: var(--mw-760);
}

/* ------------------------------------------------------------
   §2 — Brief form (ContactFormSection)

   The block itself is contact.css (.sl-cta__grid / __form-col /
   __side / __chips / __chip / __trust / __gdpr and the whole CF7
   integration layer) — already the design's 1.15fr / 0.85fr grid.
   These four rules are the only per-page differences.
   ------------------------------------------------------------ */
.sl-contact-form {
	/* contact.jsx:48 — 24px top / 96px bottom, and no rule against the
	   hero: both bands are --ink and read as one surface. */
	padding: var(--s-5) var(--s-6) var(--s-9);
	border-top: none;
	scroll-margin-top: calc(var(--scroll-offset) - var(--s-5));
}

.sl-contact-form .sl-cta__grid {
	margin-top: var(--sp-28);
}

/* contact.jsx:56 passes showSecondary={false} — the scheduler is
   embedded directly below, so the form's own calendar link is
   redundant here. The link lives in the SHARED CF7 form body (Home
   and every hub render it), so it is suppressed for this page only,
   never removed from the form. */
.sl-contact-form .sl-cta__secondary {
	display: none;
}

/* ------------------------------------------------------------
   §3 — Discovery call (DiscoveryCall) — the one light band
   ------------------------------------------------------------ */
.sl-contact-call {
	background: var(--bg-2);
	color: var(--fg-1);
	padding: var(--s-9) var(--s-6);
	border-top: var(--bw-1) solid var(--border-1);
	border-bottom: var(--bw-1) solid var(--border-1);
}

/* Eyebrow steps down to deep gold for contrast on the light surface */
.sl-contact-page .sl-contact-call__eyebrow {
	color: var(--gold-deep);
}

.sl-contact-page .sl-contact-call__eyebrow::before {
	background: var(--gold-deep);
}

.sl-contact-call__head {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-top: var(--sp-6);
}

.sl-contact-call__h2 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-ct-h2);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--ink);
}

.sl-contact-call__badge {
	font-family: var(--font-mono);
	font-size: var(--fs-12);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--gold);
	padding: var(--sp-5) var(--s-3);
	border-radius: var(--r-1);
	font-weight: 600;
}

.sl-contact-call__sub {
	font-family: var(--font-body);
	font-size: var(--fs-17);
	line-height: 1.6;
	color: var(--fg-2);
	margin: var(--sp-18) 0 var(--s-6);
	max-width: var(--mw-620);
}

.sl-contact-call__frame {
	border: var(--bw-2) solid var(--ink);
	background: var(--paper);
	border-radius: var(--r-1);
	overflow: hidden;
}

.sl-contact-call__embed {
	width: 100%;
	height: var(--contact-embed-h);
	border: none;
	display: block;
	background: var(--paper);
}

.sl-contact-call__fallback {
	font-family: var(--font-body);
	font-size: var(--fs-14);
	color: var(--fg-3);
	margin: var(--s-4) 0 0;
}

.sl-contact-call__fallback a {
	color: var(--gold-deep);
	text-decoration: underline;
	text-underline-offset: var(--contact-underline-offset);
	font-weight: 600;
}

.sl-contact-call__fallback a:hover {
	color: var(--ink);
}

/* ------------------------------------------------------------
   §4 — Direct channels (Channels)
   ------------------------------------------------------------ */
.sl-contact-channels {
	background: var(--bg-dark);
	color: var(--fg-inv);
	padding: var(--s-9) var(--s-6) var(--s-8);
}

.sl-contact-channels__h2 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-ct-h3);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: var(--sp-6) 0 var(--sp-36);
	color: var(--paper);
}

.sl-contact-channels__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: var(--bw-1) solid var(--border-inv-row);
}

.sl-contact-channel {
	display: block;
	text-decoration: none;
	padding: var(--s-5) var(--s-5) var(--sp-26);
	border-bottom: var(--bw-1) solid var(--border-inv-row);
	border-right: var(--bw-1) solid var(--border-inv-row);
	transition: background .15s ease;
}

.sl-contact-channel:hover {
	background: var(--contact-channel-hover);
}

.sl-contact-channel__k {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-10-5);
	letter-spacing: 0.14em;
	color: var(--gold);
	text-transform: uppercase;
}

.sl-contact-channel__v {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-19);
	font-weight: 600;
	color: var(--paper);
	margin: var(--s-3) 0 var(--sp-6);
	transition: color .15s ease;
}

.sl-contact-channel:hover .sl-contact-channel__v,
.sl-contact-channel:focus-visible .sl-contact-channel__v {
	color: var(--gold);
}

.sl-contact-channel__meta {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-13);
	color: var(--n-400);
}

/* Email card only (Faza 6.5) — mailto <a> and the copy <button> as
   siblings on one row, so the copy click can never reach the mailto.
   The row takes over __v's own vertical margin so the two controls
   share one baseline; k/meta above and below are untouched. */
.sl-contact-channel__v-row {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	margin: var(--s-3) 0 var(--sp-6);
}

.sl-contact-channel__v-row .sl-contact-channel__v {
	margin: 0;
}

.sl-contact-channel__v-row .sl-contact-channel__v:focus-visible {
	color: var(--gold);
}

.sl-contact-channel__copy {
	position: relative;
	flex-shrink: 0;
	width: var(--sp-28);
	height: var(--sp-28);
	padding: 0;
	border: var(--bw-1-5) solid var(--border-inv-ctl);
	background: transparent;
	color: var(--n-300);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.sl-contact-channel__copy:hover,
.sl-contact-channel__copy.is-copied {
	border-color: var(--gold);
	color: var(--gold);
}

.sl-contact-channel__copy-ok {
	display: none;
}

.sl-contact-channel__copy.is-copied .sl-contact-channel__copy-ico {
	display: none;
}

.sl-contact-channel__copy.is-copied .sl-contact-channel__copy-ok {
	display: inline-flex;
}

/* Visible "Copied"/"Skopiowano" tooltip — text comes from the same
   data-sl-copied-label attribute post.js already reads for the
   aria-label swap (one string, two consumers). Transition is silenced
   for free by the global prefers-reduced-motion kill switch (base.css). */
.sl-contact-channel__copy::after {
	content: attr(data-sl-copied-label);
	position: absolute;
	bottom: calc(100% + var(--sp-6));
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: var(--fs-10-5);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--gold);
	padding: var(--sp-3) var(--s-2);
	border-radius: var(--r-1);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
	pointer-events: none;
}

.sl-contact-channel__copy.is-copied::after {
	opacity: 1;
	visibility: visible;
}

/* ------------------------------------------------------------
   §5 — Firm details + map (FirmDetails)
   ------------------------------------------------------------ */
.sl-contact-firm {
	background: var(--bg-dark);
	color: var(--fg-inv);
	padding: var(--s-6) var(--s-6) var(--sp-104);
}

.sl-contact-firm__grid {
	margin-top: var(--sp-28);
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--sp-56);
	align-items: start;
}

.sl-contact-firm__col {
	min-width: 0;
}

.sl-contact-firm__h2 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-ct-h4);
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-2);
	color: var(--paper);
}

.sl-contact-firm__rows {
	border-top: var(--bw-1) solid var(--border-inv-row);
	margin-top: var(--sp-20);
}

.sl-contact-firm__row {
	padding: var(--sp-20) 0;
	border-bottom: var(--bw-1) solid var(--border-inv-row);
}

.sl-contact-firm__name {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 600;
	color: var(--paper);
	line-height: 1.4;
}

.sl-contact-firm__address {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-15);
	color: var(--n-300);
	margin-top: var(--sp-6);
}

.sl-contact-firm__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-10-5);
	letter-spacing: 0.14em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: var(--s-2);
}

.sl-contact-firm__value {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-17);
	color: var(--paper);
	line-height: 1.45;
}

.sl-contact-firm__trust {
	font-family: var(--font-mono);
	font-size: var(--fs-12);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
	margin: var(--sp-22) 0 0;
}

.sl-contact-firm__map-label {
	font-family: var(--font-mono);
	font-size: var(--fs-10-5);
	letter-spacing: 0.14em;
	color: var(--gold);
	text-transform: uppercase;
	margin: 0 0 var(--sp-14);
}

.sl-contact-firm__map {
	border: var(--bw-2) solid var(--paper);
	box-shadow: var(--shadow-card-gold-xl);
	overflow: hidden;
	border-radius: var(--r-1);
}

.sl-contact-firm__map-embed {
	width: 100%;
	height: var(--contact-map-h);
	border: none;
	display: block;
	filter: var(--contact-map-filter);
}

/* ------------------------------------------------------------
   Responsive — port of the prototype's <style> media queries
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.sl-contact-form .sl-cta__grid,
	.sl-contact-firm__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-40);
	}

	.sl-contact-channels__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 920px) {
	.sl-contact-hero {
		padding-top: var(--s-8);
	}

	.sl-contact-call,
	.sl-contact-channels {
		padding-top: var(--s-8);
		padding-bottom: var(--s-8);
	}

	.sl-contact-firm {
		padding-bottom: var(--s-8);
	}

	.sl-contact-call__embed {
		height: var(--contact-map-h);
	}
}

@media (max-width: 640px) {
	.sl-contact-channels__grid {
		grid-template-columns: 1fr;
	}
}