.mc-hero{width:100%;}

.mc-hero__grid{display:grid;gap:var(--mc-hero-gap,18px);}
.mc-hero__grid--1{grid-template-columns:1fr;}
.mc-hero__grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.mc-hero__grid--3{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  min-height:var(--mc-hero-min-h-desktop,520px);
}

.mc-hero__card{
  position:relative;
  overflow:hidden;
  border-radius:var(--mc-hero-radius,0px);
  min-height:var(--mc-hero-min-h-desktop,520px);
  display:block;
  text-decoration:none;
  color:inherit;
  isolation:isolate;
  background:#0b0b0b;
  transform:translateZ(0);
}

.mc-hero__card,
.mc-hero__btn{box-shadow:none !important;}

.mc-hero__grid--3 .mc-hero__card--1{grid-column:1;grid-row:1 / span 2;min-height:unset;height:100%;}
.mc-hero__grid--3 .mc-hero__card--2{grid-column:2;grid-row:1;min-height:unset;height:100%;}
.mc-hero__grid--3 .mc-hero__card--3{grid-column:2;grid-row:2;min-height:unset;height:100%;}

.mc-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100% !important;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.16,.84,.2,1);
  filter:saturate(1.05) contrast(1.04);
}

.mc-hero__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 52%,
    color-mix(in srgb, var(--mc-hero-card-overlay-color, #000) 55%, transparent) 78%,
    color-mix(in srgb, var(--mc-hero-card-overlay-color, #000) 85%, transparent) 100%
  );
  opacity:var(--mc-hero-overlay,.55);
  z-index:1;
}

.mc-hero__content{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:26px 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mc-hero__subtitle{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mc-hero-card-subtitle, rgba(255,255,255,.85));
  opacity:.95;
}

.mc-hero__title{
  font-size:clamp(26px, 2.7vw, 44px);
  line-height:1.05;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--mc-hero-card-title, #fff);
  font-family:inherit;
}

.mc-hero__btn{
  margin-top:8px;
  align-self:flex-start;
  font-size:12px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:11px 14px;
  border-radius:999px;
  background:var(--mc-hero-card-btn-bg, rgba(15,15,16,0.18));
  color:var(--mc-hero-card-btn-text, #fff);
  border:1px solid color-mix(in srgb, var(--mc-hero-card-btn-text, #fff) 30%, transparent);
  backdrop-filter:saturate(155%) blur(8px);
  -webkit-backdrop-filter:saturate(155%) blur(8px);
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s cubic-bezier(.2,.8,.2,1), border-color .35s cubic-bezier(.2,.8,.2,1);
}

.mc-hero__btn:after{
  content:"\2192"; /* → */
  font-size:13px;
  line-height:1;
  opacity:.9;
  transform:translateX(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}

/* Luxury hover: optical movement on image (no shadows) */
.mc-hero__card{transition:transform .65s cubic-bezier(.2,.8,.2,1);}

/* Subtle sheen over the photo on hover */
.mc-hero__card:after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,.04) 52%, transparent 72%);
  transform:translateX(-55%) rotate(0.001deg);
  opacity:0;
  transition:opacity .35s ease, transform 1.1s cubic-bezier(.16,.84,.2,1);
}

.mc-hero__card:hover{transform:translateY(-1px);}
.mc-hero__card:hover .mc-hero__img{transform:scale(1.065);filter:saturate(1.08) contrast(1.06) brightness(1.02);}
.mc-hero__card:hover:after{opacity:1;transform:translateX(55%) rotate(0.001deg);}
.mc-hero__card:hover .mc-hero__btn{transform:translateY(-1px);background:color-mix(in srgb, var(--mc-hero-card-btn-bg, rgba(15,15,16,0.18)) 65%, rgba(255,255,255,.06));border-color:color-mix(in srgb, var(--mc-hero-card-btn-text, #fff) 45%, transparent);} 
.mc-hero__card:hover .mc-hero__btn:after{transform:translateX(3px);opacity:1;}

/* Mobile slider — hidden on desktop */
.mc-hero__slider{ display:none; }

/* =============================================
   MOBILE — ≤ 980 px — SLIDER
   ============================================= */
@media (max-width:980px){

  /* Hide desktop grid, show mobile slider */
  .mc-hero__grid{ display:none !important; }
  .mc-hero__slider{ display:block; }

  /* ── Slider container ── */
  .mc-hero__slider{
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* ── Scrollable track ── */
  .mc-hero__track{
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    gap: 0;
  }
  .mc-hero__track::-webkit-scrollbar{ display:none; }

  /* ── Each slide ── */
  .mc-hero__slide{
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
  }

  /* ── Card inside slide ── */
  .mc-hero__slide .mc-hero__card{
    display: block;
    width: 100%;
    min-height: var(--mc-hero-min-h-mobile, 300px) !important;
    height: var(--mc-hero-min-h-mobile, 300px);
    border-radius: var(--mc-hero-radius, 14px);
    transform: none !important;
    transition: none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    background: #0b0b0b;
  }
  .mc-hero__slide .mc-hero__card:after{ display:none; }

  .mc-hero__slide .mc-hero__img{
    transform: scale(1.01);
    transition: none;
  }

  .mc-hero__slide .mc-hero__content{
    padding: 22px 20px 24px;
    gap: 6px;
  }

  .mc-hero__slide .mc-hero__title{
    font-size: clamp(22px, 6.5vw, 36px);
    line-height: 1.08;
    letter-spacing: -.01em;
  }

  .mc-hero__slide .mc-hero__subtitle{
    font-size: 11px;
    letter-spacing: .13em;
    order: -1;
    margin-bottom: 2px;
  }

  .mc-hero__slide .mc-hero__btn{
    margin-top: 10px;
    padding: 13px 18px;
    font-size: 11px;
    letter-spacing: .13em;
    transition: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: none !important;
  }
  .mc-hero__slide .mc-hero__btn:after{ transition: none; }

  /* ── Dots ── */
  .mc-hero__dots{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 0;
    list-style: none;
  }
  .mc-hero__dot{
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mc-hero__dot.is-active{
    width: 18px;
    background: #111;
  }
}

@media (max-width:420px){
  .mc-hero__slide .mc-hero__content{ padding: 18px 16px 20px; }
  .mc-hero__slide .mc-hero__title{ font-size: clamp(20px, 7vw, 30px); }
}
