/**
 * Strona Kontakt — "Dossier zaufania": trzy pokoje .gd-morph (tożsamość / FAQ
 * zaufania / formularz), osobne od style.css (~1300 linii, plik chroniony,
 * §18 CLAUDE.md). Wyłącznie tokeny z theme.json przez zmienne --gd-* z :root
 * w style.css. Shape zatwierdzony 2026-08-10 (concept-seed, kandydat #6:
 * "Dossier + FAQ akordeon" — zrealizowany jako statyczna siatka .gd-faq, ten
 * sam komponent co page-portret-na-zamowienie.html, nie nowy mechanizm
 * collapsujący).
 */

/* style.css nadaje .gd-contact-page nieprzezroczyste tło (var(--gd-ink)),
   które przykrywałoby body i blokowało color-morph .gd-morph (main.js
   animuje background-color na document.body — patrz commissions.css:27-30
   dla tego samego wzorca na stronie portretu). Zwykły override, ten sam
   trik co woocommerce.css robi z wypełnieniem przycisku. */
.gd-contact-page {
	background: transparent;
}

.gd-contact-page,
.gd-contact-page p,
.gd-contact-page label,
.gd-contact-page input,
.gd-contact-page select,
.gd-contact-page textarea {
	font-family: var(--gd-font-body);
}

.gd-contact-room-inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin-inline: auto;
	padding-inline: var(--gd-pad-x);
}

/* Nagie <h2> renderują się jako 16px — --wp--preset--font-size--* z theme.json
   nie jest wypisywane na froncie (ten sam, już udokumentowany bug co
   commissions.css:103 na stronie portretu — sprawdzone 2026-08-11: żadna
   --wp--preset--font-size--* zmienna nie istnieje nigdzie w
   #global-styles-inline-css, mimo że style.elements.h2 się do niej odwołuje;
   dotyczy całej strony, nie tylko Kontaktu). Ta sama liczbowa skala co
   .gd-commission-page h2 (Title/4xl), nie pełna Headline/6xl — Kontakt ma
   kilka H2 na stronie, nie jeden hero, więc gęstsza skala pasuje lepiej. */
.gd-contact-page h2 {
	font-family: var(--gd-font-display);
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem);
	font-weight: 380;
	line-height: 1.15;
}

/* --- Pokój 1: tożsamość ------------------------------------------------ */

.gd-contact-hero {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

/* Blok hero (Pokój 1) dostaje tę samą szerokość co hero O mnie
   (.gd-about-hero__inner), żeby przy nawigacji między stronami nagłówek
   ("Kontakt" / "O mnie") lądował w tym samym miejscu po wyśrodkowaniu.
   Pozostałe pokoje (FAQ, formularz) zostają węższe (860px, jak wyżej) —
   celowo, to nie treść porównywana bezpośrednio przy przełączaniu stron. */
.gd-contact-hero .gd-contact-room-inner {
	max-width: 1200px;
	padding-top: clamp(1rem, 3vw, 2rem);
}

.gd-contact-hero__lead {
	color: var(--gd-muted);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 46ch;
	margin-block-end: clamp(2rem, 4vw, 3rem) !important;
}

.gd-contact-sla {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.1rem;
	margin-block-end: clamp(2rem, 4vw, 3rem);
	background: color-mix(in srgb, var(--gd-teal) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--gd-teal) 45%, transparent);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gd-cream);
}

.gd-contact-sla::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--gd-teal-bright, var(--gd-teal));
	flex: none;
}

/* .gd-contact-details to teraz <dl> (był <div>) — czytnik ekranu ogłasza to
   jako listę 6 pozycji zamiast luźnego ciągu tekstu (audyt 2026-08-11).
   Reset przeglądarkowego marginesu dl/dd (domyślnie dd ma
   margin-inline-start ~40px). Style .gd-contact-item/-label/-value
   (style.css, frozen) są czysto klasowe, więc działają bez zmian na
   dt/dd. */
.gd-contact-details,
.gd-contact-details dt,
.gd-contact-details dd {
	margin: 0;
}

