/* -----------------------------------------------------------------------------
   Whitsunday Escape — Page sections
   Figma: "Hi-fi Design" › Homepage › Home (8040:15386)
-------------------------------------------------------------------------------- */

/* =============================================================================
   Hero — Figma: 8040:15387 (frame) / 8040:15391 (content)
   The dark nav bar sits inside the hero, over the image.
   ========================================================================== */

.wse-hero {
	position: relative;
	isolation: isolate;
}

.wse-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/* <picture> is inline by default, which would collapse the image's height: 100%. */
.wse-hero__media picture {
	display: block;
	height: 100%;
}

.wse-hero__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* Hero carousel. The media layer is absolutely positioned, so every slick
   wrapper has to inherit the full height or the images collapse. */
.wse-hero__slide,
.wse-hero__media .slick-list,
.wse-hero__media .slick-track,
.wse-hero__media .slick-slide,
.wse-hero__media .slick-slide > div {
	height: 100%;
}

.wse-hero__arrows {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 24px;
	/* Only the buttons are clickable; the rest of the hero stays selectable. */
	pointer-events: none;
}

.wse-hero__arrows .slick-arrow {
	pointer-events: auto;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wse-hero__arrows .slick-arrow:hover,
.wse-hero__arrows .slick-arrow:focus-visible {
	opacity: 1;
}

.wse-hero:hover .slick-arrow {
	opacity: .6;
}

/* Desktop: the arrows stay out of the way until the visitor hovers the hero. */
@media (min-width: 1024px) and (hover: hover) {
	.wse-hero__arrows .slick-arrow {
		opacity: 0;
		pointer-events: none;
	}

	.wse-hero:hover .wse-hero__arrows .slick-arrow,
	.wse-hero__arrows .slick-arrow:focus-visible {
		opacity: 0.6;
		pointer-events: auto;
	}

	.wse-hero:hover .wse-hero__arrows .slick-arrow:hover,
	.wse-hero__arrows .slick-arrow:focus-visible {
		opacity: 1;
	}
}

/* The heading and CTA belong to the first slide only. Kept in flow so the
   hero does not change height as the carousel rotates. */
.wse-hero--carousel .wse-hero__content {
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.wse-hero--carousel.is-secondary-slide .wse-hero__content {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wse-hero--carousel .wse-hero__content {
		transition: none;
	}
}

.wse-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-block: 80px;
	text-align: center;
}

.wse-hero__heading-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* Award pill — Figma: 8294:4372 */
.wse-hero__award {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--wse-radius-pill);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.wse-hero__award-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	background-image: var(--wse-gradient-gold);
	border-radius: var(--wse-radius-pill);
	color: var(--wse-white);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
	white-space: nowrap;
}

.wse-hero__award-badge img,
.wse-hero__award-badge .wse-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.wse-hero__award-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	color: var(--wse-white);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-hero__title {
	color: var(--wse-white);
	font-size: var(--wse-display-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-md-line);
	letter-spacing: var(--wse-display-tracking);
	text-shadow: var(--wse-shadow-lg);
}

@media (min-width: 768px) {
	.wse-hero__content {
		gap: 48px;
		padding-block: 160px;
	}

	.wse-hero__title {
		font-size: var(--wse-display-xl-size);
		line-height: var(--wse-display-xl-line);
	}
}

/* =============================================================================
   Search bar — Figma: 8040:15405 / 8096:3207
   The card is vertically centred on the hero's bottom edge.
   ========================================================================== */

.wse-search-bar {
	position: relative;
	z-index: 1;
	/*
	 * Figma: Frame 90 is 112px tall and the card is offset y=-48 inside it, so
	 * the card overlaps the hero by 48 and ~40px of the row sits below it.
	 * Without the padding the next section rides up under the card.
	 */
	margin-top: -48px;
	padding-bottom: 40px;
}

/* =============================================================================
   Awards — Figma: 8040:15427
   ========================================================================== */

.wse-awards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding-block: 48px 96px;
	background-color: var(--wse-white);
}

.wse-awards__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
}

.wse-awards__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	margin-top: -16px;
}

.wse-awards__logo {
	display: flex;
	align-items: center;
	height: 64px;
	flex-shrink: 0;
	flex: 0 0 25%;
	justify-content: center;
	margin-top: 16px;
}

.wse-awards__logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

/* Figma: 8040:15444 — this badge is clipped to a pill. */
.wse-awards__logo--circle {
	border-radius: var(--wse-radius-pill);
	overflow: hidden;
}

.wse-awards__stats {
	display: flex;
	align-items: center;
	gap: var(--wse-gutter-desktop);
}

.wse-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.wse-stat__value {
	color: var(--wse-brand-600);
	font-size: var(--wse-display-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-md-line);
	letter-spacing: var(--wse-display-tracking);
}

