/* =========================================================================
   Heights Split Section — media + text side-by-side. One widget covers
   Story, Food & Drinks, Events and Getting Here via "extras":
   facts row, feature cards grid, or numbered steps.
   ========================================================================= */
.hsp, .hsp * { box-sizing: border-box; }
.hsp { font-family: var(--hx-sans, 'Nunito', sans-serif); color: var(--hx-body, #56606E); font-size: 16px; line-height: 1.65; }
.hsp a { text-decoration: none; }

.hsp-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hsp--media-right .hsp-grid { grid-template-columns: .95fr 1.05fr; }
.hsp--media-right .hsp-media { order: 2; }
@media (max-width: 880px) {
	.hsp-grid, .hsp--media-right .hsp-grid { grid-template-columns: 1fr; }
	.hsp--media-right .hsp-media { order: 0; }
}

/* Media with optional floating card */
.hsp-media {
	position: relative; border-radius: 22px; min-height: 440px;
	background-size: cover; background-position: center;
	background-color: var(--hx-sky, #D7EEF4);
	box-shadow: 0 18px 50px rgba(6, 44, 47, .14);
}
.hsp-float {
	position: absolute; background: #fff; border-radius: 16px; padding: 16px 22px;
	box-shadow: 0 14px 40px rgba(6, 44, 47, .18); text-align: center;
}
.hsp-float--br { right: -16px; bottom: 34px; }
.hsp-float--tl { left: -16px; top: 38px; text-align: left; }
.hsp-float b {
	font-family: var(--hx-serif, 'Miller Banner', serif); font-weight: 600;
	font-size: 1.7rem; color: var(--hx-slate, #626A82); display: block; line-height: 1.1;
}
.hsp-float span {
	font-size: .66rem; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--hx-slate, #626A82);
}
@media (max-width: 880px) {
	.hsp-float--br { right: 14px; }
	.hsp-float--tl { left: 14px; }
}

/* Text column */
.hsp-kicker {
	display: block; font-family: var(--hx-script, 'Quentin', cursive);
	font-size: 2.1rem; line-height: 1.2; color: var(--hx-pink-dark, #E79FC7); margin-bottom: 4px;
}
.hsp-title {
	margin: 0 0 18px; font-family: var(--hx-serif, 'Miller Banner', serif); font-weight: 600;
	font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.14; color: var(--hx-slate, #626A82);
}
.hsp-text p { margin: 0 0 16px; }

/* Extra: facts row */
.hsp-facts { display: flex; gap: 28px; margin: 24px 0 28px; flex-wrap: wrap; }
.hsp-fact b {
	font-family: var(--hx-serif, 'Miller Banner', serif); font-weight: 600;
	font-size: 1.7rem; color: var(--hx-slate, #626A82); display: block; line-height: 1.1;
}
.hsp-fact span {
	font-size: .72rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--hx-slate, #626A82);
}

/* Extra: feature cards grid (e.g. beach bars) */
.hsp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 28px; }
@media (max-width: 560px) { .hsp-cards { grid-template-columns: 1fr; } }
.hsp-card {
	background: #fff; border: 1px solid var(--hx-sky, #D7EEF4); border-radius: 16px;
	padding: 15px 18px; display: flex; gap: 12px; align-items: center;
}
.hsp-card i { font-style: normal; font-size: 1.35rem; }
.hsp-card b { display: block; font-size: .88rem; color: var(--hx-teal-dark, #062C2F); }
.hsp-card span { font-size: .74rem; color: var(--hx-body, #56606E); font-weight: 700; }

/* Extra: numbered steps */
.hsp-steps { list-style: none; margin: 22px 0 28px; padding: 0; }
.hsp-steps li { display: flex; gap: 16px; margin-bottom: 20px; }
.hsp-step-num {
	flex: 0 0 40px; height: 40px; border-radius: 50%;
	background: var(--hx-pink, #F1BAD7); color: var(--hx-teal-dark, #062C2F);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .95rem;
}
.hsp-steps h4 {
	margin: 0 0 3px; font-family: var(--hx-serif, 'Miller Banner', serif); font-weight: 600;
	font-size: 1.05rem; color: var(--hx-slate, #626A82);
}
.hsp-steps p { margin: 0; font-size: .9rem; }

/* Button */
.hsp-btn {
	display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .1em;
	text-transform: uppercase; padding: 15px 32px; border-radius: 999px; transition: .25s;
	background: var(--hx-pink, #F1BAD7); color: var(--hx-teal-dark, #062C2F);
	box-shadow: 0 10px 26px rgba(241, 186, 215, .4);
}
.hsp-btn:hover { transform: translateY(-2px); background: var(--hx-teal-dark, #062C2F); color: #fff; }
.hsp-btn--dark { background: var(--hx-teal-dark, #062C2F); color: #fff; box-shadow: none; }
.hsp-btn--dark:hover { background: var(--hx-pink, #F1BAD7); color: var(--hx-teal-dark, #062C2F); }