/**
 * Destination rows. Staging unit: sync this file alone.
 * The CTA gap lives here so a row sync does not replace tokens.css.
 */

:root {
	--hbn-dest-row-best-cta-gap: 24px;
}

/* -------------------------------------------------------------------------
 * Destination rows (shortcode layout=rows). Sizes from Design/Destinations.pdf.
 * ---------------------------------------------------------------------- */

.hbn-destinations--rows {
	background: transparent;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.hbn-dest-row {
	background: transparent;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	min-height: var(--hbn-dest-row-min-height);
	padding: 0;
}

.hbn-dest-row:nth-child(even) .hbn-dest-row__media {
	grid-column: 2;
	grid-row: 1;
}

.hbn-dest-row:nth-child(even) .hbn-dest-row__body {
	grid-column: 1;
	grid-row: 1;
}

.hbn-dest-row__media {
	min-height: var(--hbn-dest-row-min-height);
	overflow: hidden;
	position: relative;
}

.hbn-dest-row__media img,
.hbn-dest-row__img {
	display: block;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.hbn-dest-row__body {
	align-items: flex-start;
	background: transparent;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--hbn-dest-row-pad-block);
	padding-inline: var(--hbn-gutter);
}

/* Tag+class beats kit `.elementor-kit-* h3`. Type is kit H3 (40/28). */
h3.hbn-dest-row__title {
	color: var(--hbn-color-navy);
	font-family: var(--e-global-typography-hbn_h3-font-family, var(--hbn-font-heading));
	font-size: var(--e-global-typography-hbn_h3-font-size);
	font-weight: var(--e-global-typography-hbn_h3-font-weight);
	/* Kit H3 tag is 1.1 / 1.3. The H3 global-font variable is 0.9 on desktop. */
	line-height: 1.1;
	margin: 0 0 var(--hbn-dest-row-title-explore-gap);
}

.hbn-dest-row__explore {
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-dest-row-explore-size);
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 var(--hbn-dest-row-explore-content-gap);
}

.hbn-dest-row__content {
	color: var(--hbn-color-text);
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-dest-row-body-size);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 var(--hbn-dest-row-content-best-gap);
	width: 100%;
}

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

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

.hbn-dest-row__best {
	border-left: 2px solid var(--hbn-color-teal-on-light);
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-dest-row-body-size);
	font-weight: 600;
	line-height: 1.5;
	padding-left: 12px;
}

/* Two classes beat Elementor kit `.elementor-kit-* p` (margin-bottom: 8px). */
.hbn-dest-row .hbn-dest-row__best {
	margin: 0 0 var(--hbn-dest-row-best-cta-gap);
}

@media (max-width: 767px) {
	.hbn-dest-row {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.hbn-dest-row:nth-child(even) .hbn-dest-row__media,
	.hbn-dest-row:nth-child(even) .hbn-dest-row__body {
		grid-column: auto;
		grid-row: auto;
	}

	.hbn-dest-row__media {
		aspect-ratio: var(--hbn-dest-row-photo-ratio-mobile);
		min-height: 0;
	}

	.hbn-dest-row__body {
		padding-top: 32px;
	}

	h3.hbn-dest-row__title {
		line-height: 1.3;
		margin-bottom: 16px;
	}
}