/*--------------------------------------------------------------
# Werkgebied (Service Area) Page
#
# Province sections with city tile grids.
--------------------------------------------------------------*/

/* ==========================================================================
   Province Section
   ========================================================================== */

.werkgebied-province {
	padding-bottom: var(--space-6);
	border-bottom: var(--border);
}

.werkgebied-province:last-of-type {
	border-bottom: none;
}

/* Province Heading */
.werkgebied-province__heading {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-xl);
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}

.werkgebied-province__heading i {
	color: var(--color-accent);
	font-size: var(--text-lg);
}

/* ==========================================================================
   City Tile
   ========================================================================== */

.city-tile {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	text-decoration: none;
	color: var(--color-text);
	font-weight: var(--weight-semibold);
	font-size: var(--text-base);
	transition: all var(--transition-base);
	height: 100%;
}

.city-tile:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--color-primary);
}

.city-tile i {
	color: var(--color-accent);
	font-size: var(--text-sm);
	flex-shrink: 0;
}

.city-tile:hover i {
	color: var(--color-primary);
}

/* WordPress content area */
.werkgebied-content {
	max-width: var(--max-width-narrow);
	line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767.98px) {
	.werkgebied-province__heading {
		font-size: var(--text-lg);
	}

	.city-tile {
		padding: var(--space-2) var(--space-3);
		font-size: var(--text-sm);
	}
}