.wse-stat__label {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-stat-divider {
	width: 1px;
	height: 48px;
	background-color: var(--wse-gray-200);
	border: 0;
	margin: 0;
}

@media (min-width: 1024px) {
	.wse-awards__logos {

	}

	.wse-awards__logo {
		height: 96px;
	}
}

/* =============================================================================
   Bareboat intro — Figma: 8165:2719 (bg Gray blue/50) / 8165:2720
   ========================================================================== */

.wse-bareboat {
	padding-block: 64px;
	background-color: var(--wse-gray-blue-50);
}

.wse-bareboat__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: stretch;
}

.wse-bareboat__intro {
	padding-block: 12px;
	flex-shrink: 0;
}

.wse-bareboat__cards {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	gap: 24px;
	min-width: 0;
}

/*
 * The two category cards sit side by side from tablet up. The intro column only
 * moves beside them once there is room for 384px of copy plus two cards that
 * are not squeezed — below that the intro stacks above, as it does on mobile.
 */
@media (min-width: 768px) {
	.wse-bareboat__cards {
		flex-direction: row;
		align-items: stretch;
		/*
		 * While stacked, hold the pair to the same 768px measure the intro copy
		 * uses. Without this the cards balloon to ~600px each just before the
		 * 1280px switch and then snap back to 356px, which reads as a glitch.
		 */
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.wse-bareboat {
		padding-block: 96px 128px;
	}
}

@media (min-width: 1280px) {
	.wse-bareboat__inner {
		flex-direction: row;
		gap: 96px;
		align-items: flex-start;
	}

	.wse-bareboat__intro {
		width: 384px;
	}

	.wse-bareboat__cards {
		max-width: none;
	}
}

/* =============================================================================
   Featured boats — Figma: 8096:4129 (bg Gray blue/50) / panel 8096:4130
   ========================================================================== */

/*
 * Mobile is a full-bleed white band — Figma 8294:4500. The inset, bordered,
 * rounded panel is the desktop treatment and starts at 1024px; keeping the
 * inset on mobile would leave the card strip too narrow for the designed 320px
 * card plus a peek of the next one.
 */
.wse-featured {
	background-color: var(--wse-gray-blue-50);
}

.wse-featured__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding-block: 64px;
	background-color: var(--wse-white);
}

/* Decorative tab — Figma: 8096:4150 (two layered vectors + label) */
.wse-featured__tab {
	position: absolute;
	top: -16px;
	left: 24px;
	width: 241px;
	height: 40px;
	pointer-events: none;
}

.wse-featured__tab img {
	position: absolute;
	top: 0;
}

.wse-featured__tab-shadow {
	left: 0;
	width: 241px;
	height: 16px;
}

.wse-featured__tab-shape {
	left: 6px;
	width: 229px;
	height: 40px;
}

.wse-featured__tab-label {
	position: absolute;
	top: 8px;
	left: 120px;
	transform: translateX(-50%);
	color: var(--wse-white);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
	white-space: nowrap;
}

.wse-featured__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

/* Full width until the head becomes a row at 1024px, where it reverts below. */
.wse-featured__head .wse-btn {
	width: 100%;
}

.wse-featured__cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

@media (min-width: 1024px) {
	.wse-featured {
		padding-inline: var(--wse-gutter-desktop);
	}

	.wse-featured__panel {
		padding-block: 96px;
		border: 1px solid var(--wse-gray-100);
		border-radius: var(--wse-radius-2xl);
	}

	.wse-featured__tab {
		left: 80px;
	}

	.wse-featured__head {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--wse-gutter-desktop);
	}

	.wse-featured__head .wse-btn {
		width: auto;
	}

	.wse-featured__cards {
		flex-direction: row;
		align-items: stretch;
	}

	/* Equal widths, now that the main axis is horizontal. */
	.wse-featured__cards .wse-boat-card {
		flex: 1 0 0;
	}
}

/* =============================================================================
   Testimonials — Figma: 8040:15631 (bg Gray blue/50)
   ========================================================================== */

.wse-testimonials {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding-block: 64px;
	background-color: var(--wse-gray-blue-50);
}

.wse-testimonials__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

@media (min-width: 1024px) {
	.wse-testimonials {
		gap: 64px;
		padding-block: 128px;
	}

	.wse-testimonials__list {
		flex-direction: row;
		align-items: stretch;
	}
}

/* =============================================================================
   Listing intro — Figma: 6117:6701 (page heading + search card)
   ========================================================================== */

.wse-listing-intro {
	padding-block: 48px;
}

.wse-listing-intro__search {
	margin-top: 48px;
}

