/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.location-tabs {
	container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* card shell */

.location-tabs__card {
	overflow: hidden; /* clip the flush Join Now bar to the card radius */
	border-radius: var(--box-border-radius-lg);
	background: var(--blue-dk);
	color: var(--white);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* tab nav */

.location-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;

	margin: 0;
	padding: 14px 10px 0;
	list-style: none;

	border-bottom: 1px solid var(--white);
}

.location-tabs__nav .nav-item {
	margin-bottom: 16px; /* space between the pills row and the divider */
}

/* override bootstrap .nav-link defaults */
.location-tabs__tab.nav-link {
	margin: 0;
	padding: 11px 24px;

	background: transparent;
	border: none !important;
	border-radius: 999px;

	color: var(--white);
	cursor: pointer;

	transition: all 0.2s ease;
}

.location-tabs__tab.nav-link:hover,
.location-tabs__tab.nav-link:focus {
	color: var(--white);
	background: rgba(255, 255, 255, 0.15);
}

.location-tabs__tab.nav-link.active {
	background: var(--white);
	color: var(--blue-dk);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile tab dropdown — built by locationTabs.js, hidden until the nav collapses
   at the 760px container breakpoint. Styled like the active tab pill (white field,
   blue-dk text) so it reads on the dark card. */

.location-tabs__dropdown {
	display: none;
	position: relative;
	padding: 16px 20px 0; /* mirrors the old nav padding so it isn't flush to the card edge */
	z-index: 5;
}

.location-tabs__dropdown-trigger {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 52px 14px 20px; /* right room for the caret */

	background: var(--white);
	border: none;
	border-radius: var(--btn-border-radius-lg);

	color: var(--blue-dk);
	text-align: left;
	cursor: pointer;
}

/* CSS caret (border-triangle), rotates open */
.location-tabs__dropdown-trigger::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;

	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid var(--blue-dk);

	transform: translateY(-50%);
	transition: transform 0.25s ease;
}

.location-tabs__dropdown-trigger[aria-expanded="true"]::after {
	transform: translateY(-50%) rotate(180deg);
}

.location-tabs__dropdown-list {
	position: absolute;
	top: 100%;
	left: 20px;
	right: 20px;
	z-index: 20;

	margin: 6px 0 0;
	padding: 6px;
	list-style: none;

	background: var(--white);
	border-radius: var(--btn-border-radius-lg);
	box-shadow: 0 12px 26px rgba(35, 31, 32, 0.22);

	display: none;
}

.location-tabs__dropdown.is-open .location-tabs__dropdown-list {
	display: block;
	animation: location-tabs-dropdown-in 0.18s ease-out;
}

@keyframes location-tabs-dropdown-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.location-tabs__dropdown-item,
.location-tabs__select-option {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 16px;

	background: transparent;
	border: none;
	border-radius: var(--btn-border-radius-sm);

	color: var(--blue-dk);
	text-align: left;
	cursor: pointer;

	transition: background 0.2s ease;
}

.location-tabs__dropdown-item:hover,
.location-tabs__dropdown-item:focus,
.location-tabs__select-option:hover,
.location-tabs__select-option:focus {
	background: rgba(0, 96, 175, 0.08); /* var(--blue-dk) tint */
}

.location-tabs__dropdown-item[aria-selected="true"],
.location-tabs__select-option[aria-selected="true"] {
	background: var(--blue-dk);
	color: var(--white);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* panes */

.location-tabs__pane {
	padding: 16px 26px 40px; /* comp: 16px top / 26px sides / 40px bottom */
}

/* Each tab leads with its title an extra 40px below the pane's own top padding. That
   extra space lives on the heading (not the pane) so the overview's floated image still
   rides higher than the name beside it and reads taller. */
.location-tabs__location-name,
.location-tabs__programs-title,
.location-tabs__amenities-title,
.location-tabs__rates-title,
.location-tabs__events-title {
	padding-top: 40px;
}

/* shared pane section titles (programs / amenities mirror rates / events) */
.location-tabs__programs-title,
.location-tabs__amenities-title {
	margin: 0 0 24px;
	color: var(--white);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* overview */

.location-tabs__overview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 36px 48px;
}

/* Intro spans the full width and hosts the floated image so the name + excerpt
   wrap to its left and flow under it as the text grows. Location + Hours each
   span the full width on their own rows below. */
.location-tabs__overview-intro {
	grid-column: 1 / -1;
	min-width: 0;
	position: relative;
}

/* Image floats right; name + excerpt flow to its left and under it as the text grows. */
.location-tabs__overview-image {
	float: right;
	width: 48%;
	margin: 0 0 16px 32px;
}

.location-tabs__overview-image img {
	display: block;
	width: 100%;
	height: 290px;
	object-fit: cover;
	border-radius: var(--box-border-radius-lg);
}

/* The whole intro is the collapsible region: JS sets an explicit pixel height and
   animates it. Clipping the intro — rather than the read-more block itself — lets the
   read-more copy stay in normal flow and wrap around the floated image, while the
   height still animates. (A BFC on the read-more block would refuse to wrap the float.)
   Spacing before the read-more copy so it doesn't butt against the excerpt. */
.location-tabs__overview-intro.is-collapsible {
	overflow: hidden;
	transition: height 0.35s ease;
}

.location-tabs__read-more-content {
	margin-top: 12px;
}

/* Read More toggle — uses the shared .btn--read-more system. Lives inside the intro,
   in flow under the excerpt, so it hugs the text (collapsed) and drops to the bottom as
   the revealed copy pushes it down (expanded). Made block-level (overriding .btn's
   inline-block) so its top margin COLLAPSES with the bottom margin of the copy above it
   instead of stacking — that keeps a single, consistent gap in both states. fit-content
   keeps its natural width, left-aligned on its own line beside the floated image. */
.location-tabs__read-more {
	display: block;
	width: fit-content;
	margin-top: 20px;
}

/* Center the caret with the label and drop the shared icon's bottom margin so the
   180° flip pivots on its true center instead of landing low. */
.location-tabs__read-more .btn-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.location-tabs__read-more .icon {
	display: inline-flex;
	transition: transform 0.25s ease;
}

.location-tabs__read-more.btn.btn--read-more .icon svg {
	margin: 0;
}

.location-tabs__read-more[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.location-tabs__location-name {
	margin: 0 0 16px;
	color: var(--white);
}

.location-tabs__excerpt {
	max-width: 60ch;
	margin-bottom: 20px; /* comp pin #6 (~20px below the text); also collapses with the read-more button's margin */
}

/* Location + Hours each span the full grid width, with the label in a fixed
   left column and the content to its right. */
.location-tabs__location,
.location-tabs__hours {
	grid-column: 1 / -1;
	display: flex;
	gap: 48px;
}

.location-tabs__label {
	flex: 0 0 110px;
	margin: 0;
	color: var(--white);
}

.location-tabs__location-details,
.location-tabs__hours-groups {
	flex: 1 1 auto;
	min-width: 0;
}

.location-tabs__address,
.location-tabs__phone {
	margin: 0 0 4px;
}

/* phone is a tel: link — keep it on the card's white, underline on hover */
.location-tabs__phone a {
	color: var(--white);
	text-decoration: none;
}

.location-tabs__phone a:hover,
.location-tabs__phone a:focus {
	text-decoration: underline;
}

.location-tabs__location-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

/* hours — the holiday card spans the row; regular groups sit two per row below it */
.location-tabs__hours-groups {
	display: grid;
	/* columns hug their content so a long group (e.g. Kids Zone) gets the spare width */
	grid-template-columns: repeat(2, minmax(0, max-content));
	align-items: start;
	gap: 28px 64px;
}

.location-tabs__hours-group {
	min-width: 0;
}

.location-tabs__hours-title {
	margin: 0 0 10px;
	font-size: 24px; /* match the "HOURS" label size, overriding .link-text's 18px */
	color: var(--white);
}

.location-tabs__hours-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.location-tabs__hours-list li {
	display: flex;
	gap: 8px;
	margin-bottom: 4px;
}

.location-tabs__hours-day {
	flex-shrink: 0;
	font-weight: 700;
	white-space: nowrap;
}

.location-tabs__hours-group--holiday {
	grid-column: 1 / -1;
	padding: 16px 18px;
	border-left: 4px solid var(--blue-lt);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
}

.location-tabs__holiday-hours-list li.location-tabs__holiday-hours-row {
	display: grid;
	/* full-width card: name + date take a third, hours + notes get the rest */
	grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
	gap: 8px 24px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.location-tabs__holiday-hours-list li.location-tabs__holiday-hours-row:first-child {
	padding-top: 0;
}

.location-tabs__holiday-hours-list li.location-tabs__holiday-hours-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.location-tabs__holiday-hours-heading,
.location-tabs__holiday-hours-details {
	display: flex;
	flex-direction: column;
}

.location-tabs__holiday-hours-name,
.location-tabs__holiday-hours-value {
	font-weight: 700;
}

.location-tabs__holiday-hours-date,
.location-tabs__holiday-hours-note,
.location-tabs__holiday-hours-notice {
	font-size: 14px;
}

.location-tabs__holiday-hours-notice p {
	margin: 4px 0 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* featured programs — styled by hover_cards.css (same classes reused).
   In-tab cards deviate from the homepage block: full-bleed (no side gutter),
   tighter gap, a per-card flip button height, and smaller type to fit the comp. */

.location-tabs__programs .hover-cards__cards {
	column-gap: 16px;
	row-gap: 16px;
}

/* Fill the container with flush 16px gaps. The homepage basis is math'd for 36px
   gaps, so against our 16px gaps the row came up narrow and centered — opening a
   side gutter. Each breakpoint is restated because this scoped selector outspecifies
   hover_cards.css's responsive rules, so its 2-/1-col collapse must be redeclared. */
.location-tabs__programs .hover-cards__card {
	min-height: 200px;
	flex: 0 0 calc((100% - (16px * 2)) / 3); /* 3 across */
}

@container (max-width: 805px) {
	.location-tabs__programs .hover-cards__card {
		flex: 0 0 calc((100% - 16px) / 2); /* 2 across */
	}
}

@container (max-width: 630px) {
	.location-tabs__programs .hover-cards__card {
		flex: 0 0 100%; /* 1 across */
	}
}

.location-tabs__programs .hover-cards__card__content {
	padding: 10px;
}

.location-tabs__programs .hover-cards__card__title.h4,
.location-tabs__programs .hover-cards__card__link.h4 {
	font-size: 18px;
}

/* Height comes from --flip-h-front, set per card by locationTabs.js from that card's own
   title height (1-3 lines) — unlike hover_cards.css, which pads every card for the
   longest possible title. translateZ must stay at half the height for the 3D flip to stay
   centered. The px fallback only covers the instant before that JS runs. */
.location-tabs__programs .hover-cards__card__flip-button {
	height: var(--flip-h-front, 32px);
	transform: translateZ(calc(var(--flip-h-front, 32px) / -2));
	transition:
		transform 0.4s ease,
		height 0.4s ease;
}

.location-tabs__programs .flip-button__face {
	transition: transform 0.4s ease;
}

/* line spacing for when the "Explore …" label wraps to two lines */
.location-tabs__programs .flip-button__face--back .hover-cards__card__link {
	line-height: 1.15;
}

.location-tabs__programs .flip-button__face--front {
	transform: rotateX(0deg) translateZ(calc(var(--flip-h-front, 32px) / 2));
}

.location-tabs__programs .flip-button__face--back {
	transform: rotateX(90deg) translateZ(calc(var(--flip-h-front, 32px) / 2));
}

/* Hover shows the back face, whose "Explore …" label often runs longer than the title, so
   the button grows to --flip-h-back instead. Offset stays at half the current height so
   the flip keeps its pivot. Skipped on touch — see the matching note in hover_cards.css. */
@media (hover: hover) {
	.location-tabs__programs
		.hover-cards__card:hover
		.hover-cards__card__flip-button {
		height: var(--flip-h-back, 56px);
		transform: translateZ(calc(var(--flip-h-back, 56px) / -2)) rotateX(-90deg);
	}

	.location-tabs__programs .hover-cards__card:hover .flip-button__face--front {
		transform: rotateX(0deg) translateZ(calc(var(--flip-h-back, 56px) / 2));
	}

	.location-tabs__programs .hover-cards__card:hover .flip-button__face--back {
		transform: rotateX(90deg) translateZ(calc(var(--flip-h-back, 56px) / 2));
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* amenities */

.location-tabs__amenities {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;

	margin: 0;
	padding: 0;
	list-style: none;
}

/* No-sidebar layouts give the block enough room for a 4th column. Container-query
   driven, so it only fires on the wider (sidebar-less) location pages. */
@container (min-width: 1100px) {
	.location-tabs__amenities {
		grid-template-columns: repeat(4, 1fr);
	}
}

.location-tabs__amenity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;

	color: var(--white);
}

.location-tabs__amenity-icon {
	display: inline-flex;
	align-items: flex-end; /* if a viewBox bottom-pads its content, anchor SVG to the row baseline */
	min-height: 34px;
}

/* Fix the height and let width be intrinsic so wide-aspect icons (person-swimming
   576×512) render at the same vertical height as square ones (heart 512×512),
   instead of being scaled to fit a 34×34 box and shrinking vertically. */
.location-tabs__amenity-icon svg {
	width: auto;
	height: 34px;
	fill: currentColor;
	display: block;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* rates */

/* font sizes here come from the .h3 / .h4 / .h5 / .link-text utility classes
   in defaults.css (which carry their own mobile scaling). Only color + spacing
   are declared per-component. */

.location-tabs__rates-title {
	margin: 0 0 24px;
	color: var(--white);
}

.location-tabs__rates-group {
	margin-bottom: 32px;
}

.location-tabs__rates-group:last-child {
	margin-bottom: 0;
}

.location-tabs__rates-group-title {
	margin: 0 0 16px;
	color: var(--white);
}

.location-tabs__rates-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.location-tabs__rate-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	padding: 22px 12px;
	border-radius: var(--box-border-radius-sm);

	background: var(--white);
	color: var(--black);
	text-decoration: none;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.location-tabs__rate-card:hover,
.location-tabs__rate-card:focus {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 12px 26px rgba(35, 31, 32, 0.22);
	color: var(--black);
}

.location-tabs__rate-card-text {
	min-width: 0;
	/* Grow so the price and its arrow stay together at the right edge — with three
     children, space-between alone would strand the price in the middle. */
	flex: 1 1 auto;
}

.location-tabs__rate-card-title {
	margin: 0 0 8px;
	color: var(--blue-dk);
}

.location-tabs__rate-card-line {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--black);
}

.location-tabs__rate-card-price {
	flex: 0 0 auto;
	margin: 0; /* drop the .h4 bottom margin so the price sits vertically centered */
	color: var(--purple-dk);
	white-space: nowrap;
}

/* Rate cards link out to ActiveNet, but the lift-on-hover only told you that once
   you were already hovering. A resting arrow marks them as links; it slides on
   hover to confirm the destination is off-site. */
.location-tabs__rate-card .icon.triangle-right {
	flex: 0 0 auto;
	margin-left: -6px; /* close the 16px card gap between the price and its arrow */
	font-size: 14px;
	color: var(--purple-dk);
	transition: transform 0.2s ease;
}

.location-tabs__rate-card:hover .icon.triangle-right,
.location-tabs__rate-card:focus .icon.triangle-right {
	transform: translateX(4px);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* events (placeholder data — card layout is final, source TBD) */

.location-tabs__events-title {
	margin: 0 0 24px;
	color: var(--white);
}

.location-tabs__events-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.location-tabs__event-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--box-border-radius-sm);
	overflow: hidden;
}

/* gray fallback keeps the card shape visible until an event image is wired in */
.location-tabs__event-image {
	background: var(--gray);
}

.location-tabs__event-image img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.location-tabs__event-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
}

.location-tabs__event-title {
	margin: 0;
	color: var(--blue-dk);
}

.location-tabs__event-meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.location-tabs__event-icon .icon {
	font-size: 20px;
	color: var(--blue-dk);
}

.location-tabs__event-datetime {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	color: var(--black);
}

.location-tabs__event-date,
.location-tabs__event-time {
	font-weight: 700;
}

.location-tabs__event-card--hidden {
	display: none;
}

.location-tabs__events-more-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* join now bar (full-width, flush to the card's bottom corners) */

.location-tabs__join.btn {
	display: block;
	width: 100%;
	padding: 20px;
	border-top: 1px solid var(--white); /* white divider above the Join Now bar (comp) */
	border-radius: 0;
	text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* location picker (shown only when no location is pinned) */

.location-tabs__picker {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 28px;
}

.location-tabs__picker-label {
	color: var(--blue-dk);
}

.location-tabs__select-wrapper {
	position: relative;
	max-width: 420px;
}

.location-tabs__select {
	width: 100%;
	padding: 14px 52px 14px 20px;

	appearance: none;
	-webkit-appearance: none;
	background: var(--gray-lt);
	border: none;
	border-radius: var(--btn-border-radius-lg);

	color: var(--blue-dk);
	font: inherit;
	cursor: pointer;
}

.location-tabs__select:focus {
	outline: none;
}

/* arrow sits over the native control and ignores clicks so the select still opens */
.location-tabs__select-icon {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	pointer-events: none;
}

.location-tabs__select-icon .icon {
	font-size: 14px;
	color: var(--blue-dk);
}

/* caret rotates when the custom picker is open (closed look is unchanged) */
.location-tabs__select-icon {
	transition: transform 0.25s ease;
}

.location-tabs__select-wrapper.is-open .location-tabs__select-icon {
	transform: translateY(-50%) rotate(180deg);
}

/* The custom trigger reuses .location-tabs__select for an identical closed pill; these only
   make a <button> behave like the old <select>'s single line of left-aligned text. */
.location-tabs__select-trigger {
	display: block;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Open list — same styled dropdown as the tabs (white card, shadow), aligned to the
   picker field instead of the native browser menu. */
.location-tabs__select-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;

	margin: 6px 0 0;
	padding: 6px;
	list-style: none;

	background: var(--white);
	border-radius: var(--btn-border-radius-lg);
	box-shadow: 0 12px 26px rgba(35, 31, 32, 0.22);

	display: none;
}

.location-tabs__select-wrapper.is-open .location-tabs__select-list {
	display: block;
	animation: location-tabs-dropdown-in 0.18s ease-out;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* responsive */

@container (max-width: 900px) {
	.location-tabs__amenities,
	.location-tabs__rates-cards,
	.location-tabs__events-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (max-width: 760px) {
	/* full-width select on mobile */
	.location-tabs__select-wrapper {
		max-width: none;
	}

	/* swap the pill nav for the custom dropdown (built by locationTabs.js) */
	.location-tabs__nav {
		display: none;
	}

	.location-tabs__dropdown {
		display: block;
	}

	.location-tabs__pane {
		padding: 24px 20px;
	}

	/* image stacks above the name here, so drop the desktop heading offset — the
     pane padding above provides the gap below the divider instead. */
	.location-tabs__location-name,
	.location-tabs__programs-title,
	.location-tabs__amenities-title,
	.location-tabs__rates-title,
	.location-tabs__events-title {
		padding-top: 0;
	}

	.location-tabs__overview {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* image stacks above the text rather than floating beside it */
	.location-tabs__overview-image {
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}

	.location-tabs__overview-image img {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	/* stack the label above its content on mobile */
	.location-tabs__location,
	.location-tabs__hours {
		flex-direction: column;
		gap: 10px;
	}

	.location-tabs__label {
		flex-basis: auto;
	}

	.location-tabs__hours-groups {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.location-tabs__holiday-hours-list li.location-tabs__holiday-hours-row {
		grid-template-columns: 1fr;
	}
}

@container (max-width: 560px) {
	.location-tabs__amenities,
	.location-tabs__rates-cards,
	.location-tabs__events-cards {
		grid-template-columns: 1fr;
	}
}