/* =========================================================================
   TOUBKAL-MAROC — "Informations supplémentaires" (tour section)
   Slider of icon cards + "More details" popup. Loaded on Single Tour pages.
   ========================================================================= */

.tbk-tour-info {
	--tbk-line: #ececec;

	color: var(--tbk-ink);
	font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
	scroll-margin-top: 90px;
	min-width: 0;
	max-width: 100%;
}

/* Keep the slider's intrinsic width from stretching the tour content column. */
#tour-content,
.tbk-tour-layout,
.tbk-tour-info__carousel {
	min-width: 0;
}

/* ---- Header ------------------------------------------------------------ */

.tbk-tour-info__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 1.1rem;
}

.tbk-tour-info__title {
	font-family: "Ubuntu", sans-serif;
	font-weight: 800;
	font-size: clamp(1.35rem, 0.9rem + 1.2vw, 1.7rem);
	line-height: 1.15;
	margin: 0;
	color: var(--tbk-ink);
}

.tbk-tour-info__nav-group {
	display: inline-flex;
	gap: 12px;
	flex: none;
}

.tbk-tour-info__nav {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tbk-chip);
	color: var(--tbk-ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.tbk-tour-info__nav:hover:not(:disabled) {
	background: var(--tbk-accent);
	color: #fff;
}

.tbk-tour-info__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.tbk-tour-info.tbk-is-static .tbk-tour-info__nav-group {
	display: none;
}

/* ---- Carousel ---------------------------------------------------------- */

.tbk-tour-info__carousel {
	position: relative;
}

.tbk-tour-info__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 2px 0;
	cursor: grab;
}

.tbk-tour-info__viewport::-webkit-scrollbar {
	display: none;
}

.tbk-tour-info__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.tbk-tour-info__track {
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 0;
}

/* ---- Card -------------------------------------------------------------- */

.tbk-tour-info__card {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 24px) / 2);
	max-width: calc((100% - 24px) / 2);
	box-sizing: border-box;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--tbk-line);
	border-radius: var(--tbk-r-card);
	padding: 24px;
	box-shadow: 0 8px 22px rgba(var(--tbk-ink-rgb), 0.05);
}

.tbk-tour-info__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.tbk-tour-info__icon {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--tbk-accent);
}

.tbk-tour-info__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.tbk-tour-info__card-title {
	font-family: "Ubuntu", sans-serif;
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.3;
	color: var(--tbk-ink);
	margin: 0;
}

.tbk-tour-info__card-content {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--tbk-ink);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tbk-tour-info__card-content p {
	margin: 0 0 0.5rem;
}

.tbk-tour-info__card-content ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* ---- Footer / more details -------------------------------------------- */

.tbk-tour-info__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.tbk-tour-info__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 6px 2px;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	font-size: 1rem;
	color: var(--tbk-ink);
	transition: color 0.2s ease;
}

.tbk-tour-info__more:hover {
	color: var(--tbk-accent);
}

/* ---- Popup items (shared .tbk-modal chrome in tbk-modal.css) ----------- */

.tbk-modal .tbk-tour-info__item {
	padding: 0 0 28px;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--tbk-line);
}

.tbk-modal .tbk-tour-info__item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.tbk-modal .tbk-tour-info__item-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
}

.tbk-modal .tbk-tour-info__item-head .tbk-tour-info__icon {
	width: 20px;
	height: 20px;
}

.tbk-modal .tbk-tour-info__item-title {
	font-family: "Ubuntu", sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0;
	color: var(--tbk-ink);
}

.tbk-modal .tbk-tour-info__item-content {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--tbk-ink);
}

.tbk-modal .tbk-tour-info__item-content p {
	margin: 0 0 0.6rem;
}

.tbk-modal .tbk-tour-info__item-content ul {
	margin: 0 0 0.6rem;
	padding-left: 1.2rem;
}

/* ---- Itinerary "Read more" (tour.js) ----------------------------------- */
/* Days after the third are hidden until the button is pressed. The button
   looks like the reviews' "More reviews" and lines up with the day titles
   (marker 1.1rem + gap, from the template's .tl-item / .tl-marker; below
   768px Bricks wraps the day text under its marker, so no indent there). */

.tbk-itinerary--collapsed > .tbk-itinerary__extra {
	display: none;
}

.tbk-itinerary__toggle {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: calc(1.1rem + 1.25rem);
	background: none;
	border: 0;
	padding: 6px 2px;
	cursor: pointer;
	font: inherit;
	font-weight: 800; /* size: typography.css, with the other "more" buttons */
	color: var(--tbk-ink);
	transition: color 0.2s ease;
}

.tbk-itinerary__toggle:hover {
	color: var(--tbk-accent);
}

.tbk-itinerary__toggle svg {
	transition: transform 0.2s ease;
}

.tbk-itinerary__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	.tbk-itinerary__toggle {
		margin-left: 0;
	}
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 991px) {
	.tbk-tour-info__card {
		flex-basis: calc((100% - 24px) / 2);
		max-width: calc((100% - 24px) / 2);
	}
}

@media (max-width: 600px) {
	.tbk-tour-info__card {
		flex-basis: 100%;
		max-width: 100%;
	}
}