/*
 * About page — modernised layout of paradisepaddlecayman.com/about-us.
 *
 * Fluid sections inside .wx-container (assets/css/wix-tokens.css provides the
 * palette, type scale, spacing, radii, shadows and motion): the photo banner
 * with the "About" badge, the story on a frosted card over the underwater
 * photo, and the yellow band with the photo carousel.
 */
/* Two families only: Montserrat (display) and Poppins (text), loaded in functions.php. */

.wxa {
	--wxa-yellow: #fbfd6f;
	--wxa-pink: #ff00bb;
	--wxa-ink: #2f2e2e;
	display: block;
	overflow-x: clip;
}

.wxa *,
.wxa *::before,
.wxa *::after {
	box-sizing: border-box;
}

/* Icon-only controls use the page family instead of the browser's default. */
.wxa :where(button) {
	font-family: var(--wx-font-body);
}

@keyframes wxa-rise {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 12px)) scale(0.96);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Fades up to each element's own opacity (the gallery arrows keep Wix's 0.9). */
@keyframes wxa-fade {
	from {
		opacity: 0;
	}
}

/* ---- 1. Photo banner with the "About" badge ---------------------------- */

.wxa-hero {
	padding-block: var(--wx-gap);
	background: var(--wxa-yellow);
}

.wxa-hero__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--wx-radius-lg);
	box-shadow: var(--wx-shadow-lg);
}

.wxa-hero__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.wxa-hero__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.15em 0.75em;
	border: clamp(3px, 0.4vw, 4px) solid var(--wxa-pink);
	border-radius: var(--wx-radius-pill);
	background: rgba(251, 253, 111, 0.79);
	box-shadow: var(--wx-shadow-lg);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
	white-space: nowrap;
	animation: wxa-rise 0.7s var(--wx-ease) both;
}

.wxa-hero__title {
	margin: 0;
	padding: 0;
	font-family: var(--wx-font-display);
	font-size: 1em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--wxa-pink);
	text-align: center;
}

@media (min-width: 768px) {
	.wxa-hero__frame {
		aspect-ratio: 980 / 352;
	}
}

/* ---- 2. "A bit about us..." over the photo ----------------------------- */

.wxa-story {
	position: relative;
	overflow: hidden;
	background: #fff;
	isolation: isolate;
}

.wxa-story__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.wxa-story__inner {
	max-width: calc(var(--wx-container-narrow) + 2 * var(--wx-gutter));
	padding-block: var(--wx-section);
}

/* The heading is .wx-head / .wx-title (wix-tokens.css); this keeps its colour. */
.wxa-story__head {
	color: var(--wxa-pink);
}

.wxa-story__heading {
	text-shadow: 0 2px 12px rgba(0, 47, 166, 0.45);
}

.wxa-story__text {
	padding: clamp(1.25rem, 3.5vw, 2.5rem);
	border-radius: var(--wx-radius-lg);
	background: rgba(255, 255, 255, 0.86);
	box-shadow: var(--wx-shadow-lg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: var(--wx-font-body);
	font-size: var(--wx-fs-body);
	line-height: 1.7;
	color: #868686;
}

.wxa-story__text p {
	max-width: 68ch;
	margin: 0;
	font: inherit;
}

.wxa-story__text p + p {
	margin-top: 1em;
}

.wxa-story__text p:last-child {
	margin-top: 1.25em;
	text-align: right;
}

.wxa-story__text span {
	font-family: var(--wx-font-body);
	font-weight: 500;
	color: var(--wxa-ink);
}

@media (min-width: 768px) {
	.wxa-story__head {
		color: #fff200;
	}

	.wxa-story__text p:last-child {
		max-width: none;
	}
}

/* ---- 3. Photo carousel -------------------------------------------------- */

.wxa-gallery {
	--wxa-slide-h: clamp(220px, 28vw, 430px);
	--wxa-slide-gap: clamp(8px, 1vw, 14px);
	padding-block: var(--wx-gap);
	background: var(--wxa-yellow);
}

.wxa-gallery__frame {
	position: relative;
}

.wxa-gallery__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wx-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wxa-gallery__scroll.is-gliding {
	scroll-snap-type: none;
}

.wxa-gallery__scroll::-webkit-scrollbar {
	display: none;
}

.wxa-gallery__track {
	position: relative;
	display: flex;
	gap: var(--wxa-slide-gap);
	width: max-content;
	margin: 0;
	padding: 6px var(--wx-gutter) 18px;
	list-style: none;
}

.wxa-gallery__item {
	flex: 0 0 auto;
	height: var(--wxa-slide-h);
	aspect-ratio: var(--ar, 3 / 4);
	margin: 0;
	scroll-snap-align: center;
}

.wxa-gallery__open {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--wx-radius);
	background: none;
	box-shadow: var(--wx-shadow);
	cursor: zoom-in;
	transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease);
}

