/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*masonry gallery op cpt showroom item*/
.showroom-masonry{
  column-count: 3;
  column-gap: 14px;
  margin-top: 42px;
}

@media (max-width: 849px){
  .showroom-masonry{ column-count: 2; }
}

@media (max-width: 549px){
  .showroom-masonry{ column-count: 1; }
}

.showroom-masonry-item{
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.showroom-masonry-item img{
  width: 100%;
  height: auto;
  display: block;
}

/*archive cpt showroom item*/
.showroom-archive-item .entry-image{
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.showroom-archive-item .entry-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Archive - Masonry via CSS columns */
.showroom-archive-masonry{
  column-count: 2;
  column-gap: 18px;
	margin-top: 42px;
}

@media (max-width: 849px){
  .showroom-archive-masonry{ column-count: 2; column-gap: 14px; }
}

@media (max-width: 549px){
  .showroom-archive-masonry{ column-count: 1; }
}

/* Card in masonry */
.showroom-card{
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Media wrapper + image behavior */
.showroom-card-media{
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* mag je later aanpassen */
}

.showroom-card-media img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .35s ease;
}

/* Overlay title + read more */
.showroom-card-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
  color: #fff;
  transition: opacity .25s ease;
}

.showroom-card-title{
  margin: 0 0 6px;
  line-height: 1.2;
  color: #fff;
}

.showroom-card-more{
  display: inline-block;
  font-size: 0.9em;
  opacity: .9;
}

/* Hover effect (Flatsome-ish) */
.showroom-card-link:hover .showroom-card-media img{
  transform: scale(1.06);
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}