/* ─────────────────────────────────────────────────────────────────────────
   WETRIPER — Components
   All reusable UI components built on --c-* design tokens from core.css.
   No --wt-* references. One definition per component.
   ───────────────────────────────────────────────────────────────────────── */

/* ── CTA banner (dark promo block — used on homepage and dashboards) ──────── */
.cta-banner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-6);
	align-items: center;
	padding: var(--sp-8);
	background: var(--c-dark);
	border-radius: var(--r-xl);
	color: var(--c-white);
}

.cta-banner > div { display: grid; gap: var(--sp-5); }
.cta-banner h2 { color: var(--c-white); font-size: var(--text-3xl); letter-spacing: -0.04em; }
.cta-banner > div > p { color: rgba(255, 255, 255, 0.6); }
.cta-banner .eyebrow { color: var(--c-accent); }

.section-actions {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

@media (max-width: 1100px) {
	.cta-banner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.cta-banner { padding: var(--sp-6); }
	.cta-banner h2 { font-size: var(--text-2xl); }
}

/* ── Card base ──────────────────────────────────────────────────────────── */
.card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	overflow: hidden;
}


/* ── Tour card ───────────────────────────────────────────────────────────── */
.tour-card {
	display: flex;
	flex-direction: column;
	/* min-width:0 stops the card's image intrinsic width (768px) from inflating
	   the flex container's min-content size and overflowing the page. */
	min-width: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: box-shadow 200ms, transform 200ms;
}

.tour-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.tour-card__image {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-surface-2);
	flex-shrink: 0;
}

.tour-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms ease;
}



.tour-card__duration-badge {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0.3rem 0.65rem;
	background: var(--c-white);
	border-radius: var(--r-pill);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--c-dark);
	white-space: nowrap;
	z-index: 1;
}

.tour-card__duration-badge img,
.tour-card__duration-badge i {
	flex-shrink: 0;
	width: 14px;
	font-size: 0.875rem;
	line-height: 1;
}

/* The value sits in a <p>; override the global muted p colour */
.tour-card__duration-badge p {
	margin: 0;
	color: inherit;
	line-height: 1;
}

/* Rating badge — same chip as duration, top-left, gold star + score */
.tour-card__rating-badge {
	position: absolute;
	top: var(--sp-4);
	left: var(--sp-4);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0.3rem 0.6rem;
	background: var(--c-white);
	border-radius: var(--r-pill);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--c-dark);
	white-space: nowrap;
	z-index: 1;
}

.tour-card__rating-star {
	color: #f5a623;
	font-size: 0.85rem;
	line-height: 1;
}

.tour-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--c-muted);
	font-size: var(--text-sm);
}

.tour-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	flex: 1;
}

.tour-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	flex-wrap: nowrap;
}

.tour-card__topline .catm-favorite-button {
	flex-shrink: 0;
}

.tour-card__location {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--c-muted);
}

.tour-card__location a { color: inherit; }

.tour-card__location i {
	font-size: 0.9rem;
	color: var(--c-muted);
	flex-shrink: 0;
	line-height: 1;
}

.tour-card__topline .eyebrow {
	background: none;
	padding: 0;
	border-radius: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tour-card__body h3 a {
	color: var(--c-ink);
}

.tour-card__body h3 a:hover {
	color: var(--c-accent);
}

.tour-card__price {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--c-muted);
}

.tour-card__price i {
	font-size: 0.9rem;
	color: var(--c-muted);
	flex-shrink: 0;
	line-height: 1;
}

.tour-card__body > p:not(.tour-card__price):not(.tour-card__rating) {
	font-size: var(--text-sm);
	color: var(--c-muted);
	line-height: 1.55;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tour-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
	font-size: var(--text-sm);
	color: var(--c-muted);
}

.tour-card__footer a {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--c-accent);
}

.tour-card__footer a:hover {
	text-decoration: underline;
}

/* ── Trip request card ───────────────────────────────────────────────────── */
.trip-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	transition: box-shadow 200ms, transform 200ms;
}

.trip-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.trip-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	flex-wrap: nowrap;
}

