/* ===================================
   Module – Projektkort
=================================== */

.m-projektkort{
  padding: 35px 0;
}

/* Heading */
.m-projektkort__heading{
  margin: 0 0 30px;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--c-gran);
}

/* Grid */
.m-projektkort__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 50px);
}

/* 3 -> 2 kolumner */
@media (max-width: 1100px){
  .m-projektkort__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2 -> 1 kolumn */
@media (max-width: 700px){
  .m-projektkort__grid{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------
   Card
----------------------------------- */
.m-projektkort__card{
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;

  /* behåll som innan */
  background-size: cover;
  background-position: center;

  text-decoration: none;
  height: clamp(400px, 35vw, 650px);
}

/* Zoomad bakgrund (pseudo) */
.m-projektkort__card::before{
  content:"";
  position:absolute;
  inset:0;

  background-image: var(--pk-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: block;

  /* viktiga för att få zoomen att funka stabilt */
  transform: translateZ(0) scale(1);
  transform-origin: center;
  backface-visibility: hidden;

  transition: transform .55s ease;
  will-change: transform;
  z-index: 0;
}

/* Overlay (multiply) */
.m-projektkort__overlay{
  position:absolute;
  inset:0;
  background:#507B6E;
  mix-blend-mode: multiply;
  opacity:0;
  transition: opacity .55s ease;
  pointer-events:none;
  z-index: 1;
}

/* Status-badge uppe till höger (OVANFÖR overlay) */
.m-projektkort__status {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 3;
    background: var(--c-tall);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1;
    padding: 12px 30px;
    border-radius: 3px 0px 0px 3px;
}

/* -----------------------------------
   Meta (nere vänster)
----------------------------------- */
.m-projektkort__meta{
  position: absolute;
  left: 17px;
  bottom: 17px;
  z-index: 3;

  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.m-projektkort__meta-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Title */
.m-projektkort__title{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2vw, 30px);
  color: #fff;
  line-height: 1.05;
}

/* Ort */
.m-projektkort__ort{
  font-family: var(--font-heading);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 17px;
  color: var(--c-cream);
  transition: color .2s ease;
}

/* -----------------------------------
   Lottie
----------------------------------- */
.m-projektkort__lottie{
  width: clamp(26px, 5.2vw, 73px);
  height: clamp(26px, 5.2vw, 73px);
  flex: 0 0 auto;
  transform: translateY(.1em);
}

.m-projektkort__lottie svg {
  width: 100%;
  height: 100%;
  display: block;
  margin-top: 5px;
}

/* -----------------------------------
   Hover
----------------------------------- */
@media (hover:hover){
  .m-projektkort__card:hover::before{
    transform: translateZ(0) scale(1.06);
  }

  .m-projektkort__card:hover .m-projektkort__overlay{
    opacity: 1;
  }

  .m-projektkort__card:hover .m-projektkort__ort{
    color: var(--c-bjork_ljus);
  }
}

/* -----------------------------------
   Responsive tweaks för kort-innehåll
----------------------------------- */
@media (max-width: 1200px){
  .m-projektkort__card{
    height: clamp(360px, 60vw, 520px);
  }

  .m-projektkort__lottie{
    width: clamp(60px, 10.2vw, 72px);
    height: clamp(60px, 10.2vw, 72px);
  }

.m-projektkort__title {
    font-size: clamp(25px, 4vw, 30px);
    padding-right: 10px;
}

  .m-projektkort__ort{
    font-size: clamp(15px, 3vw, 17px);
  }

  .m-projektkort__meta{
    gap: 8px;
  }
}

/* 👇 Mobil / scroll-aktiv */
/* In view (drivs av din lottie/IO) */
.m-projektkort__card.is-inview::before{
  transform: translateZ(0) scale(1.06);
}

.m-projektkort__card.is-inview .m-projektkort__overlay{
  opacity: 1;
}

.m-projektkort__card.is-inview .m-projektkort__ort{
  color: var(--c-bjork_ljus);
}

@media (max-width: 600px){
.m-projektkort__lottie svg {
    margin-top: 3px !important;
}
}