/**
 * TLR location tiles - the grid of 13 cards under the map.
 *
 * These are the page's location content. The search reorders them and unhides the distance
 * line inside each; nothing here is drawn by JavaScript.
 *
 * Made Nice.
 */

.tlr-tiles {
	--tlr-tiles-gap: 20px;

	--tlr-tile-ink: var(--e-global-color-primary, #003b4e);
	--tlr-tile-body: var(--e-global-color-text, #00506d);
	--tlr-tile-accent: var(--e-global-color-secondary, #94d6dc);
	--tlr-tile-muted: color-mix(in srgb, var(--tlr-tile-body) 72%, transparent);
	--tlr-tile-line: color-mix(in srgb, var(--tlr-tile-ink) 18%, transparent);

	font-family: var(--e-global-typography-text-font-family, "Manrope"), sans-serif;
	color: var(--tlr-tile-body);

	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Intrinsic rather than breakpointed, so the grid is right in the shortcode and in the
	   Elementor editor's preview alike. The Elementor Columns control overrides this per device
	   when someone wants an explicit count - and it has to override the property itself, not a
	   custom property, or its desktop rule would outrank any media query here. */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--tlr-tiles-gap);
}

/* The hub's "See all Locations" button jumps down here. The header is sticky, so without this
   the first row of tiles lands underneath it. Set on the Elementor wrapper as well as the grid,
   because the anchor id can be put on either. */
.tlr-tiles,
.elementor-widget-tlr-location-tiles {
	scroll-margin-top: 130px;
}

@media (max-width: 767px) {
	.tlr-tiles,
	.elementor-widget-tlr-location-tiles {
		scroll-margin-top: 100px;
	}
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.tlr-tiles {
		--tlr-tile-muted: #4a7d94;
		--tlr-tile-line: #ccdde4;
	}
}

.tlr-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--tlr-tile-line);
	border-radius: 8px;
	background: #ffffff;
}

/* The nearest result after a search, so the answer to "which one" is visible at a glance and
   not only in the status line above. */
.tlr-tile.is-nearest {
	border-color: var(--tlr-tile-accent);
	box-shadow: 0 0 0 2px var(--tlr-tile-accent);
}

.tlr-tile__town {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--tlr-tile-muted);
}

.tlr-tile__name {
	margin: 0 0 2px;
	font-family: var(--e-global-typography-primary-font-family, "Lora"), serif;
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--tlr-tile-ink);
}

.tlr-tile__name a {
	color: inherit;
	text-decoration: none;
}

.tlr-tile__name a:hover,
.tlr-tile__name a:focus-visible {
	text-decoration: underline;
}

.tlr-tile__address,
.tlr-tile__hours {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tlr-tile__hours {
	color: var(--tlr-tile-muted);
}

.tlr-tile__distance {
	margin: 6px 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--tlr-tile-ink);
}

/* Pushed to the bottom so the buttons line up across a row whatever the address wraps to. */
.tlr-tile__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: auto 0 0;
	padding-top: 18px;
}

.tlr-tile__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 6px;
	background: var(--tlr-tile-accent);
	color: var(--tlr-tile-ink);
	font-weight: 600;
	text-decoration: none;
}

.tlr-tile__cta:hover,
.tlr-tile__cta:focus-visible {
	background: var(--tlr-tile-ink);
	color: #ffffff;
}

.tlr-tile__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tlr-tile-body);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767px) {
	.tlr-tiles {
		--tlr-tiles-gap: 16px;
	}

	.tlr-tile {
		padding: 20px;
	}
}