/* Country label with pin icon */
.trip-card__country {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--c-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.trip-card__country svg,
.trip-card__country i { flex-shrink: 0; font-size: 0.875rem; line-height: 1; }

/* "Based on: [Tour Name]" — shown when this open trip was shared from a tour */
.trip-card__source-tour {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: var(--text-xs);
	color: var(--c-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trip-card__source-tour i {
	flex-shrink: 0;
	color: var(--c-accent);
	font-size: 0.8rem;
	line-height: 1;
}

/* Unified badge — outlined pill, no fill */
.trip-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border: 1.5px solid var(--c-line);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--c-ink);
	white-space: nowrap;
	flex-shrink: 0;
}
.trip-card__badge--full {
	border-color: var(--c-muted);
	color: var(--c-muted);
}

.trip-card h3 {
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.trip-card h3 a {
	color: var(--c-ink);
}

.trip-card h3 a:hover {
	color: var(--c-accent);
}

/* Meta row — icon + text items separated by dots */
.trip-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.4rem;
	font-size: var(--text-sm);
	color: var(--c-muted);
}

.trip-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.trip-card__meta-item svg,
.trip-card__meta-item i { flex-shrink: 0; font-size: 0.875rem; line-height: 1; color: var(--c-muted); }

.trip-card__meta-sep {
	color: var(--c-muted);
	line-height: 1;
	user-select: none;
}

/* Footer: avatar + name | cta */
.trip-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

.trip-card__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.trip-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-muted);
	flex-shrink: 0;
}
.trip-card__avatar i { font-size: 1.1rem; line-height: 1; }

.trip-card__author-name {
	font-size: var(--text-sm);
	color: var(--c-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trip-card__cta {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
	flex-shrink: 0;
}
.trip-card__cta:hover {
	color: var(--c-accent);
}

/* ── Guide card ──────────────────────────────────────────────────────────── */
.guide-card {
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--c-surface-2);
	text-decoration: none;
	transition: box-shadow 200ms, transform 200ms;
}

.guide-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.guide-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 450ms ease;
}

.guide-card:hover .guide-card__photo { transform: scale(1.04); }

.guide-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0) 58%);
}

.guide-card__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--sp-4);
	display: grid;
	justify-items: start;
	gap: 2px;
	color: #fff;
}

.guide-card__badge {
	margin-bottom: var(--sp-2);
	padding: 0.32rem 0.7rem;
	background: rgba(0, 0, 0, 0.38);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: var(--r-md);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #f5a623;
}

.guide-card__name {
	font-size: var(--text-xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #fff;
}

.guide-card__country {
	margin: 0;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.82);
}

.guide-card__rating {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
}

.guide-card__rating .catm-stars {
	font-size: 1.05rem;
}

/* Lighten the empty stars so they read on the dark photo */
.guide-card__rating .catm-stars::before {
	background: linear-gradient(
		90deg,
		#f5a623 calc(var(--rating) / 5 * 100%),
		rgba(255, 255, 255, 0.35) calc(var(--rating) / 5 * 100%)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.guide-card__rating span {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.78);
}

/* ── Country / destination card ──────────────────────────────────────────── */
.country-card {
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 3 / 4;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--c-surface-2);
	text-decoration: none;
	color: var(--c-white);
	transition: transform 250ms;
}

.country-card:hover {
	transform: scale(1.02);
}

.country-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms ease;
}

.country-card:hover img {
	transform: scale(1.06);
}

.country-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}

.country-card__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--sp-5);
	z-index: 1;
}

.country-card__body h3 {
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--c-white);
	line-height: 1.1;
}

.country-card__body .eyebrow {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--sp-2);
}

/* ── Quote / testimonial card ────────────────────────────────────────────── */
.quote-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.quote-card::before {
	content: '\201C';
	font-size: 4rem;
	line-height: 1;
	color: var(--c-accent);
	font-weight: 700;
	display: block;
	margin-bottom: calc(-1 * var(--sp-3));
}

.quote-card>p {
	font-size: var(--text-base);
	color: var(--c-ink-2);
	line-height: 1.7;
	flex: 1;
}

.quote-card>strong {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--c-muted);
	letter-spacing: 0.02em;
}

