/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1076 {
        padding: var(--sectionPadding);
        background-color: var(--secondaryLight);
    }
    #sbsr-1076 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-1076 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        /* changes to 433px at desktop */
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-1076 .cs-text {
        margin-bottom: 0.5rem;
        
    }
    #sbsr-1076 .cs-text:last-of-type {
        margin-bottom: 1rem;
    }
    #sbsr-1076 .cs-list {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }
    #sbsr-1076 .cs-li {
        list-style: none;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #sbsr-1076 .cs-li:before {
        /* bullet */
        content: "";
        width: 1rem;
        height: 1rem;
        margin-top: 0.1875rem;
        /* make it overflow the parent by half it's width to make an eclipse */
        margin-left: -0.5rem;
        background: var(--primary);
        border-radius: 50%;
        display: block;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #sbsr-1076 .cs-link {
        text-decoration: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }
    #sbsr-1076 .cs-link:hover .cs-wrapper {
        transform: scale(1.1);
    }
    #sbsr-1076 .cs-wrapper {
        width: 3.5rem;
        height: 3.5rem;
        background-color: var(--primary);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition: transform 0.3s;
    }
    #sbsr-1076 .cs-icon {
        width: 1.5rem;
        height: auto;
        display: block;
        transition: transform 0.3s;
        filter: brightness(0) invert(1);
    }
    #sbsr-1076 .cs-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #sbsr-1076 .cs-header {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #sbsr-1076 .cs-link-content {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 4vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
    #sbsr-1076 .cs-image-group {
        /* scales the whole group based on the view width size and stop when that vales equals .745em, resets at desktop */
        font-size: min(1.959vw, 0.745em);
        width: 46.125em;
        height: 41.375em;
        display: block;
        position: relative;
        z-index: 1;
    }
    #sbsr-1076 .cs-picture {
        position: absolute;
    }
    #sbsr-1076 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #sbsr-1076 .cs-picture1 {
        width: 13.6875em;
        height: 27.5em;
        top: 6.375em;
        right: 0;
        z-index: -1;
    }
    #sbsr-1076 .cs-picture2 {
        width: 19.1875em;
        height: 37.5em;
        bottom: 0;
        right: 13.5625em;
        z-index: 10;
    }
    #sbsr-1076 .cs-picture3 {
        width: 13.625em;
        height: 27.5em;
        top: 11.375em;
        left: 0;
        z-index: -1;
    }
    #sbsr-1076 .cs-stripes {
        width: 36.125em;
        height: auto;
        display: block;
        position: absolute;
        top: 0em;
        right: 4.5em;
        z-index: -2;
        opacity: 0.25;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 73rem) {
    #sbsr-1076 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #sbsr-1076 .cs-content {
        max-width: 27.0625rem;
    }
    #sbsr-1076 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
        /* sends it to the right in the 2nd position */
        
        order: 2;
    }
    #sbsr-1076 .cs-li {
        min-width: 60ch;
    }
}


/* ============================================
   Process – Installation med ventilationsrör
   ============================================ */

#process-2410 {
  padding: var(--sectionPadding);
  background-color: var(--secondaryLight);
  overflow: hidden; /* stoppar sidscroll */
  margin-bottom: -5rem;
}

#process-2410 .cs-container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

#process-2410 .cs-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#process-2410 .cs-title {
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
  max-width: 30ch;
}

#process-2410 .cs-text {
  color: var(--headerColor);
  font-size: 1.125rem;
  line-height: 1.5em;
}

/* ==========================
   Steps + Ventilationsrör
   ========================== */

#process-2410 .cs-steps {
  margin: 0;
  padding: 2rem 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  gap: 0;
}


/* Enskilda steg */
#process-2410 .cs-step {
  background: var(--secondaryLight);
  border: 1px solid var(--primary);
  border-radius: 1rem;
  aspect-ratio: 1.25 / 1;
  padding: clamp(1.25rem, 2vw, 1rem);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem 1rem;
  align-items: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 3px 8px var(--primary), 0 4px 12px var(--primary);
  z-index: 1;
  width: 100%;
  min-width: 17rem;
  max-width: 19rem;
  height: 300px;
}

#process-2410 .cs-step:hover {
  box-shadow: inset 0 3px 12px var(--primary);
  transform: scale(1.1);
}

/* --- Röret mellan stegen --- */
#process-2410 .cs-pipe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: scaleX(1.08); /* slickar väggarna utan overflow */
  
}

#process-2410 .cs-pipe img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  opacity: 0.95;
  margin: 0;
  transform: translateY(2px);
}

/* --- Badge --- */
#process-2410 .cs-step-badge {
  grid-row: 1 / span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--secondary);
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--secondary), 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Text */
#process-2410 .cs-h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.35em;
}
#process-2410 .cs-item-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55em;
  color: var(--headerColor);
  height: 180px;
  
}

/* ================
   RESPONSIVITET
   ================ */

/* ============================================
   ANIMERAD FÖRSVINNING AV RÖR VID 1300PX
   ============================================ */

