/* ==========================================================================
   Yacht tabs — [yacht_tabs]
   Complete stylesheet. Retint through the custom properties on .yacht-tabs.
   ========================================================================== */

.yacht-tabs {
	--yt-ink:       #0d2028;
	--yt-ink-soft:  #5c7079;
	--yt-hairline:  #dbe2e4;
	--yt-surface:   #ffffff;
	--yt-surface-2: #f2f5f5;
	--yt-sea:       var(--color-tertiary);
	--yt-sea-tint:  color-mix(in srgb, var(--color-secondary) 20%, transparent);
	--yt-yes:       var(--color-success);
	--yt-no:        var(--color-error);
	--yt-radius:    10px;

	margin: 0 0 3rem;
	color: var(--yt-ink);
	line-height: 1.55;
}

/* --- Tab bar --------------------------------------------------------------- */

.yacht-tabs__nav {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	margin: 0 0 1.75rem;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--yt-hairline);
	scrollbar-width: none;
}

.yacht-tabs__nav::-webkit-scrollbar {
	display: none;
}

.yacht-tabs__tab {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex: 0 0 auto;
	padding: 12px 16px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--yt-ink-soft);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.yacht-tabs__tab:hover {
	color: var(--yt-ink);
}

.yacht-tabs__tab:focus-visible {
	outline: 2px solid var(--yt-sea);
	outline-offset: -2px;
}

.yacht-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--yt-sea);
	color: var(--yt-sea);
}

.yacht-tabs__tab i {
	font-size: 0.875em;
}

/* --- Panels ---------------------------------------------------------------- */

.yacht-tabs__panel {
	display: none;
}

.yacht-tabs__panel.is-active {
	display: block;
}

.yacht-tabs__panel:focus-visible {
	outline: 2px solid var(--yt-sea);
	outline-offset: 4px;
}

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

.yacht-tabs__intro {
	margin: 0.25rem 0 1.5rem;
	color: var(--yt-ink-soft);
}

.yacht-tabs__group {
	margin: 2rem 0 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yt-ink-soft);
}

.yacht-tabs__group:first-of-type {
	margin-top: 0;
}

/* --- Inclusive ------------------------------------------------------------- */

.yacht-tabs__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.yacht-tabs__card {
	padding: 1.25rem;
	border: 1px solid var(--yt-hairline);
	border-radius: 14px;
	background: var(--yt-surface);
}

.yacht-tabs__card-title {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
}

.yacht-tabs__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 0.75rem;
}

.yacht-tabs__badge--yes {
	background: #e4f2ea;
	color: var(--yt-yes);
}

.yacht-tabs__badge--no {
	background: #f6e6e6;
	color: var(--yt-no);
}

.yacht-tabs__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.yacht-tabs__list li {
	position: relative;
	margin-bottom: 0.5rem;
	padding-left: 1.5rem;
}

.yacht-tabs__list li:last-child {
	margin-bottom: 0;
}

.yacht-tabs__list li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 600;
}

.yacht-tabs__list--yes li::before {
	content: "✓";
	color: var(--yt-yes);
}

.yacht-tabs__list--no li::before {
	content: "✕";
	color: var(--yt-no);
}

/* --- Tiles: water toys and spec cards -------------------------------------- */

.yacht-tabs__grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: start;
}

/* The theme gives every li a bottom margin except the last one. Items in
   these grids get their spacing from gap, so reset it on all of them.
   Two classes are needed to outrank the theme's li:last-child rule. */
.yacht-tabs .yacht-tabs__grid > li {
	margin: 0;
}

.yacht-tabs__grid--toys,
.yacht-tabs__grid--specs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yacht-tabs__tile {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 0.875rem 1rem;
	border: 1px solid var(--yt-hairline);
	border-radius: var(--yt-radius);
	background: var(--yt-surface-2);
}

.yacht-tabs__tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--yt-sea-tint);
	color: var(--yt-sea);
	font-size: 1rem;
	line-height: 1;
}

/* The theme sizes and colours its icons on its own, which made them
   black and larger than the circle. Pin both here, whether the icon
   arrives as a font icon or as an inline SVG. */
.yacht-tabs .yacht-tabs__tile-icon i,
.yacht-tabs .yacht-tabs__tile-icon i::before {
	width: auto;
	height: auto;
	margin: 0;
	color: var(--yt-sea) !important;
	font-size: 1rem !important;
	line-height: 1 !important;
}

.yacht-tabs .yacht-tabs__tile-icon svg {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor;
	color: var(--yt-sea) !important;
}

.yacht-tabs__tile-body {
	min-width: 0;
}

