/*
 * Powietrze na Kolonii — pas nad stopką (`kg-core/src/airly.php`).
 *
 * Pas stoi między formularzem „Masz sprawę?” (jasnoniebieski gradient)
 * a ciemną stopką, więc ma neutralne tło i cienką linię, żeby nie zlał się
 * z żadnym z sąsiadów. Kontener 1280 px jak formularz nad nim. Bramka
 * zgód jest odpowiednikiem `.kg-event-map__gate` z `kg.css`.
 */

.kg-airly {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	padding: clamp(40px, 6vw, 72px) max(20px, calc((100% - 1280px) / 2));
}

.kg-airly__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}

.kg-airly__title {
	margin: 0 0 14px;
}

.kg-airly__text p {
	max-width: 52ch;
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 16px;
	line-height: 1.6;
}

.kg-airly__text .kg-airly__now {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.kg-airly__source {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 400;
}

.kg-airly__frame {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--kg-radius-lg);
	background: var(--wp--preset--color--surface-alt);
}

/* Po wczytaniu ramka ma własne tło i zaokrąglenia — ramka pasa znika. */
.kg-airly__frame[data-kg-airly-loaded] {
	border: 0;
	background: none;
}

.kg-airly__iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

.kg-airly__gate {
	padding: 24px;
}

.kg-airly__gate p {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 15px;
	line-height: 1.55;
}

.kg-airly__gate .kg-airly__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 16px;
}

@media (max-width: 767px) {
	.kg-airly__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.kg-airly__gate {
		padding: 18px;
	}
}