.kliently-shm {
    padding:6rem 0 1rem 0;
}

.kliently-shm h1 {
    margin-top: 0;
}

/* Desktop: två kolumner */
.kliently-shm__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.25rem;
  align-items:start;
}

/* Visa desktop-bilden, göm float-bilden */
.kliently-shm__media--side{ display:block; }
.kliently-shm__media--float{ display:none; }

.kliently-shm__image{
  width:100%;
  height:auto;
  display:block;
}

/* AVTALSBLOCKET */

.kliently-service-documents {
    border: 1px solid var(--primary-dark);
    padding:20px 20px 30px;
    border-radius: 6px;
}

.kliently-service-documents h2, .kliently-service-documents h3 {
    margin-top: 8px;
}

.kliently-service-documents__badge-text {
    font-size: 0.8rem;
    background-color: var(--justice-grey-50);
    padding:2px 4px;
}

.kliently-service-documents__item {
    border: 1px solid var(--primary-pink);
    padding:14px 14px 10px;
    border-radius: 6px;
    color:black;
    text-decoration: none;
}

.kliently-service-documents__item-price {
    font-weight: 900;
    font-size: 1.35rem;
    color:var(--primary-pink);
}


/* Mellanläge: en kolumn men med float-wrap */
@media (max-width: 1100px){
  .kliently-shm__grid{ display:block; }

  /* Göm desktop-bilden, visa float-bilden */
  .kliently-shm__media--side{ display:none; }
  .kliently-shm__media--float{ display:block; }

  .kliently-shm__media--float{
    float:right;
    width:42%;
    margin:0 0 1rem 1rem;
  }

  /* clearfix så wrappern inte kollapsar */
  .kliently-shm__col--text::after{
    content:"";
    display:block;
    clear:both;
  }
}

/* Mobil: ingen float, bara stack */
@media (max-width: 782px){
  .kliently-shm__media--float{
    float:none;
    width:100%;
    margin:0 0 1rem 0;
  }
}