.kassiopeia-floormap-block{
    display: flex;
    gap:20px;
    justify-content: space-between;
    min-height: 60vh;
    --base-rotation: 60deg;
}

@media screen and (max-width: 768px) {
    .kassiopeia-floormap-block{
        flex-direction: column;
        height: auto;
    }
}

.floors-column{
    flex-basis: 40%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: radial-gradient(circle, #dfdfdf 0%, white 60% 60%);
}
.floors-column.hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    .floors-column{
        order: -1;
    }
}

.floors-3d-container {
    position: relative;
    perspective: 1000px;
    perspective-origin: center center;
    /*min-height: 500px; /* or dynamic */
    transform-style: preserve-3d;
    flex-grow:1;
    height: 100%;
    width: 100%;
    transform: translateY( 5vh );
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 700px;
  }

  @media screen and (max-width: 768px) {
    .floors-3d-container {
       height: 40vh;
    }
  }
  
  .floor-image {
    position: absolute;
    /*width: auto;*/
    /*height: 40vh; /* or fixed height per floor */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
    filter: brightness(0.92);
    cursor: pointer;

    width: auto;
    height: 100%;
    max-width: 85%;
    max-height: 100%;
  }

 

  .floor-image.item-1{
    transform: translateY(10%) translateZ(-0px) rotateX( var(--base-rotation) );
  }
  .floor-image.item-2{
    transform: translateY(-25%) translateZ(0px) rotateX( var(--base-rotation) );
    filter: brightness(0.98);
  }

  .floor-image.active.item-1{
    transform: translateY(10%) translateZ(40px) rotateX( var(--base-rotation) );
  }
  .floor-image.active.item-2{
    transform: translateY(-25%) translateZ(40px) rotateX( var(--base-rotation) );
  }

  .floor-image.active{
    filter: brightness(1);
  }


  .floor-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .floor-image img.shadow {
        position: absolute;
      z-index: -1;
      top: calc(50% + 15px);
      left: 50%;
      transform: translate(-50%, -50%) scale(95%);
      filter: brightness(0) blur(2px);
      opacity: 0.15;
  }


/*----------------------------------------
 Single Floor
----------------------------------------*/
  .single-floor-column{
    display:none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    flex-basis:calc( 40% - 10px );
    flex-grow: 1;
    transition: all 0.3s ease;
  }

  .single-floor-column.active {
    display: flex;
  }

  @media screen and (max-width: 768px) {
    .single-floor-column{
        padding: 40px;
        padding-top: 0px;
        padding-bottom: 0px;
        order: -1;
    }
  }
  /* (this wrapper element is created in js) */
  .single-floor-img-wrapper{
      position: relative;
      display: inline-block;
      max-height: 60vh;
      aspect-ratio: 1;
   
  }

  .single-floor-img-wrapper img{
       max-width: 100%;
      display: inline-block;
  }
