/*
 Theme Name:   Jewish Camp Photo Search
 Theme URI:    https://jewishcamp.org
 Description:  A child theme of Twenty Twenty WordPress theme.
 Author:       FJC
 Author URI:   https://jewishcamp.org
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Import parent theme styles */
@import url("../twentytwenty/style.css");

/* Grid container: each item is min 200px wide, expands to fill space */
.search-grid {
  display: grid;
  grid-gap: 1rem;
  /* On large screens, repeat an element that is at least 200px wide */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0 auto;
  max-width: 100%;
  /* Add some top/bottom padding if you like */
  padding: 2rem;
}

/* Each article item in the grid */
.search-page-item {
 /* background: #000; If you still want a black background */
}

/* The “tile” that holds the thumbnail + overlay */
.search-grid-item {
  position: relative;
  width: 100%;
  overflow: hidden; /* So the overlay doesn't bleed out */
}

/* Force media (images, video, audio) to fill the container width, keep aspect ratio */
.search-grid-item .thumbnail img,
.search-grid-item .thumbnail video,
.search-grid-item .thumbnail audio {
  width: 100%;
  height: auto; /* auto = no crop, preserves aspect ratio */
  display: block;
}

/* The overlay that appears on hover/tap */
.overlay-links {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

/* The link list styling inside the overlay */
.overlay-links .links {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.overlay-links .links li {
  margin: 10px 0;
}

.overlay-links .links li a {
  color: #ffffff;
  background: #444;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
  transition: background 0.3s;
}

.overlay-links .links li a:hover {
  background: #222;
}

/* Show the overlay on hover (desktop) */
.search-grid-item:hover .overlay-links {
  opacity: 1;
  visibility: visible;
}



/* Media Query for narrower screens -> 2 columns */
@media screen and (max-width: 600px) {
  .search-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}