/* =============================================================================
   Listing body — Figma: 8035:6525 (comparison table + results grid)
   ========================================================================== */

.wse-listing {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 32px 64px;
	padding-top: 0;
}

.wse-listing__results {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media (min-width: 768px) {
	.wse-listing-intro {
		padding-block: 64px;
	}
}

/* =============================================================================
   Boat details — Figma: 8035:20729
   ========================================================================== */

.wse-detail-intro {
	padding-block: 32px 24px;
}

.wse-detail-intro__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

.wse-detail-intro__type {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

/* Figma 8096:3464 — a rule sits in each gap between the meta items. */
.wse-detail-intro__sep {
	flex-shrink: 0;
	width: 1px;
	height: 16px;
	background-color: var(--wse-gray-300);
}

/* Stars run larger here than in the cards. */
.wse-detail-intro__meta .wse-rating {
	gap: 6px;
}

.wse-detail-intro__meta .wse-rating .wse-icon {
	width: 20px;
	height: 20px;
}

/* Figma 8207:12371 — the badges take a line of their own on phones, so the
   rule after the last one turns into the line break itself. */
@media (max-width: 767px) {
	.wse-badge + .wse-detail-intro__sep {
		flex-basis: 100%;
		width: 0;
		height: 0;
		background: none;
	}
}

.wse-detail {
	padding-block: 24px 48px;
}

.wse-detail__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: stretch;
}

.wse-detail__main {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 48px;
	min-width: 0;
}

.wse-detail__tabs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wse-tabpanel {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wse-detail__aside {
	flex-shrink: 0;
}

/* Standard inclusions from Theme Settings, above the trip link. Like the trip
   link it takes only the width it needs at the start of the column. */
.wse-detail__inclusions {
	align-self: flex-start;
	max-width: 100%;
	/* Column gap is 48px; the trip link belongs with the inclusions, not a
	   section away from them. */
	margin-bottom: -32px;
	width: 100%;
	box-shadow: none;
}

/* Figma 8035:21709 — a plain arrow link, so it takes its own width at the
   start of the column instead of stretching across it. */
.wse-detail__plan {
	align-self: flex-start;
}

.wse-reviews,
.wse-similar {
	padding-bottom: 48px;
}

.wse-similar .wse-boat-grid {
	margin-top: 24px;
}

/*
 * The mobile frame runs gallery, booking panel, then the tabs. Taking the main
 * column out of the box lifts its children into the grid's own flex line, which
 * is the only way the aside can sit between two of them without a second copy
 * of the markup.
 */
@media (max-width: 1023px) {
	/* Room for the sticky booking bar, so it never covers the footer. */
	.single-wse_boat {
		padding-bottom: 172px;
	}

	.wse-detail__main {
		display: contents;
	}

	/* The tiles are white on this ground here, the reverse of the desktop card.
	   The intro goes with it, or the two sections meet on a visible seam. */
	.wse-detail,
	.wse-detail-intro {
		background-color: var(--wse-gray-blue-50);
	}

	.wse-detail__main > .wse-gallery {
		order: 1;
	}

	.wse-detail__aside {
		order: 2;
	}

	.wse-detail__tabs {
		order: 3;
	}

	/*
	 * display:contents above lifts these into the grid's flex line, so both
	 * carry an order of their own or they would jump to the top.
	 */
	.wse-detail__inclusions {
		order: 4;
		align-self: stretch;
		margin-bottom: -16px; /* Grid gap is 32px here. */
	}

	/* Figma 8207:12592 — the trip link is a full-width button at this width. */
	.wse-detail__plan {
		order: 5;
		align-self: stretch;
		width: 100%;
		padding: 10px 16px;
		background-color: var(--wse-white);
		border: 1px solid var(--wse-brand-300);
		border-radius: var(--wse-radius-md);
		box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
	}
}

@media (min-width: 1024px) {
	.wse-detail__grid {
		flex-direction: row;
		gap: 48px;
		align-items: flex-start;
	}

	.wse-detail__aside {
		width: 448px;
		position: sticky;
		top: 24px;
	}
}

/* =============================================================================
   Search results — Figma: 8035:15059
   ========================================================================== */

.wse-results {
	padding-block: 32px 64px;
	background-color: var(--wse-gray-blue-50);
}
.wse-results + .wse-results {
	padding-top: 0;
}
.wse-results__search {
	margin-top: 24px;
}

.wse-results__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 48px;
}

/* =============================================================================
   Plan Your Trip — Figma: 8331:4217
   ========================================================================== */

.wse-trip-intro {
	padding-top: 16px;
	background-color: var(--wse-white);
}

.wse-trip-intro__note {
	margin-top: 48px;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

.wse-trips {
	padding-block: 32px 64px;
	background-color: var(--wse-white);
}

/* Cards on this page sit flat on a tinted body — instance override of 8331:4985. */
.wse-trips .wse-trip-card {
	box-shadow: none;
}

.wse-trips .wse-trip-card__body {
	background-color: var(--wse-gray-blue-50);
}

/* Mobile card body — Figma: 8412:11911 */
@media (max-width: 767px) {
	.wse-trips .wse-trip-grid {
		gap: 16px;
	}

	.wse-trips .wse-trip-card__body {
		gap: 24px;
		padding: 16px;
	}

	.wse-trips .wse-trip-card__head {
		gap: 12px;
	}

	.wse-trips .wse-spec {
		font-size: var(--wse-text-sm-size);
		line-height: var(--wse-text-sm-line);
	}
}

/* The list's bottom padding already separates it from the CTA box. */
.wse-trips + .wse-cta {
	padding-top: 0;
}

/* Split feature — Figma: 8331:5310 (Desktop) · 8412:12155 (Mobile) */
.wse-split {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-top: 64px;
	background-color: var(--wse-gray-blue-50);
}

.wse-split__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 1 0 0;
	min-width: 0;
	padding-inline: var(--wse-gutter-mobile);
}

.wse-split .wse-section-heading {
	align-items: center;
	gap: 16px;
	text-align: center;
}

.wse-split .wse-section-heading__eyebrow {
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-split .wse-section-heading__title {
	font-size: var(--wse-display-sm-size);
	line-height: var(--wse-display-sm-line);
	letter-spacing: 0;
}

.wse-split__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wse-split__media {
	height: 256px;
	flex-shrink: 0;
	overflow: hidden;
}

.wse-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.wse-trip-intro {
		padding-top: 64px;
	}

	.wse-trip-intro__note {
		margin-top: 64px;
	}

	.wse-trips {
		padding-block: 48px 96px;
	}

	.wse-trips + .wse-cta .wse-btn {
		min-width: 192px;
	}

	.wse-split__content {
		padding-inline: var(--wse-gutter-desktop);
	}

	.wse-split__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}
}