/*----------------------------------------
 Infoboxes
----------------------------------------*/

  .floormap-general-info, .selector-column{
    padding: 40px;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
  }

  .selector-column{
    flex-basis: 30%;
    flex-shrink: 0;
    gap: 20px;
    padding-right:0px;
    padding-left: 0px;
    
  }
  @media screen and (max-width: 768px) {
    .selector-column{
        padding: 40px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
  }

/*------------------------
  Floor Selector buttons
------------------------*/
  .floormap-selector-buttons{
    width: 100%;
    display: flex;
    gap: 20px;
  }

  .floormap-selector-buttons.mobile{
    display: none;
    order: -2;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }

  @media screen and (max-width: 768px) {
    /*--------------------------------------------
    Order of UI on mobile is quite different 
    than on desktop, so we need some spesific adjustments
    --------------------------------------------*/
    .floormap-selector-buttons{
        display: none
    }  
    .floormap-selector-buttons.mobile{
      display:flex;
    }
  }

  .floormap-selector-buttons button{
    padding: 15px;
    margin-bottom: 10px;
    
    background-color: #034663;
    background-color: #769db3;
    color: white;
    border-radius: 50px;
    border:0px;
    font-size: 16px;

    font-weight: 500;
    width: 100%;
    cursor: pointer;
  }
  .selector-button:hover, .selector-button.active{
    
    background-color: #769db3;
     background-color: #034663;
    color: white;
  }


  /*-----------------------
   Left side info
-----------------------*/
  .floormap-main-info{
    display:none;
    margin-top:20px;
    width: 100%;
    box-sizing: border-box;
  }
 .floormap-main-info.active{
   display:block;
 }
  .floormap-main-info h3{
    font-size: 16px;
    font-weight: 400;
    margin:0px;
    line-height: 1;
  }
   @media screen and (max-width: 768px) {
    .floormap-main-info h3{
        text-align: center;
    }
   }
   .floormap-main-info h2{
    margin:0px;
    padding:0px;
    font-size: 30px;
    margin-top: 7px;
    font-weight: 600;
    margin-bottom: 17px
   }

   @media screen and (max-width: 768px) {
      .floormap-main-info h2{
        margin-bottom: 30px;
      }
   }
  
   .floormap-main-info p{
    margin:0px;
    font-size: 17px;
    margin-top: 20px;
    line-height: 1.3;
   }
  /*-----------------------
   Middle column info
-----------------------*/

  .extra-info-column{
     flex-basis: calc(30% - 10px);
    flex-shrink: 0;
    border-left: 1px dashed #034663;
    display:none;
  }
  @media screen and (max-width: 768px) {
     .extra-info-column{
        order: 4;
        padding:40px;
        padding-top: 20px;
    }
   }
  .extra-info-column.active{
    display: block;
   
  }


  .floormap-general-info{
    padding-right: 40px;
  }
  @media screen and (max-width: 768px) {
    .floormap-general-info{
        padding: 0px;
    }
  }
  
 

  .floormap-general-info h2,  
  .floormap-general-info h3{
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    font-family: "titillium-web", "fira-sans", sans-serif !important;
    color: #32373c;
  }
    .floormap-general-info h3{
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;;
    }


  .floormap-general-info p,  
  .floormap-general-info ul{
    margin-top:0px !important;
    margin-bottom: 0px !important;
  }

  .floormap-general-info p{
    font-size: 17px;
  }

  .floormap-general-info .info-table{
    width: 100%;
  }

  .floormap-general-info .info-table .row{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    gap:15px;
    font-size: 16px;
    font-weight: 500;
  }
  .floormap-general-info .info-table .row div:first-of-type{
    flex-basis:50%;
    font-weight: 600;
    flex-shrink: 0;
  }

  .info-table .title-row{
    margin-top: 5px;
    margin-bottom: 12px;
  }
  .info-table .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23px;
    height: 23px;
    border: 1.8px solid black;
    border-radius: 50%;
  }
  .info-table img{
    width: 19px;
    height: 19px;
    display: block;
  }
  .info-table.info-rows{
    margin-top:20px;
  }
    
/*-----------------------
 Keskitä mobiiliss
-----------------------*/
  @media screen and (max-width: 768px) {
    .floormap-general-info{
        align-items: center;
      }
      .floormap-general-info p{
        text-align: center;
      }
  }


/*-----------------------
    Pin dots
-----------------------*/

  .floormap-pin-dot{
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid white;
    background: #008fe3;
    border-radius: 50%;

    @media screen and (max-width: 768px) {
        width: 30px;
        height: 30px;
      
    }

  }

  .floormap-pin-dot.active{
    background-color: #0383ce;
    border: 12px solid #a5e9ff;
    box-shadow: 0px 0px 20px white, 0px 0px 20px white;
  }
  
 /*------------------------
    Matterport Link
------------------------*/
.matterport-link{
    position: relative;
    margin-top: 40px;
    /*max-width: 200px;*/
    width: 100%;
}

@media screen and (min-width: 769px) {
    .matterport-link{
        max-width: 300px;
  }  
}

.matterport-link .thumbnail{
    width: 100%;
    height: auto;
    filter: brightness(0.75);
}
.matterport-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
}

/*------------------------
 Download links
------------------------*/
.floormap-downloads{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 60px;
    margin-left: 10px;
}
.floormap-downloads a{
    font-size: 15px;
    text-decoration:none;
    color: #034663;
    font-weight: 600;

}
.floormap-downloads a:hover{
    text-decoration: underline;
    text-decoration-color: #034663;
}