/**
 * All Packages — the catalogue page.
 *
 * Enqueued only on a page using the All Packages template or carrying
 * [ct_packages], so it costs nothing anywhere else.
 *
 * Scoped under .ct-pk and .ct-pk-page. Like the booking page this is NOT inside
 * .ct-itin, so it cannot borrow the tour page's design tokens; it declares its
 * own from the same palette so the two read as one site.
 *
 * @package CustomTours
 */

.ct-pk,
.ct-pk-page {
	--p-blue: #1689CF;
	--p-blue-deep: #0E3A57;
	--p-orange: #F68B2D;
	--p-dark: #16233A;
	--p-ink: #1A1A1A;
	--p-muted: #6B7280;
	--p-border: #E5E8EC;
	--p-gray: #F5F7FA;
	--p-red: #EF3136;

	font-family: 'Inter', sans-serif;
	color: var(--p-ink);
	line-height: 1.6;
}

/* ==========================================================================
   The banner
   ========================================================================== */

.ct-pk-page__head {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 220px;
	margin-bottom: 40px;
	background: linear-gradient(120deg, var(--p-blue-deep) 0%, var(--p-blue) 100%);
	overflow: hidden;
}

/*
 * A soft light from the top right, so a flat two-stop gradient across a wide
 * screen does not read as a printing error.
 */
.ct-pk-page__head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, .12), transparent 55%);
	pointer-events: none;
}

.ct-pk-page__headinner {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 36px 20px;
}

.ct-pk-page__head h1 {
	margin: 0;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.5px;
	text-wrap: balance;
}

.ct-pk-page__intro {
	max-width: 660px;
	margin-top: 12px;
	color: rgba(255, 255, 255, .9);
	font-size: 15px;
	line-height: 1.6;
}

.ct-pk-page__intro p { margin: 0 0 8px; }
.ct-pk-page__intro p:last-child { margin-bottom: 0; }

/* ==========================================================================
   The two columns
   ========================================================================== */

.ct-pk {
	max-width: 1320px;
	margin: 0 auto 56px;
	padding: 0 20px;
}

.ct-pk__grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* ==========================================================================
   The filter rail
   ========================================================================== */

.ct-pk__filters {
	position: sticky;
	/* Clear of the theme's fixed header, which is about 80px. */
	top: 92px;
	padding: 22px;
	border-radius: 14px;
	background: var(--p-gray);
}

.ct-pk__filtershead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.ct-pk__filtershead h2 {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--p-dark);
}

/*
 * Hidden until something is actually on. A "Clear all" that clears nothing is a
 * button that teaches people it does nothing.
 */
.ct-pk__clear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--p-blue);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.ct-pk__clear[hidden] { display: none; }

.ct-pk__search { margin: 0 0 18px; }

.ct-pk__search input {
	width: 100%;
	height: 42px;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--p-border);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--p-ink);
}

.ct-pk__search input:focus-visible {
	outline: 2px solid var(--p-blue);
	outline-offset: 1px;
	border-color: var(--p-blue);
}

/* A fieldset carries browser defaults that fight this layout. */
.ct-pk__group {
	margin: 0;
	padding: 14px 0;
	border: 0;
	border-top: 1px solid var(--p-border);
	min-width: 0;
}

.ct-pk__group legend {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--p-dark);
}

.ct-pk__opt {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 9px;
	font-size: 13.5px;
	color: var(--p-ink);
	cursor: pointer;
}

.ct-pk__opt:last-child { margin-bottom: 0; }

.ct-pk__opt input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--p-blue);
	cursor: pointer;
}

.ct-pk__optlabel {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Pushed to the far end, so the numbers line up as a column of their own. */
.ct-pk__optcount {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--p-muted);
}

/* ---------- the price slider ---------- */

.ct-pk__range {
	width: 100%;
	accent-color: var(--p-blue);
	cursor: pointer;
}

.ct-pk__pricelabel {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--p-muted);
}

