/*
 * style.css — LUMIÈRE Essence Peak landing (lek2, "Essence Peak Landing" design).
 *
 * Ported from the design component's <style> block. Layout/visual values stay
 * inline on each element (1:1 with the design); this file adds what inline
 * styles cannot express: :hover / :focus states (the design's style-hover /
 * style-focus attributes), @keyframes, @media responsive rules, popup animation.
 * Palette: green var(--green-900), gold var(--gold) (hover var(--gold)), cream var(--cream).
 */

/* ---- Base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Reserve space for the fixed bottom sticky CTA bar so it never clips content. */
  padding-bottom: 76px;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Keyframes ----------------------------------------------------- */
@keyframes ep-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 24px rgba(243,236,227,.45); }
  50%      { transform: scale(1.03); box-shadow: 0 8px 32px rgba(243,236,227,.65); }
}
@keyframes ep-pop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ---- Interactive states (were style-hover / style-focus) ---------- */
.ep-nav-link    { transition: color .2s ease; }
.ep-nav-link:hover { color: var(--gold) !important; }

.ep-btn-gold    { transition: background .2s ease; }
.ep-btn-gold:hover { background: var(--gold) !important; }

.ep-btn-dark    { transition: background .2s ease, color .2s ease; }
.ep-btn-dark:hover { background: var(--gold) !important; color: var(--green-900) !important; }

.ep-input       { transition: border-color .2s ease; }
.ep-input:focus { border-color: var(--gold) !important; }

.ep-card        { transition: box-shadow .25s ease; }
.ep-card:hover  { box-shadow: 0 14px 32px rgba(33,54,49,.1); }

.ep-unit-card   { transition: box-shadow .25s ease, transform .25s ease; }
.ep-unit-card:hover { box-shadow: 0 16px 40px rgba(33,54,49,.12); }

.ep-amenity-fig img { transition: transform .6s ease; }
.ep-amenity-fig:hover img { transform: scale(1.07); }

.ep-sticky-link { transition: border-color .2s ease, color .2s ease; }
.ep-sticky-link:hover { border-color: var(--gold) !important; color: var(--gold) !important; }

/* ---- Sticky bar slides away while a lead form field is focused ----- */
#ep-sticky { transition: transform .25s ease; }
#ep-sticky.is-hidden { transform: translateY(100%); }

/* ---- Header call CTA: labeled "Gọi" replaces the number on mobile -- */
#ep-header-phone-short { display: none; }

/* ---- Exit-intent popup open state --------------------------------- */
.js-exit-popup.is-open { display: flex !important; }
.js-exit-popup.is-open .js-exit-popup-card { animation: ep-pop .35s ease both; }

/* ---- Responsive (mirrors the design breakpoints; !important beats the
        inline grid-template-columns on each grid element) ------------ */
@media (max-width: 900px) {
  #ep-nav { display: none !important; }
  #ep-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #ep-overview-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  #ep-policy-grid { grid-template-columns: 1fr !important; }
  #ep-plan-grid { grid-template-columns: 1fr !important; }
  #ep-units-grid { grid-template-columns: 1fr 1fr !important; }
  #ep-amenity-grid { grid-template-columns: 1fr !important; }
  #ep-amenity-list { grid-template-columns: 1fr 1fr !important; }
  #ep-tam-grid { grid-template-columns: 1fr !important; }
  #ep-loca-grid { grid-template-columns: 1fr 1fr !important; }
  #ep-commit-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #ep-trust { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  #ep-sticky-note { display: none !important; }
  #ep-header-cta { margin-left: auto !important; }
  /* The desktop 100deg gradient thins to .25 on the right; a full-width mobile
     column needs uniform darkening behind the value-prop text. */
  #ep-hero-overlay { background: rgba(20,30,26,.82) !important; }
}
@media (max-width: 560px) {
  #ep-sticky-bar { gap: 8px !important; padding: 8px 10px !important; justify-content: center !important; }
  #ep-sticky-bar a, #ep-sticky-bar button { font-size: 13px !important; padding: 9px 13px !important; }
  #ep-units-grid { grid-template-columns: 1fr !important; }
  #ep-amenity-list { grid-template-columns: 1fr !important; }
  #ep-facts-grid { grid-template-columns: 1fr !important; }
  #ep-loca-grid { grid-template-columns: 1fr !important; }
  #ep-commit-grid { grid-template-columns: 1fr 1fr !important; }
  #ep-header-phone-label { display: none !important; }
  #ep-header-phone-short { display: inline !important; }
  body { padding-bottom: 64px; }
}

/* ---- Accessibility: respect reduced-motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ep-btn-gold, .js-exit-popup-card { animation: none !important; }
}

/* ---- Brand fonts Masterise: SVN-Optima (tiêu đề) + SVN-Cera (body) -------- */
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-Regular.woff2') format('woff2'),url('../fonts/SVN-Optima-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-Medium.woff2') format('woff2'),url('../fonts/SVN-Optima-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-DemiBold.woff2') format('woff2'),url('../fonts/SVN-Optima-DemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-Bold.woff2') format('woff2'),url('../fonts/SVN-Optima-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-CeraLight.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-Cera.woff2') format('woff2'),url('../fonts/SVN-Cera.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-CeraMedium.woff2') format('woff2'),url('../fonts/SVN-CeraMedium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-CeraBold.woff2') format('woff2'),url('../fonts/SVN-CeraBold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
/* ---- Font chính Masterise: Neurial Grotesk (SVN-Cera = fallback tiếng Việt) - */
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Light.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Regular.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Medium.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Bold.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-ExtraBold.woff2') format('woff2'),url('../fonts/NeurialGrotesk-ExtraBold.woff') format('woff');font-weight:800;font-style:normal;font-display:swap;}
/* ---- Design tokens: palette Masterise LUMIERE (emerald + cream + sage) ---- */
:root{
  --green-900:#213631; --green-800:#2a413a; --green-700:#4c675b; --sage:#83aa97;
  --cream:#f3ece3; --mint:#e4eee7; --gold:#eca130;
  --text-body:#4a3f36; --text-muted:#6f675c; --border-light:#d9cfc0;
}