/* =========================================================
   Move Up North – Carousel Blocks (Frontend)
   Clean, deterministic, matches Figma overlap model
   ========================================================= */

/* ==============================
   1) Carousel track
   ============================== */

.wp-block-moveupnorth-carousel.mun-carousel{
  position: relative;
  overflow: visible;
}

.wp-block-moveupnorth-carousel .mun-carousel__track{
  --mun-gap: 20px;          /* faktisk spacing */
  --mun-peek: 120px;       /* hur mycket nästa/föregående syns */
  --mun-slide-w: clamp(1080px, 72vw, 1380px);

  display: flex;
  gap: var(--mun-gap);

  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 24px var(--mun-peek);
  scroll-padding-left: var(--mun-peek);
  scroll-padding-right: var(--mun-peek);

  scrollbar-width: none;
}
.wp-block-moveupnorth-carousel .mun-carousel__track::-webkit-scrollbar{
  display:none;
}

/* default (alla som inte är nära) */
.wp-block-moveupnorth-carousel .mun-slide{
 margin: 0 -40px;   /* drar ihop men symmetriskt */
 box-sizing: border-box;
  transform: scale(0.78);
  opacity: 0.8;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), opacity 600ms ease;
}

/* Next / Prev */
.wp-block-moveupnorth-carousel .mun-slide.is-prev{
  transform: translateY(40px) scale(0.88);
  opacity: 0.8;
}

.wp-block-moveupnorth-carousel .mun-slide.is-next{
  transform: translateY(40px) scale(0.88);
  opacity: 0.8;
}

/* Active */
.wp-block-moveupnorth-carousel .mun-slide.is-active{
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

.wp-block-moveupnorth-carousel .mun-slide:not(.is-active):not(.is-prev):not(.is-next){
  transform: scale(0.72);
  opacity: 0.35;
}

/* ==============================
   2) Pagination (Figma-ish) + reset (theme safe)
   ============================== */

.wp-block-moveupnorth-carousel .mun-carousel__pagination{
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding: 18px 0 0;
  width: 100%;
}

.wp-block-moveupnorth-carousel .mun-dots{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

/* Theme-safe reset för knappar */
.wp-block-moveupnorth-carousel .mun-dot,
.wp-block-moveupnorth-carousel .mun-pause{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1;
  background: transparent;
  box-shadow: none;
  text-transform: none;
}

/* Dots */
.wp-block-moveupnorth-carousel .mun-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--ast-global-color-2);
  transition:
    width 260ms cubic-bezier(.4,0,.2,1),
    background-color 200ms ease,
    opacity 200ms ease;
}

.wp-block-moveupnorth-carousel .mun-dot.is-active{
  width: 49px;
  background: var(--ast-global-color-2);
}

/* Pause button */
.wp-block-moveupnorth-carousel .mun-pause{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid var(--ast-global-color-2);
  background: transparent;

  display: grid;
  place-items: center;
}
.wp-block-moveupnorth-carousel .mun-pause svg{ display:block; }



/* =================================================
   Slide layout – layered (matches Figma exactly)
   ================================================= */

.wp-block-moveupnorth-carousel-slide .mun-slide__wrap{
  /* Figma dimensions */
  --panel-h: 547px;
  --panel-w: 1100px;
  --panel-offset: 0px;

  --image-w: 574px;
  --image-h: 505px;

  --image-offset: -20px;   /* hur mycket bilden går UT från panelen */
  --text-max: 520px;

  position: relative;
  height: var(--panel-h);
  width: 100%;
  overflow: visible;
}

/* =====================
   PANEL (base layer)
   ===================== */

.wp-block-moveupnorth-carousel-slide .mun-slide__panel{
  position: relative;
  height: var(--panel-h);
  width: var(--panel-w);
  margin-left: auto;          /* tryck panelen åt höger */

  display: flex;
  align-items: center;

  box-sizing: border-box;
  padding:
    64px
    120px
    64px
    calc(var(--image-w) + 10px);  /* reservera yta för bilden */

  z-index: 1;
}

/* =====================
   TEXT CONTENT
   ===================== */

.wp-block-moveupnorth-carousel-slide .mun-slide__content{
  max-width: var(--text-max);
  display: flex;
  flex-direction: column;
}

/* =====================
   IMAGE (overlay layer)
   ===================== */

.wp-block-moveupnorth-carousel-slide .mun-slide__mediaMask{
  position: absolute;
  left: var(--image-offset);
  top: 50%;
  transform: translateY(-50%);

  width: var(--image-w);
  height: var(--image-h);

  z-index: 2;
  overflow: hidden;
}

