/* ══════════════════════════════════════════════════════════
   EP OFF-PLAN — REFINED DESIGN LAYER  (v1.0, Aug 2026)
   Loaded last (after widgets.css + ep-enhance.css) on
   single project pages. Goals:
     1. Smaller, calmer typography — nothing shouts anymore
     2. Generous, consistent breathing room between sections
     3. Force-reset headings so no theme/global style (serif
        fonts, border-left quote treatments, etc.) can bleed
        into plugin sections
     4. Softer shadows / thinner borders — minimalist finish
══════════════════════════════════════════════════════════ */

/* ── 1. SPACING & TYPE SCALE TOKENS ─────────────────────── */
:root {
  --ep-section-py: clamp(64px, 8vw, 112px) !important;
  --ep-section-px: clamp(20px, 5vw, 64px) !important;
  --ep-h1: clamp(30px, 3.6vw, 46px);
  --ep-h2: clamp(24px, 2.6vw, 32px);
  --ep-body: 15.5px;
}

/* ── 2. GLOBAL HEADING RESET ─────────────────────────────
   Applies to every section title in the plugin. Strips any
   inherited theme styling (serif fonts, quote borders, italics)
   so the design stays consistent no matter what the active
   theme's default H2/blockquote style looks like. ──────── */
.ep-hero-title,
.ep-section-title,
.ep-pcar-title,
.ep-dev-name,
.ep-form-title {
  font-family: var(--ep-font) !important;
  font-style: normal !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  quotes: none !important;
  text-shadow: none !important;
}
.ep-section-title::before,
.ep-section-title::after,
.ep-hero-title::before,
.ep-hero-title::after {
  content: none !important;
}
.ep-section-title span {
  /* keep the red accent-word gradient, just not a border */
  background: #E02E16;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 3. TYPOGRAPHY — SMALLER, CALMER ─────────────────────── */
.ep-section-title {
  font-size: var(--ep-h2) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 16px !important;
  max-width: 34ch;
}
.ep-section-body {
  font-size: var(--ep-body) !important;
  line-height: 1.75 !important;
  max-width: 58ch;
}
.ep-description-block p,
.ep-description-text p {
  font-size: var(--ep-body) !important;
  line-height: 1.75 !important;
  max-width: 58ch !important;
}
.ep-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 12px !important;
}

/* Hero title: the big culprit — was up to 104px, now capped */
.ep-hero-title {
  font-size: var(--ep-h1) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
  max-width: 20ch;
}
.ep-hero-sub {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  opacity: 0.85;
  margin: 0 0 28px !important;
}
.ep-hero-dev {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 12px !important;
}
.ep-hero-content {
  padding: 100px var(--ep-section-px) 64px !important;
  max-width: 1200px !important;
}
.ep-hstat-val {
  font-size: 16px !important;
}
.ep-hstat-key {
  font-size: 10px !important;
}

/* ── 4. SECTION RHYTHM — generous, consistent spacing ───── */
.ep-description-block,
.ep-description-split,
.ep-gallery-section,
.ep-amenities-wrap,
.ep-floorplans,
.ep-payment-wrap,
.ep-location-wrap,
.ep-dev-band,
.ep-enquiry-wrap {
  padding-top: var(--ep-section-py) !important;
  padding-bottom: var(--ep-section-py) !important;
}

/* Clear hairline between every section — makes the page feel
   deliberately structured instead of an unbroken wall of content */
.ep-highlights-strip,
.ep-description-block,
.ep-description-split,
.ep-gallery-section,
.ep-amenities-wrap,
.ep-floorplans,
.ep-payment-wrap,
.ep-location-wrap,
.ep-dev-band,
.ep-enquiry-wrap {
  border-top: 1px solid rgba(0,0,0,.05) !important;
}
.ep-payment-wrap,
.ep-highlights-strip {
  border-top-color: rgba(255,255,255,.06) !important;
}

/* ── 5. MINIMALISM — remove busy dot-pattern texture ────── */
.ep-description-split::before,
.ep-description-block::before,
.ep-gallery-section::before,
.ep-floorplans::before,
.ep-location-wrap::before {
  display: none !important;
}

/* ── 6. DESCRIPTION SPLIT — cleaner balance ─────────────── */
.ep-description-grid {
  gap: 72px !important;
  align-items: center !important;
}
.ep-description-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ep-description-media img {
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}
.ep-desc-stats {
  border-radius: 12px !important;
  margin-top: 28px !important;
}
.ep-desc-stat {
  padding: 16px 18px !important;
}
.ep-desc-stat-value {
  font-size: 17px !important;
}
@media (max-width: 900px) {
  .ep-description-grid { gap: 32px !important; }
}

/* ── 7. HIGHLIGHTS STRIP — tighter, calmer ──────────────── */
.ep-hl-item { padding: 20px 24px !important; }
.ep-hl-icon { width: 40px !important; height: 40px !important; }
.ep-hl-val  { font-size: 14.5px !important; }
.ep-hl-key  { font-size: 10px !important; }

/* ── 8. SOFTER SURFACES — minimalist shadow/border scale ── */
.ep-gallery-carousel,
.ep-location-map,
.ep-roi-card,
.ep-enquiry-form-card {
  box-shadow: 0 12px 32px rgba(0,0,0,.08) !important;
}
.ep-fp-panel,
.ep-amenity-panel.active .ep-amenity-img-wrap {
  box-shadow: none !important;
}

/* ── 9. BUTTONS — slightly more compact, refined ────────── */
.ep-btn {
  padding: 13px 26px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

/* ── 10. GALLERY / AMENITIES / FLOORPLANS headers ───────── */
.ep-gallery-header,
.ep-payment-header {
  margin-bottom: 32px !important;
}

/* ── 11. DEVELOPER BAND & ENQUIRY — align with new scale ── */
.ep-dev-name { font-size: 22px !important; }
.ep-form-title { font-size: 19px !important; }

/* ── 12. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --ep-h1: clamp(26px, 7vw, 34px);
    --ep-h2: clamp(20px, 5.5vw, 26px);
  }
  .ep-hero-content { padding: 80px 20px 48px !important; }
  .ep-hl-item { padding: 16px !important; }
}