/* ============================================================================
   MAXIVO — Home (light) sections
   ============================================================================ */

/* ---- hero ---- */
.mx-hero { position: relative; height: 82vh; min-height: 560px; background: var(--mx-plc); display: flex; align-items: flex-end; }
.mx-hero-ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font: 400 11px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase; color: #8B8985; }
.mx-hero-inner { position: relative; width: 100%; padding: 56px var(--mx-pad-x); display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; background: linear-gradient(to top, rgba(18,18,17,.72), rgba(18,18,17,0)); }
.mx-hero-copy { color: var(--mx-cream-2); }
.mx-hero-eyebrow { font: 400 11px var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; opacity: .8; }
.mx-hero-copy h1 { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(44px,6.4vw,104px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.mx-hero-aside { color: #E6E5E2; display: flex; flex-direction: column; gap: 22px; padding-bottom: 10px; }
.mx-hero-aside p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 38ch; color: #D7D5D2; }
.mx-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- category tiles ---- */
.mx-cats { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--mx-line); }
.mx-cat { background: var(--mx-bg); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 38px; justify-content: space-between; min-height: 200px; }
.mx-cat:hover { text-decoration: none; }
.mx-cat-num { font: 400 10px var(--mx-mono); letter-spacing: .16em; color: #8B8985; }
.mx-cat-name { font-family: var(--mx-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; text-transform: uppercase; }
.mx-cat-count { font: 400 11px var(--mx-body); letter-spacing: .06em; text-transform: none; color: var(--mx-mut-2); }

/* ---- generic section head ---- */
.mx-sec { padding: 76px var(--mx-pad-x) 84px; }
.mx-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.mx-sec-title { margin: 0; font-family: var(--mx-display); font-weight: 700; font-size: 34px; letter-spacing: -.025em; text-transform: uppercase; }
.mx-sec-link { font: 500 12px var(--mx-body); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--mx-ink); padding-bottom: 3px; }
.mx-sec-link:hover { text-decoration: none; }

/* ---- editorial split ---- */
.mx-editorial { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.mx-editorial-media { background: var(--mx-plc); display: grid; place-items: center; min-height: 520px; }
.mx-editorial-panel { background: var(--mx-ink); color: var(--mx-cream); padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.mx-editorial-panel .mx-eyebrow { color: var(--mx-accent); }
.mx-editorial-panel h2 { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(32px,3.6vw,54px); line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.mx-editorial-panel p { margin: 0; font-size: 16px; line-height: 1.6; max-width: 44ch; color: var(--mx-on-dark); }

/* ---- feature columns ---- */
.mx-features { padding: 72px var(--mx-pad-x); border-top: 1px solid var(--mx-line); display: grid; grid-template-columns: repeat(3,1fr); gap: 56px; }
.mx-feature { display: flex; flex-direction: column; gap: 12px; }
.mx-feature h3 { margin: 0; font-family: var(--mx-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.mx-feature p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mx-mut); }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .mx-cats { grid-template-columns: repeat(3,1fr); }
  .mx-prod-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 860px) {
  .mx-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .mx-editorial { grid-template-columns: 1fr; }
  .mx-editorial-panel { padding: 56px 32px; }
  .mx-features { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
  .mx-cats { grid-template-columns: repeat(2,1fr); }
  .mx-prod-grid { grid-template-columns: repeat(2,1fr) !important; }
  .mx-sec { padding: 48px var(--mx-pad-x) 56px; }
  .mx-sec-title { font-size: 26px; }
}