.ct-pk__pricelabel strong { color: var(--p-dark); }

/* ==========================================================================
   The toolbar
   ========================================================================== */

.ct-pk__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.ct-pk__count {
	margin: 0;
	font-size: 14px;
	color: var(--p-muted);
}

.ct-pk__count strong {
	color: var(--p-dark);
	font-size: 16px;
}

.ct-pk__tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Same pill as the tour page's currency switch, so the two are recognisably
   the same control in two places. */
.ct-pk__cur {
	display: flex;
	padding: 3px;
	border-radius: 20px;
	background: var(--p-gray);
}

.ct-pk__cur button {
	padding: 7px 14px;
	border: 0;
	border-radius: 17px;
	background: none;
	color: var(--p-muted);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.ct-pk__cur button.is-on {
	background: #fff;
	color: var(--p-dark);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.ct-pk__sort {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--p-border);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	color: var(--p-ink);
	cursor: pointer;
}

/* ---------- active filter chips ---------- */

.ct-pk__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.ct-pk__chips:empty { display: none; }

.ct-pk__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 12px;
	border: 1px solid var(--p-border);
	border-radius: 16px;
	background: #fff;
	font-size: 12.5px;
	color: var(--p-dark);
}

.ct-pk__chip button {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--p-muted);
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.ct-pk__chip button:hover {
	background: var(--p-gray);
	color: var(--p-red);
}

/* ==========================================================================
   The cards
   ========================================================================== */

.ct-pk__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

/*
 * Picture, detail, price. Three tracks rather than a stack, because the price and
 * the two buttons are what somebody scanning a catalogue is comparing, and in a
 * column they end up a screen apart from card to card.
 */
.ct-pk__card {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 220px;
	border: 1px solid var(--p-border);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.ct-pk__card:hover {
	border-color: #D3D9E0;
	box-shadow: 0 14px 30px rgba(22, 35, 58, .10);
}

/* Set by the script when a card is filtered out. */
.ct-pk__card[hidden] { display: none; }

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

.ct-pk__media {
	position: relative;
	min-height: 200px;
	background: var(--p-gray);
	overflow: hidden;
}

.ct-pk__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 29 of the 31 tours have no picture. A tinted panel carrying the name is a card
 * that still reads as finished, where a grey box does not.
 */
.ct-pk__noshot {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 18px;
	background: linear-gradient(135deg, var(--p-blue-deep) 0%, var(--p-blue) 100%);
	color: rgba(255, 255, 255, .95);
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
}

.ct-pk__kind {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(14, 58, 87, .85);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
}

/* ---------- detail ---------- */

.ct-pk__info {
	padding: 20px 22px;
	border-right: 1px solid var(--p-border);
	min-width: 0;
}

.ct-pk__title {
	margin: 0 0 8px;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.ct-pk__title a {
	color: var(--p-dark);
	text-decoration: none;
}

.ct-pk__title a:hover { color: var(--p-blue); }

.ct-pk__blurb {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--p-muted);
}

.ct-pk__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--p-border);
}

.ct-pk__meta > div { min-width: 0; }

.ct-pk__meta dt {
	margin: 0;
	font-size: 11px;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--p-muted);
}

.ct-pk__meta dd {
	margin: 2px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--p-dark);
	overflow-wrap: anywhere;
}

/* ---------- price ---------- */

.ct-pk__side {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px 22px;
	min-width: 0;
}

.ct-pk__off {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 4px 10px;
	border-radius: 14px;
	background: var(--p-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.ct-pk__was {
	font-size: 12.5px;
	color: var(--p-muted);
	text-decoration: line-through;
}

.ct-pk__price {
	margin: 2px 0 2px;
	font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--p-dark);
	overflow-wrap: anywhere;
}

.ct-pk__price small {
	display: block;
	margin-top: 2px;
	font-family: 'Inter', sans-serif;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--p-muted);
}

