/*
 * ti-lodging/lodgings. No colour of its own: each one reads the portfolio token, then the bare
 * theme token, at the point of use (tests/run.php fails on a literal colour; tokens.py on a
 * fallback after a theme token, which would hide a missing contract).
 * No motion. A phone shows a strip with half of the next card in view.
 */

.ti-lodging {
	--ti-lodging-gap: 1rem;
	margin-block: 0;
	color: var(--ti-portfolio-ink, var(--ti-strong));
	hyphens: manual;
}

.ti-lodging__heading {
	margin-block: 0 1.25rem;
	color: var(--ti-portfolio-ink, var(--ti-strong));
	font-size: var(--ti-portfolio-step-3, 1.35rem);
	font-weight: 400;
	line-height: 1.2;
}

.ti-lodging__strip {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	/* Room for the focus ring of a link inside the scroller. */
	padding-block: 0.375rem;
}

.ti-lodging__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--ti-lodging-gap)) / 1.5);
	gap: var(--ti-lodging-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Positioned: the hidden texts are absolute, and must stay inside the scroller, not widen the page. */
.ti-lodging__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	margin: 0;
	scroll-snap-align: start;
	background: var(--ti-portfolio-well, var(--ti-well));
	border: 1px solid var(--ti-portfolio-line, var(--ti-line));
}

/* No photo: never stretched, no empty band. */
.ti-lodging__item--row {
	align-self: start;
}

.ti-lodging__photo {
	margin: 0;
}

.ti-lodging__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ti-lodging__credit,
.ti-lodging__meta,
.ti-lodging__distance,
.ti-lodging__code-label,
.ti-lodging__copied,
.ti-lodging__unit,
.ti-lodging__from {
	color: var(--ti-portfolio-quiet, var(--ti-quiet));
	font-size: var(--ti-portfolio-step--1, 0.875rem);
}

.ti-lodging__credit {
	margin: 0;
	padding: 0.375rem 1rem 0;
	line-height: 1.4;
}

.ti-lodging__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
}

.ti-lodging__body p,
.ti-lodging__name {
	margin: 0;
}

.ti-lodging__name {
	color: var(--ti-portfolio-ink, var(--ti-strong));
	font-size: var(--ti-portfolio-step-2, 1.15rem);
	font-weight: 500;
	line-height: 1.2;
}

.ti-lodging__name,
.ti-lodging__summary {
	overflow-wrap: anywhere;
}

.ti-lodging__summary {
	line-height: 1.5;
}

.ti-lodging__offer {
	display: grid;
	gap: 0.5rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--ti-portfolio-line, var(--ti-line));
}

.ti-lodging__price,
.ti-lodging__code-value {
	font-variant-numeric: tabular-nums;
}

.ti-lodging__amount {
	font-size: var(--ti-portfolio-step-1, 1.15rem);
	font-weight: 600;
}

.ti-lodging__code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
}

.ti-lodging__code-value {
	padding: 0.25rem 0.5rem;
	border: 1px dashed currentColor;
	font-weight: 600;
	letter-spacing: 0.04em;
	user-select: all;
}

.ti-lodging__copy,
.ti-lodging__action,
.ti-lodging__secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	border-radius: 0;
	font: inherit;
	line-height: 1.2;
}

.ti-lodging__copy {
	padding: 0 0.875rem;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	cursor: pointer;
}

.ti-lodging__copy[hidden] {
	display: none;
}

/* A status line is kept for the copy message once the button is shown, so it never pushes. */
.ti-lodging__copy:not([hidden]) ~ .ti-lodging__copied {
	flex-basis: 100%;
	min-block-size: 1.4em;
}

.ti-lodging__icon,
.ti-lodging__mark svg {
	flex: none;
	inline-size: 1.125em;
	block-size: 1.125em;
}

.ti-lodging__mark {
	display: inline-flex;
}

.ti-lodging__body .ti-lodging__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

.ti-lodging a.ti-lodging__action {
	justify-content: center;
	padding: 0.625rem 1.125rem;
	color: var(--ti-portfolio-on-accent, var( --ti-on-action ));
	background: var(--ti-portfolio-accent, var( --ti-action ));
	font-weight: 600;
	text-decoration: none;
}

.ti-lodging a.ti-lodging__action:hover {
	text-decoration-line: underline;
	text-underline-offset: 0.24em;
}

.ti-lodging a.ti-lodging__secondary {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.24em;
}

.ti-lodging :is(a, button):focus-visible,
.ti-lodging__strip:focus-visible {
	outline: 2px solid var(--ti-portfolio-focus, var(--ti-accent));
	outline-offset: 3px;
}

.ti-lodging .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The list: rows under one another, a rule between them, no card. */
.ti-lodging--list .ti-lodging__strip {
	overflow: visible;
	padding-block: 0;
}

.ti-lodging--list .ti-lodging__list {
	grid-auto-flow: row;
	grid-auto-columns: auto;
	gap: 0;
}

.ti-lodging--list .ti-lodging__item {
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--ti-portfolio-line, var(--ti-line));
}

.ti-lodging--list .ti-lodging__body {
	padding-inline: 0;
	padding-block: 1.25rem;
}

@media (min-width: 48rem) {
	.ti-lodging__list {
		grid-auto-columns: calc((100% - 2 * var(--ti-lodging-gap)) / 2.5);
	}
}

@media (min-width: 64rem) {
	.ti-lodging--cards .ti-lodging__strip {
		overflow: visible;
		scroll-snap-type: none;
	}

	.ti-lodging--cards .ti-lodging__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fill, minmax(max(15rem, 22%), 1fr));
		gap: 1.5rem;
	}

	.ti-lodging--cards .ti-lodging__item--row {
		align-self: start;
	}
}

@media print {
	.ti-lodging__strip {
		overflow: visible;
	}

	.ti-lodging__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ti-lodging--list .ti-lodging__list {
		grid-template-columns: none;
	}

	.ti-lodging__copy {
		display: none;
	}
}