/**
 * Card surfaces: tour, destination, testimonial.
 * Values marked PROVISIONAL follow Figma desktop/mobile/tablet where exact
 * frames were not locked; Mac should verify against design.
 */

/* -------------------------------------------------------------------------
 * Testimonial
 * ---------------------------------------------------------------------- */

.hbn-testimonial {
	background-color: var(--hbn-color-white);
	border-radius: var(--hbn-radius-card);
	box-shadow: var(--hbn-shadow-card);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 16px;
	height: 100%;
	margin: 0; /* reset blockquote UA margin so card shadows are not clipped */
	min-width: 0;
	padding: 24px;
}

.hbn-testimonial__text {
	color: var(--hbn-color-text);
	flex-grow: 1;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.hbn-testimonial__text p {
	margin: 0 0 0.75em;
}

.hbn-testimonial__text p:last-child {
	margin-bottom: 0;
}

.hbn-testimonial__footer {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hbn-testimonial__author {
	border-left: 2px solid var(--hbn-color-teal-on-light);
	color: var(--hbn-color-navy);
	display: inline-block;
	font-family: var(--hbn-font-body);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	padding-left: 12px;
}

.hbn-testimonial__source {
	color: var(--hbn-color-text);
	font-size: 13px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Shared card shell
 * ---------------------------------------------------------------------- */

.hbn-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	overflow: hidden;
}

.hbn-card__media {
	position: relative;
}

.hbn-card__img {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

.hbn-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 12px;
	min-width: 0;
}

.hbn-card__title {
	margin: 0;
}

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

/* Tour card skin: card-tour.css. Destination card skin: card-destination.css. */