/* ===================================
   Module: Text + Image (rows)
=================================== */


.m-ti__rows{
  display: grid;
  gap: 60px; /* <-- HÄR styr du gap mellan rows */
  padding: 35px 0px;
}

.m-ti__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 6px;
  overflow: hidden;
  align-items: stretch;
  height: 25vw;
  min-height: fit-content;
}

/* content */
.m-ti__content{
  background: var(--c-cream);
  color: var(--c-gran);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* heading with highlight colors */
.m-ti__heading{
  margin: 0 0 18px;
  line-height: var(--lh-tight);
}

.m-ti__heading-base,
.m-ti__heading-highlight{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
}

.m-ti__heading-base{ color: var(--ti-heading, var(--c-gran)); }
.m-ti__heading-highlight{ color: var(--ti-highlight, var(--c-bjork)); }

.m-ti__text{
  font-family: var(--font-body);
}

.m-ti__media{
  background-size: cover;
  background-position: center;
  min-height: 360px;
}

/* image right = default */
.m-ti__row--image-right .m-ti__media{
  border-radius: 6px;
}

/* image left */
.m-ti__row--image-left{
  grid-template-areas: "media content";
  grid-template-columns: 1fr 1fr;
}
.m-ti__row--image-left .m-ti__content{ order: 2; padding: clamp(10px, 3vw, 70px);}
.m-ti__row--image-left .m-ti__media{ order: 1; border-radius: 6px; }

.m-ti__row.m-ti__row--image-right .m-ti__content {
    padding: clamp(10px, 3vw, 70px) clamp(10px, 3vw, 70px) clamp(10px, 3vw, 70px) 0px;
}
/* responsive */
@media (max-width: 900px){
  .m-ti__rows{ gap: 36px; }

  .m-ti__row{
        display: flex;
    flex-direction: column;
  }

  .m-ti__row--image-left .m-ti__content, .m-ti__row--image-right .m-ti__content, .m-ti__row.m-ti__row--image-right .m-ti__content {
    padding: 40px 0px 40px 0px;
}

 .m-ti__content {
    padding: 40px 0px 40px 0px;
    order: 2;
}

  .m-ti__media{
    order: 1;
    min-height: 240px;
  }

  .m-ti__row--image-right .m-ti__media,
  .m-ti__row--image-left  .m-ti__media{
    border-radius: 0 0 6px 6px; /* alltid botten på mobile */
  }
}