/**
 * 门店（门店卡 / 地图占位 / 城市分组）
 *
 * 只在本页需要时加载：is_post_type_archive( 'wig_store' ) / is_singular( 'wig_store' )
 * 搬家自 components.css，规则一字未改 —— 改样式前先确认这条规则属于哪个页面，
 * 放错文件的表现是「某个页面某一块样式莫名丢失」，肉眼很难发现（跑 node tools/css-coverage.js 查差集，差集必须为 0）。
 *
 * 硬规则：本文件不得出现十六进制色值或 rgb / hsl 函数，颜色/字号/圆角/阴影全部引用 tokens.css。
 *
 * @package wig-brand
 */

.wig-map {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	background-color: var(--color-surface-2);
	border-radius: var(--radius-lg);
}

.wig-map__thumb {
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--gradient-placeholder);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-2);
	font-size: var(--font-size-caption);
}

/*
 * 缩略图里的 <img> 必须撑满：全站 img 是 `max-width:100%; height:auto`，
 * 而 <img> 的原始比例由上传的截图决定（16:9 的截图放进 3:2 的框会留出上下两条渐变）。
 * 缺这条规则的表现是「图没坏，但框里漏底色」—— 没图时永远看不出来，一有图就露。
 */
.wig-map__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wig-store-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-body-sm);
	color: var(--color-text-2);
}

.wig-store-card__row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.wig-store-card__row svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 3px;
	color: var(--color-text-3);
}

/* .wig-store-card__phone / __phone--lg 已回迁到 components.css：
   联系页（page-contact.php）复用这两个类，但它不加载本文件。 */

.wig-store-group + .wig-store-group {
	margin-top: var(--space-10);
}

.wig-store-group > .wig-h3 {
	scroll-margin-top: calc(var(--header-h) + var(--space-4));
}