/*
* map container
*/
.map { 	
	height: 350px;

	width: 100%;
	margin-bottom: 5px;
}

/*
* meta container
*/

.metadata 
{
	width: 100%;
	font-style: italic;
	background-color: lightgray;
	border-radius: 15px; /* Adjust the radius for smooth rounded edges */
	padding: 8px;
	font-size: clamp(6px, 100vw, 12px);
	display: flex;
	flex-direction: row;  /* Stack items vertically */
	flex-wrap: wrap; /* Allow child elements to wrap to new lines if needed */
	justify-content: space-between;
	align-items: center;      /* Center the content vertically */
 
}

.metadata > :first-child {
	padding-left: 12px; /* Apply padding to the first element */
}
.metadata > :last-child {
	padding-right: 12px; /* Apply padding to the first element */
}

/*
* Common attributes
*/
.metadata .start::before, 
.metadata .duration::before, 
.metadata .max-elev::before,
.metadata .min-elev::before,
.metadata .elevation-gain::before,
.metadata .elevation-loss::before,
.metadata .elevation-gain-loss::before,
.metadata .net-elevation::before
{
	content: "";
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	white-space: pre;
	display: flex;
	position: relative; 
}

/*
 * Start
 */
.metadata .start::before {
	background-image: url('/img/icons/start_trip.png');
}

/*
 * Duration
 */
.metadata .duration::before {
	background-image: url('/img/icons/duration.png');
}

/*
 * Max Altitude
 */
.metadata .max-elev::before {
	background-image: url('/img/icons/max-elevation.png');
}

/*
 * Min Altitude
 */
.metadata .min-elev::before {
	background-image: url('/img/icons/min-elevation.png');
}

/*
 * Elevation Gain Loss
 */
.metadata .elevation-gain::before {
	background-image: url('/img/icons/elevation-gain.png');
}
.metadata .elevation-loss::before {
	background-image: url('/img/icons/elevation-loss.png');
}
.metadata .net-elevation:before {
	background-image: url('/img/icons/net-elevation.png');
}
.metadata .elevation-gain-loss:before {
	background-image: url('/img/icons/elevation-gain-loss.png');
}

/*
 * Display unit
 */
.metadata .max-elev::after,
.metadata .min-elev::after,
.metadata .elevation-gain::after,
.metadata .elevation-loss::after,
.metadata .elevation-gain-loss::after,
.metadata .net-elevation::after
{
	content: "m";
}

/*
 * Title
 */

.title .distance::after {
	content: " km";
}

.title .name::after,
.title .date::after{
	content: " \2014 ";
}

.title .id::after {
	content: ") ";
}