/* ==========================================================================
   Home — San Pancho

   Everything below the hero. The hero itself (nav_bar.php .landing and the
   slider.php intro animation) is untouched.

   The page's own palette is the teal already used across the site (#427c78
   in style.css, #3a7b74 on the hero curtain), set on a sandy ground with
   Amatic SC display headings — the same footing as sayulita.com, in San
   Pancho's colour rather than Sayulita's purple.

   Everything here is namespaced under .sp- because style.css redefines
   Bootstrap's .container as a 500%-wide flex row for its GSAP panels, and
   gives bare h1/h3 a 7em/5em size with a text-shadow. Using Bootstrap's
   layout classes on this page would inherit all of that.
   ========================================================================== */

.sp-home {
  --sp-teal:      #427c78;
  --sp-teal-deep: #2f5f5c;
  --sp-teal-soft: #eef4f3;
  --sp-ink:       #232c2b;
  --sp-soft:      #5f6f6c;
  --sp-line:      #e2eae8;
  --sp-sand:      #faf8f4;

  background-color: var(--sp-sand);
  color: var(--sp-ink);
  font-family: "Heebo", sans-serif;
}

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

/* ------------------------------------------------------------ typography -- */

/* Bare h1/h3 carry a 7em/5em size and a hard text-shadow from style.css;
   every heading here states its own size and clears the shadow. */
.sp-home h1,
.sp-home h2,
.sp-home h3,
.sp-home h4 {
  text-shadow: none;
  color: inherit;
  margin: 0;
}

.sp-display {
  font-family: "Amatic SC", cursive;
  font-weight: 700;
  line-height: 1;
  color: var(--sp-teal);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

.sp-h2 {
  font-family: "Amatic SC", cursive;
  font-weight: 700;
  line-height: 1.02;
  color: var(--sp-teal);
  font-size: clamp(2.25rem, 4.5vw, 3.4rem);
}

.sp-h3 {
  font-family: "Amatic SC", cursive;
  font-weight: 700;
  line-height: 1.05;
  color: var(--sp-teal);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.sp-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--sp-teal);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sp-lede {
  color: var(--sp-soft);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.75;
}

.sp-home p { color: var(--sp-soft); line-height: 1.7; }

/* Section headers: heading on the left, "see all" on the right. */
.sp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.sp-link {
  flex: none;
  color: var(--sp-teal);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .16s ease;
}
.sp-link:hover { color: var(--sp-teal-deep); text-decoration: none; }
.sp-link::after { content: " \2192"; }

/* --------------------------------------------------------------- rhythm -- */

.sp-section { padding: 72px 0; }
.sp-section--tight { padding: 56px 0; }
.sp-section--soft { background: #fff; }

/* ---------------------------------------------------------------- intro -- */

.sp-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.sp-intro-grid figure { margin: 0; }

.sp-intro-grid img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(35, 44, 43, .05), 0 14px 34px rgba(35, 44, 43, .10);
}

.sp-intro-grid p + p { margin-top: 16px; }

/* The three standing facts under the intro copy. */
.sp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--sp-line);
  list-style: none;
}

.sp-facts li { color: var(--sp-ink); font-size: .9375rem; line-height: 1.4; }
.sp-facts strong {
  display: block;
  font-family: "Amatic SC", cursive;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sp-teal);
}

/* ---------------------------------------------------------------- doors -- */

/* The site's three catalogues, as the page's primary choice. */
.sp-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sp-door {
  position: relative;
  display: block;
  min-height: 340px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-door:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(35, 44, 43, .12), 0 20px 40px rgba(35, 44, 43, .16);
  text-decoration: none;
  color: #fff;
}

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

.sp-door::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 30, 29, .86) 0%, rgba(20, 30, 29, .42) 48%, rgba(20, 30, 29, .12) 100%);
}

.sp-door-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 24px;
}

.sp-door h3 {
  font-family: "Amatic SC", cursive;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.sp-door p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .9) !important;
  font-size: .9375rem;
  line-height: 1.5;
}

.sp-door-more {
  display: inline-block;
  margin-top: 14px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.sp-door-more::after { content: " \2192"; }

/* -------------------------------------------------------------- the rail -- */

/* One horizontal rail on every screen size. The page used to ship a
   2000px-wide desktop flex row of three fading carousels plus a separate set
   of fixed-width mobile strips (1300px / 2200px / 1200px), swapped by media
   query — two markup paths for the same posts, both of which broke as soon
   as the number of posts changed. */
.sp-rail {
  display: flex;
  gap: 20px;
  padding: 4px 24px 20px;
  margin: 0 -24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Without this the mandatory snap aligns the first tile to the scrollport
     edge, scrolling the rail 24px on load and cancelling the padding that
     lines the tiles up with the section heading. */
  scroll-padding: 0 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sp-rail::-webkit-scrollbar { display: none; }

.sp-tile {
  flex: 0 0 260px;
  scroll-snap-align: start;
  display: block;
  color: inherit;
}
.sp-tile:hover { text-decoration: none; color: inherit; }

.sp-tile-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sp-teal-soft);
}

.sp-tile img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform .3s ease;
}
.sp-tile:hover img { transform: scale(1.04); }

.sp-tile-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  color: var(--sp-teal);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sp-tile h3 {
  margin-top: 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sp-ink);
  transition: color .16s ease;
}
.sp-tile:hover h3 { color: var(--sp-teal); }

/* ----------------------------------------------------------- highlights -- */

.sp-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sp-highlight img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 16px;
}

.sp-highlight h3 { margin-bottom: 8px; }
.sp-highlight p { font-size: .9375rem; }

/* ----------------------------------------------------------------- plan -- */

.sp-plan { background: var(--sp-teal-soft); }

.sp-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.sp-note {
  padding: 28px;
  border: 1px solid var(--sp-line);
  border-radius: 16px;
  background: #fff;
}

.sp-note h3 { margin-bottom: 10px; }
.sp-note p { font-size: .9375rem; }
.sp-note a { color: var(--sp-teal); font-weight: 600; }
.sp-note a:hover { color: var(--sp-teal-deep); }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 980px) {
  .sp-highlights { grid-template-columns: repeat(2, 1fr); }
  .sp-doors { grid-template-columns: 1fr; }
  .sp-door { min-height: 260px; }
  .sp-notes { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .sp-section { padding: 52px 0; }
  .sp-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .sp-intro-grid figure { order: -1; }
  .sp-intro-grid img { max-height: 300px; }
  .sp-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sp-tile { flex-basis: 220px; }
  .sp-tile img { height: 280px; }
}

@media (max-width: 520px) {
  .sp-highlights { grid-template-columns: 1fr; }
  .sp-facts { gap: 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-door,
  .sp-tile img { transition: none; }
  .sp-door:hover { transform: none; }
  .sp-tile:hover img { transform: none; }
}