.wp-block-moveupnorth-carousel-slide .mun-slide__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==============================
   4) Typography / CTA
   ============================== */

.wp-block-moveupnorth-carousel-slide .mun-slide__title{
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 45.5px */
  letter-spacing: -0.525px;
  max-width: 22ch;
  margin: 0;
}

.wp-block-moveupnorth-carousel-slide .mun-slide__text{
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.525px;
  margin: 0;
  max-width: 52ch;
}

body .wp-block-moveupnorth-carousel-slide .mun-slide__cta{
  display: inline-flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  color: inherit;
  margin-top: 54px;
}
body .wp-block-moveupnorth-carousel-slide .mun-slide__cta:hover {
  text-decoration: underline;
}

.wp-block-moveupnorth-carousel-slide .mun-slide__ctaIcon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(0,0,0,0.08);
}
.wp-block-moveupnorth-carousel-slide .mun-slide__ctaIcon svg{ display:block; }


/* ============================
   5) SVG masks: separate for panel + media
   ============================ */

:root{
  /* Panel mask (874×547) */
  --mun-panel-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NzQgNTQ3Ij48cGF0aCBkPSJNNS4wMDM0IDI5MC4wODhDLTEuNjY3NzkgMjgwLjAzNiAtMS42Njc4IDI2Ni45NjUgNS4wMDMzOSAyNTYuOTEyTDE2Ni41OTUgMTMuNDExOEMxNzIuMTU0IDUuMDM1MzkgMTgxLjUzOCAwIDE5MS41OTEgMEw2ODIuMzk5IDBDNjkyLjQ1MiAwIDcwMS44MzcgNS4wMzUzNyA3MDcuMzk1IDEzLjQxMThMODY4Ljk4NyAyNTYuOTEyQzg3NS42NTggMjY2Ljk2NCA4NzUuNjU4IDI4MC4wMzUgODY4Ljk4NyAyOTAuMDg4TDcwNy4zOTUgNTMzLjU4OEM3MDEuODM3IDU0MS45NjUgNjkyLjQ1MiA1NDcgNjgyLjM5OSA1NDdMMTkxLjU5MSA1NDdDMTgxLjUzOCA1NDcgMTcyLjE1NCA1NDEuOTY1IDE2Ni41OTUgNTMzLjU4OEw1LjAwMzQgMjkwLjA4OFoiIGZpbGw9IndoaXRlIi8+PC9zdmc+");

  /* Media mask (574×505) */
  --mun-media-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzQgNTA1Ij48cGF0aCBkPSJNNC40NTE2NSAyNjcuMTk2Qy0wLjgxNzkwNCAyNTguMDY5IC0wLjgxNzAwNSAyNDYuODI0IDQuNDUyNjIgMjM3LjY5NkwxMzIuODgxIDE1LjI1MDFDMTM4LjE1MSA2LjEyMjg0IDE0Ny44OSAwLjUwMDE4NSAxNTguNDI5IDAuNTAwMTE1TDQxNS4yODkgMC41MDAxMDRDNDI1LjgyOCAwLjUwMDE2NyA0MzUuNTY3IDYuMTIyODIgNDQwLjgzNiAxNS4yNTAxTDU2OS4yNjYgMjM3LjY5NkM1NzQuNTM2IDI0Ni44MjQgNTc0LjUzNSAyNTguMDY5IDU2OS4yNjUgMjY3LjE5Nkw0NDAuODM2IDQ4OS42NDNDNDM1LjU2NyA0OTguNzcgNDI1LjgyOCA1MDQuMzkzIDQxNS4yODkgNTA0LjM5M0wxNTguNDI5IDUwNC4zOTNDMTQ3Ljg5IDUwNC4zOTMgMTM4LjE1MSA0OTguNzcgMTMyLjg4MSA0ODkuNjQzTDQuNDUxNjUgMjY3LjE5NloiIGZpbGw9IndoaXRlIi8+PC9zdmc+");
  
  /* Justera dessa två för att matcha exakt */
  --mun-panel-mask-scale-x: 120%;   /* 110–130% */
  --mun-panel-mask-scale-y: 100%;
  --mun-panel-mask-offset-x: 90px;  /* flytta formen åt höger */
  --mun-panel-mask-offset-y: 0px;   /* normalt 0 */
}

/* ============================
   PANEL mask: offset
   ============================ */

