/**
 * PB 360 Tour — consumer styles (poster, inline viewer, iframe shell, states).
 * The modal chrome lives in pb-modal.css; this file styles only the 360 content.
 */

.pb-360 {
	--pb360-radius: 12px;
	--pb360-inline-height: 520px;
	position: relative;
	font-family: Inter, system-ui, sans-serif;
}

/* ---------- Poster (default entry, touch + no-JS) ----------
   The image is IN-FLOW (not absolute) and carries the aspect-ratio itself: an
   anchor whose height comes only from its own aspect-ratio (all children
   absolute) contributes 0 height to ancestors inside Elementor's flex
   containers, letting following sections overlap the poster. */
.pb-360__poster {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	background: #242a38;
	border-radius: var(--pb360-radius);
}

/* The poster is an <a>: keep the CTA text white in every state, shielded from the
   theme/kit global link colours (a:hover turned it blue over the photo). */
.pb-360__poster,
.pb-360__poster:hover,
.pb-360__poster:focus,
.pb-360__poster:active,
.pb-360__poster:visited,
.pb-360__poster .pb-360__cta,
.pb-360__poster .pb-360__cta-text {
	color: #fff !important;
	text-decoration: none !important;
}

.pb-360__poster-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.5;
	object-fit: cover;
	transition: transform 420ms ease;
}

/* Imagify (WebP/AVIF) wraps attachment images as <picture class="pb-360__poster-img">
   with a bare <img> inside — our aspect-ratio then sizes the wrapper, and the inner
   image must be told to fill/cover it, or it renders at its natural ratio and leaves
   a gap under the photo. */
