/*
Single tour page
Styles only for individual tour detail screens.
*/

.single-tour__hero {
	display: grid;
	align-items: end;
	gap: var(--wt-space-5);
	border-bottom: 1px solid var(--wt-color-line);
	padding-block: var(--wt-space-8);
}

.single-tour__hero h1 {
	font-size: clamp(3rem, 7vw, 4.5rem);
}

.single-tour__layout {
	display: grid;
	gap: var(--wt-space-8);
}

.single-tour__content {
	display: grid;
	gap: var(--wt-space-6);
}

.single-tour__image,
.tour-gallery__item {
	overflow: hidden;
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-soft);
}

.single-tour__image img,
.tour-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tour-gallery {
	display: grid;
	gap: var(--wt-space-3);
}

.tour-itinerary {
	display: grid;
	gap: var(--wt-space-3);
}

.tour-itinerary__item {
	border: 1px solid var(--wt-color-line);
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-white);
	padding: var(--wt-space-4);
}

.tour-itinerary__summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.tour-itinerary__summary::-webkit-details-marker {
	display: none;
}

.tour-itinerary__content {
	margin-top: var(--wt-space-4);
	color: var(--wt-color-muted);
}

@media (min-width: 768px) {
	.tour-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.single-tour__hero {
		grid-template-columns: 1fr 360px;
	}

	.single-tour__layout {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

	.single-tour__sidebar {
		position: sticky;
		top: 7rem;
		align-self: start;
	}
}