/* Apply panel mask with offset */
body:not(.block-editor-page) .wp-block-moveupnorth-carousel-slide .mun-slide__panel{
  -webkit-mask-image: var(--mun-panel-mask);
  mask-image: var(--mun-panel-mask);

  /* Viktigt: >100% i X så vi får “yta” att flytta i */
  -webkit-mask-size: var(--mun-panel-mask-scale-x) var(--mun-panel-mask-scale-y);
  mask-size: var(--mun-panel-mask-scale-x) var(--mun-panel-mask-scale-y);

  /* Flytta masken med px (exakt kontroll) */
  -webkit-mask-position: calc(50% + var(--mun-panel-mask-offset-x)) calc(50% + var(--mun-panel-mask-offset-y));
  mask-position: calc(50% + var(--mun-panel-mask-offset-x)) calc(50% + var(--mun-panel-mask-offset-y));

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body:not(.block-editor-page) .wp-block-moveupnorth-carousel-slide .mun-slide__mediaMask{
  -webkit-mask-image: var(--mun-media-mask);
  mask-image: var(--mun-media-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}


/* ==============================
   6) Responsive
   ============================== */

@media (max-width: 1200px){
  .wp-block-moveupnorth-carousel-slide .mun-slide__wrap{
    --mun-panel-w: 980px;
    --mun-overlap: 110px;
    --mun-panel-pad-right: 90px;
    --mun-panel-pad-left-extra: 100px;
  }
}

@media (max-width: 980px){

  /* =========================================
     1) Track: 20px peek och slide tar nästan hela bredden
     ========================================= */
  .wp-block-moveupnorth-carousel .mun-carousel__track{
    --mun-peek: 20px;            /* <= din önskade peek */
    --mun-gap: 14px;
    --mun-slide-w: calc(100vw - (var(--mun-peek) * 2)); /* aktiv nästan full bredd */

    padding: 16px var(--mun-peek);
    scroll-padding-left: var(--mun-peek);
    scroll-padding-right: var(--mun-peek);
  }

  /* Säkerställ att varje slide faktiskt blir "en per vy" */
  .wp-block-moveupnorth-carousel .mun-slide{
    flex: 0 0 var(--mun-slide-w);
    width: var(--mun-slide-w);
    margin: 0 !important;
  }

  /* På mobil: inga scale/translate-effekter (annars krymper aktiva) */
  .wp-block-moveupnorth-carousel .mun-slide,
  .wp-block-moveupnorth-carousel .mun-slide.is-prev,
  .wp-block-moveupnorth-carousel .mun-slide.is-next,
  .wp-block-moveupnorth-carousel .mun-slide.is-active{
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* =========================================
     2) Slide layout: BILD ÖVERST, panel/text under
     (döda desktopens absoluta overlay)
     ========================================= */

  .wp-block-moveupnorth-carousel-slide .mun-slide__wrap{
    position: relative;
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column-reverse; /* <= bilden ovanför */
    gap: 14px;

    /* nolla desktop-variabler som förstör på mobil */
    --panel-h: auto;
    --panel-w: 100%;
    --image-w: 100%;
    --image-h: auto;
    --image-offset: 0px;
  }

  .wp-block-moveupnorth-carousel-slide .mun-slide__mediaMask{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 574 / 505; /* bibehåll formen proportionerligt */

    margin: 0 !important;
    z-index: 1;
  }

  .wp-block-moveupnorth-carousel-slide .mun-slide__panel{
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;

    display: block !important;
    padding: 22px 18px !important;

    z-index: 2;

    /* panel-mask blir ofta för aggressiv på mobil:
       kör rundad rektangel (stabilt + läsbart) */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-radius: 24px;
  }

  .wp-block-moveupnorth-carousel-slide .mun-slide__content{
    max-width: 100% !important;
  }

  /* Typografi anpassad */
  .wp-block-moveupnorth-carousel-slide .mun-slide__title{
    font-size: clamp(22px, 6vw, 28px);
    line-height: 125%;
    max-width: none;
  }

  .wp-block-moveupnorth-carousel-slide .mun-slide__text{
    font-size: clamp(18px, 5vw, 24px);
    line-height: 135%;
    max-width: none;
  }

  body .wp-block-moveupnorth-carousel-slide .mun-slide__cta{
    margin-top: 16px;
  }
}
@media (max-width: 980px){

  .mun-slide__wrap{
    display: block;
    position: relative;
  }

  .mun-slide__mediaMask{
    width: 92%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .mun-slide__panel{
    width: 94%;
    margin: -60px auto 0; /* överlapp */
    padding: 28px 22px;
    border-radius: 28px;
    position: relative;
    z-index: 1;
  }

  .mun-slide__title{
    font-size: 24px;
  }

  .mun-slide__text{
    font-size: 18px;
  }
}