/**
 * Single: Location
 *
 * Full-width stack — hero, horizontal info bar, sticky jump navigation, then
 * the shared page builder. The old sidebar rail and bespoke location sections
 * were retired; everything below the jump nav is a standard module.
 */

/*
 * ====================================================================== *
 * Hero — Map Pin Icon in Pill
 * ====================================================================== *
 */

.single-location > .module.hero.image-hero-centered {
	z-index: 1;
}

/* Location hero sizing */

.single-location > .module.hero.image-hero-centered > .container {
	padding-bottom: var(--module-spacing-medium);
	padding-top: calc(var(--header-height) + var(--module-spacing-large));
}

/* Location-specific pin icon prepended to the hero's eyebrow pill */

.single-location > .module.hero.image-hero-centered .content .pill {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

.single-location > .module.hero.image-hero-centered .content .pill::before {
	background: currentColor;
	content: "";
	display: inline-block;
	flex-shrink: 0;
	height: 12px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 9px;
}

/*
 * ====================================================================== *
 * Location Info Bar
 * ====================================================================== *
 */

/*
 * Horizontal replacement for the old vertical sidebar. No card — the section
 * itself is the white ground, so the hero's curved bottom lands on it and the
 * blue jump nav starts straight off the same white. The hero gets the same
 * white below so the two read as one continuous field.
 */

.single-location > .module.hero.image-hero-centered,
.location-info-bar {
	background: var(--samoyed-white);
}

.location-info-bar {
	padding: var(--module-spacing-small) 0;
	position: relative;
	z-index: 2;
}

.location-info-bar-inner {
	align-items: stretch;
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 340px;
}

.location-info-bar.no-map .location-info-bar-inner {
	grid-template-columns: 1fr;
}

/*** Details ***/

.location-info-details {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-large);
}

.location-info-logo {
	flex-shrink: 0;
	width: 140px;
}

.location-info-logo img {
	display: block;
	height: auto;
	max-width: 100%;
	width: auto;
}

/* flex-basis 0 so the blocks share the row evenly instead of sizing to their
   content — otherwise a long hours list pushes itself onto a second row. */

.location-info-block {
	flex: 1 1 0;
	min-width: 150px;
}

.location-info-block > .pill {
	margin-bottom: var(--text-spacing-xsmall);
}

.location-info-block p {
	margin: 0;
}

.location-info-block .btn.tertiary {
	margin-top: var(--text-spacing-xxsmall);
}

/*** Contact ***/

.location-info-contact + .location-info-contact {
	margin-top: var(--text-spacing-xxsmall);
}

.location-info-contact strong {
	display: block;
	margin-bottom: 2px;
}

.location-info-contact a {
	color: var(--retriever-black);
}

.location-info-contact a:hover {
	color: var(--mustang-blue);
	text-decoration: underline;
}

/*** Hours ***/

.location-info-hours {
	margin: 0;
}

.location-info-hours-row {
	padding: 0;
}

.location-info-hours-row + .location-info-hours-row {
	margin-top: var(--text-spacing-xxsmall);
}

.location-info-hours-row dt {
	font-weight: 600;
	margin-bottom: 2px;
}

.location-info-hours-row dd {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall) var(--text-spacing-xsmall);
	justify-content: flex-start;
	margin: 0;
}

/*** Map ***/

/* No background: the map's base state shape is filled #E6E3DE, the same value
   as --appaloosa-beige, so a beige box swallowed the outline and left only the
   highlighted region and pin visible. The component brings its own aspect
   ratio, width cap and pin placement, so all this does is centre it. */

.location-info-map {
	align-items: center;
	display: flex;
	justify-content: center;
}

/*
 * ====================================================================== *
 * Jump Navigation
 * ====================================================================== *
 */

/*
 * The site header hides on scroll-down and slides back in on scroll-up, so a
 * fixed offset would leave a strip of page content scrolling through the gap
 * whenever the header is away. Pin to the top of the viewport by default and
 * only drop below the header while it is actually on screen.
 */

.location-jump-nav {
	background: var(--russian-blue);
	position: sticky;
	top: 0;
	transition: top .3s ease;
	z-index: 4;
}

body:has(#header.sticky:not(.is-hidden)) .location-jump-nav {
	top: var(--sticky-header-height);
}

.location-jump-nav > .container {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-small);
	padding-bottom: var(--text-spacing-xsmall);
	padding-top: var(--text-spacing-xsmall);
}

.location-jump-nav-label {
	flex-shrink: 0;
}

.location-jump-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/* Sentence case, so the uppercase letter-spacing baked into .pill is reset too */

.location-jump-nav .pill {
	background: var(--samoyed-white);
	color: var(--russian-blue);
	display: block;
	font-size: calc(15rem / 16);
	letter-spacing: 0.2px;
	padding: 6px 14px;
	text-decoration: none;
	text-transform: none;
	transition: background .2s ease, color .2s ease;
	white-space: nowrap;
}

.location-jump-nav .pill:hover,
.location-jump-nav .pill:focus-visible {
	background: var(--collie-blue);
	color: var(--russian-blue);
}

/* Jump targets clear both the sticky header and this nav */

.single-location .page-builder > .module {
	scroll-margin-top: calc(var(--sticky-header-height) + 80px);
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	/*** Info Bar — map drops below the details ***/

	.location-info-bar-inner {
		grid-template-columns: 1fr;
	}

	.location-info-details {
		gap: var(--text-spacing-medium);
	}

	.location-info-logo {
		width: 120px;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.single-location > .module.hero.image-hero-centered > .container {
		padding-bottom: var(--module-spacing-small);
	}

	/*** Info Bar — single column stack ***/

	.location-info-bar {
		padding: var(--text-spacing-xlarge) 0 var(--module-spacing-small);
	}

	/* Address and phone pair up on one row — both are short, and side by side
	   keeps the essentials above the fold. Hours runs long, so it spans. */

	.location-info-details {
		display: grid;
		gap: var(--text-spacing-small) var(--text-spacing-medium);
		grid-template-columns: 1fr 1fr;
	}

	.location-info-block {
		min-width: 0;
		width: 100%;
	}

	.location-info-logo,
	.location-info-block.hours {
		grid-column: 1 / -1;
	}

	/*** Jump Nav — one scrolling row so it never eats the viewport ***/

	/* The mobile hamburger is position: fixed at top right (z-index 99999), so
	   it sits over this bar. Pad the scroll track by its footprint + the outer
	   padding, letting the last pill scroll clear instead of hiding under it. */

	.location-jump-nav > .container {
		gap: var(--text-spacing-xxsmall);
		padding-right: calc(64px + var(--container-outer-padding));
	}

	.location-jump-nav-label {
		display: none;
	}

	.location-jump-nav ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.location-jump-nav ul::-webkit-scrollbar {
		display: none;
	}

	.single-location .page-builder > .module {
		scroll-margin-top: 72px;
	}

}

/*
 * ====================================================================== *
 * Hero — Content + Image
 * ====================================================================== *
 */

/* The shared hero runs its image at 4/3. Campuses using the split style want
   a square, so it is overridden here rather than in the module, which every
   other page still relies on. */

.single-location .module.hero.content-image .media {
	aspect-ratio: 1 / 1;
}