/* Blok hero jest szerszy (1200px, patrz .gd-contact-hero .gd-contact-room-inner)
   tylko po to, żeby nagłówek lądował w tym samym miejscu co O mnie/Portret.
   Dane kontaktowe mają wizualnie należeć do "reszty strony" (FAQ, formularz —
   860px), nie do poszerzonego hero — zawężamy je z powrotem i centrujemy
   wewnątrz szerszego rodzica; przy wyśrodkowaniu obu pudełek matematycznie
   wypada to na tej samej lewej/prawej krawędzi co niezależnie wyśrodkowany
   860px blok poniżej. */
.gd-contact-details {
	max-width: 860px;
	margin-inline: auto;
}

/* Klikalna wartość (e-mail/telefon) zamiast całego wiersza jako <a> — dawne
   a.gd-contact-item:hover przenosiło się na cały wiersz; :has() odtwarza ten
   sam efekt na nowej strukturze dl > div.gd-contact-item > dt + dd > a. */
.gd-contact-link {
	color: var(--gd-cream);
	text-decoration: none;
	transition: color 0.3s;
}

.gd-contact-link:hover {
	color: var(--gd-teal-bright, var(--gd-teal));
}

.gd-contact-item:has(.gd-contact-link) {
	transition: transform 0.35s var(--gd-ease-out);
}

.gd-contact-item:has(.gd-contact-link:hover) {
	transform: translateX(0.5rem);
}

/* --- Pokój 2: dane kontaktowe + formularz (2 kolumny) ------------------
   Wprowadzone przy przebudowie strony (dane+formularz obok siebie, FAQ
   przeniesione na dół — dawniej: hero z danymi → FAQ → formularz na końcu,
   co chowało formularz pod długim scrollem). Szerszy kontener (1100px)
   niż domyślne 860px .gd-contact-room-inner — dwie kolumny w 860px byłyby
   zbyt ciasne dla pól formularza CF7. */
.gd-contact-columns-room {
	max-width: 1100px;
}

.gd-contact-columns {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

/* Wewnątrz kolumny .gd-contact-details traci własne 860px/auto-center
   (contact.css niżej) — ma wypełnić kolumnę, nie centrować się w niej. */
.gd-contact-columns__info .gd-contact-details {
	max-width: none;
	margin-inline: 0;
}

/* Podpis "— Agata Górna" pod nagłówkiem sekcji (dodany 2026-09-01) —
   .gd-statement__source (style.css) ma margin-top:2rem dobrany do dużego cytatu
   na stronie O mnie; tu nagłówek jest mniejszym h2, więc odstęp od góry
   zmniejszamy, a odstęp do linii nad pierwszym wierszem danych kontaktowych
   (border-top .gd-contact-item:first-child) zwiększamy, żeby podpis nie
   sklejał się z listą kontaktową (uwaga Piotra 2026-09-01). */
.gd-contact-columns__info .gd-statement__source {
	margin-top: 0.75rem;
	margin-bottom: 1.75rem;
}

.gd-contact-columns__form .gd-contact-form-lead,
.gd-contact-columns__form .gd-contact-form-lead-en {
	max-width: none;
}

@media (max-width: 780px) {
	.gd-contact-columns {
		/* Goły `1fr` ma domyślne minimum "auto" (min-content) — długie,
		   nie zawijające się opcje w select "Temat" (np. "Portret na
		   zamówienie / Custom portrait") rozpychały jedyną kolumnę siatki
		   szerzej niż jej rodzic, więc pola formularza wychodziły poza
		   padding sekcji po prawej stronie (potwierdzone na żywym iPhonie:
		   .gd-contact-columns kończył się na 388px, .gd-contact-columns__form
		   sięgał 402.6px). minmax(0, 1fr) zeruje to minimum, ten sam wzorzec
		   co desktopowe minmax(0, 2fr)/minmax(0, 3fr) wyżej. */
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}
}

/* --- Pokój 2: FAQ zaufania (komponent .gd-faq, wzorzec z
   page-portret-na-zamowienie.html / commissions.css, zduplikowany tu bo
   commissions.css nie jest ładowane na tej stronie) --------------------- */

.gd-faq {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gd-faq-item {
	border: 1px solid var(--gd-line);
	border-radius: 12px;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--gd-surface) 55%, transparent);
}

