/*
 * Tour cards — White Desert-style luxe typography pass.
 *
 * Targets the .tour-card markup rendered by similar-experiences.php inside
 * .bekaa-similar-experiences-grid. Full-range/scenic cards are styled in
 * full-range-filter.css.
 *
 * All sizes/colors reference variables in bekaa-typography.css. To tune,
 * change the variable, not values here.
 *
 * Reverts cleanly: dequeue this file. Original styling in
 * full-range-filter.css and child.css resumes.
 */

/* ----- Title -----------------------------------------------------------
 * Gilda Display, charcoal, with a single brand-red full stop appended via
 * ::after so we don't touch the PHP markup. */
/* ----- Title — brand lockup pattern ------------------------------------
 * Mirrors section-heading vocabulary: roman lead on line 1, italic
 * emphasis on line 2 with a red full stop. PHP splits the title at the
 * first space into two spans; CSS stacks them as block-level lines. */
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-title {
	margin: 0;
	font-family: var(--bekaa-display) !important;
	font-size: var(--bekaa-fs-card-title) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: var(--bekaa-lh-tight) !important;
	letter-spacing: 0 !important;
	color: var(--bekaa-color-text) !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-title__lead {
	display: block;
	font-style: normal;
	font-weight: 400;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-title__emphasis {
	display: block;
	font-style: italic;
	font-weight: 500;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-title__emphasis::after {
	content: ".";
	margin-left: 0.04em;
	color: var(--bekaa-red, var(--wd-red, #ed1c24));
	font-weight: 700;
	font-style: normal;
}

/* ----- Price -----------------------------------------------------------
 * Match the title's Gilda treatment. The FROM <small> resets to system
 * stack tracked caps so it whispers above the figure. */
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-price {
	font-family: var(--bekaa-display) !important;
	font-size: var(--bekaa-fs-card-price) !important;
	font-weight: 400 !important;
	line-height: var(--bekaa-lh-tight) !important;
	letter-spacing: 0 !important;
	color: var(--bekaa-color-text) !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-price small {
	font-family: var(--bekaa-system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
	font-size: var(--bekaa-fs-eyebrow) !important;
	font-weight: 600 !important;
	letter-spacing: var(--bekaa-tracking-eyebrow) !important;
	color: var(--bekaa-color-text-eyebrow) !important;
	text-transform: uppercase;
}

/* ----- Meta row (category + duration) ----------------------------------
 * Strip the pill containers entirely. Render as one line of tracked caps,
 * joined by a quiet middle dot. */
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-tag,
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-duration {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--bekaa-system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
	font-size: var(--bekaa-fs-eyebrow) !important;
	font-weight: 600 !important;
	letter-spacing: var(--bekaa-tracking-eyebrow) !important;
	color: var(--bekaa-color-text-eyebrow) !important;
	text-transform: uppercase;
	line-height: 1.4;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-tag + .tour-duration::before {
	content: "·";
	display: inline;
	margin: 0 0.55em;
	color: var(--bekaa-color-text-eyebrow);
	font-weight: 400;
	letter-spacing: 0;
}

/* Hide the clock icon — luxe meta row is text only. */
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-duration > i,
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-duration .mk-icon-clock-o {
	display: none !important;
}

/* ----- Layout ----------------------------------------------------------
 * Three boring stacked blocks:
 *
 *   1. .tour-meta   — eyebrow, full-width
 *   2. .tour-header — flex row: title (left) + price (right), baseline aligned
 *   3. .tour-desc   — full-width
 *   4. .tour-actions — full-width (button)
 *
 * .tour-content is a flex column so we can use `order: -1` to lift .tour-meta
 * above .tour-header without touching the PHP markup.
 *
 * .tour-header uses align-items: baseline. The price is rendered as
 * inline-block; an inline-block's baseline (per CSS 2.1 §10.8.1) is the
 * baseline of its last in-flow line — i.e. the $699 figure. So the title's
 * baseline aligns with $699's baseline automatically. FROM peeks above $699.
 *
 * No grid, no display:contents, no subgrid. */
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-content {
	display: flex;
	flex-direction: column;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-content > .tour-meta {
	order: -1;
	display: block;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: var(--bekaa-fs-eyebrow-large, 12px) !important;
	line-height: 1.3 !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-content > .tour-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0 0 14px !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-price {
	flex: 0 0 auto;
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right;
	white-space: nowrap;
	line-height: 1;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-price small {
	display: block !important;
	margin: 0 0 4px !important;
	line-height: 1.2;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-price__amount {
	display: block;
	line-height: 1;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-desc {
	margin: 0 0 18px !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions {
	margin: 0 !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button {
	display: inline-flex !important;
	width: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bekaa-color-text-eyebrow) !important;
	transform: none !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button__text {
	font-family: var(--bekaa-system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
	font-size: var(--bekaa-fs-eyebrow) !important;
	font-weight: 600 !important;
	letter-spacing: var(--bekaa-tracking-eyebrow) !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button__text::after {
	content: "." !important;
	display: inline !important;
	width: auto !important;
	height: auto !important;
	margin-left: 0.08em !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--bekaa-red, #ec1d25);
	font: inherit;
	opacity: 0;
	filter: none !important;
	transform: none !important;
	vertical-align: baseline;
	transition: opacity 0.24s var(--bekaa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button:hover,
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button:focus-visible {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--bekaa-color-text-eyebrow) !important;
	box-shadow: none !important;
	outline: none;
	transform: none !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button:hover .bekaa-button__text::after,
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-actions .bekaa-button:focus-visible .bekaa-button__text::after {
	opacity: 1;
}

/* ----- Description -----------------------------------------------------
 * Use the card-body scale shared by the home card-flick slider. */
.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-desc {
	font-family: var(--bekaa-system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: var(--bekaa-fs-card-body, 14px);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: var(--bekaa-tracking-body);
	color: var(--bekaa-color-text-muted);
}

html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item,
html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item {
	transform: translate3d(0, 0, 0) !important;
	translate: 0 var(--bekaa-motion-shift-md, 18px);
	scale: 0.992;
	opacity: 0;
	transition-property: opacity, translate, scale, border-color, box-shadow;
	transition-duration: 0.64s, 1.04s, 1.04s, 0.28s, 0.34s;
	transition-timing-function: ease, var(--bekaa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), var(--bekaa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), ease, ease;
	will-change: opacity, translate, scale;
}

html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.is-visible,
html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.bekaa-reveal-done,
html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item.is-visible,
html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item.bekaa-reveal-done {
	translate: 0 0;
	scale: 1;
	opacity: 1;
}

html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.bekaa-reveal-done,
html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item.bekaa-reveal-done {
	will-change: auto;
}

@media (max-width: 959px), (hover: none), (pointer: coarse) {
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item {
		translate: 0 calc(var(--bekaa-motion-shift-sm, 10px) + 4px);
		scale: 0.996;
		transition-duration: 0.5s, 0.82s, 0.82s, 0.22s, 0.28s;
	}

	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.is-visible,
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.bekaa-reveal-done {
		translate: 0 0;
		scale: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item,
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.is-visible,
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid.bekaa-similar-experiences-rail-reveal.reveal-item.bekaa-reveal-done,
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item,
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item.is-visible,
	html.bekaa-anim-js .bekaa-smart-grid.bekaa-similar-experiences-grid .bekaa-similar-experience-card-reveal.reveal-item.bekaa-reveal-done {
		translate: 0 0 !important;
		scale: 1 !important;
		opacity: 1 !important;
		transition: none !important;
		will-change: auto !important;
	}
}