picture.pb-360__poster-img > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pb-360__poster-img--placeholder {
	background: linear-gradient(135deg, #2a3242, #151922);
}

/* Even dim across the photo so the centred CTA stays legible wherever the bright
   parts of the opening shot land. */
.pb-360__poster::after {
	position: absolute;
	inset: 0;
	content: '';
	background: rgba(0, 0, 0, 0.32);
}

.pb-360__poster:hover .pb-360__poster-img {
	transform: scale(1.03);
}

/* CTA: icon above the text, centred in the poster both ways. */
.pb-360__cta {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font: 600 17px/1.25 Inter, sans-serif;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.pb-360__cta-icon {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
}

/* "Look around" icon as an SVG mask (a circular arrow), painted navy. A text glyph
   can't be centred reliably — its ink sits off-centre in the font's advance box and
   differs per platform — whereas a masked box centres exactly via the grid. */
.pb-360__cta-icon::before {
	width: 20px;
	height: 20px;
	content: '';
	background: #242a38;
	/* Lucide "rotate-3d". stroke is 'black' rather than currentColor: a data-URI mask
	   has no inheriting context, and a mask only needs opaque ink. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.194 13.707 3.814 1.86-1.86 3.814'/%3E%3Cpath d='M16.47214 7.52786 A 5 10 0 1 0 13 21.79796'/%3E%3Cpath d='M21.79796 11 A 10 5 0 1 0 19 15.57071'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.194 13.707 3.814 1.86-1.86 3.814'/%3E%3Cpath d='M16.47214 7.52786 A 5 10 0 1 0 13 21.79796'/%3E%3Cpath d='M21.79796 11 A 10 5 0 1 0 19 15.57071'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Inline viewer (desktop) ---------- */
.pb-360__inline {
	display: none;
}

.pb-360--inline .pb-360__inline {
	display: block;
}

.pb-360--inline .pb-360__poster {
	display: none;
}

.pb-360__viewer {
	position: relative;
	width: 100%;
	height: var(--pb360-inline-height);
	overflow: hidden;
	background: #0b0d12;
	border-radius: var(--pb360-radius);
}

.pb-360__viewer--modal {
	height: 100%;
	border-radius: 0;
}

.pb-360__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Expanded state ("View larger"): the same viewer node lifted to a fixed, centered
   panel — looks like a modal, keeps the page (and the tour's viewpoint) intact. */
.pb-360__backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(20, 22, 30, 0.72);
}

.pb-360__viewer--inline.is-expanded {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 100001;
	width: min(95vw, 1720px);
	height: 95vh;
	height: 95dvh;
	border-radius: 14px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	transform: translate(-50%, -50%);
}


/* ---------- Larger / exit-fullscreen controls ---------- */
.pb-360__viewer .pb-360__larger {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px !important;
	font: 600 13px/1 Inter, sans-serif;
	color: #242a38 !important;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.92) !important;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: background-color 140ms ease;
}

.pb-360__viewer .pb-360__larger::before {
	content: '\2922'; /* diagonal expand arrow */
	font-size: 15px;
}

.pb-360__viewer .pb-360__larger:hover {
	background: #fff !important;
}

.pb-360__viewer .pb-360__fs-exit {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	/* !important shields against kit/theme global button styling (padding esp. —
	   leaked kit padding shoved the X off-center). */
	padding: 0 !important;
	color: #242a38 !important; /* matches .pb-modal__close: navy X on white */
	cursor: pointer;
	background: #fff !important;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: background-color 140ms ease;
}

.pb-360__viewer .pb-360__fs-exit:hover {
	background: #eceff3 !important;
}

/* Same Pure Boats menu-close icon as dialog.pb-modal .pb-modal__close. */
.pb-360__viewer .pb-360__fs-exit::before {
	width: 20px;
	height: 15px;
	content: '';
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'%3E%3Cpath d='M16.999 0.918945L10.918 6.99902L17.3535 13.4346L16.4336 14.3535L9.99902 7.91895L3.56445 14.3535L2.64453 13.4346L9.0791 6.99902L2.99902 0.918945L3.91797 0L9.99902 6.08008L16.0801 0L16.999 0.918945Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'%3E%3Cpath d='M16.999 0.918945L10.918 6.99902L17.3535 13.4346L16.4336 14.3535L9.99902 7.91895L3.56445 14.3535L2.64453 13.4346L9.0791 6.99902L2.99902 0.918945L3.91797 0L9.99902 6.08008L16.0801 0L16.999 0.918945Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pb-360__viewer.is-expanded .pb-360__larger { display: none; }
.pb-360__viewer.is-expanded .pb-360__fs-exit { display: grid; }

/* ---------- Loading / error ---------- */
.pb-360__loading {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: #fff;
	text-align: center;
	background: #0b0d12;
	transition: opacity 260ms ease;
}

.pb-360__viewer.is-ready .pb-360__loading {
	opacity: 0;
	pointer-events: none;
}

.pb-360__spinner {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pb360-spin 0.8s linear infinite;
}

@keyframes pb360-spin {
	to {
		transform: rotate(360deg);
	}
}

.pb-360__loading.is-error .pb-360__spinner {
	display: none;
}

.pb-360__loading-text,
.pb-360__error-text {
	margin: 0;
	font: 500 15px/1.4 Inter, sans-serif;
}

.pb-360__viewer .pb-360__retry {
	padding: 10px 18px !important;
	font: 600 14px/1 Inter, sans-serif;
	color: #242a38 !important;
	cursor: pointer;
	background: #fff !important;
	border: 0;
	border-radius: 999px;
}

/* ---------- Editor empty state ---------- */
.pb-360--empty {
	padding: 16px 18px;
	font: 500 14px/1.5 Inter, sans-serif;
	color: #5b6472;
	background: #f4f6f9;
	border: 1px dashed #c9ced8;
	border-radius: 12px;
}

.pb-360--empty p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pb-360__poster-img,
	.pb-360__loading {
		transition: none;
	}

	.pb-360__poster:hover .pb-360__poster-img {
		transform: none;
	}

	.pb-360__spinner {
		animation-duration: 1.6s;
	}
}