/*
 * Style strony kontaktowej — StützSkin
 * Szablon: page-kontakt.php
 */

/* ----------------------------------------------------------------
 * Page hero — powielone z usluga.css (usluga.css nie ładuje się
 * na szablonie page-kontakt.php, więc .page-hero byłoby bez CSS).
 * Padding-top 140px = 80px (fixed nav) + 60px (oddech).
 * ---------------------------------------------------------------- */
.page-hero {
	background: var(--cream-dark);
	padding: 140px 24px 60px;
	border-bottom: 0.5px solid var(--cream-deep);
}

.page-hero__inner {
	max-width: 760px;
}

.page-hero__eyebrow {
	margin-bottom: var(--space-sm);
}

.page-hero__title {
	font-family: var(--serif);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--ink);
}

.page-hero__title em {
	font-style: italic;
	color: var(--brick);
}

@media (max-width: 767px) {
	.page-hero {
		padding: 100px 24px 32px;
	}
}

@media (min-width: 768px) {
	.page-hero {
		padding: 140px 48px 80px;
	}
}

/* ----------------------------------------------------------------
 * Wrapper główny — 2 kolumny na desktop
 * overflow: hidden zapobiega wychodzeniu kolumn poza viewport.
 * ---------------------------------------------------------------- */
.kontakt-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	padding: 60px 24px;
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
}

/* ----------------------------------------------------------------
 * Lewa kolumna: dane kontaktowe
 * ---------------------------------------------------------------- */
.kontakt__info h2 {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 300;
	color: var(--ink);
	margin-bottom: 32px;
	line-height: 1.2;
}

/* Pojedynczy element danych (icon + tekst) */
.kontakt-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 24px;
	font-size: 15px;
	color: var(--ink-light);
}

.kontakt-item__icon {
	width: 18px;
	height: 18px;
	color: var(--brick);
	flex-shrink: 0;
	margin-top: 2px;
}

.kontakt-item__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 4px;
}

.kontakt-item a {
	color: var(--ink-light);
	border-bottom: 0.5px solid rgba(180, 107, 96, 0.35);
	padding-bottom: 1px;
	transition: color 0.2s, border-color 0.2s;
}

.kontakt-item a:hover {
	color: var(--brick);
	border-color: var(--brick);
}

.kontakt-item__placeholder {
	color: var(--ink-muted);
	font-style: italic;
	font-size: 14px;
}

/* Divider między sekcjami lewej kolumny */
.kontakt-divider {
	height: 0.5px;
	background: var(--cream-dark);
	margin: 32px 0;
}

/* ----------------------------------------------------------------
 * Social media
 * ---------------------------------------------------------------- */
.kontakt__social-title {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 300;
	color: var(--ink);
	margin-bottom: 20px;
}

.kontakt__social {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.social-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 400;
	color: var(--ink-light);
	transition: color 0.2s;
}

.social-link svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--brick);
}

.social-link span {
	font-size: 13px;
	color: var(--ink-muted);
	margin-left: 4px;
}

.social-link:hover {
	color: var(--brick);
}

/* ----------------------------------------------------------------
 * Prawa kolumna: mapa
 * ---------------------------------------------------------------- */
.kontakt__map-col {
	min-height: 400px;
}

.kontakt__map {
	border-radius: var(--radius);
	overflow: hidden;
	line-height: 0; /* usuwa pustą przestrzeń pod iframe */
	height: 100%;
	min-height: 400px;
}

.kontakt__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;
	max-width: 100%;
}

/* ----------------------------------------------------------------
 * Desktop (≥768px): 2 kolumny
 * ---------------------------------------------------------------- */
@media (min-width: 768px) {
	.kontakt-wrap {
		grid-template-columns: 1fr 1fr;
		gap: 80px;
		padding: 80px 48px;
		align-items: stretch;
	}

	.kontakt__map-col {
		min-height: unset;
	}

	.kontakt__map {
		min-height: unset;
	}

	.kontakt__map iframe {
		min-height: unset;
	}
}