/* ============================================================================
   LINCOLN HILLS  —  pages.css
   ----------------------------------------------------------------------------
   Page-specific overrides ONLY. Load LAST.
   Every rule here is scoped to a body[data-page="…"] attribute so page code
   never leaks between templates. Index:
     1.  Home            body[data-page="home"]
     2.  The Estate      body[data-page="estate"]
     3.  Location        body[data-page="location"]
     4.  Master Plan     body[data-page="master-plan"]
     5.  Residences      body[data-page="residences"]
     6.  Lifestyle hub   body[data-page="lifestyle"]
     7.  Lifestyle leaf  body[data-page="clubhouse"|"sport"|"nature"]
     8.  Hospitality     body[data-page="hospitality"]
     9.  Gallery         body[data-page="gallery"]
     10. Developer       body[data-page="developer"]
     11. Contact         body[data-page="contact"]
     12. Legal pages     body[data-page="legal"]
   ========================================================================== */


/* ============================================================================
   1. HOME
   ----------------------------------------------------------------------------
   Navigation-teaser mosaic + signature callouts.
   ========================================================================== */
body[data-page="home"] .home-teasers .card__media { aspect-ratio: 3 / 4; }

/* Signature callouts — four icon-free figures on navy. */
body[data-page="home"] .signatures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
body[data-page="home"] .signature__value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: #fff;
  line-height: 1.2;
}
body[data-page="home"] .signature__label {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: rgba(233, 226, 210, 0.7);
}
body[data-page="home"] .signature { border-top: 1px solid var(--line-dark); padding-top: 1.4rem; }

@media (max-width: 860px) {
  body[data-page="home"] .signatures { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  body[data-page="home"] .signatures { grid-template-columns: 1fr; }
}


/* ============================================================================
   2. THE ESTATE
   ========================================================================== */
body[data-page="estate"] .estate-vision p { font-size: var(--fs-body-lg); }


/* ============================================================================
   3. LOCATION
   ----------------------------------------------------------------------------
   Map figure + distances table side by side.
   ========================================================================== */
body[data-page="location"] .location-map {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
body[data-page="location"] .location-map img { border: 1px solid var(--line-light); }
body[data-page="location"] .location-nap { margin-top: 1.5rem; font-style: normal; line-height: 1.8; color: var(--text-on-dark); }
@media (max-width: 860px) {
  body[data-page="location"] .location-map { grid-template-columns: 1fr; }
}


/* ============================================================================
   4. MASTER PLAN
   ----------------------------------------------------------------------------
   Oversized plan render sits in a framed, tinted stage.
   ========================================================================== */
body[data-page="master-plan"] .plan-stage {
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--ivory);
  border: 1px solid var(--line-light);
}
body[data-page="master-plan"] .plan-stage img { width: 100%; }


/* ============================================================================
   5. RESIDENCES
   ----------------------------------------------------------------------------
   Format cards are taller and carry a spec list.
   ========================================================================== */
body[data-page="residences"] .format-card .card__media { aspect-ratio: 16 / 10; }
body[data-page="residences"] .format-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.25rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.9rem;
}
body[data-page="residences"] .format-card dt {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  color: var(--text-soft);
  padding-top: 0.15rem;
}
body[data-page="residences"] .format-card dd { color: var(--text); }


/* ============================================================================
   6. LIFESTYLE HUB
   ----------------------------------------------------------------------------
   Three large linked cards + an experiences marquee.
   ========================================================================== */
body[data-page="lifestyle"] .lifestyle-cards .card__media { aspect-ratio: 4 / 5; }
body[data-page="lifestyle"] .marquee {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
body[data-page="lifestyle"] .marquee span {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--line-dark);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(233, 226, 210, 0.8);
}


/* ============================================================================
   7. LIFESTYLE LEAF PAGES  (Clubhouse / Sport / Nature)
   ========================================================================== */
body[data-page="clubhouse"] .spaces-grid .tile,
body[data-page="sport"] .spaces-grid .tile,
body[data-page="nature"] .spaces-grid .tile { text-align: left; }


/* ============================================================================
   8. HOSPITALITY & SERVICES
   ========================================================================== */
body[data-page="hospitality"] .partners {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  padding-block: 2rem;
  border-block: 1px solid var(--line-light);
}
body[data-page="hospitality"] .partners span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--text-soft);
  letter-spacing: 0.04em;
}


/* ============================================================================
   9. GALLERY
   ========================================================================== */
body[data-page="gallery"] main { padding-top: var(--header-h); }
body[data-page="gallery"] .gallery-head { padding-block: clamp(3rem, 6vw, 5rem) 0; }
body[data-page="gallery"] .gallery-head h1 { font-size: var(--fs-h2); line-height: var(--lh-heading); }


/* ============================================================================
   10. DEVELOPER
   ========================================================================== */
body[data-page="developer"] .dev-intro { max-width: var(--container-narrow); }
body[data-page="developer"] .dev-values .stat__num { font-size: clamp(1.8rem, 3vw, 2.4rem); }


/* ============================================================================
   11. CONTACT
   ----------------------------------------------------------------------------
   Form + contact details in two columns.
   ========================================================================== */
body[data-page="contact"] .contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
body[data-page="contact"] .contact-details h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.75rem;
}
body[data-page="contact"] .contact-details > div { margin-bottom: 2rem; }
body[data-page="contact"] .contact-details address { font-style: normal; color: var(--text-soft); line-height: 1.8; }
@media (max-width: 860px) {
  body[data-page="contact"] .contact-grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   12. LEGAL PAGES  (Disclaimer / Privacy)
   ----------------------------------------------------------------------------
   Simple long-form document layout.
   ========================================================================== */
body[data-page="legal"] .pagehead {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-light);
}
body[data-page="legal"] .doc h2 { font-size: var(--fs-h3); margin-top: 2.75rem; }
body[data-page="legal"] .doc h2:first-child { margin-top: 0; }
body[data-page="legal"] .doc p,
body[data-page="legal"] .doc li { color: var(--text-soft); margin-top: 1rem; }
body[data-page="legal"] .doc ul { padding-left: 1.25rem; list-style: disc; }