/*
 * Wheeliebinners Rides: front-end styles.
 * Deliberately minimal; type and spacing come from the theme.
 * Colours follow the Visual Guide and can be overridden with the custom properties.
 */
.wb-ride-facts,
.wb-rides-list {
	--wb-accent: #ea5629;
	--wb-accent-text: #c4330a; /* for small text: #ea5629 is too low-contrast below 19px bold */
	--wb-ink: #111111;
	--wb-rule: #cfc6ba;
}

.wb-ride-facts {
	margin: 0 0 1.5em;
	border-top: 3px solid var(--wb-ink);
}

.wb-ride-facts dl {
	margin: 0;
}

.wb-ride-fact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25em 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--wb-rule);
}

.wb-ride-fact dt {
	margin: 0;
	font-weight: 400;
}

.wb-ride-fact dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.wb-ride-fact a {
	color: var(--wb-accent-text);
}

.wb-ride-status {
	margin: 0;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--wb-rule);
	font-weight: 700;
}

/* Ride page layout: facts + description, then map. */
.wb-ride-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2em;
	align-items: start;
}

.wb-ride-main > :last-child {
	margin-bottom: 0;
}

.wb-ride-route {
	min-width: 0; /* let the map shrink inside the grid */
}

.wb-ride-route .gpxmap {
	margin: 0;
}

/* Side by side once there is room for a readable text column and a useful map. */
@media (min-width: 960px) {
	.wb-ride-layout--side {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3em;
	}

	/* Keep the map in view while reading a long description. */
	.wb-ride-layout--side .wb-ride-route {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5em);
	}
}

.wb-rides-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 3px solid var(--wb-ink);
}

.wb-rides-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 1em;
	padding: 0.75em 0;
	border-bottom: 1px solid var(--wb-rule);
}

.wb-rides-when {
	min-width: 9em;
}

.wb-rides-title {
	flex: 1 1 12em;
	font-weight: 700;
	color: var(--wb-ink);
	/* Full-row-height tap target on phones. */
	padding: 0.35em 0;
}

.wb-rides-title:hover,
.wb-rides-title:focus-visible {
	color: var(--wb-accent-text);
}

.wb-ride-facts a:focus-visible,
.wb-rides-title:focus-visible {
	outline: 3px solid var(--wb-accent);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.wb-ride-fact dd {
		text-align: left;
		flex-basis: 100%;
	}
}

/* Landmark maps */
.wb-landmark-map {
	position: relative;
	width: 100%;
	z-index: 0;
	background: #e6e1d8;
}
.wb-pin span {
	display: block;
	width: 28px;
	height: 28px;
	background: #ea5629;
	border: 3px solid #111111;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-sizing: border-box;
}
.wb-pin:focus-visible span {
	outline: 3px solid #111111;
	outline-offset: 3px;
}
.wb-landmark-osm { white-space: nowrap; }
@media (min-width: 481px) {
	.wb-landmark-osm { margin-left: 0.5em; }
}
.wb-landmark-kind { font-weight: 400; }