/* ==========================================================================
 * luxury.css - Cmsmart luxury visual layer (WS13, CHG-20261004-WS13-01)
 * Spec: docs/seo-aio-program/34-SPEC-luxury-visual-system-20261004.md
 * Loaded site-wide AFTER tokens.css / template|custom.css / ui-refresh.css / ui-cards.css.
 *
 * Two layers:
 *   A. Global refinements - safe on every page (typography balance, button polish,
 *      focus, hover elevation on existing linked image cards). Never changes layout.
 *   B. Opt-in system classes (.lx-*) - section rhythm, section header, image-led card,
 *      media frame, split layout, reveal-on-scroll. Pages adopt them in markup.
 * Tokens only (tokens.css "LUXURY VISUAL SYSTEM"). Motion respects reduced-motion.
 * ========================================================================== */

/* ---------- A1. Typography: balanced headings, readable ledes ---------- */
h1, h2, h3,
.mg-title, .section-title {
  text-wrap: balance;
}
p, li, .mg-sub-title, .section-des {
  text-wrap: pretty;
}

/* ---------- A2. Buttons: depth on the primary action, crisp focus ---------- */
/* Some lanes restyle .cm-btn--primary as an outline button, so the warm glow is only
 * shown on hover site-wide; .lx-btn--primary / the home hero CTA keep it at rest. */
.cm-btn--primary,
.cms-btn--primary {
  transition: background-color var(--lx-dur-hover) var(--lx-ease),
              box-shadow var(--lx-dur-hover) var(--lx-ease),
              transform var(--lx-dur-hover) var(--lx-ease);
}
.cm-btn--primary:hover,
.cms-btn--primary:hover {
  box-shadow: var(--shadow-lx-1);
}
.lx-btn--primary,
.lx-hero .cms-btn--primary {
  box-shadow: var(--shadow-lx-cta);
}
.cm-btn:focus-visible,
.cms-btn:focus-visible,
.lx-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- A3. Hover elevation on existing linked image cards (shadow only, no layout) ---------- */
a.cm-hub__card, a.cm-hub__mcard, a.cm-hub__subcard, a.cm-linkcard,
.project-card, .service-card,
.home-solutions__card, .community-card {
  transition: box-shadow var(--lx-dur-hover) var(--lx-ease),
              transform var(--lx-dur-hover) var(--lx-ease);
}
a.cm-hub__card:hover, a.cm-hub__mcard:hover, a.cm-hub__subcard:hover, a.cm-linkcard:hover,
.project-card:hover, .service-card:hover,
.home-solutions__card:hover, .community-card:hover {
  box-shadow: var(--shadow-lx-2);
}

/* ==========================================================================
 * B. Opt-in system classes
 * ========================================================================== */

/* ---------- B1. Section rhythm ---------- */
.lx-section {
  padding-block: var(--lx-section-y);
}
.lx-section--tight {
  padding-block: var(--lx-section-y-tight);
}
.lx-section--ivory {
  background: var(--c-lx-ivory);
}
.lx-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* ---------- B2. Section header: eyebrow + balanced H2 + short lede ---------- */
.lx-head {
  max-width: var(--lx-head-max);
  margin: 0 auto var(--lx-head-gap);
  text-align: center;
}
.lx-head--left {
  margin-inline: 0;
  text-align: left;
}
.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  margin: 0 0 var(--sp-16);
  font-family: var(--font-heading);
  font-size: var(--lx-eyebrow-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--lx-eyebrow-track);
  text-transform: uppercase;
  line-height: var(--lh-base);
  color: var(--c-brand-600);
}
.lx-eyebrow::before {
  content: "";
  width: var(--sp-24);
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: .7;
}
.lx-head h2,
h2.lx-title {
  margin: 0 auto;
  max-width: var(--lx-h2-measure);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-navy-900);
  text-transform: none;
}
.lx-head--left h2 { margin-inline: 0; }
.lx-lede,
.lx-head p.lx-lede {
  max-width: var(--lx-lede-measure);
  margin: var(--sp-16) auto 0;
  font-size: var(--text-lead);
  line-height: var(--lh-body);
  color: var(--c-ink-500);
}
.lx-head--left .lx-lede { margin-inline: 0; }
.lx-on-dark .lx-eyebrow { color: var(--c-brand-400); }
.lx-on-dark .lx-head h2,
.lx-on-dark h2.lx-title { color: var(--c-surface-0); }
.lx-on-dark .lx-lede { color: var(--c-lx-on-dark-muted); }

