/* ## 1. Root Tokens (Card-scoped) */

:root {
	--card-bg: #ffffff;
	--card-border: rgba(0,0,0,.08);
	--card-shadow: 0 4px 16px rgba(0,0,0,.08);
	--card-shadow-hover: 0 8px 28px rgba(0,0,0,.12);

	--radius-lg: 1rem;
	--radius-md: .75rem;

	--muted: #7d7b7a;
}

/* ## 2. Base Card Container */

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

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

/* ## 3. Media / Slider Container */

.card__slider {
	position: relative;
/* 	height: 240px; */
	overflow: hidden;
	background: #eee;
	cursor: grab;
}

.card__slider img,
.card__slider video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ## 4. Wrapper (Internal Padding & Rhythm) */

.wrapper {
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* ## 5. Titles & Headings */

.title {
	font-family: var(--font-editorial);
	font-size: 1.125rem;
	line-height: 1.3;
	font-style: italic;
	margin: 0;
}

.title a {
	color: inherit;
	text-decoration: none;
}

.title a:hover {
	text-decoration: underline;
}

.sub-title {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	margin: 0;
}

/* ## 6. Body Copy / Highlights */

.card p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.highlight {
	color: #454442;
}

/* ## 7. Piped / Metadata List */
.piped-list {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.1rem;
	color: var(--muted);
}

.piped-list span:not(:last-child)::after {
	content: " | ";
	opacity: .6;
}

/* ## 8. Pricing Block (Optional) */
.card__pricing {
	display: flex;
	align-items: baseline;
	gap: .25rem;
	font-weight: 600;
}

.card__pricing__label {
	font-size: .75rem;
	color: var(--muted);
}

.card__pricing__value {
	font-size: 1rem;
}

/* ## 9. Utility Clamps (Optional) */
.limit-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.limit-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


.card__slider {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f3f3f3;
}

.card__track {
	display: flex;
	transition: transform 0.35s ease;
	will-change: transform;
}

.card__track img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	pointer-events: none;
}

/* Arrows */
.card__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.45);
	color: #fff;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
}

.card__arrow.prev { left: 8px; }
.card__arrow.next { right: 8px; }

/* Dots */
.card__dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.card__dots span {
/* 	width: 6px;
	height: 6px;
	border-radius: 50%; */
	background: unset;
	cursor: pointer;
	border: 2px solid #fff;
	border-radius: 100vw;
	cursor: pointer;
	height: .6875rem;
	transition-duration: .2s;
	transition-property: background-color;
	transition-timing-function: ease-in-out;
	width: .6875rem;
}

.card__dots span.active {
	background: #fff;
}

.section--cards {
  margin-top: calc(var(--section-gap) * -0.4);
}

.card .wrapper {
  max-width: 72ch;
}

.card__slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,.15)
  );
  pointer-events: none;
}

.card .title {
  line-height: 1.25;
}

.card__badge {
	text-shadow: 1px 1px 3px rgba(0,0,0,.7);
	z-index: 0;
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 1rem;
	line-height: 1.25rem;
	margin: 0;
	padding: 1rem;
	position: absolute;
	text-shadow: 1px 1px 3px rgba(0,0,0,.5);
	z-index: 999;
}

.tta-card-strip {
  position: relative;
  overflow: hidden;
}

.strip-viewport {
  overflow: hidden;
}

.strip-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.4s ease;
  will-change: transform;
}

.tta-card-strip .tta-card {
  flex: 0 0 calc(25% - 1rem); /* 4 visible */
}

/* Navigation buttons */
.strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.strip-nav.prev { left: 0; }
.strip-nav.next { right: 0; }


/* .strip-track .card.destination.normal {
	min-width: 240px;
} */

.strip-track .card.destination.normal,
.strip-track .card.tour.normal {
    flex: 0 0 25%;       /* 4 per view */
    max-width: 25%;
}
.strip-track .card.destination.normal,
.strip-track .card.tour.normal {
    flex: 0 0 240px;
    max-width: 240px;
}


.strip-track {
    display: flex;
    gap: 1.25rem;
}

.strip-track .card {
    flex: 0 0 260px;
    max-width: 260px;
}