/*
Open trips
Archive cards, filters, single open-trip page, and private chat panels.
*/

.request-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wt-space-4);
}

.open-trip-filter {
	display: grid;
	gap: var(--wt-space-4);
	padding: var(--wt-space-4);
}

.open-trip-filter__header {
	display: grid;
	gap: var(--wt-space-1);
}

.open-trip-filter__header h2 {
	font-size: var(--wt-step-2);
}

.open-trip-filter__header p {
	color: var(--wt-color-muted);
}

.open-trip-filter__grid {
	display: grid;
	gap: var(--wt-space-3);
}

.open-trip-filter label {
	display: grid;
	gap: var(--wt-space-1);
}

.open-trip-filter label span {
	color: var(--wt-color-muted);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.open-trip-filter__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-2);
}

.request-card,
.request-single__details {
	display: grid;
	gap: var(--wt-space-4);
	border: 1px solid var(--wt-color-line);
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-white);
	padding: var(--wt-space-5);
}

.request-card h2 {
	font-size: var(--wt-step-2);
}

.request-card__traveler {
	display: flex;
	align-items: center;
	gap: var(--wt-space-3);
}

.request-card__avatar {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	overflow: hidden;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-color-soft);
}

.request-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.request-card__traveler strong,
.request-card__traveler span {
	display: block;
}

.request-card__traveler strong {
	font-size: 0.92rem;
	font-weight: 600;
}

.request-card__traveler span {
	color: var(--wt-color-muted);
	font-size: 0.82rem;
}

.request-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-2);
}

.request-card__meta span {
	border-radius: var(--wt-radius-pill);
	background: var(--wt-color-soft);
	color: var(--wt-color-muted);
	padding: 0.3rem 0.65rem;
	font-size: 0.8rem;
}

.request-card p,
.request-card__posted,
.request-single__copy,
.request-single__hero p,
.request-single__posted,
.request-single__aside p {
	color: var(--wt-color-muted);
}

.request-card__posted,
.request-single__posted {
	font-size: 0.88rem;
}

.request-single__hero {
	display: grid;
	gap: var(--wt-space-3);
	border-bottom: 1px solid var(--wt-color-line);
	padding-block: var(--wt-space-8);
}

.request-single__layout {
	display: grid;
	gap: var(--wt-space-6);
}

.request-single__aside {
	display: grid;
	gap: var(--wt-space-4);
	padding: var(--wt-space-5);
}

.request-interaction {
	display: grid;
	gap: var(--wt-space-5);
}

.request-interaction__panel {
	display: grid;
	gap: var(--wt-space-4);
	padding: var(--wt-space-5);
}

.request-proposal-form,
.proposal-message-form,
.join-request-form {
	display: grid;
	gap: var(--wt-space-4);
}

.request-proposal-form__grid {
	display: grid;
	gap: var(--wt-space-4);
}

.proposal-thread {
	display: grid;
	gap: var(--wt-space-4);
	border: 1px solid var(--wt-color-line);
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-white);
	padding: var(--wt-space-4);
}

.proposal-thread__header {
	display: flex;
	align-items: center;
	gap: var(--wt-space-3);
}

.proposal-thread__avatar {
	display: block;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-color-soft);
}

.proposal-thread__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.proposal-thread__header h3 {
	font-size: var(--wt-step-2);
}

.proposal-thread__header p,
.proposal-thread__proposal,
.proposal-message div {
	color: var(--wt-color-muted);
}

.proposal-thread__proposal {
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-soft);
	padding: var(--wt-space-4);
}

.proposal-thread__messages {
	display: grid;
	gap: var(--wt-space-3);
}

.proposal-message {
	max-width: min(42rem, 92%);
	border: 1px solid var(--wt-color-line);
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-white);
	padding: var(--wt-space-3);
}

.proposal-message.is-mine {
	justify-self: end;
	background: var(--wt-color-ink);
	color: var(--wt-color-white);
}

.proposal-message.is-mine div {
	color: rgba(255, 255, 255, 0.78);
}

.join-request-list {
	display: grid;
	gap: var(--wt-space-3);
}

.join-request-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wt-space-3);
	border: 1px solid var(--wt-color-line);
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-white);
	padding: var(--wt-space-4);
}

.join-request-card__avatar {
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-color-soft);
}

.join-request-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.join-request-card h3 {
	font-size: var(--wt-step-1);
}

.join-request-card__meta,
.join-request-card__message {
	color: var(--wt-color-muted);
}

.join-request-card__message {
	margin-top: var(--wt-space-2);
}

.join-thread {
	margin-top: var(--wt-space-4);
}

.join-thread__empty {
	color: var(--wt-color-muted);
}

.contact-exchange {
	display: grid;
	gap: var(--wt-space-3);
	border: 1px solid var(--wt-color-line);
	border-radius: var(--wt-radius-card);
	background: var(--wt-color-soft);
	padding: var(--wt-space-4);
}

.contact-exchange h4 {
	font-family: var(--wt-font-body);
	font-size: var(--wt-step-1);
}

.contact-exchange p,
.contact-exchange__status {
	color: var(--wt-color-muted);
}

.contact-exchange__grid {
	display: grid;
	gap: var(--wt-space-3);
}

@media (min-width: 768px) {
	.contact-exchange__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.request-proposal-form__grid {
		grid-template-columns: 1fr 160px;
	}

	.open-trip-filter {
		padding: var(--wt-space-5);
	}

	.open-trip-filter__grid,
	.request-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.request-single__layout {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

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

	.open-trip-filter__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}