/* ==========================================================================
   Home

   A restyle only. No markup was changed and no wording was touched - every
   rule here targets classes the page already had, so the layout and the
   content stay exactly as they were.

   Brings the home page onto the same footing as About and Where to Eat:
   the sandy beige ground, Amatic SC headings in brand purple, rounded
   imagery and a consistent vertical rhythm.
   ========================================================================== */

/* "home" is not only the page wrapper: the nav and the footer banner both
   carry it too. So this targets div.home specifically, and sets
   background-COLOR rather than the background shorthand -- the shorthand
   resets background-image to none, which is what blanked the "Advertise with
   us" banner. Getting either of those wrong also turns the transparent hero
   nav beige. */
div.home {
  --hm-purple: #7f3f98;
  --hm-ink:    #2b2530;
  --hm-soft:   #6d6577;
  --hm-line:   #e7e2ec;
  --hm-sand:   #faf7f2;

  background-color: var(--hm-sand);
  color: var(--hm-ink);
}

/* The page's own beige was a flat grey (#f6f5f5); match the rest of the site. */
div.sand-background.home { background-color: var(--hm-sand); }

/* The banner keeps its own image and its own dark ground. */
.footer-banner.home { background-color: transparent; }

/* ------------------------------------------------------------ headings -- */

/* "Sayulita Nayarit Mexico" - the page's first real heading. */
div.home .container > article > h3.text-center,
div.home article.row > h3.col-12 {
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--hm-purple);
}

/* "Sayulita Magic" and any other column heading in the intro block. */
div.home article article > h3 {
  font-family: "Amatic SC", cursive;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--hm-purple);
}

/* The intro paragraph carries an inline colour, so this has to outrank it. */
div.home article article > p {
  color: var(--hm-soft) !important;
  font-size: 1.0625rem !important;
  line-height: 1.75;
}

/* "Featured" */
div.home h3.w-100.text-center {
  margin-bottom: 4px;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--hm-purple);
}

/* Carousel section labels: Hotels, Surfing, Wellness, Activities... */
div.home .category-title {
  font-family: "Amatic SC", cursive;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--hm-purple);
  transition: color .16s ease;
}
div.home a:hover .category-title { color: #683180; }

/* The promo line under the intro. */
div.home .promo-p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--hm-soft);
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
  line-height: 1.7;
}

/* --------------------------------------------------------------- media -- */

/* Intro photo. */
div.home article figure img {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
}

/* Carousel tiles: rounded, lifting slightly on hover. */
div.home .carousel-item img,
div.home .card img {
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
div.home .carousel-item a:hover img,
div.home .card:hover img {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(43, 37, 48, .1), 0 16px 34px rgba(43, 37, 48, .14);
}

/* Overlay captions on the feature cards. */
div.home .card-img-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(to top, rgba(23, 18, 28, .72), rgba(23, 18, 28, .12) 55%, transparent);
}
div.home .card-img-overlay h3,
div.home .card-img-overlay h5 { text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }

/* The carousel caption strip. */
div.home .carousel-caption { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
div.home .drop-shadow { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }

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

/* Even spacing between the page's major blocks. */
div.home > .container,
div.home > article.container { padding-top: 64px; padding-bottom: 8px; }

div.home #slider-lg { padding-top: 8px; }

/* --------------------------------------------------------------- links -- */

div.home .purp-link {
  color: var(--hm-purple);
  font-weight: 700;
  letter-spacing: .06em;
  transition: color .16s ease;
}
div.home .purp-link:hover { color: #683180; }

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

@media (max-width: 768px) {
  div.home > .container,
  div.home > article.container { padding-top: 44px; }
  div.home .promo-p { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  div.home .carousel-item img,
  div.home .card img { transition: none; }
  div.home .carousel-item a:hover img,
  div.home .card:hover img { transform: none; }
}

/* ------------------------------------------------------ advertise banner -- */

/* The banner keeps its photo; what it lacked was a legible ground for the
   text, a call to action, and any behaviour on a narrow screen (it was pinned
   to 260px with the background stretched to 300%). */
.ad-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px !important;
  height: auto !important;
  padding: 56px 24px;
  overflow: hidden;
  background-image: url('../../images/pages/default/footer-banner.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #241c2b;
}

/* A scrim so white type reads over whatever part of the photo it lands on. */
.ad-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(23, 18, 28, .78) 0%, rgba(23, 18, 28, .45) 55%, rgba(23, 18, 28, .3) 100%);
}

.ad-banner-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 10px 56px;
  width: 100%;
  max-width: 1000px;
  text-align: left;
}

.ad-banner-title {
  grid-column: 1;
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 700;
  line-height: .95;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}

.ad-banner-copy {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.35;
  text-align: right;
}
.ad-banner-copy span { font-weight: 700; color: #ffd76a; }

.ad-banner-cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 10px;
  padding: 13px 30px;
  border-radius: 999px;
  background: #fff;
  color: #2b2530 !important;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease, color .18s ease;
}
.ad-banner-cta:hover {
  background: #7f3f98;
  color: #fff !important;
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .ad-banner { min-height: 260px !important; padding: 44px 18px; }
  .ad-banner-inner { grid-template-columns: 1fr; gap: 12px; text-align: center; justify-items: center; }
  .ad-banner-title,
  .ad-banner-copy { grid-column: 1; grid-row: auto; text-align: center; }
  .ad-banner-cta { justify-self: center; }
}

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