/* / — page-specific rules. Shared rules are in /assets/site.css.
   Values are the computed styles of production's Elementor sections at 1440
   and 390 (post-5.css); percentages keep the same containing blocks so they
   resolve to the same pixels. Breakpoints: Elementor 1024 / 767, Astra 921 / 544. */

/* Astra sizes h5 and buttons in rem, so they scale with the 13.68px root at ≤921px */
.page-home .btn { font-size: .93333333333333rem; }
.btn--light { border-color: var(--c-white); color: var(--c-white); }
.btn--light:hover, .btn--light:focus { background: var(--c-sand); border-color: var(--c-white); color: var(--c-white); }
.btn--dark { border-color: var(--c-black); color: var(--c-black); }
.btn--dark:hover, .btn--dark:focus { background: var(--c-sand); border-color: var(--c-black); color: var(--c-black); }
.home-cta { display: flex; margin: 0; }

/* ---------- hero: full-viewport background video (self-hosted from the owner's original file) ---------- */
.home-hero { position: relative; height: 100vh; overflow: hidden; background: var(--c-white); }
.home-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- centred intro bands ("Discover true / ORIGINALITY", "What we have to offer / OUR GROUNDS") ---------- */
.home-intro {
  position: relative;
  padding: 0 19.5% 6.5%;
  text-align: center;
  background-image: radial-gradient(at top center, #fff 0%, rgba(249, 243, 237, 0) 65%);
  box-shadow: 0 -100px 100px -100px rgba(0, 0, 0, .1);
}
.home-intro--grounds { padding-bottom: 5%; }
.home-kicker {
  margin: 0 0 20px;
  font-family: var(--font-script);
  font-size: 34px;
  line-height: 1;
  color: var(--c-grey);
}
.home-intro--origin .home-kicker { padding-top: 10%; }
.home-intro--grounds .home-kicker { padding-top: 9%; }
.home-intro h1, .home-title { margin: 0 0 20px; color: var(--c-black); }
.home-title { font-size: 100px; line-height: 1em; text-transform: uppercase; }
.home-quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.4666666666667rem;
  line-height: 1.2;
  color: var(--c-black);
}
.home-intro .home-cta { justify-content: center; }

/* ---------- four-photo strip ---------- */
.home-strip { padding: 10px; }
.home-strip__inner { display: flex; max-width: 1300px; margin: 0 auto; }
.home-strip__item { width: 25%; padding: 10px; }
.home-strip__item img { display: block; width: 100%; height: auto; }

/* ---------- "The ideal destination wedding venue" (dark photo band) ---------- */
.home-feature {
  position: relative;
  padding: 6.5%;
  background: url(/wp-content/uploads/2025/10/MK-86-2-1.jpg) no-repeat center center / cover;
}
.home-feature::before { content: ""; position: absolute; inset: 0; background: var(--c-black); opacity: .5; }
.home-feature__inner { position: relative; padding-right: 50%; }
.home-feature h2 { margin: 0 0 20px; color: var(--c-white); }
.home-feature__text {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--c-white);
}

/* ---------- grounds columns (5 across, two rows) ----------
   position:relative on the sections after an animated band matches Elementor's
   .elementor-section{position:relative}: while a data-anim heading slides up from
   2000px below it paints underneath the following sections, as on production. */
.home-grounds { position: relative; display: flex; flex-wrap: wrap; justify-content: center; padding: 0 3% 2%; }
.home-grounds__col { display: flex; width: 20%; }
.home-grounds__panel { width: 100%; padding: 0 6.5% 6.5%; text-align: center; }
.home-grounds__img { margin-bottom: 13%; }
.home-grounds__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3; /* the photos differ slightly in shape; crop them to one so the titles line up */
  object-fit: cover;
  margin: 0 auto;
  box-shadow: 0 60px 60px -20px rgba(0, 0, 0, .1);
}
.home-grounds h3 { margin: 0 0 20px; font-family: var(--font-script); font-size: 34px; line-height: 1; }
.home-grounds p { margin: 0 0 1.6em; font-size: 13px; } /* Astra's .entry-content p margin */

