/* ---------------------------------------------------------------------------
 * Trip screens — the browse archive and the single trip page.
 *
 * Loaded only on those screens (see pickleball_enqueue_trips_assets() in
 * inc/setup.php). Everything here is either a layout that theme.json has no
 * selector for — the filter bar, the fact strip, the booking aside — or the
 * responsive gate in spec 5.8. Colours, type and spacing come from the
 * theme.json tokens; no new values are invented below.
 * ------------------------------------------------------------------------ */

/* --- Browse: hero ------------------------------------------------------- */

.pickleball-backlink a {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	color: inherit;
}

.pickleball-trips-intro {
	max-width: var(--wp--custom--measure--prose);
}

/* --- Browse: filter bar -------------------------------------------------
 * Region chips are links and "when" chips are buttons, so the shared
 * .pickleball-chip look (from blocks/trips-grid/style.css) needs the button
 * reset and one shared size here. */

.pickleball-trips-filters--bar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
}

.pickleball-trips-filters__row {
	display: flex;
	flex-wrap: wrap;
	/* The chips wrap onto a second line on narrow screens. Centring floated the
	 * label halfway down the whole group; self-start keeps it level with the
	 * first row of chips, which is the row it labels. */
	align-items: self-start;
	gap: 10px;
}

.pickleball-trips-filters__label {
	flex: none;
	width: 80px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-trips-filters__regions,
.pickleball-trips-filters__windows {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pickleball-trips-filters--bar .pickleball-chip {
	appearance: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--karla);
	font-size: 15.5px;
	font-weight: 600;
	padding: 10px 18px;
	line-height: 1.2;
}

.pickleball-trips-filters--bar .pickleball-chip.is-current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --- Browse: results row ------------------------------------------------ */

.pickleball-trips-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-trips-results__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.pickleball-trips-results__reset {
	appearance: none;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--karla);
	font-size: 15px;
	font-weight: 600;
	padding: 10px 16px;
}

.pickleball-trips-results__reset:hover,
.pickleball-trips-results__reset:focus-visible {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.pickleball-trips-results__sort {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pickleball-trips-results__sort-label {
	font-size: 15.5px;
}

.pickleball-trips-sort {
	background: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--karla);
	font-size: 15.5px;
	padding: 11px 16px;
}

/* --- Browse: empty state ------------------------------------------------ */

.pickleball-trips-empty {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	text-align: center;
	border: 1px dashed color-mix(in oklab, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: var(--wp--custom--radius--card);
}

.pickleball-trips-empty__title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	margin: 0;
}

.pickleball-trips-empty__body {
	margin: 10px 0 0;
	color: var(--wp--preset--color--contrast-muted);
}

/* --- Trip: hero ---------------------------------------------------------
 * Core gives every cover a 430px floor; this one is sized by its content,
 * as drawn. The light text is set here because the cover carries a gradient
 * overlay rather than a text colour. */

.pickleball-trip-hero {
	min-height: 0;
}

.pickleball-trip-hero,
.pickleball-trip-hero .wp-block-cover__inner-container {
	color: var(--wp--preset--color--base);
}

.pickleball-trip-hero .pickleball-backlink a,
.pickleball-trip-hero__region {
	color: color-mix(in oklab, var(--wp--preset--color--base) 80%, transparent);
}

.pickleball-trip-hero__tagline {
	max-width: var(--wp--custom--measure--prose);
	color: color-mix(in oklab, var(--wp--preset--color--base) 88%, transparent);
}

.pickleball-trip-hero__title {
	max-width: 20ch;
}

.pickleball-trip-chip {
	border-radius: var(--wp--custom--radius--pill);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	padding: 10px 18px;
}

.pickleball-trip-chip--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
}

.pickleball-trip-chip--glass {
	background: color-mix(in oklab, var(--wp--preset--color--base) 14%, transparent);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--base) 30%, transparent);
	color: var(--wp--preset--color--base);
}

/* A binding with nothing behind it renders an empty chip; do not draw it. */
.pickleball-trip-chip:empty {
	display: none;
}

/* --- Trip: fact strip --------------------------------------------------- */

.pickleball-facts {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--soft);
	margin-block-start: -34px;
	position: relative;
	z-index: 1;
}

