/**
 * Tour-card + trip-rail redesign skin (1.39.0).
 *
 * Restyles the shared .tour-card component (used by the trip rail, the
 * tours archive, "similar tours", etc.). Previously this skinned the cards
 * in a one-off lavender/purple palette that didn't match the logo or any
 * other part of the site (a .cbadge--forest badge was literally rendering
 * purple). It now maps onto the site-wide brand tokens defined in
 * style.css (--forest / --gold / --ink / --paper-2 / --card / --line), so
 * cards stay on-brand automatically if those tokens ever change.
 *
 * Loads after style.css and trip-rail.css (see inc/redesign-tour-card.php)
 * so these rules win the cascade without needing !important.
 */

:root {
	--rd-bg:        var(--paper-2);   /* section wash behind the rail */
	--rd-ink:       var(--ink);
	--rd-ink-soft:  var(--ink-soft);
	--rd-card:      var(--card);      /* card body panel */
	--rd-line:      var(--line);
	--rd-accent:    var(--forest);    /* primary brand */
	--rd-accent-hi: var(--forest-deep); /* hover/active */
	--rd-radius:    16px;
	--rd-radius-sm: 10px;
}

/* Section wash behind any rail carrying the new cards. */
.triprail { background: var(--rd-bg); border-radius: 22px; }
.triprail__title { color: var(--rd-ink); font-family: var(--font-display); }
.triprail__tab { color: var(--rd-ink-soft); }
.triprail__tab:hover { color: var(--rd-ink); }
.triprail__tab.is-active { color: var(--rd-ink); border-bottom-color: var(--rd-accent); }
.triprail__all { color: var(--rd-accent); border-color: var(--rd-accent); }
.triprail__all:hover { background: var(--rd-accent); border-color: var(--rd-accent); color: var(--white); }

.triprail__arrow { background: var(--white); color: var(--rd-ink); }
.triprail__arrow:hover { background: var(--rd-accent); color: var(--white); border-color: var(--rd-accent); }

/* Card shell. */
.tour-card {
	background: var(--rd-card);
	border-radius: var(--rd-radius);
	box-shadow: 0 1px 2px rgba(36, 20, 46, .06);
}
.tour-card:hover { box-shadow: 0 20px 40px -22px rgba(36, 20, 46, .38); }
.tour-card:focus-within { box-shadow: 0 0 0 2px var(--rd-accent), 0 20px 40px -22px rgba(36, 20, 46, .38); }

.tour-card__media { background: var(--paper-2); }

.tour-card__body { padding: 16px 18px 18px; gap: 5px; }

.tour-card__eyebrow {
	color: var(--rd-ink-soft);
	font-size: .7rem;
	letter-spacing: .06em;
}

.tour-card h3 { font-size: 1.08rem; font-weight: 700; color: var(--rd-ink); }
.tour-card h3 a { color: var(--rd-ink); }
.tour-card h3 a:hover { color: var(--rd-accent); }

.tour-card__metaline,
.tour-card__place { color: var(--rd-ink-soft); }
.tour-card__metaline svg { stroke: var(--rd-ink-soft); }

.wishlist-btn { background: rgba(255, 255, 255, .92); border-color: var(--rd-line); }
.wishlist-btn svg { stroke: var(--rd-ink); }
.wishlist-btn[aria-pressed="true"] svg { fill: var(--rd-accent); stroke: var(--rd-accent-hi); }

/* Badges — earned-badge system, restyled as a solid pill. Each variant now
   reads as its name suggests: gold badges use the brand gold, forest
   badges use the brand forest, paper badges use the neutral paper tone. */
.cbadges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.cbadge {
	font-size: .68rem; font-weight: 700; letter-spacing: .03em;
	padding: 4px 9px; border-radius: 100px; text-transform: uppercase;
}
.cbadge--gold   { background: color-mix(in srgb, var(--gold) 25%, var(--paper)); color: var(--gold-deep); } /* Save X% / on sale */
.cbadge--forest { background: color-mix(in srgb, var(--forest) 14%, var(--paper)); color: var(--forest-deep); } /* Top rated / favourite */
.cbadge--paper  { background: var(--paper-2); color: var(--rd-ink-soft); } /* New trip */

/* Price + CTA row. */
.tour-card__foot { border-top: 1px solid var(--rd-line); align-items: flex-end; }
.price { display: flex; flex-direction: column; }
.price small { color: var(--rd-ink-soft); text-transform: none; letter-spacing: 0; font-size: .74rem; }
.price strong { color: var(--rd-ink); font-family: var(--font-body); font-weight: 800; font-size: 1.3rem; }
.tour-card__was { color: var(--rd-ink-soft); text-decoration: line-through; font-weight: 500; }
.tour-card__nextdate { display: block; font-size: .74rem; color: var(--rd-ink-soft); margin-top: 2px; }

.tour-card__go {
	background: var(--rd-accent);
	border-color: var(--rd-accent);
	color: var(--white);
	border-radius: var(--rd-radius-sm);
	font-weight: 700;
}
.tour-card__go:hover { background: var(--rd-accent-hi); border-color: var(--rd-accent-hi); color: var(--white); }

@media (max-width: 640px) {
	.triprail { border-radius: 0; padding: 32px 0; }
}