/* Styling */
.lwd-maps-wrap { height: var(--lwd-height, 600px); display: grid; grid-template-columns: 70% 30%; gap: 12px; }
.lwd-maps-map  { height: 100%; width: 100%; min-height: 300px; }
.lwd-maps-sidebar { display:flex; flex-direction:column; gap:10px; }

.lwd-maps-filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.lwd-locations-search{ flex:1 1 220px; padding:8px; }
.lwd-locations-category{ min-width:180px; padding:8px; height: 52px; }
.lwd-locations-search-btn{ padding:8px 12px; cursor:pointer; width:100%; }
.lwd-locations-list{ flex:1; overflow:auto; border:1px solid var(--e-global-color-accent); border-radius:0; padding:8px; min-height: 100px; max-height: 145px; }
.lwd-locations-item{ padding:8px; border-bottom:1px solid #eee; cursor:pointer; }
.lwd-locations-item:hover{ background:#fafafa; }
.lwd-locations-detail{ border:1px solid var(--e-global-color-accent); border-radius:0; padding:10px; max-height:40%; overflow:auto; }
.lwd-maps-empty{ padding:12px; color:#6b7280; font-size:14px; }

.lwd-detail-title, h3.lwd-detail-title { margin:0 0 .25rem; font-weight:700; font-size:18px; }
.lwd-detail-address { color:#374151; margin-bottom:.35rem; }
.lwd-detail-excerpt { color:#4b5563; font-size:.95rem; }
.lwd-detail-link a { display:inline-block; margin-top:.35rem; text-decoration:underline; }

.lwd-locations-item { cursor: pointer; transition: background-color .15s ease; }
.lwd-locations-item:hover { background-color: rgba(0,0,0,.04); }

.lwd-locations-item .lwd-locations-country { margin-right: 10px; display:none; }
.lwd-locations-item .lwd-locations-company { margin-left: 10px; display:none; }

.lwd-maps-sidebar .lwd-locations-list {
  max-height: 520px;
  height: 100%;
  transition: max-height .3s ease, opacity .2s ease;
}
/*
.lwd-maps-sidebar.has-detail .lwd-locations-list {
  max-height: 145px;
}*/

.lwd-locations-detail .lwd-detail-thumb img {
    max-height: 200px;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 9;
}

.lwd-locations-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  border: 0;
  width: 0;
  height: 0;
  transition: max-height .3s ease, opacity .2s ease;
  position: relative;
}  
.lwd-locations-detail.is-active {
  max-height: 1000px; /* ausreichend großer Wert */
  height: 100%;
  opacity: 1;
  border:1px solid var(--e-global-color-accent);
  border-radius:0;
  max-height:375px;
  overflow:auto;
  
  position: absolute;
  background: rgb(255, 255, 255);
  max-height: fit-content;
  border:1px solid var(--e-global-color-accent);
  z-index: 9;
  left: 0px;
  width: 340px;
  margin-top: 15px;
  margin-left: 12px;
  box-shadow: 5px 5px 10px #00000059;
}
.lwd-locations-detail .lwd-detail-close {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
}

.lwd-locations-detail .lwd-detail-title,
.lwd-locations-detail .lwd-detail-address,
.lwd-locations-detail .lwd-detail-contacts-row,
.lwd-locations-detail .lwd-detail-categories,
.lwd-locations-detail .lwd-detail-link {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 5px;
}
.lwd-locations-detail .lwd-detail-title {
	padding-top: 30px;
	padding-bottom: 0;
}
.lwd-locations-detail > div:not([style*="display:none"]):last-child{ padding-bottom: 30px;}

.lwd-locations-detail .lwd-detail-categories {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

.lwd-detail-contacts-row{display:flex;gap:3px;flex-wrap:wrap;align-items:flex-start;flex-direction:column;align-content:flex-start;margin:.5rem 0 0;padding:0;list-style:none}
.lwd-contact-link,.lwd-contact-span{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.lwd-contact-item i{font-size:1rem;line-height:1}
.lwd-contact-text{white-space:nowrap}

.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right {
	bottom: 14px;
}

@media (max-width: 1024px){
  .lwd-maps-wrap{ grid-template-columns: 1fr; grid-template-rows: 60% 40%; }
}


@media (max-width: 768px){
  .lwd-maps-wrap {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: fit-content;
	}
  .lwd-maps-map, .lwd-maps-map .mapboxgl-canvas {
		height: 100%;
		max-height: 350px;
  }
  .lwd-locations-detail.is-active {
		position: relative;
		min-height: 300px;
		margin: 0;
		width: 100%;
  }
  
  .lwd-maps-sidebar .lwd-maps-filters {
		order: 1;
  }  
  .lwd-maps-sidebar .lwd-locations-detail.is-active {
		order: 0;
  }  
  .lwd-maps-sidebar .lwd-locations-list {
		order: 2;
  }
  
  .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right {
	bottom: 0;
  } 
  .mapboxgl-control-container .mapboxgl-ctrl-attrib-button {
	  padding: 0;
  }
  
}