@media (min-width: 1024px) {
	.wse-split {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding-top: 0;
	}

	/* 80px section padding + 32px container gutter. */
	.wse-split__content {
		gap: 48px;
		padding: 64px 112px;
	}

	.wse-split .wse-section-heading {
		align-items: flex-start;
		gap: 20px;
		text-align: start;
	}

	.wse-split .wse-section-heading__eyebrow {
		font-size: var(--wse-text-md-size);
		line-height: var(--wse-text-md-line);
	}

	.wse-split .wse-section-heading__title {
		font-size: var(--wse-display-md-size);
		line-height: var(--wse-display-md-line);
		letter-spacing: var(--wse-display-tracking);
	}

	/*
	 * Figma 1440 has a 512px media beside the copy, so the column keeps that
	 * share of the row instead of stopping at 512px. The ratio stands in for
	 * the old fixed height: it sets the height the row is measured against, so
	 * the section is never shorter than the designed picture, and the item then
	 * stretches to fill a row the copy makes taller. object-fit on the image
	 * takes up the difference.
	 */
	.wse-split__media {
		flex: 0 0 35.5556%;
		height: auto;
		aspect-ratio: 512 / 404;
	}
}

/* =============================================================================
   Itinerary details — Figma: 8331:5414
   ========================================================================== */

.wse-itinerary-intro {
	padding-block: 32px 24px;
	background-color: var(--wse-gray-blue-50);
}

.wse-itinerary {
	padding-block: 24px 64px;
	background-color: var(--wse-gray-blue-50);
}

.wse-itinerary__grid {
	display: flex;
	flex-direction: column;
	/* Map, copy, panel and days sit 48px apart — Figma: 8412:12977. */
	gap: 48px;
	align-items: stretch;
}

/*
 * Column one, and on mobile not a column at all: display:contents drops the
 * wrapper so the map, copy and days become items of the grid itself and the
 * panel can take its place among them. Ordering them as siblings rather than
 * pinning grid rows means a missing map or an empty body leaves no gap behind.
 */
.wse-itinerary__column {
	display: contents;
}

.wse-itinerary__map {
	order: 1;
	/* Runs to both edges on mobile, so it escapes the container gutter. */
	margin-inline: calc(var(--wse-gutter-mobile) * -1);
}

.wse-itinerary__content {
	order: 2;
}

.wse-itinerary__aside {
	order: 3;
	flex-shrink: 0;
}

.wse-itinerary__main {
	order: 4;
	min-width: 0;
}

/* The panel's button repeated under the last day — Figma: 8418:13639. */
.wse-itinerary__action {
	order: 5;
}

.wse-itinerary__action .wse-btn {
	display: flex;
	width: 100%;
}

