/*
 * Photos page and lightbox. A theme can restyle it by setting --ct-accent, --ct-ink, --ct-surface and --ct-line (on :root or
 * on .ct-gallery). The defaults are fallbacks inside each var() rather than set on .ct-gallery, so a value on :root wins.
 * Text is at least 1.125rem (18px) throughout.
 */
.ct-gallery { color: var(--ct-ink, #1d2a20); }
.ct-album { margin-block: 2rem; }
.ct-album h2 { margin-bottom: .75rem; }
.ct-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ct-item { margin: 0; }
.ct-photo { display: block; border: 2px solid var(--ct-line, #cfd2cf); border-radius: 6px; overflow: hidden; background: var(--ct-surface, #ffffff); }
.ct-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Focus ring: dark on the light page, yellow inside the dark lightbox (a dark ring there would be ~1.1:1 contrast). */
.ct-photo:focus-visible, .ct-button:focus-visible { outline: 4px solid #1a1a1a; outline-offset: 3px; }
.ct-lightbox button:focus-visible { outline: 4px solid #ffdd00; outline-offset: 3px; }
.ct-button {
  display: inline-block; padding: 14px 20px; min-height: 48px; background: var(--ct-accent, #004712); color: #fff !important;
  font-weight: 700; font-size: 1.125rem; border-radius: 6px; text-decoration: none; border: 2px solid var(--ct-accent, #004712);
}
.ct-button--quiet { background: var(--ct-surface, #ffffff); color: var(--ct-accent, #004712) !important; }
.ct-pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.5rem; }
.ct-removal, .ct-empty { margin-top: 2rem; padding: 14px 16px; background: #edebec; border-radius: 6px; font-size: 1.125rem; }
.ct-gallery .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ct-lightbox { border: 0; padding: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; background: #101410; color: #fff; }
.ct-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.ct-lightbox[open] { display: flex; flex-direction: column; }
.ct-lightbox__bar, .ct-lightbox__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.ct-lightbox__figure { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; }
.ct-lightbox__img { max-width: 100%; max-height: calc(100vh - 220px); object-fit: contain; }
.ct-lightbox__caption { font-size: 1.125rem; text-align: center; }
.ct-lightbox button { min-height: 56px; min-width: 112px; padding: 12px 22px; font-size: 1.15rem; font-weight: 700; color: #101410; background: #fff; border: 3px solid #fff; border-radius: 6px; cursor: pointer; }
.ct-lightbox__count { font-size: 1.125rem; }