/* ============================================================================
   MAISON WIMPEL CORPORATE RESIDENCE — Design System  (mwcr.css)
   ----------------------------------------------------------------------------
   The single shared presentation layer for the redesigned public theme.
   - Namespaced `.mwx-*` so it never collides with the legacy public/css/app.css
     (generic .btn/.section/.eyebrow) during the page-by-page migration.
   - Colour/typography are DERIVED from the brand tokens emitted by
     theme-vars.blade.php (--walnut / --cocoa / --sand / --cream / --gold /
     --heading-font / --body-font). We re-map them into an isolated --mwx-*
     scale with safe fallbacks, so this file stays consistent regardless of the
     legacy :root conflicts. No hardcoded brand colours, no gradients in the
     primary palette, gold used sparingly, never pure black (brand rules).
   ============================================================================ */

:root {
  /* ---- Brand tokens (re-mapped from the theme token pipeline) ---- */
  --mwx-walnut : var(--walnut, #3A2C21);   /* primary  */
  --mwx-cocoa  : var(--cocoa,  #2B1F17);   /* darkest  */
  --mwx-sand   : var(--sand,   #D8CCB5);   /* secondary */
  --mwx-cream  : var(--cream,  #FAF7F2);   /* warm white */
  --mwx-gold   : var(--gold,   #A8956B);   /* accent — used sparingly */

  /* ---- Derived neutrals (warm, token-based; never pure black) ---- */
  --mwx-ink    : color-mix(in srgb, var(--mwx-cocoa) 92%, #000);   /* deep ink text */
  --mwx-text   : color-mix(in srgb, var(--mwx-cocoa) 78%, var(--mwx-cream));
  --mwx-muted  : color-mix(in srgb, var(--mwx-cocoa) 52%, var(--mwx-cream));
  --mwx-faint  : color-mix(in srgb, var(--mwx-cocoa) 34%, var(--mwx-cream));

  /* Warm taupe + hairlines derived from walnut so borders stay on-palette */
  --mwx-line       : color-mix(in srgb, var(--mwx-walnut) 16%, transparent);
  --mwx-line-strong: color-mix(in srgb, var(--mwx-walnut) 30%, transparent);
  --mwx-line-light : color-mix(in srgb, var(--mwx-cream) 78%, var(--mwx-walnut));

  /* Surfaces */
  --mwx-bg      : var(--mwx-cream);
  --mwx-surface : #ffffff;
  --mwx-surface-2: color-mix(in srgb, var(--mwx-cream) 80%, var(--mwx-sand));

  /* On-dark tones (for cocoa/walnut sections) */
  --mwx-on-dark        : #f4ece0;
  --mwx-on-dark-muted  : color-mix(in srgb, #f4ece0 62%, transparent);
  --mwx-on-dark-line   : color-mix(in srgb, var(--mwx-gold) 26%, transparent);
  --mwx-gold-soft      : color-mix(in srgb, var(--mwx-gold) 78%, var(--mwx-cream));

  /* ---- Typography ---- */
  --mwx-serif : var(--heading-font, 'Source Serif 4', Georgia, serif);
  --mwx-sans  : var(--body-font, 'Jost', system-ui, sans-serif);

  /* Fluid type scale (heading serif never below 18px per brand) */
  --mwx-fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);
  --mwx-fs-h1     : clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --mwx-fs-h2     : clamp(1.7rem, 1.3rem + 1.9vw, 2.7rem);
  --mwx-fs-h3     : clamp(1.15rem, 1.02rem + .6vw, 1.4rem);
  --mwx-fs-lead   : clamp(1.05rem, 1rem + .5vw, 1.28rem);
  --mwx-fs-body   : 1rem;
  --mwx-fs-small  : .82rem;
  --mwx-fs-eyebrow: .7rem;

  /* ---- Spacing / rhythm ---- */
  --mwx-maxw   : 1280px;
  --mwx-gutter : clamp(20px, 4vw, 48px);
  --mwx-section: clamp(72px, 9vw, 140px);
  --mwx-ease   : cubic-bezier(.16, .72, .3, 1);
}

/* ============================================================================
   BASE PRIMITIVES
   ============================================================================ */
.mwx-container { width: 100%; max-width: var(--mwx-maxw); margin-inline: auto; padding-inline: var(--mwx-gutter); }
.mwx-container--narrow { max-width: 860px; }
.mwx-container--wide { max-width: 1440px; }

.mwx-section { padding-block: var(--mwx-section); background: var(--mwx-bg); }
.mwx-section--surface { background: var(--mwx-surface); }
.mwx-section--sand    { background: var(--mwx-surface-2); }
.mwx-section--walnut  { background: var(--mwx-walnut); }
.mwx-section--cocoa   { background: var(--mwx-cocoa); }
.mwx-section--walnut, .mwx-section--cocoa { color: var(--mwx-on-dark); }

/* ---- Eyebrow (label) ---- */
.mwx-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mwx-sans); font-size: var(--mwx-fs-eyebrow); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--mwx-gold);
}
.mwx-eyebrow--rule::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .6; }
.mwx-section--walnut .mwx-eyebrow, .mwx-section--cocoa .mwx-eyebrow { color: var(--mwx-gold-soft); }

/* ---- Headings ---- */
.mwx-display, .mwx-h1, .mwx-h2 { font-family: var(--mwx-serif); font-weight: 400; color: var(--mwx-ink); letter-spacing: .01em; line-height: 1.08; }
.mwx-display { font-size: var(--mwx-fs-display); line-height: 1.03; }
.mwx-h1 { font-size: var(--mwx-fs-h1); }
.mwx-h2 { font-size: var(--mwx-fs-h2); line-height: 1.14; }
.mwx-h3 { font-family: var(--mwx-sans); font-weight: 600; font-size: var(--mwx-fs-h3); color: var(--mwx-ink); letter-spacing: .01em; line-height: 1.35; }
/* Headings are one weight, one colour: no italic and no gold accent word inside a heading.
   Safety net for any <em> that is still left in a heading (page-level rules included). */
:is(h1, h2, h3, h4, .mwx-display, .mwx-h1, .mwx-h2) em { font-style: normal !important; color: inherit !important; }
.mwx-section--walnut :is(.mwx-display,.mwx-h1,.mwx-h2,.mwx-h3),
.mwx-section--cocoa  :is(.mwx-display,.mwx-h1,.mwx-h2,.mwx-h3) { color: var(--mwx-on-dark); }

/* ---- Body copy ---- */
.mwx-lead { font-family: var(--mwx-sans); font-size: var(--mwx-fs-lead); line-height: 1.7; color: var(--mwx-text); font-weight: 300; }
.mwx-body { font-family: var(--mwx-sans); font-size: var(--mwx-fs-body); line-height: 1.72; color: var(--mwx-muted); }
.mwx-body p + p { margin-top: 1.1em; }
.mwx-small { font-family: var(--mwx-sans); font-size: var(--mwx-fs-small); line-height: 1.6; color: var(--mwx-faint); }
.mwx-section--walnut :is(.mwx-lead,.mwx-body), .mwx-section--cocoa :is(.mwx-lead,.mwx-body) { color: var(--mwx-on-dark-muted); }

/* ---- Hairline / ornament ---- */
.mwx-hairline { width: 48px; height: 1px; background: var(--mwx-gold); opacity: .8; border: 0; margin: 0; }
.mwx-hairline--center { margin-inline: auto; }
.mwx-rule { width: 100%; height: 1px; background: var(--mwx-line); border: 0; }

/* ---- Section heading block ---- */
.mwx-shead { max-width: 660px; display: flex; flex-direction: column; gap: 18px; }
.mwx-shead--center { margin-inline: auto; text-align: center; align-items: center; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.mwx-btn {
  --_bg: var(--mwx-walnut); --_fg: var(--mwx-cream); --_bd: var(--mwx-walnut);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mwx-sans); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: 15px 30px; border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  cursor: pointer; transition: background .3s var(--mwx-ease), color .3s var(--mwx-ease),
    border-color .3s var(--mwx-ease), transform .3s var(--mwx-ease); white-space: nowrap;
}
.mwx-btn:hover { transform: translateY(-2px); }
.mwx-btn--primary:hover { --_bg: var(--mwx-cocoa); --_bd: var(--mwx-cocoa); }
.mwx-btn--gold   { --_bg: var(--mwx-gold); --_fg: var(--mwx-cocoa); --_bd: var(--mwx-gold); }
.mwx-btn--gold:hover { --_bg: color-mix(in srgb, var(--mwx-gold) 86%, var(--mwx-cream)); --_bd: var(--mwx-gold); }
.mwx-btn--outline { --_bg: transparent; --_fg: var(--mwx-walnut); --_bd: var(--mwx-walnut); }
.mwx-btn--outline:hover { --_bg: var(--mwx-walnut); --_fg: var(--mwx-cream); }
.mwx-btn--ghost { --_bg: transparent; --_fg: var(--mwx-on-dark); --_bd: var(--mwx-on-dark-line); }
.mwx-btn--ghost:hover { --_bd: var(--mwx-gold-soft); --_fg: #fff; }
.mwx-btn--sm { padding: 11px 22px; font-size: .68rem; }

/* Text link with arrow */
.mwx-tlink {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mwx-sans);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mwx-walnut);
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--mwx-gold);
  transition: gap .3s var(--mwx-ease), color .25s;
}
.mwx-tlink:hover { gap: 15px; }
.mwx-tlink svg { width: 15px; height: 15px; }
.mwx-section--walnut .mwx-tlink, .mwx-section--cocoa .mwx-tlink { color: var(--mwx-on-dark); }

