/* Keep the hero icon row visually paired with the floating navigation. */
@media (min-width: 901px) {
  .pi-hero .wrap { padding-top: 100px !important; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .pi-hero .wrap { padding-top: 100px !important; }
  body.home .elementor .pi-hero .pi-hero-badges .pihb-row {
    margin-top: 24px !important;
  }
}

@media (max-width: 767px) {
  .pi-hero .wrap { padding-top: 100px !important; }
  body.home .elementor .pi-hero .pi-hero-badges .pihb-row {
    margin-top: 24px !important;
  }
}
/* Pearl Island Hero Banner — video / image / gradient background */
.pi-hero {
  min-height: 70vh;
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
}

/* Ocean gradient fallback (also shown behind video while loading) */
.pi-hero--gradient,
.pi-hero--video {
  background: radial-gradient(120% 90% at 75% 10%, #a8dcec 0%, #77C3DB 38%, #4fa3c0 68%, #1F3B3D 100%);
}

/* Video layer */
.pi-hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pi-hero .hero-video--img {
  background-size: cover;
  background-position: center;
}

/* Overlay for text readability (color set via Elementor control) */
.pi-hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20, 45, 55, .45);
}

.pi-hero .wrap {
  position: relative;
  z-index: 2;
  /* Clears the floating nav that overlaps the hero, so the icons row
     sits right under the menu */
  padding-top: 130px;
  padding-bottom: 120px;
  width: 100%;
}


/* Centered variant (matches the live site).
   Doubled .pi-hero class keeps these rules stronger than the base
   `.pi-hero p.sub` margins that appear later in this file. */
.pi-hero.pi-hero--center .wrap {
  text-align: center;
}

.pi-hero.pi-hero--center .hero-ctas,
.pi-hero.pi-hero--center .usps {
  justify-content: center;
}

.pi-hero.pi-hero--center h1,
.pi-hero.pi-hero--center p.sub {
  margin-left: auto;
  margin-right: auto;
}

.pi-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .93);
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1F3B3D;
  margin-bottom: 26px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.pi-hero .hero-badge .stars {
  color: #EBD454;
  letter-spacing: 2px;
  font-size: .95rem;
}

.pi-hero .script {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  color: #fff;
  display: block;
  margin-bottom: 2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .2);
}

.pi-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .25);
  max-width: 22ch;
}

.pi-hero p.sub {
  color: #fff;
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 20px 0 32px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .2);
}

.pi-hero .hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.pi-hero .usps {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pi-hero .usp {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: .88rem;
}

/* Animated moving wave at the bottom of the banner */
.pi-hero .wave-wrap {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.pi-hero .wave-track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: pi-wave 14s linear infinite;
  will-change: transform;
}

.pi-hero .wave-track svg {
  width: 50%;
  height: 100%;
  flex: 0 0 50%;
  display: block;
}

@keyframes pi-wave {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pi-hero .wave-track { animation: none; }
}

@media (max-width: 700px) {
  .pi-hero {
    border-radius: 0;
  }

  .pi-hero .wrap {
    padding-top: 44px;
    padding-bottom: 90px;
  }

  /* Badge pill: allow clean multi-line wrapping instead of a round blob */
  .pi-hero .hero-badge {
    white-space: normal;
    border-radius: 18px;
    font-size: .68rem;
    line-height: 1.5;
    letter-spacing: .04em;
    padding: 9px 16px;
    max-width: 94%;
    justify-content: center;
    text-align: center;
  }

  .pi-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .pi-hero p.sub {
    font-size: 1rem;
  }

  .pi-hero .hero-ctas {
    justify-content: center;
  }

  .pi-hero .hero-ctas .btn {
    width: 100%;
    max-width: 340px;
  }

  /* Save bandwidth: hide the video on small screens, the
     gradient/poster stays visible behind the overlay */
  .pi-hero video.hero-video {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-hero video.hero-video {
    display: none;
  }
}

/* ---- Icon Badges row in the hero (Swimming Pigs, Reef Snorkeling, …)
   Shown as the FIRST row of the hero, above the ratings badge. Sits in
   the normal content flow, so it can never overlap anything. ---- */
.pi-hero .pi-hero-badges {
  width: 100%;
}

.pi-hero .pi-hero-badges--top {
  margin: 0 0 40px;
}

.pihb-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px 40px;
  flex-wrap: wrap;
}
.pihb-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-width: 0;
  max-width: 120px;
}
.pihb-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
  transition: transform .25s ease;
  overflow: hidden;
}
.pihb-item:hover .pihb-circle { transform: translateY(-3px); }
.pihb-circle i { font-size: 20px; color: #2C3E4C; }
.pihb-circle svg { width: 20px; height: 20px; fill: #2C3E4C; }
.pihb-circle img { width: 100%; height: 100%; object-fit: cover; }
.pihb-label {
  font-family: var(--hx-sans, 'Nunito', sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

@media (max-width: 900px) {
  .pi-hero .wrap { padding-top: 110px; }
  .pi-hero .pi-hero-badges--top { margin-bottom: 26px; }

  /* One scrollable line of small icon previews */
  .pihb-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 20px;
    padding: 2px 4px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pihb-row::-webkit-scrollbar { display: none; }
  .pihb-item { flex: 0 0 auto; max-width: 86px; }
  .pihb-circle { width: 42px; height: 42px; }
  .pihb-circle i { font-size: 16px; }
  .pihb-circle svg { width: 16px; height: 16px; }
  .pihb-label { font-size: .66rem; white-space: nowrap; }
}


/* 2026-08-06 — align hero badges with the floating header */
@media (min-width: 901px) {
	.pi-hero .wrap { padding-top: 130px !important; }
}
@media (max-width: 900px) {
	.pi-hero .wrap { padding-top: 124px !important; }
}
.pi-hero .wave path { fill: #D5EBF2 !important; }


/* =========================================================================
   Fixed-header spacing + responsive hero badges — 2026-08-06
   ========================================================================= */
@media (min-width: 901px) {
	.pi-hero .wrap { padding-top: 164px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.home .elementor .pi-hero .pi-hero-badges .pihb-row {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: flex-start !important;
		overflow: visible !important;
		width: 100% !important;
		margin: 52px auto 0 !important;
		padding: 0 16px 10px !important;
		gap: 18px !important;
	}
	body.home .elementor .pi-hero .pi-hero-badges .pihb-item {
		flex: 0 1 100px !important;
		max-width: 110px !important;
		min-width: 0 !important;
	}
	body.home .elementor .pi-hero .pi-hero-badges .pihb-label {
		font-size: 11px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
	}
}

@media (max-width: 767px) {
	.pi-hero .wrap { padding-top: 158px !important; }
	body.home .elementor .pi-hero .pi-hero-badges .pihb-row {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		width: calc(100% + 24px) !important;
		margin: 48px -12px 0 !important;
		padding: 2px 16px 12px !important;
		gap: 18px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}
	body.home .elementor .pi-hero .pi-hero-badges .pihb-row::-webkit-scrollbar { display: none; }
	body.home .elementor .pi-hero .pi-hero-badges .pihb-item {
		flex: 0 0 88px !important;
		width: 88px !important;
		max-width: 88px !important;
		min-width: 88px !important;
		scroll-snap-align: start;
	}
	body.home .elementor .pi-hero .pi-hero-badges .pihb-label {
		font-size: 10.5px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
	}
}