/* =========================================================================
   Pearl Island UGC — "Real Guests. Real Island Days."
   Quote panel + shoppable 9:16 guest video cards with inline playback.
   ========================================================================= */
.pi-widget .ugc-sec {
	padding: 90px 0;
	background: linear-gradient(180deg, #FAF9F5, #EAF4F5);
}
.pi-widget .ugc-sec .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.hugc, .hugc * { box-sizing: border-box; }
.hugc { font-family: var(--hx-sans, 'Nunito', sans-serif); color: var(--pi-text, var(--hx-body, #56606E)); }
.hugc a { text-decoration: none; color: inherit; }

.hugc-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.hugc-kicker {
	display: block; font-family: var(--hx-script, 'Quentin', cursive);
	font-size: 2.2rem; line-height: 1.2; color: var(--pi-script, var(--hx-pink-dark, #E79FC7)); margin-bottom: 6px;
}
.hugc-title {
	margin: 0; font-family: var(--hx-serif, 'Miller Banner', serif); font-weight: 600;
	font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; color: var(--pi-heading, var(--hx-slate, #626A82));
}
.hugc-desc { margin: 14px 0 0; font-weight: 500; color: var(--pi-text, var(--hx-body, #56606E)); }

.hugc-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 40px; align-items: center; }
@media (max-width: 920px) { .hugc-grid { grid-template-columns: 1fr; gap: 30px; } }

/* Quote panel — compact */
.hugc-quote {
	position: relative; background: #fff; border-radius: 18px; padding: 24px 22px 20px;
	box-shadow: 0 12px 36px rgba(6, 44, 47, .09);
}
.hugc-quote::before {
	content: "\201C"; font-family: var(--hx-serif, serif); font-size: 3.4rem;
	color: var(--hx-sky, #D7EEF4); position: absolute; top: -2px; left: 16px; line-height: 1;
}
.hugc-stars { color: #E9C46A; font-size: .85rem; letter-spacing: 2px; margin-bottom: 8px; }
.hugc-quote blockquote {
	margin: 0 0 12px; font-family: var(--hx-serif, serif); font-style: italic;
	font-size: .98rem; line-height: 1.5; color: var(--pi-heading, var(--hx-slate, #626A82)); min-height: 0;
}
.hugc-who { font-weight: 800; font-size: .8rem; color: var(--hx-teal-dark, #062C2F); }
.hugc-who small {
	display: block; font-weight: 700; font-size: .64rem; letter-spacing: .08em;
	text-transform: uppercase; color: var(--hx-slate, #626A82); margin-top: 2px;
}
.hugc-nav { display: flex; gap: 8px; margin-top: 14px; }
.hugc-nav button {
	width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--hx-pink, #F1BAD7); color: var(--hx-teal-dark, #062C2F);
	font-size: .9rem; transition: .2s;
}
.hugc-nav button:hover { background: var(--hx-teal-dark, #062C2F); color: #fff; transform: translateY(-2px); }
.hugc-platform {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
	font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #98A2AE;
}

/* Video cards */
.hugc-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 640px) { .hugc-videos { grid-template-columns: 1fr 1fr; } }
.hugc-card {
	aspect-ratio: 9 / 16; border-radius: 18px; position: relative; overflow: hidden;
	cursor: pointer; transition: .3s; box-shadow: 0 14px 40px rgba(6, 44, 47, .14);
	background-size: cover; background-position: center; background-color: var(--hx-sky, #D7EEF4);
}
.hugc-card:hover { transform: translateY(-6px); }
.hugc-card.is-active { outline: 3px solid var(--hx-pink, #F1BAD7); outline-offset: 3px; }
.hugc-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #000; }

/* Sound indicator (heights.com style): muted icon top-left while playing */
.hugc-sound {
	position: absolute; top: 12px; left: 12px; z-index: 4;
	width: 32px; height: 32px; border-radius: 50%;
	background: rgba(255, 255, 255, .9); color: var(--hx-teal-dark, #062C2F);
	display: none; align-items: center; justify-content: center; font-size: .8rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.hugc-card.is-playing .hugc-sound { display: flex; }
.hugc-tag {
	position: absolute; top: 12px; right: 12px; z-index: 4;
	background: rgba(255, 255, 255, .92); color: var(--hx-teal-dark, #062C2F);
	font-weight: 800; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 999px;
}
.hugc-card.is-playing .hugc-tag { opacity: 0; }

/* Shoppable banner — lower fifth */
.hugc-shop {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
	background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-radius: 13px; padding: 10px 12px;
	display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	transition: opacity .25s ease;
}
.hugc-card.is-playing .hugc-shop { opacity: .18; }
.hugc-card.is-playing:hover .hugc-shop { opacity: 1; }
.hugc-shop-ico {
	flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--hx-sky, #D7EEF4);
	display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.hugc-shop-t { flex: 1; min-width: 0; }
.hugc-shop-t b {
	display: block; font-size: .72rem; color: var(--hx-teal-dark, #062C2F); line-height: 1.25;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hugc-shop-t span { font-size: .66rem; font-weight: 800; color: var(--hx-slate, #626A82); }
.hugc-book {
	flex: 0 0 auto; background: var(--hx-pink, #F1BAD7); color: var(--hx-teal-dark, #062C2F);
	font-weight: 800; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 9px 13px; border-radius: 999px; transition: .2s;
}
.hugc-book:hover { background: var(--hx-teal-dark, #062C2F); color: #fff; }


/* =========================================================================
   2026-08-06 — Heights-inspired real-guest video wall
   ========================================================================= */
.pi-widget .ugc-sec .wrap { max-width: 1500px !important; }
.hugc-grid {
	grid-template-columns: minmax(250px, .42fr) minmax(0, 1.58fr);
	gap: 48px;
	align-items: start;
}
.hugc-videos {
	gap: 24px;
	align-items: start;
	padding-bottom: 80px;
}
.hugc-card {
	aspect-ratio: 29 / 38;
	width: 100%;
}
.hugc-card:nth-child(odd) { margin-top: 80px; }
.hugc-card:nth-child(even) { margin-top: 0; }

@media (max-width: 920px) {
	.pi-widget .ugc-sec { padding: 68px 0; overflow: hidden; }
	.hugc-head { margin-bottom: 32px; }
	.hugc-grid { display: block; }
	.hugc-quote { display: none !important; }
	.hugc-videos {
		display: flex !important;
		grid-template-columns: none;
		align-items: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 14px;
		margin: 0 -24px;
		padding: 4px 24px 50px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.hugc-videos::-webkit-scrollbar { display: none; }
	.hugc-card {
		flex: 0 0 min(74vw, 330px);
		width: min(74vw, 330px);
		aspect-ratio: 29 / 38;
		margin-top: 0 !important;
		scroll-snap-align: start;
	}
	.hugc-card:nth-child(even) { margin-top: 36px !important; }
}