/* ==========================================================================
   area.css — Genva Interior

   Ported from the mock. The towns are a wp:list styled as chips: list markup
   describes what they are, and the editor lets the shop owner add one with a
   press of Enter.
   ========================================================================== */

.areacard {
	--icon-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");

	background: var(--surface-container-lowest);
	padding: var(--space-xl);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-sm);
}

@media (width < 782px) {

	.areacard {
		padding: var(--space-md);
	}
}

.areacard > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.areacard__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.areacard__list li {
	margin: 0;
	background: var(--surface-container-high);
	color: var(--on-surface);
	padding: 0.375rem 0.75rem;
	border-radius: var(--rounded);
}

/* The shop's own town, so a visitor scanning the list finds their area faster
   when it is the one nearest the base. */
.areacard__list li.areatag--home {
	background: var(--secondary-fixed);
	color: var(--on-secondary-fixed);
	font-weight: 700;
}

.areacard__note {
	margin-top: var(--space-lg);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--on-surface-variant);
}

.areacard__note::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--secondary);
	mask-image: var(--icon-place);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}