/**
 * Travel26 Tour Header
 *
 * Contents
 * 1. Variables and layout
 * 2. Badges
 * 3. Title
 * 4. Details (location, rating, travelers)
 * 5. Share button and "link copied" message
 * 6. Book button
 * 7. Responsive and reduced motion
 *
 * Colours read the Inoforest Core Design System when it is active, with the Travel26 design as fallback.
 */

/* 1. Variables and layout -------------------------------------------------------- */
.travel26-th {
	--travel26-th-direction: row;
	--travel26-th-align: flex-end;
	--travel26-th-primary: var(--inoforest-color-primary, #0b7a75);
	--travel26-th-accent: var(--inoforest-color-accent, #ff6a3d);
	--travel26-th-heading: var(--inoforest-color-heading, #0d1b2a);
	--travel26-th-featured-color: #fff;
	--travel26-th-featured-bg: var(--travel26-th-accent);
	--travel26-th-soft-color: var(--travel26-th-primary);
	--travel26-th-soft-bg: #e5f3f2;
	--travel26-th-icon: var(--travel26-th-primary);
	--travel26-th-star: #ffb422;
	--travel26-th-share-size: 50px;
	--travel26-th-share-color: var(--travel26-th-heading);
	--travel26-th-share-bg: #fff;
	--travel26-th-share-border: var(--inoforest-color-border, #e5ebef);
	--travel26-th-share-hover_color: var(--travel26-th-accent);
	--travel26-th-share-hover_bg: #fff;
	--travel26-th-share-hover_border: var(--travel26-th-accent);
	display: flex;
	flex-direction: var(--travel26-th-direction);
	align-items: var(--travel26-th-align);
	justify-content: space-between;
	gap: 30px;
}

.travel26-th .travel26-th__main {
	max-width: 820px;
	min-width: 0;
}

/* 2. Badges ----------------------------------------------------------------------- */
.travel26-th .travel26-th__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.travel26-th .travel26-th__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--travel26-th-soft-color);
	background: var(--travel26-th-soft-bg);
	border-radius: 999px;
}

.travel26-th .travel26-th__badge--featured {
	color: var(--travel26-th-featured-color);
	background: var(--travel26-th-featured-bg);
}

.travel26-th .travel26-th__badge-icon {
	display: inline-flex;
}

.travel26-th .travel26-th__badge-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* 3. Title -------------------------------------------------------------------------- */
.travel26-th .travel26-th__title {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	color: var(--travel26-th-heading);
}

/* 4. Details ------------------------------------------------------------------------- */
.travel26-th .travel26-th__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	font-weight: 600;
}

.travel26-th .travel26-th__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.travel26-th .travel26-th__meta-icon {
	display: inline-flex;
	font-size: 1.1rem;
	color: var(--travel26-th-icon);
}

.travel26-th .travel26-th__meta-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.travel26-th .travel26-th__rating {
	gap: 4px;
}

.travel26-th .travel26-th__stars {
	display: inline-flex;
	gap: 2px;
}

.travel26-th .travel26-th__stars svg {
	width: 15px;
	height: 15px;
	fill: var(--travel26-th-star);
}

.travel26-th .travel26-th__stars svg.is-empty {
	opacity: 0.3;
}

.travel26-th .travel26-th__stars svg.is-half {
	clip-path: inset(0 50% 0 0);
}

.travel26-th .travel26-th__rating strong {
	margin-left: 6px;
	font-size: 0.95rem;
	color: var(--travel26-th-heading);
}

.travel26-th .travel26-th__rating a {
	margin-left: 4px;
	font-size: 0.9rem;
	color: #8b99a6;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.travel26-th .travel26-th__rating a:hover,
.travel26-th .travel26-th__rating a:focus-visible {
	color: var(--travel26-th-primary);
}

/* 5. Share button and "link copied" message ----------------------------------------------- */
.travel26-th .travel26-th__actions {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

.travel26-th .travel26-th__share {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--travel26-th-share-size);
	height: var(--travel26-th-share-size);
	margin: 0;
	padding: 0;
	font-size: calc(var(--travel26-th-share-size) * 0.4);
	color: var(--travel26-th-share-color);
	cursor: pointer;
	background: var(--travel26-th-share-bg);
	border: 1px solid var(--travel26-th-share-border);
	border-radius: 50%;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.travel26-th .travel26-th__share.travel26-th__save[aria-pressed="true"],
.travel26-th .travel26-th__share.travel26-th__save[aria-pressed="true"]:hover,
.travel26-th .travel26-th__share.travel26-th__save[aria-pressed="true"]:focus-visible {
	color: #fff;
	background: var(--travel26-th-accent);
	border-color: var(--travel26-th-accent);
}

.travel26-th .travel26-th__share:hover,
.travel26-th .travel26-th__share:focus-visible {
	color: var(--travel26-th-share-hover_color);
	background: var(--travel26-th-share-hover_bg);
	border-color: var(--travel26-th-share-hover_border);
	transform: translateY(-2px);
}

.travel26-th .travel26-th__share-icon {
	display: inline-flex;
}

.travel26-th .travel26-th__share-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.travel26-th .travel26-th__copied {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 2;
	padding: 4px 10px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	background: var(--travel26-th-heading);
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.travel26-th .travel26-th__copied.is-visible {
	opacity: 1;
}

/* 6. Book button ----------------------------------------------------------------------------- */
.travel26-th .travel26-th__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 14px 30px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: #fff;
	text-decoration: none;
	background: var(--travel26-th-accent);
	border: 2px solid var(--travel26-th-accent);
	border-radius: 999px;
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.travel26-th .travel26-th__button:hover,
.travel26-th .travel26-th__button:focus-visible {
	color: #fff;
	background: #e8532a;
	border-color: #e8532a;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px #e8532a;
}

.travel26-th .travel26-th__button svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	transition: transform 0.35s ease;
}

.travel26-th .travel26-th__button:hover svg,
.travel26-th .travel26-th__button:focus-visible svg {
	transform: translateX(3px);
}

/* 7. Responsive and reduced motion ------------------------------------------------------------ */
@media (max-width: 767px) {
	.travel26-th {
		gap: 24px;
	}

	.travel26-th .travel26-th__meta {
		gap: 8px 18px;
		font-size: 0.925rem;
	}

	.travel26-th .travel26-th__actions {
		width: 100%;
	}

	.travel26-th .travel26-th__button {
		flex: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.travel26-th .travel26-th__share,
	.travel26-th .travel26-th__button,
	.travel26-th .travel26-th__button svg,
	.travel26-th .travel26-th__copied {
		transition: none;
	}

	.travel26-th .travel26-th__share:hover,
	.travel26-th .travel26-th__share:focus-visible,
	.travel26-th .travel26-th__button:hover,
	.travel26-th .travel26-th__button:focus-visible {
		transform: none;
	}
}