.wse-itinerary__map img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.wse-itinerary__map {
		margin-inline: 0;
	}

	.wse-itinerary__map img {
		border-radius: var(--wse-radius-lg);
	}
}

@media (min-width: 1024px) {
	.wse-itinerary__grid {
		flex-direction: row;
		align-items: flex-start;
	}

	/* The wrapper becomes a real column again, beside the panel. */
	.wse-itinerary__column {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		gap: 48px;
		min-width: 0;
	}

	.wse-itinerary__aside {
		width: 448px;
		position: sticky;
		top: 24px;
	}

	/* The panel is in view the whole way down, so the repeat is redundant. */
	.wse-itinerary__action {
		display: none;
	}
}

/* =============================================================================
   Whitsundays Guide — Figma: 8332:6747
   ========================================================================== */

.wse-guide-intro {
	padding-block: 32px 24px;
	background-color: var(--wse-white);
}

.wse-guide-activities {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 24px 64px;
	background-color: var(--wse-white);
}

.wse-guide-islands {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 64px;
	background-color: var(--wse-gray-blue-50);
}

/* Mobile — Figma: 8412:12256 */
@media (max-width: 767px) {
	.wse-guide-intro {
		padding-top: 16px;
	}

	.wse-guide-islands {
		gap: 32px;
	}
}

/* =============================================================================
   FAQ — Figma: 8411:5623
   ========================================================================== */

/* Mobile first — Figma: 8452:8604 */
.wse-faq-intro {
	padding-block: 16px 48px;
	background-color: var(--wse-gray-blue-50);
}

.wse-faq-intro__search {
	margin-top: 32px;
}

.wse-faq-body {
	padding-block: 0 64px;
	background-color: var(--wse-gray-blue-50);
}

.wse-faq-body__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: stretch;
}

.wse-faq-body__aside {
	flex-shrink: 0;
}

.wse-faq-body__main {
	flex: 1 0 0;
	min-width: 0;
}

/* The category card only fits beside the list; until then it is a dropdown. */
.wse-faq-body__aside .wse-categories {
	display: none;
}

