/* ==========================================================================
   Playa Escondida promo band

   Shared by the home page and the category listings. The point of this site
   is to lead people up the coast to Playa Escondida, so this is a full-width
   band rather than a footnote — but it sits below the San Pancho content, not
   above it, so the page still answers the question the visitor arrived with.
   ========================================================================== */

.sp-promo {
  --pr-teal:      #427c78;
  --pr-teal-deep: #2f5f5c;

  position: relative;
  overflow: hidden;
  background: #17332f;
  color: #fff;
  font-family: "Heebo", sans-serif;
  isolation: isolate;
}

.sp-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}

/* A scrim heavy enough on the left for white type, clearing to the right so
   the beach itself still does the selling. */
.sp-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(11, 30, 27, .92) 0%, rgba(11, 30, 27, .74) 42%, rgba(11, 30, 27, .28) 100%);
}

.sp-promo-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 24px;
}

.sp-promo-body { max-width: 620px; }

.sp-promo .sp-promo-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #9fd2cc;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sp-promo h2 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  line-height: .98;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.sp-promo p {
  max-width: 520px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .9) !important;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
}

.sp-promo-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 32px;
  border-radius: 999px;
  background: #fff;
  color: #17332f !important;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.sp-promo-cta:hover {
  background: var(--pr-teal);
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none;
}
.sp-promo-cta::after { content: " \2192"; }

/* On the listing pages, where it is a footnote rather than a feature. */
.sp-promo--compact .sp-promo-inner { padding: 64px 24px; }
.sp-promo--compact h2 { font-size: clamp(2rem, 4vw, 3rem); }

@media (max-width: 780px) {
  .sp-promo-inner { padding: 64px 24px; }
  .sp-promo::after {
    background: linear-gradient(180deg, rgba(11, 30, 27, .72) 0%, rgba(11, 30, 27, .88) 100%);
  }
  .sp-promo-body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-promo-cta { transition: none; }
  .sp-promo-cta:hover { transform: none; }
}