/* ============================================================================
   CARD / SPLIT / STAT / FIGURE
   ============================================================================ */
.mwx-card {
  display: flex; flex-direction: column; background: var(--mwx-surface);
  border: 1px solid var(--mwx-line); transition: border-color .3s, box-shadow .4s var(--mwx-ease);
}
.mwx-card:hover { border-color: var(--mwx-line-strong); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--mwx-cocoa) 60%, transparent); }
.mwx-card__body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; }

/* CLS-safe image: reserves space via aspect-ratio + warm placeholder bg */
.mwx-img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--mwx-surface-2); }

.mwx-figure { position: relative; overflow: hidden; margin: 0; background: var(--mwx-surface-2); }
.mwx-figure > .mwx-img, .mwx-figure > img { width: 100%; height: 100%; }
.mwx-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mwx-figure__cap {
  position: absolute; left: 0; bottom: 0; background: var(--mwx-cocoa); color: var(--mwx-gold-soft);
  font-family: var(--mwx-sans); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; padding: 9px 16px;
}

.mwx-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 84px); align-items: center; }
.mwx-split--reverse .mwx-split__media { order: -1; }
@media (max-width: 860px) { .mwx-split { grid-template-columns: 1fr; } .mwx-split--reverse .mwx-split__media { order: 0; } }

