/* ==========================================================================
   Yacht highlights — [yacht_highlights]
   Complete stylesheet. Retint through the custom properties on
   .yacht-highlights. Column count comes from --yh-columns, set inline
   by the shortcode.
   ========================================================================== */

.yacht-highlights {
	--yh-ink:       #0d2028;
	--yh-ink-soft:  #5c7079;
	--yh-hairline:  #dbe2e4;
	--yh-sea:       #0d6b76;
	--yh-columns:   3;

	margin: 0 0 3rem;
	color: var(--yh-ink);
}

.yacht-highlights__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* --- The list --------------------------------------------------------------
   One column on small screens. CSS columns keep the reading order vertical:
   the list runs down column one, then continues at the top of column two.
   -------------------------------------------------------------------------- */

.yacht-highlights__list {
	margin: 0;
	padding: 0;
	list-style: none;
	column-count: 1;
	column-gap: 2.5rem;
}

.yacht-highlights__item {
	position: relative;
	padding: 9px 0 9px 1.5rem;
	border-bottom: 1px solid var(--yh-hairline);
	font-size: 0.9375rem;
	line-height: 1.45;

	/* Stop an item splitting across the column break. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.yacht-highlights__item::before {
	content: "";
	position: absolute;
	top: 1.15em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yh-sea);
}

/* --- Tablet ---------------------------------------------------------------- */

@media (min-width: 40em) {

	.yacht-highlights__list {
		column-count: min(2, var(--yh-columns));
	}
}

/* --- Desktop --------------------------------------------------------------- */

@media (min-width: 64em) {

	.yacht-highlights__list {
		column-count: var(--yh-columns);
	}

	.yacht-highlights__title {
		margin-bottom: 1.5rem;
	}
}

/* --- Print ----------------------------------------------------------------- */

@media print {

	.yacht-highlights__list {
		column-count: 2;
	}

	.yacht-highlights__item::before {
		background: #000;
	}
}