/* ── Blog / content card ─────────────────────────────────────────────────── */
.content-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: box-shadow 200ms, transform 200ms;
}

.content-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.content-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-surface-2);
}

.content-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms ease;
}

.content-card:hover .content-card__image img {
	transform: scale(1.04);
}

.content-card h3,
.content-card h3 a {
	color: var(--c-ink);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.25;
	padding-inline: var(--sp-5);
}

.content-card h3 a:hover {
	color: var(--c-accent);
}

.content-card>p,
.content-card .excerpt {
	padding-inline: var(--sp-5);
	padding-bottom: var(--sp-5);
	font-size: var(--text-sm);
	color: var(--c-muted);
	line-height: 1.6;
}

.content-card:not(:has(.content-card__image)) h3,
.content-card:not(:has(.content-card__image))>p {
	padding-top: var(--sp-5);
}

/* ── FAQ item ────────────────────────────────────────────────────────────── */
.faq-item {
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.faq-item summary {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	font-size: var(--text-xl);
	font-weight: 300;
	color: var(--c-muted);
	flex-shrink: 0;
	transition: transform 200ms;
}

.faq-item[open] summary::after {
	transform: rotate(45deg);
	color: var(--c-accent);
}

.faq-item>p {
	margin-top: var(--sp-4);
	font-size: var(--text-sm);
	color: var(--c-muted);
	line-height: 1.7;
}

/* ── Favorite button ─────────────────────────────────────────────────────── */
.catm-favorite-button,
.favorite-btn {
	/* position:relative is REQUIRED: the button contains an absolutely-positioned
	   .screen-reader-text label. Without a positioned ancestor, that label's
	   containing block falls back to <body>, so it is NOT clipped by the slider's
	   overflow:scroll and leaks to the off-screen card's x-position — expanding
	   the mobile layout viewport and causing horizontal page shift. */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	padding: 0;
	transition: background 150ms, transform 150ms;
}

/* Both heart SVGs */
.catm-favorite-button .catm-heart-outline,
.catm-favorite-button .catm-heart-solid,
.favorite-btn .catm-heart-outline,
.favorite-btn .catm-heart-solid {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: color 150ms;
}

/* Default: outline (visible dark/light), solid hidden */
.catm-favorite-button .catm-heart-outline { color: var(--c-ink-2); display: block; }
.catm-favorite-button .catm-heart-solid   { color: #e11d48; display: none; }

/* Saved: filled red shown, outline hidden */
.catm-favorite-button.is-saved .catm-heart-outline,
.catm-favorite-button.is-favorited .catm-heart-outline { display: none; }
.catm-favorite-button.is-saved .catm-heart-solid,
.catm-favorite-button.is-favorited .catm-heart-solid   { display: block; }

/* Hover: preview red */
.catm-favorite-button:not(.is-saved):not(.is-favorited):hover .catm-heart-outline {
	color: #e11d48;
}

.catm-favorite-button:hover {
	background: rgba(225, 29, 72, 0.1);
	transform: scale(1.1);
}


.catm-form {
	display: grid;
	gap: var(--sp-4);
}

.catm-form p {
	margin: 0;
}

/* ── Trip / open-trip request card ───────────────────────────────────────── */
.request-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	transition: box-shadow 200ms, transform 200ms;
}

.request-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.request-card h3 {
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.request-card h3 a {
	color: var(--c-ink);
}

.request-card h3 a:hover {
	color: var(--c-accent);
}

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

.request-card__meta span {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	background: var(--c-accent-bg);
	border-radius: var(--r-pill);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--c-accent);
}

.request-card__meta--full {
	background: var(--c-muted) !important;
	color: var(--c-white) !important;
	opacity: 0.7;
}

.request-card__meta--spots {
	background: var(--c-accent-bg, #EEF2FF) !important;
	color: var(--c-accent) !important;
	font-weight: 600;
}

.request-card>p {
	font-size: var(--text-sm);
	color: var(--c-muted);
	line-height: 1.6;
}


/* ── Section intro helper ────────────────────────────────────────────────── */
.section-head {
	display: grid;
	gap: var(--sp-3);
	max-width: 52rem;
}

/* When .section-head is also the .shell element (i.e. both classes on the
   same div), the shell already constrains the width via min(). The extra
   max-width:52rem causes it to centre itself narrower than sibling .shell
   card-grids, misaligning the heading with the cards below.
   Removing the max-width here lets the heading shell expand to the full
   container width so its left edge matches the card-grid shell's left edge. */
.shell.section-head {
	max-width: none;
}

.section-head h2 {
	max-width: 22ch;
}

.section-head p {
	color: var(--c-muted);
	max-width: 44ch;
}

.section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-5);
	max-width: none;
}

