/* ==========================================================================
   Why Pearl Island Tours page
   Page-specific blocks only. Every value is a token from tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. Page intro — full-bleed, fixed 500px band on desktop
   ========================================================================== */
.why-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 26rem;
  padding-block: var(--space-3xl);
  overflow: hidden;
  color: var(--color-text-inverse);
  background-color: var(--color-surface-inverse);
}

@media (min-width: 64em) {
  .why-intro {
    /* 500px — the height requested for desktop. The padding is trimmed back
       here so the content sits inside that band rather than pushing past it. */
    min-height: 31.25rem;
    padding-block: var(--space-lg);
  }

  /* The headline stops growing with the viewport so the band stays at 500px. */
  .why-intro__title {
    font-size: 3.25rem;
  }
}

.why-intro__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.why-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-intro__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.why-intro__inner {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: var(--measure-wide);
}

.why-intro__title {
  margin-block: var(--space-xs) 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
}

.why-intro__title em {
  display: block;
  font-style: normal;
  color: var(--color-accent);
}

.why-intro__text {
  max-width: var(--measure);
  margin-block: var(--space-md) 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}

.why-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-lg) 0;
}

.why-intro__note {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  margin-block: var(--space-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.why-intro__note .icon {
  flex: none;
  color: var(--color-accent);
}

/* ==========================================================================
   2. Zero Commission-Shop Guarantee
   An asymmetric light split, so the page's centrepiece reads differently
   from the dark guarantee band used on the other pages.
   ========================================================================== */
.why-pledge__grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 48em) {
  .why-pledge__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: center;
  }
}

@media (min-width: 64em) {
  .why-pledge__grid {
    gap: var(--space-4xl);
  }
}

.why-pledge__figure {
  position: relative;
  margin: 0;
}

.why-pledge__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Overlapping seal. It sits inside the image on small screens and breaks
   out over the gutter once there is room for it to do so cleanly. */
.why-pledge__seal {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  display: grid;
  gap: var(--space-2xs);
  justify-items: center;
  width: 8.5rem;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  color: var(--color-text-inverse);
  background-color: var(--color-brand-darkest);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xl);
}

@media (min-width: 48em) {
  .why-pledge__seal {
    right: calc(var(--space-xl) * -1);
    bottom: var(--space-xl);
  }
}

.why-pledge__seal .icon {
  color: var(--color-accent);
}

.why-pledge__seal-text {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

.why-pledge__title {
  margin-block: var(--space-xs) 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.why-pledge__text {
  max-width: var(--measure);
  margin-block: var(--space-md) 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.why-pledge__points {
  margin-block: var(--space-lg) 0;
}

.why-pledge__badge {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  margin-block: var(--space-lg) 0;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-dark);
  background-color: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.why-pledge__badge .icon {
  flex: none;
  color: var(--color-brand);
}

/* ==========================================================================
   3. Our promises to every guest — a 2 x 2 card grid
   ========================================================================== */
.why-promises__grid {
  display: grid;
  gap: var(--space-lg);
  margin-block: var(--space-2xl) 0;
}

@media (min-width: 48em) {
  .why-promises__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.why-promise {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.why-promise__num {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-border-strong);
}

.why-promise__title {
  margin: 0;
  padding-right: var(--space-2xl);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}

.why-promise__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   4. A real story we're proud of
   ========================================================================== */
.why-story__band {
  margin-block: var(--space-2xl) 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.why-story__band img {
  display: block;
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

@media (min-width: 48em) {
  .why-story__band img {
    height: 26rem;
  }
}

.why-story__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  background: var(--scrim-card);
}

.why-story__caption {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-raised);
  max-width: var(--measure);
  padding: var(--space-xl);
  color: var(--color-text-inverse);
}

.why-story__caption .eyebrow {
  margin: 0;
}

.why-story__caption p {
  margin-block: var(--space-xs) 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse);
}

/* The three steps overlap the bottom edge of the photograph on wide screens. */
.why-steps {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-lg) 0;
  padding-inline: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .why-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    width: calc(100% - var(--space-3xl));
    margin-inline: auto;
    margin-block: calc(var(--space-4xl) * -1) 0;
  }
}

.why-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-top: 3px solid var(--color-accent-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.why-step__when {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand);
}

.why-step__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* --- Guest voices ------------------------------------------------------- */
.why-voices {
  display: grid;
  gap: var(--space-xl);
  margin-block: var(--space-3xl) 0;
}

@media (min-width: 64em) {
  .why-voices {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-2xl);
    align-items: stretch;
  }
}

.why-voices__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.why-voices__figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

@media (min-width: 64em) {
  .why-voices__figure img {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.why-voices__list {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}

.why-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.why-quote__mark {
  color: var(--color-accent);
}

.why-quote__text p {
  margin: 0;
}

.why-quote__text {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.why-quote__footer {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-block: var(--space-xs) 0;
  padding-block: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}

.why-quote__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-dark);
  background-color: var(--color-surface-tint);
  border-radius: var(--radius-pill);
}

.why-quote__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.why-quote__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ==========================================================================
   5. Chat with a local expert
   ========================================================================== */
.why-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-text-inverse);
  background-color: var(--color-surface-inverse);
}

.why-cta__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.why-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-band);
}

.why-cta .container {
  position: relative;
  z-index: var(--z-raised);
}

.why-cta__inner {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 64em) {
  .why-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: start;
  }
}

.why-cta__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
}

.why-cta__text {
  max-width: var(--measure);
  margin-block: var(--space-md) var(--space-lg);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}

.why-cta__card {
  padding: var(--space-xl);
  color: var(--color-text);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.section--inverse .why-cta__card-title,
.why-cta__card-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.why-cta__card-text {
  margin-block: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.why-cta__contact {
  display: grid;
  gap: var(--space-xs);
  margin-block: var(--space-lg) 0;
  padding-block: var(--space-lg) 0;
  padding-inline: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.why-cta__contact-item {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.why-cta__contact-item .icon {
  flex: none;
  color: var(--color-brand);
}

.why-cta__contact-item a {
  color: inherit;
  text-decoration: none;
}

.why-cta__contact-item a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}