/* ---------- badges ---------- */
.home-badges { position: relative; padding: 10px; background: var(--c-white); }
.home-badges__inner { display: flex; max-width: 1300px; margin: 0 auto; }
.home-badge { width: 20%; padding: 10px; }
.home-badge img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* ---------- "We are Passionate | Exclusive | Personal" ---------- */
.home-outro {
  position: relative;
  padding: 6.5% 0;
  background: url(/wp-content/uploads/2025/10/0X6A6925-1.jpg) no-repeat center center / cover;
  text-align: center;
}
.home-outro::before { content: ""; position: absolute; inset: 0; background: var(--c-black); opacity: .23; }
.home-outro__inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 90vh; }
.home-outro .home-kicker { color: var(--c-white); }
.home-outro h2 { margin: 0; color: var(--c-white); }

/* ---------- "Build your package" banner (production: the before-footer block, shown on / only) ---------- */
.home-package { position: relative; padding: 10px; }
.home-package__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 200px 0;
  background: url(/wp-content/uploads/2023/10/0X6A2963.jpg) no-repeat 0 0 / cover;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 120px;
}
.home-package h2 { margin: 0; font-size: 52px; line-height: 1em; color: var(--c-white); }
.home-package h2 a { color: inherit; }

@media (min-width: 1025px) {
  .home-feature, .home-outro { background-attachment: fixed; }
}

@media (max-width: 1024px) {
  .home-hero { height: 700px; }
  .home-intro { padding-left: 13%; padding-right: 13%; }
  .home-grounds__col { width: 50%; }
  .home-grounds__panel { padding: 0 13% 6.5%; }
  .home-outro__inner { min-height: 53vh; }
}

@media (max-width: 921px) {
  .home-hero { background: transparent; }
  .home-kicker, .home-grounds h3 { font-size: 23px; }
  .home-title { font-size: 70px; }
}

@media (max-width: 767px) {
  .home-hero { height: 600px; }
  .home-intro { padding-left: 6.5%; padding-right: 6.5%; }
  .home-intro .home-kicker { padding: 10% 0 2%; }
  .home-kicker, .home-intro h1, .home-title { margin-bottom: 10px; }
  .home-strip__inner { flex-wrap: wrap; }
  .home-strip__item { width: 100%; }
  .home-feature::before { opacity: .55; }
  .home-feature__inner { padding-right: 0; }
  .home-feature__text { font-size: 16px; }
  .home-feature .home-cta { justify-content: center; }
  .home-grounds { padding: 0; }
  .home-grounds__col { width: 100%; }
  .home-grounds__panel { padding: 6.5%; }
  .home-grounds__img { margin-bottom: 6.5%; }
  .home-grounds__img img { width: 75%; }
  .home-grounds h3 { font-size: 30px; }
  .home-badges__inner { flex-wrap: wrap; }
  .home-badge { width: 100%; }
  .home-badge img { width: 45%; }
  /* production's Elementor badge boxes were capped at 45% of the image's natural
     height (pinkbook 112.5px, SAW 220.5px) while the image itself rendered at 45% of the
     row width and overflowed; the next badge's top padding absorbs the overlap. Keep the
     same boxes (with their 10px padding, and the SAW image's 8px/31px margins) so the
     stack lands at the same y at every phone width. */
  .home-badge--pinkbook { height: 132.5px; }
  .home-badge--saw { max-height: 279.5px; }
  .home-badge--wedready { padding: 35px 0 0; }
  .home-badge--ourvenue { padding: 15px 0 0; }
  .home-badge--saw img { margin: 8px auto 31px; }
  .home-outro__inner { min-height: 27vh; }
  .home-outro .home-kicker { margin-bottom: 0; }
  .home-package__inner { padding: 100px 0; flex-direction: column; gap: 60px; }
}

@media (max-width: 544px) {
  .home-kicker { font-size: 20px; }
  .home-title { font-size: 40px; }
}

/* Long single words at small-laptop / landscape-tablet widths: keep the standard heading size wherever the
   word fits and scale it down only where it would otherwise break mid-word. Measured: DESTINATION needs
   6.93em in a 43.5vw column (broke 922-1039px at 65px); ORIGINALITY needs 6.76em in a 61vw column (broke
   1025-1110px at 100px). */
@media (min-width: 922px) { .home-feature__inner h2 { font-size: min(65px, 6.2vw); } }
@media (min-width: 1025px) { .home-intro--origin h1 { font-size: min(100px, 8.9vw); } }