/* MS Portfolio Carousel (style like screenshot) */
.mspc-section{
  --mspc-bg: #7a6a66;          /* warm brown */
  --mspc-fg: #ffffff;
  --mspc-muted: rgba(255,255,255,.86);
  --mspc-card: #5f745a;        /* muted green */
  --mspc-card-border: rgba(255,255,255,.08);
  --mspc-btn: rgba(255,255,255,.18);
  --mspc-btn-hover: rgba(255,255,255,.28);
  --mspc-gap: 36px;
  --mspc-height: 420px;

  background: var(--mspc-bg);
  color: var(--mspc-fg);
  padding: 72px 0 72px;
}

.mspc-head{
  position: relative;
  max-width: 1440px;
  padding: 0 32px;
  margin: 0 auto 28px;
  text-align: center;
}

.mspc-subtitle{
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mspc-muted);
  margin-bottom: 18px;
  font-weight: 500;
}

.mspc-title{
  font-size: clamp(46px, 5.2vw, 86px);
  line-height: 1.02;
  font-weight: 300;           /* thin like screenshot */
  text-transform: uppercase;
  margin: 0;
}

.mspc-nav{
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 12px;
}

.mspc-btn{
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 0;
  background: var(--mspc-btn);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, background .2s ease, opacity .2s ease;
}
.mspc-btn:hover{ background: var(--mspc-btn-hover); transform: translateY(-1px); }
.mspc-btn:active{ transform: translateY(0) scale(.98); }
.mspc-btn:disabled{ opacity: .35; cursor: not-allowed; }

.mspc-arrow{
  width: 12px; height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  display: inline-block;
  opacity: .95;
}
.mspc-arrow-left{ transform: rotate(135deg); }
.mspc-arrow-right{ transform: rotate(-45deg); }

.mspc-viewport{
  max-width: 1440px;
  padding: 0 32px;
  margin: 0 auto;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.mspc-section.mspc-dragging .mspc-viewport{ cursor: grabbing; }

.mspc-track{
  display: flex;
  gap: var(--mspc-gap);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.mspc-slide{ flex: 0 0 auto; }

.mspc-card{
  position: relative;
  display: block;
  height: var(--mspc-height);
  border-radius: 0;
  overflow: hidden;
  background: var(--mspc-card);
  border: 1px solid var(--mspc-card-border);
}
.mspc-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .35s ease;
}
.mspc-card:hover img{ transform: scale(1.03); }

.mspc-expand{
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  opacity: .95;
  background:
    linear-gradient(#fff,#fff) left 4px top 13px / 18px 2px no-repeat,
    linear-gradient(#fff,#fff) left 13px top 4px / 2px 18px no-repeat;
  transform: rotate(45deg);
  border-radius: 2px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.mspc-empty{
  padding: 14px 18px;
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* Lightbox */
.mspc-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.mspc-lightbox.is-open{ display: block; }
.mspc-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
}
.mspc-lightbox__content{
  position: absolute;
  inset: 40px;
  display: grid;
  place-items: center;
}
.mspc-lightbox__img{
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.mspc-lightbox__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  cursor: pointer;
}
.mspc-lightbox__close:before,
.mspc-lightbox__close:after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  transform-origin: center;
}
.mspc-lightbox__close:before{ transform: translate(-50%,-50%) rotate(45deg); }
.mspc-lightbox__close:after{ transform: translate(-50%,-50%) rotate(-45deg); }

body.mspc-no-scroll{ overflow: hidden; }

@media (max-width: 1024px){
  .mspc-nav{ right: 18px; }
  .mspc-head{ padding: 0 18px; }
  .mspc-viewport{ padding: 0 18px; }
}
@media (max-width: 767px){
  .mspc-section{ padding: 54px 0 58px; }
  .mspc-subtitle{ font-size: 14px; margin-bottom: 14px; }
  .mspc-title{ font-size: 44px; }
  .mspc-nav{
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 16px;
  }
}


/* button reset for card */
button.mspc-card{ border:0; padding:0; background:transparent; width:100%; text-align:left; cursor:pointer; }
button.mspc-card:focus{ outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }


/* === Fix: navigation below carousel === */
.mspc-head{
  margin-bottom: 10px;
}
.mspc-nav{
  position: static !important;
  transform: none !important;
  justify-content: flex-end;
  margin: 22px 32px 0 auto;
}


/* === Fix: remove overlay icons / crosses from images === */
.mspc-card::after,
.mspc-card::before{
  display:none !important;
}

/* Elementor / JetGallery / Pro lightbox leftovers */
.elementor-lightbox,
.elementor-slideshow__footer,
.elementor-slideshow__header,
.elementor-slideshow__description,
.elementor-slideshow__counter,
.elementor-slideshow__share-links,
.elementor-lightbox__close,
.elementor-lightbox__zoom,
.elementor-lightbox__download,
.elementor-lightbox__share{
  display:none !important;
}


/* === Replace expand cross with arrow icon === */
.mspc-expand{
  width: 28px;
  height: 28px;
  background: none;
}
.mspc-expand::before{
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}


/* === Disable plugin background === */
.mspc-section{
  background: transparent !important;
}