/**
 * The tours listing page.
 *
 * Enqueued only on a page using the Tours listing template, or carrying
 * [ct_tours], so it costs nothing anywhere else.
 *
 * Self-contained. Unlike the single tour page this is not inside .ct-itin, so it
 * cannot borrow that block's design tokens and declares its own from the same
 * palette. That is the same trade booking.css makes, and for the same reason.
 *
 * @package CustomTours
 */

.ct-tours-page,
.ct-tours {
	--t-blue: #1689CF;
	--t-orange: #F68B2D;
	--t-dark: #16233A;
	--t-muted: #6B7280;
	--t-border: #E5E8EC;
	--t-gray: #F5F7FA;
}

.ct-tours-page {
	max-width: 1320px;
	margin: 40px auto;
	padding: 0 20px 48px;
	font-family: 'Inter', sans-serif;
	color: var(--t-dark);
	/* The theme sets no body line-height on this template either, so type would
	   fall back to the UA's ~1.2 and read cramped. */
	line-height: 1.6;
}

.ct-tours-page__head {
	max-width: 760px;
	margin: 0 auto 10px;
	text-align: center;
}

.ct-tours-page__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.5px;
	color: var(--t-dark);
}

/*
 * The page's own content. Given a reading measure rather than the full grid
 * width, because an intro paragraph running 1320px wide is unreadable. An
 * Elementor hero sets its own widths and ignores this.
 */
.ct-tours-page__intro {
	max-width: 760px;
	margin: 0 auto 30px;
	text-align: center;
	font-size: 15.5px;
	color: var(--t-muted);
}

.ct-tours-page__intro p:last-child { margin-bottom: 0; }

/* ==========================================================================
   The grid
   ========================================================================== */

.ct-tours__grid {
	display: grid;
	gap: 26px;
	align-items: stretch;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Set by the shortcode's columns attribute; three is the default above. */
.ct-tours--cols1 .ct-tours__grid { grid-template-columns: minmax(0, 1fr); }
.ct-tours--cols2 .ct-tours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-tours--cols4 .ct-tours__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ct-tours__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--t-muted);
}

/* ==========================================================================
   A card
   ==========================================================================
 * The whole card is one <a>, so the entire tile is the target rather than just
 * the title. Its children are spans for that reason: a block-level element
 * inside an anchor is valid in HTML5, but spans keep it unambiguous.
 */

.ct-tours__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 12px 34px rgba(22, 35, 58, .09);
	transition: transform .18s ease, box-shadow .18s ease;
}

.ct-tours__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(22, 35, 58, .15);
	color: inherit;
}

.ct-tours__card:focus-visible {
	outline: 2px solid var(--t-blue);
	outline-offset: 3px;
}

/* ---------- picture ---------- */

.ct-tours__shot {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--t-gray);
	overflow: hidden;
}

.ct-tours__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * No picture at all. Most tours on this site are in that state, so this is a
 * designed state rather than a gap: the name fills the slot on a soft ground.
 */
.ct-tours__noshot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 18px;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--t-muted);
	background: linear-gradient(135deg, #EEF3F8 0%, #E3EAF2 100%);
}

.ct-tours__days {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 11px;
	border-radius: 20px;
	background: rgba(22, 35, 58, .82);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	/* Sits over a photo whose colours are unknown, so it carries its own ground
	   rather than relying on contrast with the image. */
	backdrop-filter: blur(2px);
}

/* ---------- words ---------- */

.ct-tours__body {
	display: flex;
	flex-direction: column;
	/* Fills the card, so the price row can be pinned to the bottom and the row of
	   cards shares a baseline however long the names run. */
	flex: 1 1 auto;
	gap: 6px;
	padding: 16px 18px 18px;
}

.ct-tours__name {
	font-family: 'Poppins', sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--t-dark);
	overflow-wrap: anywhere;
}

.ct-tours__where,
.ct-tours__blurb {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--t-muted);
}

/*
 * Two lines, then an ellipsis. A short description is admin-entered and can run
 * to a paragraph, which would make one card three times the height of the rest.
 */
.ct-tours__blurb {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ct-tours__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--t-border);
}

.ct-tours__price {
	font-family: 'Poppins', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--t-orange);
	min-width: 0;
}

.ct-tours__from,
.ct-tours__pp {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--t-muted);
}

.ct-tours__go {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--t-blue);
	white-space: nowrap;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.ct-tours__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 34px;
	flex-wrap: wrap;
}

.ct-tours__pagelink {
	padding: 10px 20px;
	border: 2px solid var(--t-blue);
	border-radius: 24px;
	color: var(--t-blue);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.ct-tours__pagelink:hover {
	background: var(--t-blue);
	color: #fff;
}

.ct-tours__pagenow {
	font-size: 13.5px;
	color: var(--t-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {

	.ct-tours-page__title { font-size: 32px; }

	/*
	 * Two across, whatever the shortcode asked for. Four columns at this width
	 * leaves each card too narrow for a tour name to sit on two lines.
	 */
	.ct-tours__grid,
	.ct-tours--cols3 .ct-tours__grid,
	.ct-tours--cols4 .ct-tours__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 620px) {

	.ct-tours-page {
		margin: 24px auto;
		padding: 0 16px 34px;
	}

	.ct-tours-page__title {
		font-size: 26px;
		letter-spacing: -0.2px;
	}

	.ct-tours__grid,
	.ct-tours--cols2 .ct-tours__grid,
	.ct-tours--cols3 .ct-tours__grid,
	.ct-tours--cols4 .ct-tours__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* A hover lift on a touch screen only ever fires as a stuck state after a tap. */
	.ct-tours__card:hover {
		transform: none;
		box-shadow: 0 12px 34px rgba(22, 35, 58, .09);
	}
}