/*
Blocks from CUBE CSS
A block is a skeletal component or organizational structure.
*/

.content {
  padding: var(--space-m);
  margin-top: var(--space-m);
}

/*
Navigation
*/

nav {
  display: flex;
  align-items: center;

  ul {
    justify-content: flex-end;
  }

  .nav-list {
    justify-content: flex-end;
    font-size: var(--text-lg);
  }
}

.nav-list {
  display: flex;

  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  width: 100%;
  font-size: var(--text-m);

  li {
    list-style: none;
    display: inline-block;
    padding-left: var(--space-m);
  }

  a {
    text-decoration: none;
  }
}

/*
Gallery Cards
*/

.galleryCover img {
  border-radius: var(--space-m);
}

.galleries {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: var(--space-m);
  place-content: center;
  margin-top: var(--space-m);

  figure {
    padding: var(--space-s);
    text-align: center;
  }

  figcaption {
    font-family: var(--font-title);
    font-size: var(--text-m);
    margin-top: var(--space-3xs);
  }
}

/*
Image Cards
*/

.image-grid {
  margin-top: var(--space-m);
  display: grid;
  /* Creates 3 columns of equal width that take up available space */
  grid-template-columns: repeat(3, 1fr);
  /* Sets a fixed height for rows, 'auto' ensures rows can expand if content needs more space */
  grid-auto-rows: minmax(200px, auto);
  gap: var(--space-xs); /* Adds space between grid items */
  padding: var(--space-xs);
}

.image-grid img {
  width: 100%;
  height: 100%;
  /* Ensures images fill their cell while maintaining aspect ratio, preventing distortion */
  object-fit: cover;
  /* Fixes potential alignment issues with images inside grid cells */
  display: block;
}

@media (max-width: 600px) {
  .image-grid {
    /* Changes to 2 columns on screens up to 600px wide */
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
gLightbox overrides
*/

.glightbox-clean .gslide-description {
  background: rgba(0, 0, 0, 0.92);
}

.glightbox-clean .gdesc-inner {
  padding: var(--space-2xs);
}

.glightbox-clean .gslide-media {
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}