/* ==========================================================================
   Strony: O mnie (zdjęcie obok tekstu), Kontakt
   (ładowany po main.css, korzysta z jego tokenów)
   ========================================================================== */

/* Strona ze zdjęciem */
.strona__uklad { display: grid; gap: var(--o-6); }
.strona__zdjecie { margin: 0; max-width: 24rem; }
.strona__zdjecie img { width: 100%; border-radius: var(--promien); }
@media (min-width: 64em) {
	.strona--ze-zdjeciem .strona__uklad { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--o-8); align-items: start; }
}

/* Kontakt: nagłówek na środku, trzy karty, formularz w karcie */
.kontakt { padding-block: var(--o-7) var(--o-8); display: grid; gap: var(--o-7); }
.kontakt__naglowek { display: grid; gap: var(--o-3); justify-items: center; text-align: center; max-width: 40rem; margin-inline: auto; }
.kontakt__naglowek h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); letter-spacing: -0.035em; }
.kontakt__naglowek p { color: var(--kolor-tekst-drugi); font-size: var(--rozmiar-duzy); }

.kontakt__karty { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--o-4); grid-template-columns: minmax(0, 1fr); }
.kontakt__karta {
	display: grid;
	gap: var(--o-2);
	align-content: start;
	justify-items: start;
	padding: var(--o-6) var(--o-5);
	background: var(--kolor-tlo);
	border-radius: var(--promien-karta);
	box-shadow: var(--cien-karta);
	transition: transform 0.45s var(--ruch), box-shadow 0.45s var(--ruch);
}
.kontakt__karta:hover { transform: translateY(-4px); box-shadow: var(--cien-karta-hover); }
.kontakt__karta h2 { font-size: var(--rozmiar-maly); font-weight: 500; color: var(--kolor-tekst-drugi); letter-spacing: 0; margin-top: var(--o-2); }
.kontakt__ikona {
	display: grid; place-items: center;
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: var(--kolor-akcent-jasny);
	color: var(--kolor-akcent);
}
.kontakt__ikona .ikona { width: 1.375rem; height: 1.375rem; }
.kontakt__wartosc { color: var(--kolor-tekst); font-size: var(--rozmiar-duzy); font-weight: 500; letter-spacing: -0.015em; overflow-wrap: anywhere; }
a.kontakt__wartosc:hover { color: var(--kolor-akcent); text-decoration: none; }
.kontakt__wartosc--duza { font-family: var(--font-tytul); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kontakt__dopisek { color: var(--kolor-tekst-drugi); font-size: var(--rozmiar-maly); }
.kontakt__akcja { margin-top: auto; min-height: 2.5rem; padding: var(--o-2) var(--o-5); font-size: var(--rozmiar-maly); }
.kontakt__karta > :last-child { margin-top: var(--o-3); }
.kontakt__tresc { margin-inline: auto; }

.kontakt__formularz {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
	padding: var(--o-6) var(--o-5);
	background: var(--kolor-tlo);
	border-radius: 22px;
	box-shadow: var(--cien-karta);
}
.kontakt__formularz .zapytanie__tytul { font-size: var(--rozmiar-h2); letter-spacing: -0.025em; }

@media (min-width: 48em) {
	.kontakt__karty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-5); }
	.kontakt__formularz { padding: var(--o-7); }
	.kontakt__formularz .zapytanie__formularz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-4) var(--o-5); }
	.kontakt__formularz .zapytanie__formularz > * { grid-column: 1 / -1; }
	.kontakt__formularz .zapytanie__formularz > .pole--pol { grid-column: auto; }
	.kontakt__formularz .zapytanie__formularz > .przycisk { justify-self: start; width: auto; padding-inline: var(--o-7); }
}
@media (min-width: 64em) {
	.kontakt { padding-top: var(--o-8); gap: var(--o-8); }
}