.pickleball-fact {
	background: var(--wp--preset--color--base-raised);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pickleball-fact__label {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.pickleball-fact__value {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 6px 0 0;
}

/* Four of the six facts are a bare figure — group size, activity level and the
 * two hour counts — while "where" and "where you stay" are prose that can run
 * to a line and a half. The figures are set large and centred, label included,
 * so they read as numbers at a glance; the prose tiles keep the ranged
 * alignment long place names need. Keyed off the tile modifier, so a tile that
 * turns from a figure into a phrase changes alignment with it. */
.pickleball-fact--group_size,
.pickleball-fact--activity_level,
.pickleball-fact--instruction_hours,
.pickleball-fact--play_hours {
	text-align: center;
}

.pickleball-fact--group_size .pickleball-fact__value,
.pickleball-fact--activity_level .pickleball-fact__value,
.pickleball-fact--instruction_hours .pickleball-fact__value,
.pickleball-fact--play_hours .pickleball-fact__value {
	font-size: 32px;
	line-height: 1.1;
}

/* A tile with no value behind it is not a tile. :has() here fails safe too:
 * without it an empty tile keeps its label and shows a blank value, which is
 * untidy rather than wrong. */
.pickleball-fact:has(> .pickleball-fact__value:empty) {
	display: none;
}

/* The fact strip, the two-column body and the inclusions are CSS grids built
 * out of group blocks. Core's flow layout puts a block gap on every child but
 * the first, which inside a grid shows up as one shunted row; the grid's own
 * gap is the spacing that should apply. */
.pickleball-facts>.pickleball-fact,
.pickleball-trip-body>.wp-block-group,
.pickleball-inclusions>.pickleball-inclusions__column {
	margin-block-start: 0;
}

/* --- Trip: two-column body ---------------------------------------------- */

.pickleball-trip-body {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.pickleball-trip-main {
	min-width: 0;
}

/* THE BOOKING CARD STICKS, BUT IT MUST NEVER HIDE ITS OWN BOTTOM.
 *
 * A sticky element pins at `top` and then stops moving. Anything of it that
 * does not fit between that offset and the bottom of the viewport is simply
 * off-screen, and no amount of page scrolling will bring it back — the page
 * scrolls, the pinned element does not. That is fine for a short card and
 * wrong for this one: the trip add-ons panel made it grow, and measured on a
 * 1440x800 laptop the card is 1634px tall against 704px of available space,
 * so 930px of it — the extra-nights stepper, the insurance tick, the running
 * total and the Book Now button itself — could not be reached at all.
 *
 * The cap plus `overflow-y: auto` is what makes every part reachable. When the
 * card fits, `max-height` does not bind, no scrollbar appears and the
 * behaviour is exactly what it was. When it does not fit, the card scrolls
 * inside itself and nothing is lost.
 *
 * `overscroll-behavior` is deliberately LEFT ALONE. The tempting value is
 * `contain`, which stops the scroll chaining to the page — and that would
 * trap a reader at the bottom of the card, which is the opposite of the fix.
 * The default lets them reach the card's end and carry on down the page.
 *
 * `scrollbar-gutter: stable` reserves the track so the card's inner edge does
 * not shift by a scrollbar's width the moment the panel grows a row.
 *
 * `dvh` with a `vh` fallback: on a laptop with a collapsing browser toolbar,
 * `vh` is the LARGE viewport and would cap the card taller than the space it
 * actually has, putting the last rows back under the fold. */
.pickleball-trip-aside {
	--pickleball-aside-offset: calc(var(--wp-admin--admin-bar--position-offset, 0px) + 96px);

	position: sticky;
	top: var(--pickleball-aside-offset);
	max-height: calc(100vh - var(--pickleball-aside-offset) - 24px);
	max-height: calc(100dvh - var(--pickleball-aside-offset) - 24px);
	overflow-y: auto;
	scrollbar-gutter: stable;
}

/* The PDF fallback line and the coaches heading used to be chosen here, with
 * :has() rules that hid whichever of the two the page had not earned. They
 * are now chosen in PHP — patterns/trip-day-by-day.php and
 * patterns/trip-coaches.php print one or the other from the same ACF rows the
 * blocks render — so a browser with no :has() support, and a reader with no
 * CSS at all, sees the same page this one does. */

/* --- Trip: inclusions --------------------------------------------------- */

.pickleball-inclusions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.pickleball-inclusions__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.pickleball-inclusions__list li {
	position: relative;
	padding-inline-start: 1.6em;
	line-height: 1.5;
}

.pickleball-inclusions__list--yes li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--success);
	font-weight: 700;
}

.pickleball-inclusions__list--no li::before {
	content: "\2014";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-inclusions__column--no .pickleball-inclusions__list {
	color: var(--wp--preset--color--contrast-muted);
}

/* --- Trip: booking aside ------------------------------------------------ */

.pickleball-booking {
	box-shadow: var(--wp--custom--shadow--soft);

	/* One height for both controls in the add-to-cart row. They are styled by
	 * different rules - one is an input WooCommerce owns, the other a button
	 * this file owns - so the shared value lives here rather than being typed
	 * twice and quietly drifting. */
	--pickleball-booking-control: 60px;
}

.pickleball-booking__eyebrow {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.pickleball-booking__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.pickleball-booking__value {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: end;
}

.pickleball-booking .pickleball-spots {
	align-self: flex-start;
}

/* WooCommerce's add-to-cart form is the real booking action. Every trip here
 * is a variable product — dates, room occupancy, playing or not — so the form
 * layout is left to WooCommerce's own block stylesheet and only the controls
 * are restyled onto the theme's tokens. */
.pickleball-booking form.cart {
	margin: 0;
}

.pickleball-booking form.cart .variations,
.pickleball-booking form.cart .variations tbody,
.pickleball-booking form.cart .variations tr,
.pickleball-booking form.cart .variations th,
.pickleball-booking form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: start;
}

.pickleball-booking form.cart .variations th {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	padding-block-start: 12px;
}

.pickleball-booking form.cart select {
	width: 100%;
	max-width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--karla);
	font-size: 15.5px;
	margin-block-start: 6px;
	padding: 12px 14px;
}

.pickleball-booking form.cart .woocommerce-variation-add-to-cart,
.pickleball-booking form.cart .variations_button {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block-start: 14px;
}

/* WooCommerce's own block stylesheet styles this field through
 * `.wp-block-woocommerce-add-to-cart-form .variations_button > .quantity:not(...) .qty`,
 * five classes deep - enough to beat the obvious `.pickleball-booking form.cart
 * .quantity input` and leave the field 17px tall next to a 60px button. Naming
 * .qty as well as the element ties the class count and wins on the element
 * count instead of resorting to !important. */
.pickleball-booking form.cart .quantity input.qty[type="number"] {
	box-sizing: border-box;
	height: var(--pickleball-booking-control);
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	width: 5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--karla);
	/* 16px or larger, or iOS zooms the page in when the field takes focus. */
	font-size: 16.5px;
}

