/**
 * Medwell — facility card locations + grouped listing
 *
 * Every value here is taken from the live cards, not approximated:
 *   title   Poppins 500, 19px / 25.65px, #333333, margin 20px 22px 8px
 *   meta    Poppins 400, 17px / 27.2px,  #6B7280, margin 0 22px 22px
 *   card    20px radius, 1px rgba(38,62,138,.08), 251px on a 30px 4-col grid
 * The location line reuses the card's 22px side margin and 8px gap, so no
 * other card element moves. It adds 29px of card height.
 */

/* ---- the card line (Option B: pin + text) ---- */

.medwell-loc {
	display: flex;
	/* flex-start, not center: a location that wraps to two lines must keep the
	   pin on the first line rather than floating between them. */
	align-items: flex-start;
	gap: 6px;
	margin: 0 22px 8px;
	color: #263e8a;
	font-family: "Poppins", Helvetica, Arial, Lucida, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
}

.medwell-loc__pin {
	flex-shrink: 0;
	/* Optically centre the pin on the first line of text. The glyph's mass sits
	   high in its box, so this is 3px rather than the arithmetic (21-15)/2. */
	margin-top: 3px;
}

.medwell-loc__text {
	min-width: 0;
}

/* ---- group headings ---- */

.medwell-group {
	/* Full-bleed rows, whichever layout mode the grid is in. Each of these is
	   inert in the modes it does not apply to, so no assumption is made about
	   the container being grid, flex or floats. */
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	clear: both;
}

.medwell-group--metro {
	font-family: "Poppins", Helvetica, Arial, Lucida, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #6b7280;
	/* The grid's 30px gap already sits above and below. */
	margin: 0;
}

/* ---- mobile ---- */

@media (max-width: 767px) {
	.medwell-loc {
		font-size: 14px;
		line-height: 20px;
	}
}