/*
 * The trip editor (templates/admin/trip): the banner, the price, the tabs, and each section with its Edit,
 * on Unfold's colour variables like admin-home.css.
 */
.eb-trip {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 1320px;
	padding-bottom: 3rem;
}

.eb-trip [hidden] {
	display: none !important;
}

.eb-trip-links {
	display: flex;
	justify-content: space-between;
}

.eb-trip-links a {
	align-items: center;
	color: var(--color-primary-600);
	display: inline-flex;
	font-weight: 600;
	gap: 0.25rem;
}

/* The banner: the cover photo, darkened at the foot so the title reads, as on the trip page. */
.eb-trip-banner-wrap {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}

.eb-trip-banner {
	background-color: var(--color-base-800);
	background-position: center;
	background-size: cover;
	border-radius: 1rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 320px;
	overflow: hidden;
	padding: 1.25rem 1.75rem 1.75rem;
	position: relative;
}

.eb-trip-banner::before {
	background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.05) 60%);
	content: "";
	inset: 0;
	position: absolute;
}

.eb-trip-banner > * {
	position: relative;
}

.eb-trip-badges {
	display: flex;
	gap: 0.5rem;
}

.eb-badge {
	background: #f5b301;
	border-radius: 999px;
	color: #151515;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.25rem 0.75rem;
}

.eb-badge-off {
	background: #fff;
	color: #b91c1c;
}

.eb-trip-banner h1 {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
}

.eb-trip-banner-text p {
	margin-top: 0.5rem;
}

.eb-stars {
	color: #f5b301;
	letter-spacing: 0.1em;
}

.eb-trip-reviews {
	text-decoration: underline;
}

/* The banner's Edit and Done sit on the photo, top right; its fields open on a panel under it. */
.eb-trip-banner-buttons {
	position: absolute;
	right: 1.75rem;
	top: 1.25rem;
}

.eb-trip-banner-buttons .eb-action:not(.eb-action-save) {
	background: #fff;
	border-color: #fff;
	color: var(--color-base-900);
}

.eb-trip-banner-wrap > .eb-trip-editing {
	background: #fff;
	border-radius: 0.75rem;
	padding: 1.5rem 1.75rem;
}

/* The tabs stay at the top while the page scrolls, like the trip page's. */
.eb-trip-tabs {
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	padding: 0 1.5rem;
	position: sticky;
	top: 0;
	z-index: 5;
}

.eb-trip-tabs a {
	border-bottom: 3px solid transparent;
	color: var(--color-base-700);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 1rem 0 0.8rem;
	text-transform: uppercase;
}

.eb-trip-tabs a:hover,
.eb-trip-tabs a.eb-tab-on {
	border-color: var(--color-primary-600);
	color: var(--color-primary-700);
}

.eb-trip-section {
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	padding: 1.5rem 1.75rem;
	scroll-margin-top: 4.5rem;
}

.eb-trip-section-head {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.eb-trip-section-head h2 {
	color: var(--color-base-900);
	font-size: 1.375rem;
	font-weight: 700;
}

.eb-edit-buttons {
	display: inline-flex;
	gap: 0.5rem;
}

/* A section being edited is outlined, so it is clear which one is open. */
.eb-trip-section.eb-trip-section-editing {
	box-shadow: 0 0 0 2px var(--color-primary-600);
}

.dark .eb-trip-tabs,
.dark .eb-trip-section,
.dark .eb-trip-banner-wrap > .eb-trip-editing {
	background: var(--color-base-800);
	box-shadow: none;
}

.dark .eb-trip-section-head h2 {
	color: var(--color-base-100);
}

@media (max-width: 640px) {
	.eb-trip-banner h1 {
		font-size: 1.625rem;
	}
}

/* A section never grows wider than the page: a long row of cards, such as the photos, scrolls inside its own box. */
.eb-trip > *,
.eb-trip-section,
.eb-trip-editing,
.eb-trip-editing-body,
.eb-trip-editing-body .eb-panel {
	min-width: 0;
	max-width: 100%;
}