/* ==========================================================================
   MORE PLACES — cross-link block between sister landings
   Desktop: Figma 5361:4323 (1600 canvas) — photo 630×440 r20 | 21px | copy 629×440,
            stack gap 30: mark 47.28×34, h2 40/50 +0.8, p 24/30 +0.48 (383 wide), button 66h.
   Mobile:  Figma 5576:4020 (440 canvas) — photo 400×320 r20, 10px, copy padding 40/0,
            stack gap 30, p 18/26 Medium (400 wide), button 317×66.
   The block replaces the HELP section at the bottom of the page, so its section padding and
   the derived tablet behaviour (1092–1100 single column, 641–1091 centred photo) follow HELP
   to keep the FAQ → block → footer rhythm identical across the landings.
   Loaded after spain-lp.css / spain-lp-figma.css via the layout `styles` stack.
   ========================================================================== */

.spain-lp-body .spain-lp-more-places {
  padding: 90px 20px 90px;
  background: #fffcf3;
}

.spain-lp-body .spain-lp-more-places__shell {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 21px;
  align-items: center;
}

.spain-lp-body .spain-lp-more-places__media {
  height: 440px;
  min-height: 440px;
  border-radius: 20px;
  overflow: hidden;
}

.spain-lp-body .spain-lp-more-places__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  border-radius: 20px;
}

.spain-lp-body .spain-lp-more-places__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 440px;
  padding: 0;
  text-align: center;
  color: #3a3b43;
}

.spain-lp-body .spain-lp-more-places__mark {
  display: block;
  width: 47.28px;
  height: 34px;
}

.spain-lp-body .spain-lp-more-places__copy h2 {
  margin: 0;
  color: #3a3b43;
  font-family: 'Neue Montreal Bold', Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 0.8px;
  text-align: center;
}

.spain-lp-body .spain-lp-more-places__copy p {
  margin: 0;
  max-width: 383px;
  color: #3a3b43;
  font-family: 'Neue Montreal Regular', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  text-align: center;
}

/* Button hugs its label on desktop (313px outer width with the real font), Figma 5361:4323.
   Figma measures the 30px inset from the frame edge with the stroke drawn inside it,
   so 1px border + 29px padding reproduces the same outer geometry. */
.spain-lp-body .spain-lp-more-places__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 10px;
  width: auto;
  max-width: 100%;
  height: 66px;
  min-height: 66px;
  padding: 10px 29px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: #3a3b43;
  color: #ffffff;
  font-family: 'Neue Montreal Regular', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
}

.spain-lp-body .spain-lp-more-places__btn:hover,
.spain-lp-body .spain-lp-more-places__btn:focus-visible {
  background: #2e2f36;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.spain-lp-body .spain-lp-more-places__btn img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (min-width: 1600px) {
  .spain-lp-body .spain-lp-more-places {
    padding-left: 0;
    padding-right: 0;
  }

  .spain-lp-body .spain-lp-more-places__shell {
    width: 1280px;
    max-width: 1280px;
    grid-template-columns: 630px 629px;
    gap: 21px;
  }
}

@media (max-width: 1100px) {
  .spain-lp-body .spain-lp-more-places__shell {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .spain-lp-body .spain-lp-more-places__media,
  .spain-lp-body .spain-lp-more-places__media img {
    height: 260px;
    min-height: 260px;
  }

  .spain-lp-body .spain-lp-more-places__copy {
    min-height: 0;
  }
}

/* Mobile — Figma 5576:4020 (same breakpoint as the rest of the landing's mobile layout) */
@media (max-width: 1091px) {
  .spain-lp-body .spain-lp-more-places {
    padding: 20px 20px 0;
  }

  .spain-lp-body .spain-lp-more-places__shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;
  }

  .spain-lp-body .spain-lp-more-places__media,
  .spain-lp-body .spain-lp-more-places__media img {
    height: 320px;
    min-height: 320px;
    border-radius: 20px;
  }

  .spain-lp-body .spain-lp-more-places__copy {
    gap: 30px;
    min-height: 0;
    padding: 40px 0;
  }

  .spain-lp-body .spain-lp-more-places__copy p {
    max-width: 400px;
    font-family: 'Neue Montreal Medium', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0;
  }

  .spain-lp-body .spain-lp-more-places__btn {
    width: 317px;
    max-width: 100%;
  }
}

@media (max-width: 400px) {
  .spain-lp-body .spain-lp-more-places__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .spain-lp-body .spain-lp-more-places__media img {
    transition: transform 1.1s var(--spain-lp-ease-soft);
  }

  .spain-lp-body .spain-lp-more-places__media:hover img {
    transform: scale(1.03);
  }
}