.yacht-tabs__tile-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.yacht-tabs__tile-note {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--yt-ink-soft);
}

/* --- Itinerary routes ------------------------------------------------------ */

.yacht-tabs__grid--routes {
	grid-template-columns: 1fr;
	gap: 1rem;
}

.yacht-route {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--yt-hairline);
	border-radius: 14px;
	background: var(--yt-surface);
}

.yacht-route__img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

/* Flyers are portrait. The card shows the top 4:3, which holds the logo,
   the three photos and the title on every flyer, even a four-line title. */
.yacht-route__img--flyer {
	height: auto;
	aspect-ratio: 4 / 3;
	object-position: top center;
}

/* The flyer image opens the PDF in a new tab. */
.yacht-route__media {
	display: block;
	overflow: hidden;
}

.yacht-route__media .yacht-route__img {
	transition: transform 0.4s ease;
}

.yacht-route__media:hover .yacht-route__img {
	transform: scale(1.03);
}

.yacht-route__media:focus-visible {
	outline: 2px solid var(--yt-sea);
	outline-offset: -2px;
}

.yacht-route__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1rem 1.125rem 1.125rem;
}

.yacht-route__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.yacht-route__times {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var(--yt-ink-soft);
}

.yacht-route__stops {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

/* Same theme margin as above. The chips are spaced by the list's gap. */
.yacht-route .yacht-route__stops li {
	margin: 0;
}

.yacht-route__stops li {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--yt-sea-tint);
	color: var(--yt-sea);
	font-size: 0.75rem;
	font-weight: 500;
}

.yacht-route__text {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--yt-ink-soft);
}

/* Pushed to the bottom of the card, so the buttons line up across a row. */
.yacht-route__pdf {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 16px;
	border: 1px solid var(--yt-sea);
	border-radius: 999px;
	color: var(--yt-sea);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Keeps at least 16px between the text and the button when the card
   has no spare height to push the button down. */
.yacht-route__body > :has(+ .yacht-route__pdf) {
	margin-bottom: 16px;
}

.yacht-route__pdf:hover {
	background: var(--yt-sea);
	color: #ffffff;
}

.yacht-route__pdf:focus-visible {
	outline: 2px solid var(--yt-sea);
	outline-offset: 2px;
}

.yacht-route__pdf i {
	font-size: 0.875rem;
}

/* --- Long spec sheet ------------------------------------------------------- */

.yacht-tabs__sheet {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 2rem;
}

.yacht-sheet {
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--yt-hairline);
	border-radius: 14px;
	background: var(--yt-surface);
}

.yacht-sheet__title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yt-ink-soft);
}

.yacht-sheet__list {
	margin: 0;
}

.yacht-sheet__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--yt-hairline);
	font-size: 0.9375rem;
}

.yacht-sheet__row:last-child {
	border-bottom: 0;
}

.yacht-sheet__row dt {
	color: var(--yt-ink-soft);
}

.yacht-sheet__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* --- Tab bar on tablet and phone ------------------------------------------- */
/* Up to 1023px the tabs become buttons in a grid, so every tab is visible
   without sideways scrolling: four tabs sit in one row on a tablet and in
   two rows of two on a phone. */

@media (max-width: 63.99em) {

	.yacht-tabs__nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
		gap: 8px;
		overflow: visible;
		margin: 0 0 1.5rem;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.yacht-tabs__tab {
		justify-content: center;
		min-height: 44px;
		margin: 0;
		padding: 10px 14px;
		border: 1px solid var(--yt-hairline);
		border-radius: var(--yt-radius);
		background: var(--yt-surface);
		color: var(--yt-ink);
		transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	}

	.yacht-tabs__tab:hover {
		border-color: var(--yt-sea);
	}

	.yacht-tabs__tab[aria-selected="true"] {
		border-color: var(--yt-sea);
		background: var(--yt-sea-tint);
		color: var(--yt-sea);
	}

	.yacht-tabs__tab:focus-visible {
		outline-offset: 2px;
	}
}

/* --- Wider screens --------------------------------------------------------- */

@media (min-width: 40em) {

	.yacht-tabs__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yacht-tabs__grid--toys,
	.yacht-tabs__grid--specs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.yacht-tabs__grid--routes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yacht-tabs__sheet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {

	.yacht-tabs__grid--routes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 80em) {

	.yacht-tabs__grid--routes {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {

	.yacht-tabs__tab,
	.yacht-route__media .yacht-route__img,
	.yacht-route__pdf {
		transition: none;
	}

	.yacht-route__media:hover .yacht-route__img {
		transform: none;
	}
}