/**
 * "Your hotels" as a horizontal row that slides.
 *
 * It was a three-column grid, which is right for exactly three hotels. A tour
 * with six put three on one row and three on another; a tour with four put three
 * up and one alone. As more hotels are entered that only gets worse, and a row
 * that carries on sideways says "there are more of these" in a way a second row
 * does not.
 *
 * NO MARKUP CHANGED IN PHP. The design already ships .hotel-grid and
 * .hotel-card; this changes what the container does with them, and
 * assets/js/tour-hotels.js moves the cards into a .hotel-track at runtime.
 * Deleting both files puts the grid back exactly.
 *
 * Its own file rather than an edit to tour-itinerary.css, which is 31KB of
 * supplied design this plugin can only replace whole. Enqueued after
 * ct-tour-responsive so it beats both the base grid and the breakpoint that
 * collapses it to one column.
 *
 * TWO STATES, AND THE SECOND ONE IS EARNED
 * ----------------------------------------
 * Without JavaScript this is a plain scroller: it snaps, it shows a scrollbar,
 * and it moves when somebody moves it. The script adds .is-sliding only once it
 * has built the track and measured a loop it can actually run, and that state
 * hands the row over to a transform.
 *
 * THE CARD RULES ARE DESCENDANT SELECTORS, NOT CHILD ONES. The cards start as
 * children of .hotel-grid and end up as children of .hotel-track, so `>` would
 * work in one state and silently stop working in the other, leaving every card
 * at its natural width.
 *
 * THE TRACK IS NOT width: max-content, WHICH IS THE POINT WORTH KEEPING. That
 * looks like the obvious way to lay out a row longer than its box, and it breaks
 * the cards: their basis is a percentage, a percentage resolves against the
 * track, and a max-content track is sized by its children — so the two define
 * each other and the browser falls back to natural width. Leaving the track at
 * the width of the box keeps the percentages meaningful; the cards simply
 * overflow it, and .hotel-grid does the clipping.
 *
 * @package CustomTours
 */

.ct-itin .hotel-grid {
	display: flex;
	gap: 22px;
	overflow-x: auto;

	/*
	 * Snap for the hand-driven case, so a flick lands on a card rather than
	 * halfway across one. proximity rather than mandatory: mandatory fights a
	 * slow drag near the end and makes the last card feel like it is refusing to
	 * be reached.
	 */
	scroll-snap-type: x proximity;

	/*
	 * THE PADDING IS NOT DECORATION. Overflow makes the browser clip anything
	 * drawn outside the box — and .hotel-card lifts 5px on hover and casts a 30px
	 * shadow. Without room above and below, both are sliced off at the edge.
	 *
	 * The negative margins put the row back where it was, so the extra space
	 * costs nothing in the layout.
	 */
	padding-top: 8px;
	padding-bottom: 26px;
	margin-top: -8px;
	margin-bottom: -18px;

	scrollbar-width: thin;
	scrollbar-color: #C9D4DE transparent;
}

.ct-itin .hotel-grid::-webkit-scrollbar {
	height: 6px;
}

.ct-itin .hotel-grid::-webkit-scrollbar-thumb {
	background: #C9D4DE;
	border-radius: 3px;
}

/* ==========================================================================
   Once the script is driving it
   ========================================================================== */

/*
 * The box stops being the flex row and becomes a window. The track inside it is
 * the row now, and it is moved by transform rather than scrolled.
 */
.ct-itin .hotel-grid.is-sliding {
	display: block;
	overflow: hidden;
	scroll-snap-type: none;
	scrollbar-width: none;
}

.ct-itin .hotel-grid.is-sliding::-webkit-scrollbar {
	display: none;
}

/*
 * Built by the script. No width of its own: it fills the box, the cards overflow
 * it, and the box clips. See the note at the top about why max-content is wrong.
 */
.ct-itin .hotel-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 22px;
	will-change: transform;
}

/* ==========================================================================
   The cards
   ==========================================================================
 * Three across, exactly as the grid was. The basis subtracts the two gaps rather
 * than using 33%, which with a 22px gap would overflow and make three hotels
 * scroll for no reason.
 *
 * flex-shrink is 0, so the cards keep that width and run off the end of the
 * track instead of squeezing to fit it. That overflow is the row.
 */

.ct-itin .hotel-grid .hotel-card {
	flex: 0 0 calc((100% - 44px) / 3);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {

	/* Two across: one gap to subtract. */
	.ct-itin .hotel-grid .hotel-card {
		flex-basis: calc((100% - 22px) / 2);
	}
}

@media (max-width: 640px) {

	.ct-itin .hotel-grid,
	.ct-itin .hotel-track {
		gap: 14px;
	}

	/*
	 * Deliberately not a whole card. At 78% the next one shows down the right
	 * edge, which on a phone is the only thing that says the row moves — there is
	 * no hover, and once it is sliding there is no scrollbar either.
	 */
	.ct-itin .hotel-grid .hotel-card {
		flex-basis: 78%;
	}
}