.wxa-gallery__open::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity var(--wx-dur) var(--wx-ease);
}

.wxa-gallery__open img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform 0.6s var(--wx-ease);
	-webkit-user-drag: none;
}

@media (hover: hover) {
	.wxa-gallery__open:hover {
		transform: translateY(-3px);
		box-shadow: var(--wx-shadow-lg);
	}

	.wxa-gallery__open:hover img {
		transform: scale(1.04);
	}

	.wxa-gallery__open:hover::after {
		opacity: 1;
	}
}

.wxa-gallery__open:focus-visible {
	outline: 3px solid var(--wxa-pink);
	outline-offset: 3px;
}

.wxa-gallery__nav {
	position: absolute;
	top: calc(6px + var(--wxa-slide-h) / 2);
	right: calc(var(--wx-gutter) + 8px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(var(--wx-tap), 4vw, 56px);
	height: clamp(var(--wx-tap), 4vw, 56px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--wx-shadow);
	color: var(--wxa-ink);
	opacity: 0.9;
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease);
	animation: wxa-fade var(--wx-dur) var(--wx-ease);
}

.wxa-gallery__nav--prev {
	right: auto;
	left: calc(var(--wx-gutter) + 8px);
}

.wxa-gallery__nav[hidden] {
	display: none !important;
}

.wxa-gallery__nav:hover {
	box-shadow: var(--wx-shadow-lg);
	transform: translateY(-50%) scale(1.08);
}

.wxa-gallery__nav:active {
	transform: translateY(-50%) scale(0.96);
}

.wxa-gallery__nav svg {
	display: block;
	width: 11px;
	height: 19px;
	margin-left: 3px;
	fill: currentColor;
}

.wxa-gallery__nav--prev svg {
	margin-right: 3px;
	margin-left: 0;
	transform: scaleX(-1);
}

/* ---- Lightbox (each photo full screen) --------------------------------- */

.wxa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	animation: wxa-fade var(--wx-dur) var(--wx-ease);
}

.wxa-lightbox[hidden] {
	display: none !important;
}

.wxa-lightbox__img {
	display: block;
	max-width: calc(100vw - 176px);
	max-height: calc(100vh - 80px);
	max-height: calc(100dvh - 80px);
	border-radius: var(--wx-radius-sm);
	box-shadow: var(--wx-shadow-lg);
	object-fit: contain;
	touch-action: pan-y pinch-zoom;
}

.wxa-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	color: var(--wxa-ink);
	transition: box-shadow var(--wx-dur) var(--wx-ease);
}

.wxa-lightbox__btn:hover {
	box-shadow: var(--wx-shadow);
}

.wxa-lightbox__btn svg {
	display: block;
	fill: currentColor;
}

.wxa-lightbox__prev svg,
.wxa-lightbox__next svg {
	width: 13px;
	height: 22px;
}

.wxa-lightbox__close {
	top: 16px;
	right: 16px;
}

.wxa-lightbox__prev,
.wxa-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.wxa-lightbox__prev {
	left: 20px;
}

.wxa-lightbox__next {
	right: 20px;
}

.wxa-lightbox__prev svg {
	transform: scaleX(-1);
}

@media (max-width: 767.98px) {
	.wxa-lightbox__img {
		max-width: calc(100vw - 32px);
		max-height: calc(100vh - 176px);
		max-height: calc(100dvh - 176px);
	}

	.wxa-lightbox__prev,
	.wxa-lightbox__next {
		top: auto;
		bottom: 24px;
		transform: none;
	}

	.wxa-lightbox__prev {
		left: calc(50% - 64px);
	}

	.wxa-lightbox__next {
		right: calc(50% - 64px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wxa-hero__badge,
	.wxa-gallery__nav,
	.wxa-lightbox {
		animation: none;
	}

	.wxa-gallery__open,
	.wxa-gallery__open img,
	.wxa-gallery__open::after,
	.wxa-gallery__nav,
	.wxa-lightbox__btn {
		transition: none;
	}

	.wxa-gallery__open:hover,
	.wxa-gallery__open:hover img {
		transform: none;
	}
}