.mwx-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }
.mwx-stat { display: flex; flex-direction: column; gap: 6px; }
.mwx-stat__num { font-family: var(--mwx-serif); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); line-height: 1; color: var(--mwx-walnut); }
.mwx-stat__label { font-family: var(--mwx-sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mwx-muted); }
.mwx-section--walnut .mwx-stat__num, .mwx-section--cocoa .mwx-stat__num { color: var(--mwx-gold); }
.mwx-section--walnut .mwx-stat__label, .mwx-section--cocoa .mwx-stat__label { color: var(--mwx-on-dark-muted); }

/* ============================================================================
   MOTION SAFETY (base — full engine arrives in checkpoint 0.2)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mwx-btn, .mwx-tlink, .mwx-card { transition: none; }
  .mwx-btn:hover, .mwx-card:hover { transform: none; }
}

/* ============================================================================
   MARKETING CHROME (used with the shared GSAP engine on marketing pages)
   ============================================================================ */
.mwx-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--mwx-gold); z-index: 2000; will-change: transform; }
.mwx-split__media { overflow: hidden; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

.mwx-stickycta {
  position: fixed; left: 24px; bottom: 64px; z-index: 790;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 20px 13px 18px; background: var(--mwx-cocoa); color: var(--mwx-on-dark);
  border: 1px solid var(--mwx-on-dark-line); text-decoration: none;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--mwx-cocoa) 55%, transparent);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .4s ease, transform .4s var(--mwx-ease), border-color .25s;
}
.mwx-stickycta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mwx-stickycta:hover { border-color: var(--mwx-gold); transform: translateY(-2px); }
.mwx-stickycta__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mwx-gold); flex-shrink: 0; }
.mwx-stickycta__txt { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--mwx-sans); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.mwx-stickycta__txt small { font-size: .56rem; letter-spacing: .12em; color: var(--mwx-gold); margin-bottom: 3px; }
.mwx-stickycta svg { color: var(--mwx-gold); flex-shrink: 0; transition: transform .25s; }
.mwx-stickycta:hover svg { transform: translateX(4px); }
@media (max-width: 900px){ .mwx-stickycta { display: none; } }
@media (prefers-reduced-motion: reduce){ .mwx-progress { display: none; } }

/* ============================================================================
   SIGNATURE CURSOR (accent layer — native cursor remains for accessibility)
   ============================================================================ */
.mwx-cur-dot, .mwx-cur-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999;
  border-radius: 50%; opacity: 0; transition: opacity .3s ease;
}
.mwx-cur-on .mwx-cur-dot, .mwx-cur-on .mwx-cur-ring { opacity: 1; }
.mwx-cur-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--mwx-gold); }
.mwx-cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in srgb, var(--mwx-gold) 55%, transparent);
  transition: opacity .3s ease, width .25s var(--mwx-ease), height .25s var(--mwx-ease), margin .25s var(--mwx-ease), border-color .25s;
}
.mwx-cur-hot .mwx-cur-ring {
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-color: color-mix(in srgb, var(--mwx-gold) 85%, transparent);
}
@media (hover: none), (pointer: coarse) { .mwx-cur-dot, .mwx-cur-ring { display: none; } }

/* ---- Horizontal sticky reel ---- */
[data-hreel] { overflow: hidden; }
[data-hreel-track] { display: flex; align-items: stretch; gap: clamp(20px, 2.4vw, 32px); will-change: transform; }
[data-hreel-track] > * { flex: 0 0 auto; }
@media (max-width: 899px) {
  [data-hreel-track] {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 14px;
    scrollbar-width: thin; scrollbar-color: var(--mwx-line-strong) transparent;
  }
  [data-hreel-track] > * { scroll-snap-align: start; flex: 0 0 min(82vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-hreel-track] { overflow-x: auto; }
}