.wse-faq-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wse-faq-filter__label {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

/* Search results tuck the count under the dropdown — Figma: 8452:14235. */
@media (max-width: 1023px) {
	.wse-faq-body--search .wse-faq-body__grid {
		gap: 16px;
	}
}

@media (min-width: 768px) {
	.wse-faq-intro {
		padding-block: 64px;
	}

	.wse-faq-intro__search {
		margin-top: 24px;
	}
}

@media (min-width: 1024px) {
	.wse-faq-body {
		padding-bottom: 96px;
	}

	.wse-faq-body__grid {
		flex-direction: row;
		gap: 48px;
		align-items: flex-start;
	}

	.wse-faq-body__aside {
		width: 320px;
		position: sticky;
		top: 24px;
	}

	.wse-faq-body__aside .wse-categories {
		display: block;
	}

	.wse-faq-filter {
		display: none;
	}
}

/* =============================================================================
   Contact — Figma: 8420:13869
   NOTE: this page resolves Brand/600 to #0082C3 in Figma rather than the
   #24A7C7 used site-wide, so the brand tokens are remapped for this page only.
   ========================================================================== */

/* Mobile — Figma: 8452:14641. Left-aligned heading, centred from 768px. */
.wse-contact {
	padding-block: 16px 64px;
	background-color: var(--wse-gray-blue-50);
	--wse-brand-600: #0082c3;
	--wse-brand-700: #00689c;
}

/* A size container, so a form section can break out to the container's width. */
.wse-contact .wse-container {
	container-type: inline-size;
}

.wse-contact__head {
	margin-bottom: 48px;
}

.wse-contact__title {
	color: var(--wse-navy);
	font-size: var(--wse-display-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-sm-line);
	margin-top: 12px;
}

.wse-contact__lead {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
	margin-top: 16px;
}

@media (min-width: 768px) {
	.wse-contact {
		padding-top: 32px;
	}

	.wse-contact__head {
		text-align: center;
		margin-bottom: 40px;
	}

	.wse-contact__head .wse-breadcrumbs ol {
		justify-content: center;
	}

	.wse-contact__title {
		font-size: var(--wse-display-lg-size);
		line-height: var(--wse-display-lg-line);
		letter-spacing: var(--wse-display-tracking);
	}
}

/* =============================================================================
   Destination / activity details — Figma: 8332:8546, 8332:7940
   ========================================================================== */

.wse-place-intro {
	padding-block: 16px 24px;
	background-color: var(--wse-gray-blue-50);
}

.wse-place {
	padding-block: 24px;
	background-color: var(--wse-gray-blue-50);
}

/*
 * Hero, body copy and information panel are siblings so that mobile can read
 * hero → panel → copy (Figma: 8421:18043, 8452:8249) while the desktop grid
 * keeps the panel in its own column beside both.
 */
.wse-place__grid {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: stretch;
}

.wse-place__hero {
	order: 1;
	/* Runs to both edges on mobile, so it escapes the container gutter. */
	margin-inline: calc(var(--wse-gutter-mobile) * -1);
}

.wse-place__aside {
	order: 2;
	flex-shrink: 0;
}

.wse-place__body {
	order: 3;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.wse-place__hero img {
	width: 100%;
	height: 320px;
	object-fit: cover;
}

/* Post detail only: space the featured image from the article body. */
.wse-post__hero {
	margin-bottom: 32px;
}

/* An entry with no featured image leads with its copy, and the information
   panel follows it rather than standing where the image would have been. */
.wse-place__grid--no-hero .wse-place__body {
	order: 1;
}

.wse-place__grid--no-hero .wse-place__aside {
	order: 2;
}

/* The link hugs its label rather than stretching across the column. */
.wse-place__body .wse-link-arrow {
	align-self: flex-start;
}

/*
 * One link, drawn two ways. Until the two-column layout the design puts it
 * under the information panel as a full-width button — Figma: 8452:8267 — and
 * the panel sits between it and the copy, so the markup carries both and each
 * is hidden at the other's breakpoint.
 */
.wse-place__link {
	display: none;
}

/* Last in the column, whether or not the entry has a hero above it. */
.wse-place__action {
	order: 4;
}

.wse-place__action .wse-btn {
	display: flex;
	width: 100%;
}

.wse-place-section {
	padding-block: 24px;
	background-color: var(--wse-gray-blue-50);
}

/* The last band on the page carries the footer gap. */
.wse-place-section:last-of-type {
	padding-bottom: 64px;
}

.wse-place-section__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
	margin-bottom: 16px;
}

/* A checklist above the gallery needs its own gap; alone it needs none. */
.wse-checklist:not(:last-child) {
	margin-bottom: 16px;
}

/* Figma 8411:5602 — 320 x 224. */
.wse-place-gallery img {
	width: 100%;
	height: 224px;
	object-fit: cover;
	border-radius: var(--wse-radius-img);
}

@media (min-width: 768px) {
	.wse-place-intro {
		padding-block: 64px 32px;
	}

	.wse-place {
		padding-block: 32px;
	}

	.wse-place__hero {
		margin-inline: 0;
	}

	.wse-place__hero img {
		height: 384px;
		border-radius: var(--wse-radius-lg);
	}

	.wse-place-section {
		padding-block: 32px;
	}

	.wse-place-section:last-of-type {
		padding-bottom: 96px;
	}

	.wse-place-section__title {
		font-size: var(--wse-text-xl-size);
		line-height: var(--wse-text-xl-line);
		margin-bottom: 24px;
	}

	.wse-checklist:not(:last-child) {
		margin-bottom: 24px;
	}
}

@media (min-width: 1024px) {
	.wse-place__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 384px;
		column-gap: 48px;
		row-gap: 48px;
		align-items: start;
	}

	.wse-place__hero {
		grid-column: 1;
		grid-row: 1;
	}

	.wse-place__body {
		grid-column: 1;
		grid-row: 2;
	}

	.wse-place__aside {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: auto;
		position: sticky;
		top: 24px;
	}

	/* One row rather than two, so neither column starts against an empty one. */
	.wse-place__grid--no-hero .wse-place__body,
	.wse-place__grid--no-hero .wse-place__aside {
		grid-row: 1;
	}

	/* The copy takes the link back, inline under the last paragraph. */
	.wse-place__link {
		display: inline-flex;
	}

	.wse-place__action {
		display: none;
	}
}

/* =============================================================================
   Dynamic Content Blocks
   Editor-composed sections stacked below the page content, shared by pages on
   the default template and by itineraries in Single display.
   ========================================================================== */

.wse-blocks {
	display: flex;
	flex-direction: column;
}

.wse-block {
	padding-block: 32px;
}

/* A block that paints its own background needs the breathing room inside it,
   not collapsed against the block above. */
.wse-block--has-background {
	padding-block: 48px;
}

.wse-block--gallery,
.wse-block--listing {
	background-color: var(--wse-gray-blue-50);
}

/* --- Columns -------------------------------------------------------------- */

.wse-columns {
	display: grid;
	gap: 24px;
}

/* One column at a time on small screens; the counts below take over as there
   is room for them. */
