/* Full-width "our work" coverflow gallery — homepage only.
   Each item's nth-child position controls its size/fade below; gallery.js
   re-orders the DOM (moves the first/last <li>) to advance the active slide
   while keeping the coverflow illusion intact. */

.mm-gallery-section {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mm-carousel {
  --mm-gallery-height: calc(80vh - 50px);
  --mm-gallery-width: 300px;
  display: grid;
  width: 100%;
  transform: translate3d(0, 0, 0.1px);
}

.mm-carousel__list {
  display: flex;
  overflow: hidden;
  list-style: none;
  padding: 2em 24px 3em;
  margin: 0;
  contain: layout;
  isolation: isolate;
}

.mm-carousel__item {
  display: grid;
  position: relative;
  align-content: start;
  margin: 0 10px;
  padding: 0;
  flex: 1 1 10%;
  height: var(--mm-gallery-height);
  overflow: hidden;
  background: #14150F;
  border-radius: 16px;
  transform: translate3d(0, 0, 0.1px);
  box-shadow: rgba(0, 0, 0, .35) 0px 10px 14px 0px;
  contain: layout;
  isolation: isolate;
  user-select: none;
}

.mm-carousel__item {
  transition: all .55s cubic-bezier(.55, .24, .18, 1);
  user-select: none;
}
.mm-carousel__item * {
  transition: all .55s cubic-bezier(.55, .24, .18, 1);
  user-select: none;
}

.mm-carousel__contents { width: var(--mm-gallery-width); height: auto; }

.mm-carousel__item[data-active] { flex-basis: calc(var(--mm-gallery-width) * 3); flex-grow: 0; }

@media screen and (max-width: 960px) {
  /* Above this, the active card's fixed 900px basis (300px var * 3) has
     enough spare container width to stay dominant. Below it, that fixed
     px value stops scaling down with the viewport, so flex-shrink has to
     compress everything to fit — collapsing the "big center + thin
     sides" look into near-equal bars. Switching to a basis percentage
     keeps the same dominant-card illusion at any width in this range.
     flex-grow: 0 on every item stops the non-active neighbors soaking up
     leftover space and growing to compete with the active card. */
  .mm-carousel__item { flex-grow: 0; }
  .mm-carousel__item[data-active] { flex-basis: 76%; flex-grow: 0; }

  /* gallery.js always keeps the active card pinned at nth-child(7) (it
     rotates which image sits there rather than moving the active slot),
     so "one neighbor each side" is a fixed window: only 6, 7, 8 stay
     visible — everything else is hidden, matching the request of just
     two thin side cards instead of the wide desktop tier's five. */
  .mm-carousel__item:nth-child(-n + 5),
  .mm-carousel__item:nth-child(n + 9) { flex: 0 0 0px !important; margin: 0 !important; box-shadow: none !important; opacity: 0 !important; }
  .mm-carousel__item:nth-child(-n + 5) *,
  .mm-carousel__item:nth-child(n + 9) * { opacity: 0 !important; }
}

@media screen and (max-width: 800px) {
  .mm-carousel__item { flex-basis: 15%; }
}

@media screen and (max-width: 600px) {
  .mm-carousel__item { flex-basis: 10%; margin: 0 5px; border-radius: 8px; font-size: 3vw; }
  .mm-carousel__item[data-active] { flex-basis: 78%; flex-grow: 0; }
}

@media screen and (min-width: 600px) {
  .mm-carousel__item:nth-child(1),
  .mm-carousel__item:nth-child(2),
  .mm-carousel__item:nth-child(3),
  .mm-carousel__item:nth-child(n + 10) { flex: 0 0 0px; margin: 0; box-shadow: none; opacity: 0 !important; }

  .mm-carousel__item:not(:nth-child(n + 5)) .mm-carousel__bg,
  .mm-carousel__item:nth-child(n + 9) .mm-carousel__bg { opacity: .8; }

  .mm-carousel__item:not(:nth-child(n + 4)) *,
  .mm-carousel__item:nth-child(n + 10) * { opacity: 0 !important; }
}

.mm-carousel__bg {
  position: absolute;
  inset: -1px;
  z-index: -1;
  background-color: #14150F;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.mm-carousel__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(160deg, rgba(2, 0, 36, 0) 40%, rgba(211, 251, 82, .15) 70%, rgba(179, 222, 58, .25) 100%);
  transition: all .55s cubic-bezier(.55, .24, .18, 1);
}
.mm-carousel__item[data-active]::after { transform: translateY(100%); }
.mm-carousel__item[data-active],
.mm-carousel__item[data-active] * { opacity: 1; filter: none; }

.mm-carousel__contents {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  min-height: 160px;
  padding: 1em;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}

.mm-carousel__contents .mm-work-cat {
  font-size: .8em;
  letter-spacing: 1.25px;
  font-weight: 600;
  text-transform: uppercase;
  color: #d3fb52;
  margin: 0;
  opacity: 0;
  line-height: 1.1;
  transform: translateX(-200px);
  transition-duration: .55s;
  max-width: 18em;
}

@media screen and (max-width: 800px) {
  .mm-carousel__contents {
    transform: translateX(-100%) rotate(90deg);
    transform-origin: bottom right;
    align-items: end;
    justify-content: end;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: right;
  }
  .mm-carousel__contents .mm-work-cat { max-width: 70vh; transform: translateX(200px); }
}

[data-active] .mm-carousel__contents * {
  transform: translateX(0px);
  transition-duration: .55s;
  opacity: 1;
}
[data-active] .mm-carousel__contents .mm-work-cat { opacity: .9; transition-delay: .05s; }