.gd-faq-item h3 {
	margin-block-start: 0 !important;
	font-size: var(--gd-scale-lead, 1.1rem);
}

.gd-faq-item p {
	color: var(--gd-muted);
	margin-block-end: 0 !important;
}

/* --- Pokój 3: formularz -------------------------------------------------- */

.gd-contact-context {
	display: inline-block;
	padding: 0.6rem 1rem;
	margin-block-end: 1.5rem !important;
	border-left: 2px solid var(--gd-magenta);
	background: color-mix(in srgb, var(--gd-surface) 45%, transparent);
	color: var(--gd-cream);
	font-size: 0.9rem;
	font-style: italic;
}

/* Kontener 860px rozszerzył linię leadu do ~126 znaków (audyt 2026-08-11,
   detect.mjs line-length) — ograniczamy do wygodnej miary czytania. */
.gd-contact-form-lead,
.gd-contact-form-lead-en {
	max-width: 62ch;
}

.gd-contact-required-note {
	font-size: 0.78rem;
	color: color-mix(in srgb, var(--gd-muted) 70%, transparent);
	margin-block: 0.25rem 1.5rem !important;
}

/* Pola CF7 przeniesione na aktualny token input-field (8px, Plum Surface,
   focus glow) — style.css (frozen) trzyma jeszcze starszy, płaski wariant
   (2px, ciemniejsze wypełnienie) — znany dryft z DESIGN.md, naprawiany tu
   tylko na tej stronie. Brak box-sizing:border-box w tej samej regule
   frozen style.css to osobny, realny bug: input/textarea (content-box)
   renderowały się szersze niż deklarowane width:100% o dokładnie szerokość
   paddingu, więc ich prawa krawędź nie zbiegała się z select (który już był
   border-box) — widoczne jako "nierówne" pola w formularzu. */
.gd-contact-page .wpcf7-form input[type="text"],
.gd-contact-page .wpcf7-form input[type="email"],
.gd-contact-page .wpcf7-form select,
.gd-contact-page .wpcf7-form textarea {
	background: var(--gd-surface);
	border-radius: 8px;
	box-sizing: border-box;
}

.gd-contact-page .wpcf7-form input[type="text"]:focus,
.gd-contact-page .wpcf7-form input[type="email"]:focus,
.gd-contact-page .wpcf7-form select:focus,
.gd-contact-page .wpcf7-form textarea:focus {
	border-color: var(--gd-magenta-bright, var(--gd-magenta));
	background: var(--gd-surface);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-magenta) 18%, transparent);
}

.gd-contact-page .wpcf7-form select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F4EFE6' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.9rem;
	padding-left: 1rem;
	padding-right: 2.5rem;
	color: var(--gd-cream);
	font-family: var(--gd-font-body);
	font-size: 1rem;
	padding-block: 0.85rem;
	border: 1px solid var(--gd-line);
	box-sizing: border-box;
	cursor: pointer;
}

.gd-contact-page .wpcf7-form select:invalid {
	color: color-mix(in srgb, var(--gd-muted) 85%, transparent);
}

/* Przycisk wysyłki — z konturowego (styl dziedziczony ze style.css) na pełny,
   pigułkowy button-primary spójny z resztą systemu (product.css/woocommerce.css
   robią ten sam override z tego samego powodu — theme.json owija presety w
   :where(), zwykły override wygrywa). */
.gd-contact-page .wpcf7-form input[type="submit"],
.gd-contact-page .wpcf7-form .wpcf7-submit {
	background: var(--gd-magenta-action, #B0407D);
	border: none;
	border-radius: 999px;
	color: var(--gd-cream);
}

.gd-contact-page .wpcf7-form input[type="submit"]:hover,
.gd-contact-page .wpcf7-form .wpcf7-submit:hover {
	background: var(--gd-violet);
	color: var(--gd-cream);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgba(192, 70, 138, 0.55);
}

@media (max-width: 560px) {
	.gd-faq {
		grid-template-columns: 1fr;
	}
}