/* ACC Photo Gallery — justified rows + lightbox. */ .acc-gal__nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .acc-gal__navlink { padding: 0.35rem 0.95rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border, #c9c2ad); background: var(--wp--preset--color--surface, #f6f8f6); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none !important; color: var(--wp--preset--color--primary, #1a3a1f); } .acc-gal__navlink:hover { border-color: var(--wp--preset--color--leaf, #3d6b3f); color: var(--wp--preset--color--leaf, #3d6b3f); } .acc-gal__section { margin-bottom: 3rem; } .acc-gal__heading { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 1.5rem; color: var(--wp--preset--color--primary, #1a3a1f); border-bottom: 2px solid var(--wp--preset--color--primary, #1a3a1f); padding-bottom: 0.4rem; margin: 0 0 1rem; } .acc-gal__count { font-family: var(--wp--preset--font-family--sans, sans-serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5b5847); margin-left: 0.5rem; } /* Justified rows: every row shares a height, widths follow each photo's natural aspect ratio — small photos take less width instead of upscaling. */ .acc-gal__rows { display: flex; flex-wrap: wrap; gap: 6px; } .acc-gal__item { height: 220px; flex-grow: calc(var(--w) / var(--h) * 100); flex-basis: calc(var(--w) / var(--h) * 220px); overflow: hidden; border-radius: 6px; display: block; } .acc-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .acc-gal__item:hover img { transform: scale(1.04); } /* Keeps the last row from stretching a lone photo across the page. */ .acc-gal__spacer { flex-grow: 1000; } @media (max-width: 600px) { .acc-gal__item { height: 140px; flex-basis: calc(var(--w) / var(--h) * 140px); } } @media (prefers-reduced-motion: reduce) { .acc-gal__item img { transition: none; } .acc-gal__item:hover img { transform: none; } } /* Lightbox — capped at the photo's natural width, never upscaled. */ .acc-gal-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; /* Centered with `justify-content` the overflow spills equally top and bottom and neither end can be reached; in short landscape that hid the caption and cropped the photo. Scroll the container instead and let auto margins do the centering while it still fits. */ justify-content: flex-start; background: rgba(13, 43, 18, 0.92); padding: 4.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; } .acc-gal-lightbox > img { margin-top: auto; } .acc-gal-lightbox__credit { margin-bottom: auto; } /* body { overflow: hidden } alone loses to the theme's `html, body { overflow-x: clip }` — has to be pinned too. */ body.acc-gal-open { overflow: hidden; } html:has(body.acc-gal-open) { overflow: hidden; } .acc-gal-lightbox[hidden] { display: none; } .acc-gal-lightbox img { max-width: min(92vw, calc(var(--nw, 2000) * 1px)); max-height: 78vh; /* fallback for engines without dvh */ max-height: min(78dvh, 78vh); width: auto; height: auto; border-radius: 6px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); } .acc-gal-lightbox__caption { color: #f6f8f6; font-size: 0.95rem; margin: 0.9rem 0 0; text-align: center; max-width: 70ch; } .acc-gal-lightbox__credit { color: rgba(246, 248, 246, 0.7); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.25rem 0 0; } .acc-gal-lightbox__close, .acc-gal-lightbox__prev, .acc-gal-lightbox__next { position: absolute; border: 0; background: rgba(246, 248, 246, 0.12); color: #f6f8f6; font-size: 1.6rem; line-height: 1; border-radius: 50%; width: 2.6rem; height: 2.6rem; cursor: pointer; } .acc-gal-lightbox__close:hover, .acc-gal-lightbox__prev:hover, .acc-gal-lightbox__next:hover { background: rgba(246, 248, 246, 0.25); } .acc-gal-lightbox__close { top: 1rem; right: calc(1rem + env(safe-area-inset-right)); } .acc-gal-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); } .acc-gal-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); } /* At phone width the image spans nearly the full screen, so arrows pinned to the sides sit squarely on the photo. Park them below it; swipe also works. */ @media (max-width: 619px) { .acc-gal-lightbox__prev, .acc-gal-lightbox__next { top: auto; transform: none; bottom: calc(0.9rem + env(safe-area-inset-bottom)); width: 2.9rem; height: 2.9rem; } .acc-gal-lightbox__prev { left: 25%; } .acc-gal-lightbox__next { right: 25%; } .acc-gal-lightbox { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } } /* Progressive reveal: photos past the first 24 in a category stay out of the layout (and unloaded) until "show all" is clicked. */ .acc-gal__item--extra { display: none; } .acc-gal__morewrap { margin: 1.25rem 0 0; text-align: center; } .acc-gal__more { padding: 0.55rem 1.5rem; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--primary, #1a3a1f); background: transparent; color: var(--wp--preset--color--primary, #1a3a1f); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } .acc-gal__more:hover { background: var(--wp--preset--color--primary, #1a3a1f); color: var(--wp--preset--color--background, #faf7f0); }