/* ==========================================================================
   Widget — Location Map (Map + Visit Info)
   Figma node 101:233. Mobile-first: one column, then two from 900px up.

   The comp sets its secondary copy in grey rather than the navy the "ice"
   scheme normally uses for soft text, so the muted colour is pinned locally
   here instead of inherited. Everything else follows the scheme.
   ========================================================================== */

.o-visit {
	--o-visit-gap: 3rem;                 /* 48, per the comp */
	--o-visit-muted: var(--o-ink-soft);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o-visit-gap);
	align-items: start;
}

/* --------------------------------------------------------------------------
   Heading block
   The shared block, tuned to the comp: a wider-tracked eyebrow, a semibold
   uppercase title, and grey rather than navy intro copy.
   -------------------------------------------------------------------------- */
.o-section--location-map .o-section-heading {
	margin-bottom: 3.5rem; /* 56, the comp's gap above the columns */
}

.o-section--location-map .o-eyebrow {
	font-size: var(--o-label-size);
	letter-spacing: 0.139em; /* 2.5px at 18px */
}

.o-section--location-map .o-section-heading__title {
	font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); /* 28 -> 48, per the comp */
	font-weight: var(--o-fw-semibold);
	line-height: 1.084;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-section--location-map .o-section-heading__intro {
	margin-top: var(--o-space-sm);
	color: var(--o-ink-soft);
	font-size: 1.0625rem; /* 17 */
	line-height: 1.53;
}

/* --------------------------------------------------------------------------
   Map
   White and ruled like the cards, so an empty map still reads as a panel while
   a page is being built rather than as a hole in the layout.
   -------------------------------------------------------------------------- */
.o-visit__map {
	--o-map-ratio: 1.5;
	--o-pin-x: 49%;
	--o-pin-y: 49%;

	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--o-map-ratio);
	border: 1.5px solid var(--o-rule);
	background-color: var(--o-white);
}

.o-visit__map-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   The pin
   Anchored by the point of its tail, not by the pill, so the position controls
   name the spot on the map rather than the top-left of a label.
   -------------------------------------------------------------------------- */
.o-visit__pin {
	position: absolute;
	left: var(--o-pin-x);
	top: var(--o-pin-y);
	z-index: 1;
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	padding: 0.75rem 1.375rem 0.75rem 1.25rem;
	border-radius: var(--o-radius-pill);
	background-color: var(--o-navy);
	color: var(--o-white);
	white-space: nowrap;
	pointer-events: none;
	/* The 9px is the tail below, so the tip lands on --o-pin-y. */
	transform: translate(-50%, calc(-100% - 9px));
}

.o-visit__pin::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 9px solid var(--o-navy);
	transform: translateX(-50%);
}

.o-visit__pin-glyph {
	display: block;
	width: auto;
	height: 17px;
}

.o-visit__pin-label {
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.094em; /* 1.5px at 16px */
	line-height: 1.2;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Information column
   -------------------------------------------------------------------------- */
.o-visit__info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.o-visit__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 1.5px solid var(--o-rule);
	background-color: var(--o-white);
	color: var(--o-text);
	text-decoration: none;
}

.o-visit__card-title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	color: var(--o-navy);
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-visit__card-text {
	margin: 0;
	color: var(--o-visit-muted);
	line-height: 1.5;
}

/* Address card -------------------------------------------------------------- */
.o-visit__card--address {
	gap: 0.625rem;
	padding: 2rem 2.25rem; /* 32 / 36 */
}

.o-visit__card--address .o-visit__card-title {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); /* 20 -> 26 */
	line-height: 1.23;
}

.o-visit__card--address .o-visit__card-text {
	font-size: var(--o-fs-body);
	line-height: 1.56;
}

/* Info cards ---------------------------------------------------------------- */
.o-visit__cards {
	--o-visit-card-cols: 1;

	display: grid;
	grid-template-columns: repeat(var(--o-visit-card-cols), minmax(0, 1fr));
	gap: 1.5rem;
}

@media (min-width: 600px) {
	.o-visit__cards {
		--o-visit-card-cols: 2;
	}
}

.o-visit__card--info {
	gap: 1rem;
	padding: 1.75rem; /* 28 */
	transition: border-color var(--o-transition);
}

/*
 * The tinted tile is drawn here rather than baked into the SVG, so the glyph
 * inherits currentColor and a new icon is a one-file drop.
 */
.o-visit__card-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background-color: var(--o-ice);
	color: var(--o-teal);
}

.o-visit__card-glyph {
	display: block;
	width: auto;
	height: 24px;
}

.o-visit__card--info .o-visit__card-title {
	font-size: 1.25rem; /* 20 */
	line-height: 1.3;
}

.o-visit__card--info .o-visit__card-text {
	font-size: 0.9375rem; /* 15 */
	line-height: 1.47;
}

/*
 * The whole card is the link, so this is a span wearing the .o-textlink
 * treatment. Hover therefore comes from the card, not from the element itself.
 */
.o-visit__card-cta {
	margin-top: auto;
	color: var(--o-accent);
	font-size: 0.9375rem; /* 15 */
	letter-spacing: 0.03em; /* 0.45px at 15px */
}

a.o-visit__card--info:hover,
a.o-visit__card--info:focus-visible {
	border-color: var(--o-accent);
	color: var(--o-text);
}

a.o-visit__card--info:hover .o-textlink__chevrons,
a.o-visit__card--info:focus-visible .o-textlink__chevrons {
	transform: translateX(0.25em);
}

/* --------------------------------------------------------------------------
   Directions button
   The shared .o-btn, widened and set at the comp's larger label size.
   -------------------------------------------------------------------------- */
.o-visit__directions {
	width: 100%;
	gap: 0.875rem;
	padding-block: 1.5rem;
	font-size: var(--o-fs-body-lg);
	letter-spacing: 0.056em; /* 1px at 18px */
}

.o-visit__directions-glyph {
	display: block;
	width: auto;
	height: 17px;
}

/* --------------------------------------------------------------------------
   Two columns
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-visit {
		grid-template-columns: 1fr 1fr;
	}

	.o-visit--split-map-wide {
		grid-template-columns: 1.5fr 1fr;
	}

	.o-visit--split-map-slim {
		grid-template-columns: 1fr 1.5fr;
	}

	.o-visit--map-right .o-visit__map {
		order: 2;
	}

	.o-visit--map-right .o-visit__info {
		order: 1;
	}

	/* With the map second, the wider track is the second one. */
	.o-visit--map-right.o-visit--split-map-wide {
		grid-template-columns: 1fr 1.5fr;
	}

	.o-visit--map-right.o-visit--split-map-slim {
		grid-template-columns: 1.5fr 1fr;
	}
}