/* ---------- B3. Image-led card ---------- */
.lx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--lx-radius-sm);
  background: var(--c-surface-0);
  border: 1px solid var(--c-lx-line);
  box-shadow: var(--shadow-lx-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--lx-dur-hover) var(--lx-ease),
              box-shadow var(--lx-dur-hover) var(--lx-ease);
}
a.lx-card:hover,
.lx-card--hover:hover {
  transform: translateY(var(--lx-lift));
  box-shadow: var(--shadow-lx-2);
  text-decoration: none;
}
.lx-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-lx-sand);
}
.lx-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lx-dur) var(--lx-ease);
}
a.lx-card:hover .lx-card__media img,
.lx-card--hover:hover .lx-card__media img {
  transform: scale(var(--lx-zoom));
}
.lx-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-24);
  flex: 1;
}

/* ---------- B4. Media frame: rounded, soft shadow, subtle zoom ---------- */
.lx-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--lx-radius-media);
  box-shadow: var(--shadow-lx-2);
  background: var(--c-lx-sand);
}
.lx-media > img,
.lx-media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--lx-dur) * 1.6) var(--lx-ease);
}
.lx-media--zoom:hover > img,
.lx-media--zoom:hover > picture > img {
  transform: scale(var(--lx-zoom));
}

/* ---------- B5. Inset photo card (image-background section, never full-bleed) ---------- */
.lx-inset {
  position: relative;
  overflow: hidden;
  margin-inline: var(--cm-card-inset, var(--container-pad));
  border-radius: var(--cm-card-radius, var(--lx-radius));
  background: var(--c-navy-900);
  color: var(--c-surface-0);
  isolation: isolate;
}
.lx-inset__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.lx-inset__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lx-inset__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-lx-scrim-strong) 0%, var(--c-lx-scrim-mid) 45%, var(--c-lx-scrim-soft) 100%);
}

/* ---------- B6. Split layout (image + text) ---------- */
.lx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lx-split-gap);
  align-items: center;
}
.lx-split--reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .lx-split { grid-template-columns: minmax(0, 1fr); }
  .lx-split--reverse > :first-child { order: 0; }
}

/* ---------- B7. Reveal on scroll (content visible without JS) ----------
 * cm-luxury.js adds .lx-js to <html> only when IntersectionObserver exists and the
 * user has not asked for reduced motion; without it nothing is ever hidden. */
.lx-js .lx-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--lx-reveal-shift));
}
.lx-js .lx-reveal {
  transition: opacity var(--lx-dur) var(--lx-ease), transform var(--lx-dur) var(--lx-ease);
}
.lx-js .lx-reveal[data-lx-delay="1"] { transition-delay: .08s; }
.lx-js .lx-reveal[data-lx-delay="2"] { transition-delay: .16s; }
.lx-js .lx-reveal[data-lx-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .lx-js .lx-reveal:not(.is-in) { opacity: 1; transform: none; }
  .lx-reveal, .lx-card, .lx-card__media img, .lx-media > img, .lx-media > picture > img,
  .cm-btn--primary, .cms-btn--primary,
  a.cm-hub__card, a.cm-hub__mcard, a.cm-hub__subcard, a.cm-linkcard,
  .project-card, .service-card, .home-solutions__card, .community-card {
    transition: none !important;
  }
  a.lx-card:hover, .lx-card--hover:hover { transform: none; }
  a.lx-card:hover .lx-card__media img, .lx-media--zoom:hover > img { transform: none; }
}
@media print {
  .lx-js .lx-reveal:not(.is-in) { opacity: 1; transform: none; }
}