/* Trip summary — dark burgundy facts strip directly under the trip hero.
   Values measured from the reference trip-summary component. */

.trip-summary {
	background-color: var(--color-burgundy-1);
	color: var(--color-soft-white);
	padding: 40px var(--grid-col-gutter);
}

.trip-summary__columns {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	margin-inline: auto;
	max-width: var(--wrap-width);
	min-height: 0;
	min-width: 0;
	row-gap: 30px;
}
@media screen and (min-width: 1024px) {
	.trip-summary__columns { column-gap: 40px; }
}

.trip-summary__column {
	grid-column: auto / span 12;
	min-width: 0;
	text-align: center;
}
@media screen and (min-width: 1024px) {
	.trip-summary__column { grid-column: auto / span 3; text-align: initial; }
	.trip-summary__column--large { grid-column: auto / span 6; }
}

.trip-summary a { text-decoration: none; }
.trip-summary a,
.trip-summary a:hover { color: var(--color-brass-1); }

.trip-summary__date-range,
.trip-summary__duration {
	line-height: inherit;
	margin-bottom: 0;
}

/* Facts list with the brand's rotated-square "diamond" bullets */
.trip-summary__diamond-list {
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.trip-summary__diamond-list li {
	display: flex;
	justify-content: center;
}
@media screen and (min-width: 1024px) {
	.trip-summary__diamond-list li { justify-content: flex-start; }
}
.trip-summary__diamond-list li::before {
	border: 1px solid;
	content: "";
	flex: none;
	height: 5px;
	margin-right: 10px;
	margin-top: 11px;
	transform: rotate(45deg);
	width: 5px;
}
@media screen and (min-width: 1024px) {
	.trip-summary__diamond-list li::before { margin-top: 13px; }
}

/* Route stops, chained with arrows */
.trip-summary__linked-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}
@media screen and (min-width: 1024px) {
	.trip-summary__linked-list { justify-content: flex-start; }
}
.trip-summary__linked-list > li { margin-right: 4px; }
.trip-summary__linked-list > li:not(:last-child)::after {
	content: "→";
	margin-left: 4px;
}
.trip-summary__linked-list a { color: var(--color-soft-white); }
.trip-summary__linked-list a:hover { color: var(--color-brass-3); }