.pickleball-booking form.cart .quantity {
	margin: 0;
	padding: 0;
}

.pickleball-booking form.cart .reset_variations {
	font-size: var(--wp--preset--font-size--sm);
}

.pickleball-booking .stock {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.pickleball-booking form.cart button[type="submit"] {
	flex: 1 1 12rem;
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-deep);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 16.5px;
	font-weight: 700;
	/* min-height rather than height: a label that wraps on a narrow aside
	 * still grows the button instead of spilling out of it. The padding only
	 * comes into play once it does. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pickleball-booking-control);
	padding: 12px 24px;
	text-align: center;
}

.pickleball-booking form.cart button[type="submit"]:hover,
.pickleball-booking form.cart button[type="submit"]:focus-visible {
	background: color-mix(in oklab, var(--wp--preset--color--accent) 88%, var(--wp--preset--color--base));
}

/* The booking group's own 14px block gap reads as "same thing, next line",
 * which put this secondary route right up against the add-to-cart button. It
 * is a different decision, so it gets a step of real separation. */
.pickleball-booking__ask {
	margin-block-start: var(--wp--preset--spacing--30);
}

.pickleball-booking__ask .wp-block-button {
	width: 100%;
}

.pickleball-booking__ask .wp-block-button__link {
	display: block;
	text-align: center;
	width: 100%;
}

/* The phone-only booking bar; hidden at every width the aside is visible. */
.pickleball-booking-bar {
	display: none;
}

.pickleball-booking-bar__label {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-booking-bar__cta {
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 16px;
	font-weight: 700;
	padding: 14px 24px;
	text-decoration: none;
}

/* --- Trip: related ------------------------------------------------------ */

.pickleball-trip-related .pickleball-trips-grid__list {
	gap: var(--wp--preset--spacing--30);
}

/* --- Responsive gate, spec 5.8 -----------------------------------------
 * 900-1199: root padding tightens (theme.json) and the 3-up grids hold.
 * 600-899:  split sections stack, facts go 3-up, the booking aside leaves
 *           the sticky column and renders after the itinerary.
 * <600:     everything 1-up, facts 2-up, and the booking action becomes the
 *           fixed bottom bar this site has always had on a phone. */

@media (max-width: 899px) {
	.pickleball-trip-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.pickleball-trip-aside {
		position: static;
		margin-block-start: var(--wp--preset--spacing--50);

		/* Back into normal flow, so the cap and the inner scroll must go with
		 * the stickiness that needed them. Left in place they would put a
		 * second scrollbar inside the page on a phone, which is the bug this
		 * rule set exists to avoid rather than a smaller version of it. */
		max-height: none;
		overflow-y: visible;
	}

	.pickleball-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pickleball-trips-filters__label {
		width: 100%;
	}

	.pickleball-inclusions {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	.pickleball-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-block-start: -20px;
	}

	.pickleball-trips-results {
		align-items: flex-start;
	}

	/* The phone CTA: a fixed bar that jumps to the booking panel, mirroring
	 * the #sticky_cta_product bar this site has always had. The panel itself
	 * stays where it is — a variable product's form is three selects deep and
	 * does not belong in a 64px bar. Only drawn when there is a form to
	 * jump to.
	 *
	 * This one keeps its :has(). The condition is not a fact about the trip
	 * that PHP knows up front — it is whether WooCommerce ended up printing
	 * an add-to-cart form inside the booking part, several blocks away and
	 * decided by stock, product type and cart filters. And the degradation is
	 * the safe direction: with no :has() the bar simply never appears, the
	 * booking panel is already inline at this width, and nothing is hidden,
	 * duplicated or contradicted. Support is ~95% of users (Chrome/Edge 105,
	 * Safari 15.4, Firefox 121); the pages themselves must not depend on it,
	 * and after the two rules above moved into PHP they no longer do. */
	.pickleball-trip:has(.pickleball-booking form.cart) .pickleball-booking-bar {
		display: flex;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 90;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px var(--wp--preset--spacing--20);
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: var(--wp--custom--shadow--lift);
	}

	body:has(.pickleball-booking form.cart) {
		padding-bottom: 104px;
	}
}