/* 2026-08-11 v1.0
 * - Added the swim-water information page layout and warning presentation.
 */

.content-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.zwemwaterkwaliteit-page {
	width: min(920px, 100%);
	margin: auto;
	padding: 120px 40px;
	box-sizing: border-box;
}

.zwemwaterkwaliteit-page > * + * {
	margin-top: 40px;
}

.zwemwaterkwaliteit-page section > h2,
.zwemwaterkwaliteit-heading h2 {
	margin-top: 0;
}

.zwemwaterkwaliteit-status.is-warning {
	padding-left: 18px;
	border-left: 4px solid var(--color_contrast);
}

.zwemwaterkwaliteit-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color_contrast);
}

.zwemwaterkwaliteit-heading .fa {
	font-size: 22px;
}

.zwemwaterkwaliteit-details {
	margin: 0;
}

.zwemwaterkwaliteit-details > div {
	display: grid;
	grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
	gap: 24px;
	padding: 9px 0;
}

.zwemwaterkwaliteit-details dt {
	font-weight: 600;
}

.zwemwaterkwaliteit-details dd {
	margin: 0;
}

.zwemwaterkwaliteit-facilities {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding-left: 20px;
}

.zwemwaterkwaliteit-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.zwemwaterkwaliteit-links .button {
	margin: 0;
}

@media (max-width: 700px) {
	.zwemwaterkwaliteit-page {
		padding: 120px 20px 40px;
	}

	.zwemwaterkwaliteit-page > * + * {
		margin-top: 30px;
	}

	.zwemwaterkwaliteit-details > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.zwemwaterkwaliteit-links {
		align-items: stretch;
		flex-direction: column;
	}

	.zwemwaterkwaliteit-links .button {
		justify-content: space-between;
	}
}