/* Modern CSS Grid Gallery Styles */

/* Main page container */
.page-container {
  max-width: 796px;
  margin: 0 auto;
  background-color: #FFFFFF;
}

.red-text {
  color: #FF0000;
}

.center-text {
  text-align: center;
}

/* Site Header */
.site-header {
  width: 100%;
  border: solid 1px;
  margin: 0 auto;
}

.header-logo {
  width: 100%;
}

.header-logo img {
  width: 100%;
  display: block;
}

.site-nav {
  text-align: center;
  padding: 0.5rem 0;
}

/* Site Footer */
.site-footer {
  min-height: 38px;
  text-align: center;
  font-size: smaller;
  padding: 1rem 0;
}

/* Gallery content wrapper */
.gallery-content {
  max-width: 786px;
  margin: 0 auto;
  padding: 0 7px; /* Replaces spacer td elements */
  text-align: center;
}

/* General content container */
.content-container {
  max-width: 786px;
  margin: 0 auto;
  padding: 1rem 7px;
}

.content-container.bordered {
  border: solid 1px;
}

/* Gallery section */
.gallery-section {
  margin-bottom: 2rem;
}

/* Section title */
.gallery-title {
  text-align: center;
  font-weight: bold;
  font-size: 200%;
  margin: 1rem 0;
}

/* Image grid - CSS Grid approach */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px; /* Replaces margin:2px + padding:2px on each side */
  margin: 1rem 0;
}

.image-grid a {
  display: block;
}

.image-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* For rows with fewer than 3 images - center them */
.image-grid.sparse {
  justify-items: center;
}

/* Single image display (for detail pages) */
.single-image-container {
  max-width: 786px;
  margin: 1rem auto;
  padding: 0 7px;
  text-align: center;
}

.single-image-container img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsive design */
@media (max-width: 799px) {
  .page-container,
  .gallery-content,
  .single-image-container {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .site-header {
    border: none;
  }
  
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
  }
  
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-title {
    font-size: 150%;
  }
}

@media (max-width: 600px) {
  .site-nav button {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
  }
  
  .image-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-title {
    font-size: 120%;
  }
}