/* Photo grid layout with breakpoint-controlled column counts */
#gallery {
  display: grid;
  gap: 0rem 0.25rem; /* was originally 1.5rem */
  padding: 0;
  margin: 1.75rem 0rem 0rem 0rem;

  grid-template-columns: 1fr; /* Default to 1×6 layout */
}

#gallery li {
  width: 100%; /* NB. This ensures the figure captions don't shrink with the images */
}

.galleryitem {
    display: block;
}

.photo-thumb {
  /* remove the default padding and margin from all <figure> elements */
  margin: 0rem;
  padding: 0rem;
  text-align: center;
}

.photo-thumb .photo-frame {
  border: 4px solid var(--soul-gold); /* slightly narrower edging */
  /* border: none; */
  box-shadow: none; /* remove shadow */
}

.photo-thumb .corner {
  display: none; /* no scrapbook corners */
}

/* Portrait label structure */
.photo-thumb figcaption {
  margin: 0.5rem 0rem 1.25rem 0rem;
  padding: 0rem 0.25rem;
  letter-spacing: 0.5px;
  text-align: center;
}

/* Portrait photos */
.photo-thumb img {
  min-height: 42px;  /* 2025-09-30 - Added a minimum height */
  max-height: min(70svh, 252px); /* 2025-09-30 - Added a maximum height */
  min-width: 42px;   /* 2025-09-30 - Added a minimum width */
  height: auto;

  max-width: 252px;  /* 2025-09-30 - Changed to 252px */
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: filter 0.4s ease;
  transition: opacity 0.15s ease;
  opacity: 100%;
}

#gallery li .galleryitem img:hover {
  opacity: 40%;
}

#gallery li .galleryitem:focus-visible {
  outline: 2px dashed;
  outline-offset: 8px;
}

@supports not selector(:focus-visible) {
  #gallery li .galleryitem:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 2px dashed;
    outline-offset: 8px;
  }
}

/* Force defined layout at key breakpoints */

/* @media (min-width: 288px) and (max-width: 567px) { */
/* @media (min-width: 18rem) and (max-width: 35.4375) { */
@container body-container (min-width: 18rem) {
  #gallery {
    grid-template-columns: repeat(2, 1fr); /* 2×3 layout */
  }
}
/*@media (min-width: 568px) { */
/* @media (min-width: 35.5rem) { */
@container body-container (min-width: 35.5rem) {
  #gallery {
    grid-template-columns: repeat(3, 1fr); /* 3×2 layout */
  }
}

/* === special intermediate landscape layout case === */
@container body-container (max-height: 15rem) and (min-width: 25.125rem) { /* (max-height: 240px) and (min-width: 402px) */
  #gallery {
    grid-template-columns: repeat(3, 1fr); /* 3×2 layout */
  }
}

/* === narrow landscape layouts === */

/* @media (max-height: 11.25rem) and (min-width: 11.25rem) { */
@container body-container (max-height: 11.1875rem) and (min-width: 11.25rem) {
  #gallery {
    gap: 0.25rem 0rem;
    grid-template-columns: repeat(2, 1fr); /* 2×3 layout */
  }
  .photo-thumb img {
    max-height: min(70svh, 126px);
  }
  .photo-thumb figcaption {
    margin: 0rem 0rem 0.5rem 0rem;
  }
}

/* @media (max-height: 11.25rem) and (min-width: 15.9375) { */
@container body-container (max-height: 11.1875rem) and (min-width: 15.9375rem) {
  #gallery {
    gap: 0.25rem 0rem;
    grid-template-columns: repeat(3, 1fr); /* 3×2 layout */
  }
  .photo-thumb img {
    max-height: min(70svh, 126px);
  }
  .photo-thumb figcaption {
    margin: 0rem 0rem 0.5rem 0rem;
  }
}

/* @media (max-height: 11.25rem) and (min-width: 31.5rem) { */
@container body-container (max-height: 11.1875rem) and (min-width: 31.5rem) {
  #gallery {
    grid-template-columns: repeat(6, 1fr); /* 6×1 layout */
    gap: 0rem 0rem; /* 0rem 0.125rem */

    justify-items: center;
    /* grid-template-rows: repeat(1, 1fr); */

    /* Hack to get pixel perfect layout at certain dimensions
        (when 1rem = 16px) */
    padding: 1px;

  }
  .photo-thumb img {
    max-height: min(70svh, 123px);
  }
  .photo-thumb figcaption {
    margin: 0rem 0rem 0.5rem 0rem;
  }
}