/* Michael Butler — curated homepage 1.13
 * Art-house refinement: fullscreen editorial hero + reduced repetition.
 * This is an additive final layer. Existing site and ACF styles are untouched.
 */

body.mb-home-mode-immersive .mb-home{
  isolation:isolate!important;
}
body.mb-home-mode-immersive .mb-home__media{
  transform:translate3d(0,var(--mb-hero-shift,0px),0) scale(var(--mb-hero-scale,1))!important;
  transform-origin:center center!important;
  transition:filter .2s linear!important;
  will-change:transform!important;
}
body.mb-home-mode-immersive .mb-home__media::after{
  z-index:2!important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.015) 54%,rgba(0,0,0,.24) 78%,rgba(0,0,0,.72) 100%)!important;
}

/* The immersive hero keeps the image/video fullscreen but replaces the old
   black CTA boxes with gallery-style editorial links. Cinematic-only mode
   still uses the original two-button treatment. */
.mb-home__editorial-actions{
  position:absolute!important;
  z-index:6!important;
  left:clamp(24px,4.2vw,74px)!important;
  right:clamp(24px,4.2vw,74px)!important;
  bottom:clamp(28px,4.5vh,58px)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:clamp(28px,6vw,110px)!important;
  pointer-events:auto!important;
}
.mb-home__editorial-link{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:38px!important;
  width:clamp(150px,17vw,260px)!important;
  padding:13px 0 12px!important;
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
  font-size:clamp(10px,.72vw,12px)!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  text-shadow:0 1px 14px rgba(0,0,0,.5)!important;
}
.mb-home__editorial-link::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:1px!important;
  background:rgba(255,255,255,.46)!important;
  transform-origin:left center!important;
  transition:background .28s ease,transform .38s cubic-bezier(.22,.7,.2,1)!important;
}
.mb-home__editorial-link span:last-child{
  font-size:15px!important;
  font-weight:300!important;
  letter-spacing:0!important;
  transition:transform .32s cubic-bezier(.22,.7,.2,1)!important;
}
.mb-home__editorial-link:hover::after,
.mb-home__editorial-link:focus-visible::after{background:#fff!important;transform:scaleX(.84)!important}
.mb-home__editorial-link:hover span:last-child,
.mb-home__editorial-link:focus-visible span:last-child{transform:translate(4px,-3px)!important}
.mb-home__editorial-link:focus-visible{outline:1px solid rgba(255,255,255,.72)!important;outline-offset:8px!important}

/* Let the first curated composition feel like it emerges from the dark edge
   of the hero instead of beginning a second website underneath it. */
body.mb-home-mode-immersive .mb-curated-home{
  position:relative!important;
  z-index:3!important;
  margin-top:-1px!important;
  background:#000!important;
}
body.mb-home-mode-immersive .mb-curated-home>.mb-curated-section:first-child{
  padding-top:clamp(38px,5.2vw,76px)!important;
}

/* Typography becomes editorial rather than component-like. One category name,
   one contextual title, one action. */
.mb-curated-context{
  margin:0 0 clamp(14px,1.8vw,23px)!important;
  max-width:430px!important;
  color:rgba(255,255,255,.58)!important;
  font-size:clamp(9px,.64vw,11px)!important;
  font-weight:500!important;
  line-height:1.55!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.mb-curated-copy--painting h2{
  margin:0 0 clamp(12px,1.2vw,18px)!important;
}
.mb-curated-copy--painting .mb-curated-text{margin-top:0!important}
.mb-curated-link{
  gap:22px!important;
  min-width:0!important;
  width:max-content!important;
  max-width:100%!important;
  padding-bottom:8px!important;
  font-size:clamp(9px,.62vw,11px)!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
.mb-curated-link span:last-child{transition:transform .28s ease!important}
.mb-curated-link:hover span:last-child{transform:translateX(4px)!important}

/* Film heading no longer repeats the selected collection/title above the film. */
.mb-curated-film-heading p{display:none!important}
.mb-curated-film-heading{margin-bottom:clamp(20px,2.5vw,32px)!important}
.mb-curated-film-title{
  margin-bottom:clamp(12px,1.5vw,20px)!important;
  font-weight:400!important;
}

/* Artist and sales no longer use duplicate eyebrow labels. */
.mb-curated-copy--artist>.mb-curated-kicker,
.mb-curated-copy--sales>.mb-curated-kicker{display:none!important}
.mb-curated-copy--artist h1{margin-top:0!important}
.mb-curated-copy--sales h2{margin-top:0!important}

/* The hover reveal is treated as a caption rather than another button. */
.mb-curated-hover-label{
  padding:0 0 7px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.72)!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  font-size:8px!important;
  letter-spacing:.16em!important;
}

/* Portrait/square artwork already changes composition in 1.12; tighten the
   copy-to-artwork relationship further so the void reads as deliberate space. */
.mb-curated-section--paintings.is-portrait .mb-curated-painting-stage{
  gap:clamp(24px,3vw,44px)!important;
}
.mb-curated-section--paintings.is-square .mb-curated-painting-stage{
  gap:clamp(30px,3.6vw,54px)!important;
}

/* Keep the closing Private Sales composition poster-like, not card-like. */
.mb-curated-copy--sales .mb-curated-text{max-width:410px!important}
.mb-curated-copy--sales .mb-curated-link{margin-top:clamp(20px,2.2vw,30px)!important}

@media(max-width:767px){
  .mb-home__editorial-actions{
    left:20px!important;
    right:20px!important;
    bottom:24px!important;
    gap:22px!important;
  }
  .mb-home__editorial-link{
    width:calc(50% - 11px)!important;
    gap:16px!important;
    font-size:9px!important;
    letter-spacing:.13em!important;
  }
  body.mb-home-mode-immersive .mb-curated-home>.mb-curated-section:first-child{
    padding-top:30px!important;
  }
  .mb-curated-context{margin-bottom:13px!important}
}

@media(prefers-reduced-motion:reduce){
  body.mb-home-mode-immersive .mb-home__media{transform:none!important}
  .mb-home__editorial-link::after,
  .mb-home__editorial-link span:last-child{transition:none!important}
}