.section-head--row h2 {
	max-width: none;
}


/* ── Responsive breakpoints ──────────────────────────────────────────────── */
@media (max-width: 768px) {
}

@media (max-width: 600px) {
	.search-grid {
		grid-template-columns: 1fr;
	}

	/* Section headings with inline CTAs stack vertically on mobile */
	.section-head--row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-3);
	}

	/* Trip cards: a little tighter on phone */
	.trip-card {
		padding: var(--sp-4);
	}

	/* Quote cards: less padding */
	.quote-card {
		padding: var(--sp-4);
	}
}

/* ── Editorial section wrapper (global — homepage + inner pages) ─────────── */
.editorial-section {
	display: grid;
	/* minmax(0, 1fr) caps the single grid column at the container width.
	   Without it, the implicit `auto` column grows to the max-content of the
	   widest child (a slider), overflowing the viewport and — on mobile —
	   expanding the layout viewport, which disables the mobile media queries. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	padding-block: clamp(32px, 8vw, 96px);
}

.editorial-section--divider {
	border-top: 1px solid var(--c-line);
}

/* ── Card grid — responsive block layout ─────────────────────────────────── */
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5);
}


.card-grid__footer {
	padding-top: var(--sp-5);
	display: flex;
	justify-content: center;
}

@media (max-width: 900px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.card-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Slider — mobile horizontal scroll, desktop CSS grid ──────────────────
   Mobile  : pure CSS scroll-snap, no JS. .slider clips via overflow:clip
             (which does NOT create a scroll container → no iOS viewport bleed).
             .slider__track is the actual native scroll box.
   Desktop : .slider becomes a shell-like grid container; no scroll at all.
   Same HTML both modes — CSS does the switching at 768 px.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Mobile (≤ 768 px) — pure CSS scroll-snap, no JS ────────────────────── */
@media (max-width: 768px) {
	.slider {
		/* overflow:clip clips visual output without creating a scroll container.
		   Unlike overflow:hidden, it cannot be scrolled by a child and does NOT
		   expand the iOS Safari layout viewport — this is the horizontal-shift fix. */
		overflow: clip;
		width: 100%;
	}

	.slider__track {
		display: flex;
		gap: var(--sp-3);
		overflow-x: scroll;             /* native iOS scroll — Safari handles correctly */
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain; /* prevent triggering browser back/forward */
		scrollbar-width: none;          /* Firefox: hide scrollbar */
		-ms-overflow-style: none;       /* IE / Edge legacy: hide scrollbar */
		/* top | right | bottom | left — physical shorthand (works on all browsers).
		   Left 10px keeps the first card off the edge; bottom 24px leaves room for
		   card shadows; right 0 lets the last card bleed to the screen edge. */
		padding: 10px 0 24px 10px;
	}

	.slider__track::-webkit-scrollbar { display: none; } /* Chrome / Safari */

	/* Default: tour cards, trip-request cards */
	.slider__track > * {
		flex: 0 0 300px;
		max-width: 300px;
		scroll-snap-align: start;
		min-width: 0; /* prevent intrinsic size from blowing out the flex basis */
	}

	/* Destination / country cards — narrower so the 2nd peeks into view */
	.slider--destinations .slider__track > * {
		flex: 0 0 155px;
		max-width: 155px;
	}

	/* Quote / review cards */
	.slider--reviews .slider__track > * {
		flex: 0 0 300px;
		max-width: 300px;
	}
}

/* ── Desktop (≥ 769 px) — switch to grid, no scroll ─────────────────────── */
@media (min-width: 769px) {

	/* Behave like a .shell — same centering and width as sibling shells */
	.slider {
		width: min(var(--container), calc(100% - var(--gutter) * 2));
		margin-inline: auto;
	}

	.slider__track {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-5);
	}

	/* Destination cards — 4 columns */
	.slider--destinations .slider__track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Review cards — 3 columns */
	.slider--reviews .slider__track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Star rating display (read-only) ─────────────────────────────────────── */
.catm-stars {
	--rating: 0;
	display: inline-block;
	line-height: 1;
	font-size: 1rem;
	letter-spacing: 1px;
}

.catm-stars::before {
	content: "★★★★★";
	background: linear-gradient(
		90deg,
		#f5a623 calc(var(--rating) / 5 * 100%),
		var(--c-line) calc(var(--rating) / 5 * 100%)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.catm-stars--sm { font-size: 0.85rem; }

/* ── Review cards (shared: tour single + guide profile) ──────────────────── */
.review-list {
	display: grid;
	gap: var(--sp-5);
}

.review-card {
	display: grid;
	gap: var(--sp-3);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}

.review-card:last-child { border-bottom: none; padding-bottom: 0; }

.review-card__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.review-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	object-fit: cover;
	flex-shrink: 0;
}

.review-card__name {
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.review-card__sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: 2px;
}

.review-card__date { font-size: var(--text-xs); color: var(--c-muted); }

.review-card__tour { font-size: var(--text-xs); color: var(--c-muted); }
.review-card__tour a { color: var(--c-ink); font-weight: 600; text-decoration: underline; }

.review-card__text {
	font-size: var(--text-base);
	color: var(--c-ink-2);
	line-height: 1.7;
	margin: 0;
}

.review-card__reply {
	margin-left: calc(44px + var(--sp-3));
	padding: var(--sp-4);
	background: var(--c-surface-2);
	border-radius: var(--r-lg);
	display: grid;
	gap: var(--sp-1);
}

.review-card__reply strong {
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--c-muted);
}

.review-card__reply p { margin: 0; font-size: var(--text-sm); color: var(--c-ink-2); line-height: 1.6; }

/* Guide profile review list reads better constrained */
.guide-reviews .review-list { max-width: 760px; }


/* ── Single blog post ────────────────────────────────────────────────────── */
.blog-single {
	width: min(760px, calc(100% - var(--gutter) * 2));
	margin: 0 auto var(--sp-10);
	padding-top: var(--sp-8);
}

.blog-single__head {
	display: grid;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.blog-single__title {
	font-size: var(--text-4xl);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

.blog-single__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--c-muted);
	font-size: var(--text-sm);
}

.blog-single__meta span:not(:first-child)::before {
	content: "·";
	margin-right: var(--sp-3);
}

.blog-single__cover {
	margin: 0 0 var(--sp-7);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.blog-single__cover img { width: 100%; height: auto; display: block; }

.blog-single__body {
	font-size: var(--text-lg);
	color: var(--c-ink-2);
	line-height: 1.8;
}

.blog-single__body h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: var(--sp-8) 0 var(--sp-3);
	color: var(--c-ink);
}

.blog-single__body h3 {
	font-size: var(--text-xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: var(--sp-6) 0 var(--sp-2);
	color: var(--c-ink);
}

.blog-single__body p { margin-bottom: var(--sp-4); }
.blog-single__body p:last-child { margin-bottom: 0; }

.blog-single__body ul,
.blog-single__body ol { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.blog-single__body li { margin-bottom: var(--sp-2); line-height: 1.7; }

.blog-single__body a {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.blog-single__body blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	border-left: 3px solid var(--c-ink);
	color: var(--c-ink);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: 1.5;
}

.blog-single__body strong { color: var(--c-ink); font-weight: 700; }

.blog-single__cta {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

@media (max-width: 600px) {
	.blog-single__title { font-size: var(--text-3xl); }
	.blog-single__body { font-size: var(--text-base); }
}

/* Blog cards appear on the homepage too, so their placeholder lives here. */
/* Branded placeholder for posts without a featured image */
.blog-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-dark) 0%, #2b2b2b 100%);
	color: rgba(255, 255, 255, 0.45);
}

.blog-card__placeholder i {
	font-size: 2.6rem;
	line-height: 1;
}