/* ==========================================================================
   Pasture Edge — floor plan pages
   Loaded after wh-pe-brand.css on the 16 PE plan pages, scoped `body.peb`.

   wh-pe-brand.css already carries the palette, display voice and the inquire
   pill. This file only handles what is specific to a plan page: the hero, the
   floor-area strip, the layer switcher and the features panels.

   Two things it must not break:

   1. `wh-home-hero.css` is shared by all 16 of these pages. Nothing here edits
      it — every rule is an override under `body.peb`.
   2. The layer switcher (#planNav / #planImages) is jQuery inside the
      siteground combined bundle, which toggles `.planItem` visibility. This
      file never sets `display` on `.planItem` — only on its wrapper and the
      image inside it — or the switcher silently stops working.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Page surface                                                               */
/* -------------------------------------------------------------------------- */
/* Plan pages are elementor-page-553, not the community page's -269, so the
   brand layer's stack rule doesn't reach them. */
body.peb .elementor-553,
body.peb > .elementor {
  background-color: var(--peb-stone) !important;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
body.peb .wh-home-hero {
  background: var(--peb-stone);
}

/* Matted exterior render, matching the collection cards on the community
   page. Border rather than padding — the carousel slides are absolute. */
body.peb .wh-home-hero__carousel {
  border: clamp(12px, 1.4vw, 22px) solid var(--peb-paper);
  background: var(--peb-paper);
  box-shadow: 0 18px 40px -22px rgba(35, 35, 30, 0.42);
  border-radius: 0;
}

body.peb .wh-home-hero__panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: clamp(0px, 1.5vw, 28px);
}

body.peb .wh-home-hero__eyebrow {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--peb-olive);
}

body.peb .wh-home-hero__title {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.08;
  color: var(--peb-ink);
}

/* Specs become chips, the way Canvas Hill lists them under the plan name. */
body.peb .wh-home-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
}
body.peb .wh-home-hero__spec {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid var(--border-hairline);
  background: transparent;
  padding: 9px 15px;
  border-radius: 999px;
}
body.peb .wh-home-hero__spec-value {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--peb-ink);
}
body.peb .wh-home-hero__spec-label {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peb-ink-soft);
}

/* `.wh-home-hero__btn` is a <button> for compare — Elementor's global button
   reset repaints it gold unless the selector carries enough weight. */
body.peb .wh-home-hero__ctas .wh-home-hero__btn--primary {
  background: var(--peb-olive) !important;
  border: 1px solid var(--peb-olive) !important;
  color: #F4F2EC !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 0.72rem !important;
}
body.peb .wh-home-hero__ctas .wh-home-hero__btn--secondary {
  background: transparent !important;
  border: 1px solid var(--peb-ink) !important;
  color: var(--peb-ink) !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 0.72rem !important;
}
body.peb .wh-home-hero__pdf {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peb-olive);
}

/* -------------------------------------------------------------------------- */
/* Floor-area strip                                                           */
/* -------------------------------------------------------------------------- */
body.peb .fp-model__areas {
  background: transparent;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
body.peb .fp-model__area { background: transparent; border: 0; }
body.peb .fp-model__area-label {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peb-ink-soft);
}
body.peb .fp-model__area-value {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  color: var(--peb-ink);
}
body.peb .fp-model__area-value span {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peb-ink-soft);
}

/* -------------------------------------------------------------------------- */
/* Layer switcher — rail above one large plan                                 */
/* -------------------------------------------------------------------------- */
/* Canvas Hill stacks the layer buttons in a rail above a single large
   drawing. Here they're two Elementor columns side by side, so stack the row
   first. `:has()` rather than element ids: it reads as what it targets, and
   works unchanged across all 16 pages. */
body.peb .elementor-container:has(#planNav),
body.peb .elementor-container:has(#planImages) {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
body.peb .elementor-column:has(#planNav),
body.peb .elementor-column:has(#planImages) {
  width: 100% !important;
  max-width: 100% !important;
}

body.peb #planNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
body.peb #planNav .planNavItem { margin: 0; list-style: none; }
body.peb #planNav .planNavItem a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 22px;
  border: 1px solid var(--border-hairline);
  background: transparent;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peb-ink);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
body.peb #planNav .planNavItem a span {
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--peb-ink-soft);
}
/* The bundle marks the chosen layer with .activeLink. */
body.peb #planNav .planNavItem a.activeLink,
body.peb #planNav .planNavItem a.active {
  background: var(--peb-olive);
  border-color: var(--peb-olive);
  color: #F4F2EC;
}
body.peb #planNav .planNavItem a.activeLink span,
body.peb #planNav .planNavItem a.active span {
  color: rgba(244, 242, 236, 0.8);
}
@media (hover: hover) and (pointer: fine) {
  body.peb #planNav .planNavItem a:hover { border-color: var(--peb-ink); }
}
/* A single-layer plan (the Monterey) shouldn't show a one-button rail. */
body.peb #planNav .planNavItem:only-child { display: none; }

/* The list is the mat; the drawing sits inside it. `.planItem` keeps whatever
   `display` the bundle sets — that toggle is the switcher. */
body.peb #planImages {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2.25rem) auto 0;
  padding: clamp(16px, 2.5vw, 40px);
  max-width: min(1100px, 100%);
  background: var(--peb-paper);
  box-shadow: 0 18px 40px -22px rgba(35, 35, 30, 0.42);
}
body.peb #planImages .planItem { margin: 0; list-style: none; }
body.peb #planImages .planItem img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Features panels + closing band                                             */
/* -------------------------------------------------------------------------- */
body.peb .fp-model__features { background: var(--peb-stone); }
body.peb .fp-model__feature,
body.peb .fp-model__feature-card {
  background: var(--peb-stone-soft);
  border: 1px solid var(--border-hairline);
  border-radius: 0;
}
body.peb .fp-model__feature h3,
body.peb .fp-model__feature-title {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  text-transform: none;
  letter-spacing: var(--tracking-display, -0.01em);
  color: var(--peb-ink);
}

body.peb .fp-model__ask,
body.peb .fp-model__cta {
  background: var(--peb-olive-deep);
}

/* Anchor offsets: the header is fixed on these pages too. */
body.peb #plans,
body.peb #features,
body.peb #ask {
  scroll-margin-top: calc(var(--whd-logo-h, 56px) + var(--whd-header-py, 10px) * 2 + 20px);
}

@media (max-width: 900px) {
  body.peb .wh-home-hero__panel { padding-left: 0; }
  body.peb #planNav { justify-content: flex-start; }
  body.peb #planImages { padding: 12px; }
}