/**
 * @file
 * Styles for the WDB search results page.
 */

.wdb-search-results {
  list-style: none;
  padding: 0;
  margin-top: 1em;
}

.wdb-search-results li {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.wdb-search-results li:hover {
  background-color: #f9f9f9;
}

.search-result-thumbnail {
  flex-shrink: 0;
  width: 250px;
  height: 250px;
  margin-right: 15px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.search-result-thumbnail img {
  max-width: 100%;
  max-height: 100%;
}

.search-result-text a {
  font-size: 1.1em;
  font-weight: bold;
}

.search-result-text .source-info {
  font-size: 0.9em;
  color: #555;
  margin: 5px 0 0 0;
}

/* Position relative for the SVG overlay. */
.search-result-thumbnail {
  position: relative;
}

.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevents the overlay from blocking clicks on the image below. */
}

.highlight-polygon {
  fill: rgba(255, 255, 255, 0.3);
  stroke: #fff;
  stroke-width: 2px;
}

.constituent-sign-item {
  cursor: pointer;
}

.constituent-sign-item:hover {
  background-color: #e6f0ff !important;
  border-color: #999;
}

/* Responsive: stack thumbnail and text on small screens */
@media (max-width: 600px) {
  .wdb-search-results li {
    flex-direction: column;
    align-items: stretch;
  }

  .search-result-thumbnail {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .search-result-thumbnail img {
    width: 100%;
    height: auto;
  }
}