Buck Creek Communities — property.css
   Shared by every individual community page (Windmill, Tye, Buck Creek,
   Patriot, Big Spring, Fort Stockton). Loaded after site.css.

   To add a new property page: copy windmill.html, swap the copy, and set
   --hero-image plus the two photo variables at the top of the page's inline
   <style> block. No CSS changes needed here.
   ========================================================================== */

/* Per-property photography -------------------------------------------------
   Every image path lives in a stylesheet, never in page HTML: relative URLs
   inside a custom property resolve against the stylesheet that consumes them,
   so a path written in the page's own <style> block would break.

   To add a community: copy this block, rename to --<community>, point it at
   that park's photos, and put the matching classes on the page.
   -------------------------------------------------------------------------- */
.hero--windmill { --hero-image: var(--bc-park-aerial-900); }
@media (min-width: 701px) {
  .hero--windmill { --hero-image: var(--bc-park-aerial); }
}
.final-cta--windmill { --hero-image: var(--bc-park-aerial); }
.card-visual--windmill-standard { --card-image: var(--bc-park-aerial); }

/* Tye RV Park */
.hero--tye     { --hero-image: var(--bc-tye-office); }
.final-cta--tye { --hero-image: var(--bc-tye-pond); }
.card-visual--tye-standard { --card-image: var(--bc-tye-sites); }

/* Buck Creek + Patriot (shared page) */
.hero--buckcreek      { --hero-image: var(--bc-bc-aerial); }
.final-cta--buckcreek { --hero-image: var(--bc-bc-aerial); }
.card-visual--bc-standard      { --card-image: var(--bc-bc-sites); }
.card-visual--patriot-standard { --card-image: var(--bc-patriot-site); }

/* Intro + facts ----------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}
.split .copy p { margin-top: 22px; max-width: 620px; color: var(--muted); font-size: 18px; }

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: 24px;
  background: var(--cream);
  border-radius: 16px;
}
.fact strong { font-family: var(--font-display); font-size: 34px; color: var(--navy); }
.fact span {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Site types + pricing ---------------------------------------------------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 26px;
  margin-bottom: 42px;
}
.section-head p { max-width: 540px; color: var(--on-dark-mut); font-size: 17px; }

.site-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.site-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.site-card img { height: 340px; width: 100%; object-fit: cover; }

/* Photo-as-background variant, for when the crop matters more than the
   intrinsic aspect ratio. Set --card-image on the element. */
.site-card .card-visual {
  position: relative;
  height: 340px;
  background: var(--card-image) center 62% / cover;
}
.site-card .card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(16, 43, 66, .45));
}

.card-body { padding: 30px; }
.card-body p { margin: 14px 0 24px; color: var(--muted); }
.price {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rust);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.chip {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
}

.feature-band {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  margin-top: 36px;
}
.feature-panel {
  padding: 28px;
  background: var(--white);
  color: var(--ink);
  border-radius: 18px;
}
.feature-panel p { margin-top: 10px; color: var(--muted); }
.feature-panel ul { margin: 16px 0 0 18px; color: var(--muted); list-style: disc; }
.feature-panel li { margin-bottom: 6px; }
.feature-panel .btn { margin-top: 18px; }

/* Amenities --------------------------------------------------------------- */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 42px;
}
.amenity {
  padding: 24px;
  min-height: 176px;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: 16px;
}
.amenity .icon-tile { --icon-bg: #eef2f3; box-shadow: none; }
.amenity p { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* Location ---------------------------------------------------------------- */
/* One full-width navy band. The copy stays measured; the contact points
   spread across the whole width underneath it. */
.location-wrap {
  display: grid;
  background: var(--navy);
  color: var(--on-dark);
  border-radius: 24px;
  overflow: hidden;
}
.location-copy {
  display: flex;
  flex-direction: column;
  padding: 64px;
}
.location-copy .eyebrow,
.location-copy .section-title,
.location-copy p { max-width: 68ch; }
.location-copy p { margin: 20px 0 28px; color: var(--on-dark-mut); font-size: 17px; }
.location-copy .btn { align-self: flex-start; margin-top: 22px; }

.contact-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.point {
  padding: 14px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-sm);
}
.point strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-soft);
}

/* Gallery ----------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-template-rows: 230px 230px;
  grid-auto-rows: 230px;
  gap: 14px;
  margin-top: 42px;
}
.gallery-grid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.gallery-grid .tall { grid-row: 1 / span 2; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .split,
  .feature-band { grid-template-columns: 1fr; }
  .location-copy { padding: 46px 30px; }
  .site-card-grid { grid-template-columns: 1fr; }
  .amenity-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery-grid .tall { grid-row: auto; }
  .gallery-grid img { height: 260px; }
}

@media (max-width: 660px) {
  .split { gap: 40px; }
  .facts,
  .amenity-grid,
  .contact-points { grid-template-columns: 1fr 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .location-copy { padding: 44px 26px; }
  .gallery-grid { grid-template-columns: 1fr; }
}