/**
 * Destination cards. Staging unit: sync this file alone.
 * Hover drops the card 8px. Tour, journal, and review cards have no hover motion.
 */

:root {
	--hbn-dest-card-title-size: 24px; /* kit H4 desktop */
	--hbn-dest-card-title-size-mobile: 20px; /* kit H4 mobile */
	--hbn-dest-card-title-weight: 600; /* kit H4 */
	--hbn-dest-card-title-lh: 1.3; /* kit H4 */
}

@media (max-width: 767px) {
	:root {
		--hbn-dest-card-title-size: var(--hbn-dest-card-title-size-mobile);
	}
}

/* -------------------------------------------------------------------------
 * Destination cards only: drop 8px over 1s. No brightness or color change.
 * The card is an <a>, so filter:none beats base a:hover brightness.
 * Tour, journal, and review cards have no hover motion.
 * ---------------------------------------------------------------------- */

.hbn-card--destination {
	transition: transform 1s;
}

.hbn-card--destination:hover,
a.hbn-card--destination:hover {
	filter: none;
	transform: translateY(8px);
}

/* -------------------------------------------------------------------------
 * Destination card (shortcode layout=cards). Sizes from Design/Home.pdf.
 * ---------------------------------------------------------------------- */

a.hbn-card--destination {
	color: inherit;
	text-decoration: none;
}

.hbn-card--destination {
	background-color: var(--hbn-color-white);
	border-radius: var(--hbn-radius-card);
	box-shadow: var(--hbn-shadow-card);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	overflow: visible;
	width: 100%;
}

.hbn-card--destination .hbn-card__media {
	aspect-ratio: 3 / 4;
	border-radius: var(--hbn-radius-card) var(--hbn-radius-card) 0 0;
	flex-shrink: 0;
	overflow: hidden;
	width: 100%;
}

.hbn-card--destination .hbn-card__img,
.hbn-card--destination .hbn-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.hbn-card--destination .hbn-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--hbn-dest-card-title-excerpt-gap);
	padding: var(--hbn-dest-card-pad);
}

.hbn-card--destination .hbn-card__title {
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-dest-card-title-size);
	font-weight: var(--hbn-dest-card-title-weight);
	line-height: var(--hbn-dest-card-title-lh);
	margin: 0;
	text-align: left;
}

.hbn-card--destination .hbn-card__excerpt {
	color: var(--hbn-color-text);
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-dest-card-excerpt-size);
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: left;
}