/* Grundläge för rör – synliga */
#process-2410 .cs-pipe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: scaleX(1.08);
  transition: all 0.6s ease-in-out; /* smooth animation */
  clip-path: inset(0 0 0 0 round 10px); /* för snygg rundning */
  opacity: 1;
}

/* Röret självt */
#process-2410 .cs-pipe img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  opacity: 0.95;
  margin: 0;
  transform: translateY(2px);
  transition: all 0.6s ease-in-out;
}

/* Vid 1300px och mindre – “rören dras in” */
@media (max-width: 81.25rem) {
  #process-2410 .cs-pipe {
    opacity: 0;
    transform: scaleX(0.5);
    clip-path: inset(0 50% 0 50% round 10px);
  }
 
  #process-2410 .cs-pipe img {
    transform: scaleX(0.5);
  }
 
}

@media (max-width: 78rem) {
   #process-2410 .cs-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: stretch;
    width: auto;
  }
  #process-2410 .cs-pipe {
    display: none;
  }
  #process-2410 .cs-step {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 0;
    max-width: calc(50% - 0.75rem);
    width: calc(50% - 0.75rem);
    height: 200px;
    text-align: start;
    transform: none ;
  }
  #process-2410 .cs-item-text{
    width: auto;
    height: auto;
  }
}

/* Mellanstor skärm (tablet-läge) */
@media (max-width: 63rem) {
  #process-2410 .cs-steps {
    
    gap: 1.5rem;
    align-items: center;
  }

  #process-2410 .cs-step {
    transform: none ;
    
  }
}

/* Mobil */
@media (max-width: 47rem) {
  #process-2410 .cs-steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
  }

  #process-2410 .cs-step {
    width: 100%;
    max-width: 350px;
    height: 250px;
    transform: none ;
  }
}
/* ===== PATCH: Process – rätt storlekar med pipe mellan kort ===== */

/* 1) Bas: flexrad med fasta pipes och exakta kortbredder */
#process-2410 .cs-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;                  /* avstånd hanteras av pipe-bredden */
  list-style: none;
  margin: 0;
  padding: 2rem 0;
}

/* --- Pipe: behandlas som distans (inte ett kort) --- */
#process-2410 .cs-pipe {
  flex: 0 0 90px;          /* ⬅️ fast bredd, förstör inte wrap */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#process-2410 .cs-pipe img {
  width: 55px;
  height: auto;
  display: block;
  opacity: 0.95;
}

/* --- Kort: exakt 4 per rad när pipes är synliga --- */
#process-2410 .cs-step {
  /* 100% minus 3 pipes (á 90px) delat på 4 kort = exakt fyra i rad */
  flex: 0 0 calc((100% - (3 * 90px)) / 4);
  max-width: calc((100% - (3 * 90px)) / 4);
  min-width: 220px;

  /* ta bort tvångsmått som skapat tomrum/overflow */
  height: auto ;
  aspect-ratio: auto ;

  /* inre layout: badge till vänster om h3, text under i full bredd */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  gap: 0.75rem 1rem;
  align-items: start;
  overflow: hidden;        /* säkerställer att inget rinner utanför */
}

/* Badge (oförändrat beteende: till vänster om h3) */
#process-2410 .cs-step-badge {
  grid-row: 1 / span 2;
}

/* Rubrik */
#process-2410 .cs-h3 {
  margin: 0;
  line-height: 1.35em;
}

/* Texten: full bredd under badge + h3, utan fast höjd */
#process-2410 .cs-item-text {
  grid-column: 1 / -1;
  width: 100%;
  height: auto ;
  margin: 0;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 2) Tablet: dölj pipes och kör 2 kolumner, aldrig 3+1 */
@media (max-width: 78rem) {
  #process-2410 .cs-pipe { display: none; }
  #process-2410 .cs-step {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    margin: 0.5rem;
  }
}

/* 3) Mobil: 1 kolumn, inga fasta höjder → inget tomrum */
@media (max-width: 47rem) {
  #process-2410 .cs-step {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
    padding: 1.25rem;
  }
}

/* ============================================
   CTA – Service
   ============================================ */
#cta-service {
  padding: var(--sectionPadding);
  background-color: var(--primary);
  text-align: center;
  color: var(--secondary);
  position: relative;
}

#cta-service .cs-container {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

#cta-service .cs-title {
  color: var(--secondary);
  font-size: clamp(2rem, 4vw, 2.75rem);
}

#cta-service .cs-text {
  color: var(--bodyTextColorWhite);
  max-width: 45rem;
}

#cta-service .cs-button-solid {
  background-color: #a38635;
  color: var(--secondary);
  padding: 0.9rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  margin-top: 1.5rem;
}

#cta-service .cs-button-solid:hover {
  background-color: var(--secondary);
  color: var(--primary);
  transform: scale(1.05);
}

                                

     .cs-topper {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 1rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    }
    .cs-topper:before {
        /* decorative line */
        content: "";
        /* 16px - 32px */
        width: clamp(1rem, 3vw, 2rem);
        height: 2px;
        background: var(--accentDetail);
        opacity: 1;
        position: relative;
        display: block;
    }