/*
 * Contact detail blocks. design/PAGE-STRUCTURE.md §6, DESIGN-SYSTEM.md §4.22.
 *
 * Four stacked blocks, each hung off the red 2px left accent -- the one place in
 * the design that motif is used at text scale.
 *
 * The value is Barlow 700 italic 22px UPPERCASE, with one documented exception:
 * §2.3 lists the contact hours line among the handful of things the design sets
 * in natural case, so .sp-contact__value--hours drops the transform.
 */

.sp-contact__grid {
	--sp-grid-min: 300px;
	grid-template-columns: repeat(auto-fit, minmax(var(--sp-grid-min), 1fr));
	gap: clamp(20px, 3vw, 40px);
}

.sp-contact__info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.sp-contact__item {
	padding-left: var(--sp-6);
	border-left: var(--sp-border-accent);
}

.sp-contact__label {
	margin-bottom: var(--sp-2);
}

.sp-contact__value {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-snug);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-contact__value a {
	color: inherit;
}

/* §2.3: the opening-hours line is one of the few pieces of natural-case type. */
.sp-contact__value--hours {
	text-transform: none;
}

.sp-contact__hours-line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.sp-contact__hours-days {
	min-width: 4ch;
}