@media (min-width: 640px) {
	.wse-columns--2,
	.wse-columns--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wse-columns--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.wse-columns--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * .wse-prose is body copy, so its colour is the muted grey. A heading the
 * editor writes inside a column would inherit that and read as body text, so
 * headings are restated at both schemes.
 */
.wse-block .wse-prose h1,
.wse-block .wse-prose h2,
.wse-block .wse-prose h3,
.wse-block .wse-prose h4,
.wse-block .wse-prose h5,
.wse-block .wse-prose h6 {
	color: var(--wse-gray-900);
}

/* --- Dark scheme ---------------------------------------------------------- */

/*
 * The editor picks the background; this only inverts the text. Headings, body
 * copy and links each carry their own colour in the theme, so each is restated
 * rather than relying on inheritance from the block. The selectors match the
 * light rules above in specificity and come after them, so they win.
 */
.wse-block--dark,
.wse-block--dark .wse-prose {
	color: var(--wse-gray-100);
}

.wse-block--dark .wse-prose h1,
.wse-block--dark .wse-prose h2,
.wse-block--dark .wse-prose h3,
.wse-block--dark .wse-prose h4,
.wse-block--dark .wse-prose h5,
.wse-block--dark .wse-prose h6,
.wse-block--dark .wse-prose strong,
.wse-block--dark .wse-prose th {
	color: var(--wse-white);
}

.wse-block--dark .wse-prose a {
	color: var(--wse-brand-400);
}

.wse-block--dark .wse-prose hr,
.wse-block--dark .wse-prose td,
.wse-block--dark .wse-prose th {
	border-color: rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   Swipe row — Figma: 8294:4504 (boats of the month) · 8294:4836 (guest reviews)

   Both card strips turn into a carousel below the desktop breakpoint: the
   designed 320px card with the next one peeking in, dragged or swiped one card
   at a time. slick drives it from sliders.js.

   The scroll-snap row underneath is what a visitor without JavaScript gets. It
   has to stay on :not(.slick-initialized) — left on the base selector, its flex
   container turns slick's .slick-list into a flex item, which measures the
   track at tens of thousands of pixels, the same trap the gallery thumbs hit.
   ========================================================================== */

@media (max-width: 1023px) {
	.wse-swipe-row {
		--wse-swipe-gutter: var(--wse-gutter-mobile);
		/* The designed card width, keeping a peek of the next one on phones
		   narrower than the 390px the design was drawn at. */
		--wse-swipe-card: min(320px, calc(0.9 * (100vw - 2 * var(--wse-swipe-gutter))));
	}

	/* --- Carousel ---------------------------------------------------------- */
	.wse-swipe-row.slick-initialized {
		display: block;
	}

	/*
	 * The negative margin pulls the list out over the container's gutter so it
	 * spans the viewport, and overflow clips at that edge — so the next card is
	 * cut off by the screen rather than by the container. The padding puts the
	 * first card back on the gutter. The bottom pair is headroom for the cards'
	 * drop shadow, which the list would otherwise clip.
	 */
	.wse-swipe-row .slick-list {
		margin: 0 calc(-1 * var(--wse-swipe-gutter)) -32px;
		padding: 0 var(--wse-swipe-gutter) 32px;
		overflow: hidden;
	}

	.wse-swipe-row .slick-track {
		display: flex;
		align-items: stretch;
	}

	/*
	 * slick puts .slick-slide on the card itself rather than on a wrapper, so
	 * the 8px each side that makes the designed 16px gap has to be margin —
	 * padding would land inside the card's own border and background. For the
	 * same reason there is no ".slick-slide > div" rule here: that would match
	 * the card's own media and body and stretch each to the card's full height.
	 *
	 * slick offsets the track by the first slide's offsetLeft, which is that
	 * 8px margin, so the list padding above is the full gutter rather than the
	 * gutter minus the margin.
	 */
	.wse-swipe-row .slick-slide {
		/* slick.css sets ".slick-initialized .slick-slide { display: block }",
		   which outranks the cards' own display:flex and would drop the
		   testimonial's centring and the boat card's bottom-pinned footer.
		   Each card keeps its own flex-direction and alignment. */
		display: flex;
		/* variableWidth gives the track 5000px per slide, so without this the
		   cards' own flex-grow stretches them across it. */
		flex: 0 0 auto;
		width: var(--wse-swipe-card);
		height: auto;
		margin-inline: 8px;
	}

	/* --- No-JS fallback ---------------------------------------------------- */
	.wse-swipe-row:not(.slick-initialized) {
		flex-direction: row;
		align-items: stretch;
		gap: var(--wse-swipe-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wse-swipe-gutter);
		-webkit-overflow-scrolling: touch;
		padding-bottom: 32px;
		margin-bottom: -32px;
		scrollbar-width: none;
	}

	.wse-swipe-row:not(.slick-initialized)::-webkit-scrollbar {
		display: none;
	}

	.wse-swipe-row:not(.slick-initialized) > * {
		flex: 0 0 var(--wse-swipe-card);
		scroll-snap-align: start;
	}
}

/* The container's gutter widens at 768px, so the strip follows it. */
@media (min-width: 768px) and (max-width: 1023px) {
	.wse-swipe-row {
		--wse-swipe-gutter: var(--wse-gutter-desktop);
	}
}

/* =============================================================================
   Featured CTA on mobile — Figma: 8294:4518

   The design drops "View all boats" below the card strip, but on desktop it
   sits beside the heading inside .wse-featured__head. Rather than duplicate the
   link or rebuild the desktop row, display:contents lifts the head's children
   into the panel's own column, so the button can simply be ordered past the
   cards. The head carried the container gutter, so its children take it on.
   ========================================================================== */

@media (max-width: 1023px) {
	.wse-featured__panel {
		--wse-featured-gutter: var(--wse-gutter-mobile);
	}

	.wse-featured__head {
		display: contents;
	}

	.wse-featured__head > .wse-section-heading {
		width: 100%;
		padding-inline: var(--wse-featured-gutter);
	}

	.wse-featured__head > .wse-btn {
		order: 1;
		width: calc(100% - 2 * var(--wse-featured-gutter));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wse-featured__panel {
		--wse-featured-gutter: var(--wse-gutter-desktop);
	}
}

/* =============================================================================
   Sitemap

   The FAQ page's shell — same tinted band and heading — with a grid of cards in
   place of the answer list. One column on a phone, then two and three as the
   row earns them; the cards stretch to the tallest in their row, so the row
   reads as one band rather than a ragged edge.
   ========================================================================== */

.wse-sitemap-intro {
	padding-block: 16px 48px;
	background-color: var(--wse-gray-blue-50);
}

.wse-sitemap {
	padding-block: 0 64px;
	background-color: var(--wse-gray-blue-50);
}

.wse-sitemap__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.wse-sitemap__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.wse-sitemap-intro {
		padding-block: 64px;
	}

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

@media (min-width: 1024px) {
	.wse-sitemap {
		padding-bottom: 96px;
	}

	.wse-sitemap__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
}

/* =============================================================================
   Site search results — a list in place of the card grid, and the empty state.
   Each result is a single link: section label, title, two lines of text.
   ========================================================================== */

.wse-search-results {
	background: #fff;
	padding-block: 28px 56px;
}

.wse-search-results__inner {
	max-width: calc(960px + 2 * var(--wse-gutter-desktop));
}

.wse-search-results__term {
	color: var(--wse-brand-600);
}

.wse-search-results__count {
	margin-top: 10px;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-search-results__list {
	margin-top: 16px;
}

.wse-search-result + .wse-search-result {
	border-top: 1px solid var(--wse-gray-200);
}

.wse-search-result__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-inline: calc(-1 * var(--wse-gutter-mobile));
	padding: 22px var(--wse-gutter-mobile);
	color: inherit;
	transition: background-color 0.15s ease;
}

.wse-search-result__link:hover,
.wse-search-result__link:active {
	background-color: var(--wse-gray-blue-50);
}

.wse-search-result__link:focus-visible {
	outline: 2px solid var(--wse-brand-600);
	outline-offset: -2px;
}

.wse-search-result__label {
	color: var(--wse-brand-700);
	font-size: 0.6875rem; /* 11px */
	font-weight: var(--wse-weight-semibold);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wse-search-result__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: 1.35;
}

.wse-search-result__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--wse-gray-600);
	font-size: 0.9375rem; /* 15px */
	line-height: 1.55;
}

.wse-search-results .wse-pagination {
	padding-top: 24px;
}

.wse-search-results__lead {
	margin-top: 12px;
}

.wse-search-results__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 24px;
}

.wse-search-results__actions .wse-btn {
	min-height: 48px;
}

@media (min-width: 768px) {
	.wse-search-results {
		padding-block: 48px 88px;
	}

	.wse-search-results__count {
		margin-top: 14px;
		font-size: 0.9375rem;
	}

	.wse-search-results__list {
		margin-top: 28px;
	}

	.wse-search-result__link {
		margin-inline: -20px;
		padding: 28px 20px;
		border-radius: var(--wse-radius-md);
	}

	.wse-search-result__title {
		font-size: var(--wse-text-xl-size);
	}

	.wse-search-result__text {
		line-height: 1.6;
	}

	.wse-search-results .wse-pagination {
		padding-top: 40px;
	}

	.wse-search-results__lead {
		margin-top: 16px;
	}

	.wse-search-results__actions {
		flex-direction: row;
		margin-top: 28px;
	}

	.wse-search-results__actions .wse-btn {
		min-height: 44px;
	}
}