/* Photo galleries in posts (includes/class-umh-gallery.php): justified rows + the full-screen viewer. Oct 18, 2026. */
.umh-gal{margin:28px 0;clear:both;max-width:none}
.umh-gal__grid{display:flex;flex-wrap:wrap;gap:6px}
/* each photo grows in proportion to its shape: rows fill the column and nothing is cropped */
.umh-gal__cell{position:relative;display:block;flex-grow:calc(var(--r) * 100);flex-basis:calc(var(--r) * 150px);aspect-ratio:var(--r);overflow:hidden;background:var(--umh-img-backing,#e9ecef);border-radius:3px;cursor:zoom-in}
.umh-gal__cell img{display:block;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;object-fit:cover;transition:transform .25s ease,opacity .2s}

.umh-gal__cell:focus-visible{outline:3px solid var(--umh-maize,#ffcb05);outline-offset:2px}
.umh-gal__fill{flex-grow:1000000;flex-basis:0;height:0}   /* the last row keeps its natural sizes */
.umh-gal .umh-gal__foot{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin:10px 0 0!important;font:500 var(--umh-fs-meta,13px)/1.4 var(--umh-font-ui,system-ui,sans-serif);color:var(--umh-ink-3,#6b7280)}
.umh-gal__foot a{font-weight:600;text-decoration:none}
@media (max-width:600px){.umh-gal__grid{gap:4px}.umh-gal__cell{flex-basis:calc(var(--r) * 105px)}}
/* desktop (owner, Oct 19, 2026): bigger rows, about three photos across whatever the column's width: the basis is a share of
   the row (3:2 and 16:9 photos both land three to a row; portraits pair up inside a row) */
@media (min-width:1000px){.umh-gal__cell{flex-basis:calc(var(--r) * (100% - 12px) / 5.6)}}

/* the viewer */
html.umh-gal-open,html:has(.umh-gal-view[open]){overflow:hidden}
.umh-gal-view{position:fixed;inset:0;z-index:100000;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,12,20,.97);color:#fff;overflow:hidden}
.umh-gal-view::backdrop{background:rgba(8,12,20,.97)}
.umh-gal-view__stage{position:absolute;inset:56px 72px 76px;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.umh-gal-view__img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.umh-gal-view__bar{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 18px;font:600 14px/1 var(--umh-font-ui,system-ui,sans-serif);font-variant-numeric:tabular-nums}
.umh-gal-view__cap{position:absolute;left:72px;right:72px;bottom:0;min-height:76px;margin:0;padding:14px 0;font:400 14px/1.45 var(--umh-font-ui,system-ui,sans-serif);color:rgba(255,255,255,.85);text-align:center}
.umh-gal-view button{appearance:none;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;width:44px;height:44px;padding:0;font-size:24px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.umh-gal-view button:hover{background:rgba(255,255,255,.22)}
.umh-gal-view button:focus-visible{outline:3px solid var(--umh-maize,#ffcb05);outline-offset:2px}
.umh-gal-view__prev,.umh-gal-view__next{position:absolute;top:50%;transform:translateY(-50%);width:52px!important;height:52px!important;font-size:30px!important}
.umh-gal-view__prev{left:12px}.umh-gal-view__next{right:12px}
.umh-gal-view.is-single .umh-gal-view__prev,.umh-gal-view.is-single .umh-gal-view__next{display:none}
.umh-gal-view__hint{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);font:600 13px/1 var(--umh-font-ui,system-ui,sans-serif);animation:umh-gal-hint 2.4s ease 1 both}
@keyframes umh-gal-hint{0%,70%{opacity:1}100%{opacity:0}}
/* phones: the photo uses the full width; prev / next sit in the bottom bar either side of the caption */
@media (max-width:700px){
  .umh-gal-view__stage{inset:56px 0 88px}
  .umh-gal-view__prev,.umh-gal-view__next{top:auto;bottom:18px;transform:none;width:48px!important;height:48px!important}
  .umh-gal-view__prev{left:12px}.umh-gal-view__next{right:12px}
  .umh-gal-view__cap{left:72px;right:72px;min-height:88px;display:flex;align-items:center;justify-content:center;padding:8px 0;font-size:13px}
}