/*
 * 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.
 *
 * Shared sizes/colors reference variables in bekaa-typography.css. The
 * similar-card compatibility values are scoped here with their consumer.
 *
 * Revert the complete typography commit to restore the prior definitions
 * and consumers together.
 */

:where(body:not(.bekaa-charter-planner-page):not(.bekaa-charter-landing-prototype-page)) .bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card {
	--bekaa-fs-card-title: 1.375rem;
	--bekaa-fs-card-price: 1.375rem;
	--bekaa-fs-card-body: 0.875rem;
	--bekaa-fs-eyebrow: 0.625rem;
	--bekaa-fs-eyebrow-large: 0.75rem;
	--bekaa-button-font-size-small: 0.8125rem;
}

/* ----- 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) ----------------------------------
 * Keep the small tracked caps, with duration aligned right for easy scanning. */
.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;
	text-transform: uppercase;
	line-height: 1.4;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-tag {
	color: var(--bekaa-color-text-eyebrow) !important;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-duration {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-left: auto !important;
	color: var(--bekaa-color-text, #1a1a1a) !important;
	white-space: nowrap;
}

.bekaa-smart-grid.bekaa-similar-experiences-grid .tour-card .tour-duration__icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	color: var(--bekaa-red, #ec1d25);
}

/* ----- 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: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px;
	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;
}

.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-button-font) !important;
	font-size: var(--bekaa-button-font-size-small, 13px) !important;
	font-weight: 600 !important;
	letter-spacing: var(--bekaa-button-letter-spacing, 0.12em) !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);
}