/**
 * Salient Tour Loop: price + booking button inside native Post Loop Builder items.
 * Typography and button styling come from Salient; this file only handles layout and layering.
 */

.stl-tour-meta {
	--stl-gap: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--stl-gap);
	margin-top: var(--stl-gap);
	position: relative;
}

/* Inline: price left, button right, wraps on narrow cards. */
.stl-tour-meta--full[data-layout="inline"] {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.stl-tour-meta[data-layout="centred"] {
	align-items: center;
	text-align: center;
}

/* When the price sits above the excerpt, keep the excerpt spacing native. */
.stl-tour-meta--price {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

/* Respect Salient's text-align setting for Content Under Image (set on .nectar-post-grid). */
.nectar-post-grid[data-text-align="center"] .stl-tour-meta {
	align-items: center;
	text-align: center;
}
.nectar-post-grid[data-text-align="right"] .stl-tour-meta {
	align-items: flex-end;
	text-align: right;
}

/* ---------- Price ---------- */

.stl-tour-price {
	margin: 0;
	line-height: 1.2;
	color: var(--stl-price-color, inherit);
}
.stl-tour-meta .stl-tour-price.nectar-inherit-h3,
.stl-tour-meta .stl-tour-price.nectar-inherit-h4,
.stl-tour-meta .stl-tour-price.nectar-inherit-h5,
.stl-tour-meta .stl-tour-price.nectar-inherit-h6 {
	margin-bottom: 0;
}

.stl-tour-price__prefix,
.stl-tour-price__suffix {
	font-size: 0.72em;
	opacity: 0.75;
	letter-spacing: 0;
	text-transform: none;
	font-weight: inherit;
}

.stl-tour-price__amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-decoration: none;
	background: none;
}

.stl-tour-price__was {
	font-size: 0.72em;
	opacity: 0.6;
	white-space: nowrap;
}

.stl-tour-price__amount--empty,
.stl-tour-price__amount--text {
	white-space: normal;
}

/* ---------- Button ---------- */

/*
 * Salient lays a full-card link (.nectar-post-grid-link, z-index 10) over each item.
 * Lift the booking button above it so it is clickable and not swallowed by the card link.
 */
.stl-tour-cta {
	position: relative;
	z-index: 11;
	pointer-events: auto;
	line-height: 1;
}
.nectar-post-grid-wrap[data-style="mouse_follow_image"] .stl-tour-cta {
	z-index: 101;
}

.stl-tour-cta .nectar-cta {
	margin: 0;
}

/*
 * Text colours set in the Tour Button tab.
 *
 * The Post Loop Builder colours every element in a card with a wildcard rule
 * (.nectar-post-grid[data-text-color] .nectar-post-grid-item .content *), which beats the button's own
 * text and hover-text colours. Salient exposes those colours as CSS variables on the button
 * (--nectar-text-color, --nectar-text-color-hover), so re-apply them at a higher specificity.
 * Background, border and icon hover rules are unaffected and stay native.
 */
.nectar-post-grid-wrap .nectar-post-grid .nectar-post-grid-item .content .stl-tour-cta .nectar-cta[data-text-color="custom"] .link_wrap,
.nectar-post-grid-wrap .nectar-post-grid .nectar-post-grid-item .content .stl-tour-cta .nectar-cta[data-text-color="custom"] .link_wrap * {
	color: var(--nectar-text-color);
}

.nectar-post-grid-wrap .nectar-post-grid .nectar-post-grid-item .content .stl-tour-cta .nectar-cta[class*="text_hover_color_"] .link_wrap:hover,
.nectar-post-grid-wrap .nectar-post-grid .nectar-post-grid-item .content .stl-tour-cta .nectar-cta[class*="text_hover_color_"] .link_wrap:hover * {
	color: var(--nectar-text-color-hover);
}
.stl-tour-cta .nectar-cta[data-display="block"] {
	width: 100%;
}

/* Vertical list: keep the meta row aligned with the heading column. */
.nectar-post-grid-wrap[data-style="vertical_list"] .stl-tour-meta {
	margin-top: 0.5em;
}

/* Carousel slides can be short; never let the meta row overflow the card. */
.nectar-flickity .stl-tour-meta {
	max-width: 100%;
}

@media only screen and (max-width: 690px) {
	.stl-tour-meta--full[data-layout="inline"] {
		--stl-gap: 10px;
	}
}