/*
 * style.css — LUMIÈRE Essence Peak landing page.
 *
 * The source Design component encoded everything inline plus custom
 * `style-hover` / `style-focus` attributes and a small <style> block.
 * Browsers don't understand those attributes, so the interactive states,
 * keyframes and responsive rules live here. Layout/visual values stay inline
 * on each element (1:1 with the design); this file only adds what inline
 * styles cannot express: :hover, :focus, @keyframes, @media, popup animation.
 */

/* ---- Base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F6F2E9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Keyframes ----------------------------------------------------- */
@keyframes ep2-pulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 6px 22px rgba(200,164,93,.4); }
  50%      { transform: scale(1.025); box-shadow: 0 8px 30px rgba(200,164,93,.6); }
}
@keyframes ep2-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: #C8A45D !important; }

.ep-cta-gold,
.ep-btn-gold   { transition: background .2s ease; }
.ep-cta-gold:hover,
.ep-btn-gold:hover { background: #D8B76F !important; }

.ep-btn-dark   { transition: background .2s ease, color .2s ease; }
.ep-btn-dark:hover { background: #C8A45D !important; color: #14342A !important; }

.ep-input      { transition: border-color .2s ease; }
.ep-input:focus { border-color: #C8A45D !important; }

.ep-unit-card  { transition: box-shadow .25s ease, transform .25s ease; }
.ep-unit-card:hover { box-shadow: 0 18px 44px rgba(20,52,42,.12); }

.ep-sticky-link { transition: border-color .2s ease, color .2s ease; }
.ep-sticky-link:hover { border-color: #C8A45D !important; color: #C8A45D !important; }

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

/* ---- Responsive (mirrors the source design breakpoints) ----------- */
@media (max-width: 940px) {
  #v2-nav { display: none !important; }
  #v2-hero { grid-template-columns: 1fr !important; gap: 40px !important; }
  #v2-hero-img-col { order: -1 !important; }
  #v2-overview { grid-template-columns: 1fr !important; gap: 36px !important; }
  #v2-tam { grid-template-columns: 1fr !important; }
  /* Location: stack image over the connections list; the list itself keeps
     its own 2→1 column behaviour via #v2-loca below. */
  #v2-loca-wrap { grid-template-columns: 1fr !important; gap: 28px !important; }
  #v2-loca { grid-template-columns: 1fr 1fr !important; }
  /* location.jpg is a text-bearing infographic: once full-width, show it whole
     (natural aspect) instead of cover-cropping the transit info off the edges. */
  #v2-loca-wrap > img { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #v2-policy { grid-template-columns: 1fr !important; }
  #v2-units { grid-template-columns: 1fr 1fr !important; }
  #v2-plans { grid-template-columns: 1fr !important; }
  #v2-commit { grid-template-columns: repeat(3, 1fr) !important; }
  #v2-ribbon { flex-direction: column !important; gap: 10px !important; text-align: center !important; }
}
@media (max-width: 560px) {
  #v2-units { grid-template-columns: 1fr !important; }
  #v2-facts { grid-template-columns: 1fr !important; }
  #v2-loca { grid-template-columns: 1fr !important; }
  #v2-commit { grid-template-columns: 1fr 1fr !important; }
  #v2-phone-label { display: none !important; }
  #v2-sticky-note { display: none !important; }
  #v2-sticky { gap: 8px !important; padding: 8px 10px !important; }
  #v2-sticky a, #v2-sticky button { font-size: 13px !important; padding: 9px 13px !important; }
}

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