/* Not a price, so it should not be shouted at the size of one. */
.ct-pk__price--ask {
	font-size: 15px;
	font-weight: 700;
	color: var(--p-muted);
}

.ct-pk__basis {
	margin: 0 0 12px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--p-muted);
}

.ct-pk__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.ct-pk__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 16px;
	border: 2px solid var(--p-blue);
	border-radius: 21px;
	background: #fff;
	color: var(--p-blue);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ct-pk__btn--ghost:hover {
	background: var(--p-blue);
	color: #fff;
}

/*
 * Orange for the one that starts a booking, matching Book Now on the tour page.
 * Orange is this site's "go on then" colour and it should mean the same thing
 * wherever it appears.
 */
.ct-pk__btn--go {
	border-color: var(--p-orange);
	background: var(--p-orange);
	color: #fff;
}

.ct-pk__btn--go:hover {
	border-color: #E57E1F;
	background: #E57E1F;
	color: #fff;
}

.ct-pk__btn:focus-visible {
	outline: 2px solid var(--p-dark);
	outline-offset: 2px;
}

/* ==========================================================================
   Empty state and Show more
   ========================================================================== */

.ct-pk__empty {
	margin: 8px 0 0;
	padding: 32px 22px;
	border: 1px dashed var(--p-border);
	border-radius: 14px;
	background: var(--p-gray);
	text-align: center;
	font-size: 14px;
	color: var(--p-muted);
}

.ct-pk__empty[hidden] { display: none; }

.ct-pk__empty strong {
	display: block;
	margin-bottom: 4px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: var(--p-dark);
}

.ct-pk__more {
	margin: 20px 0 0;
	text-align: center;
}

.ct-pk__more[hidden] { display: none; }

.ct-pk__more .ct-pk__btn { min-width: 240px; }

/* WordPress's own utility, which the theme does not always define. */
.ct-pk .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

@media (max-width: 1080px) {

	/*
	 * The rail goes above the results rather than beside them. It stops being
	 * sticky at the same time: a sticky block that is now full width would sit
	 * over the cards it is filtering.
	 */
	.ct-pk__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.ct-pk__filters {
		position: static;
	}

	/* Wide and short, so it is a band across the top rather than a tall column
	   somebody has to scroll past to reach a single card. */
	.ct-pk__filters {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 0 26px;
		align-items: start;
	}

	.ct-pk__filtershead,
	.ct-pk__search {
		grid-column: 1 / -1;
	}

	.ct-pk__group {
		border-top: 0;
		padding-top: 0;
	}
}

@media (max-width: 860px) {

	.ct-pk-page__head h1 { font-size: 30px; }

	/* One column. The picture keeps a fixed shape of its own so a card does not
	   open with a square metre of photograph. */
	.ct-pk__card {
		grid-template-columns: 1fr;
	}

	.ct-pk__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.ct-pk__info {
		border-right: 0;
		border-bottom: 1px solid var(--p-border);
	}

	.ct-pk__side {
		justify-content: flex-start;
	}

	/* Side by side once they are no longer in a narrow column. */
	.ct-pk__actions {
		flex-direction: row;
	}

	.ct-pk__actions .ct-pk__btn { flex: 1 1 0; }
}

@media (max-width: 560px) {

	.ct-pk { padding: 0 16px; }

	.ct-pk-page__headinner { padding: 28px 16px; }

	.ct-pk-page__head h1 { font-size: 25px; }

	.ct-pk__meta { grid-template-columns: 1fr; }

	.ct-pk__bar {
		align-items: flex-start;
		flex-direction: column;
	}

	.ct-pk__tools { width: 100%; }

	.ct-pk__sort { flex: 1 1 auto; }

	/*
	 * Stacked again. Two buttons across a narrow phone leave each of them too
	 * short for its own words. Same reason the tour page's pair is stacked.
	 */
	.ct-pk__actions {
		flex-direction: column;
	}
}