/**
 * Base/default styling for the DLC City Grid widget.
 *
 * Every rule below is intentionally low-specificity (single class only) so
 * that Elementor's own control-generated CSS - which is scoped to
 * `.elementor-element-{id}` and therefore more specific - always wins. This
 * file only supplies sane, generic defaults for a widget dropped onto the
 * canvas before any Style tab controls have been touched.
 */

.dlc-city-grid__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 24px;
	column-gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dlc-city-grid__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	padding: 28px 24px;
	background-color: #17181c;
	color: #ffffff;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.dlc-city-grid__card:hover,
a.dlc-city-grid__card:focus-visible {
	background-color: #202227;
}

.dlc-city-grid__name {
	font-weight: 600;
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dlc-city-grid__count {
	font-size: 0.85em;
	opacity: 0.75;
}

.dlc-city-grid__card--cta {
	align-items: center;
	justify-content: center;
	text-align: center;
}