/* Simple gallery — replaces unitegallery (justified tiles + lightbox). */
.sg-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-grid::after { content: ""; flex-grow: 999999; } /* keep the last row from stretching */
.sg-item {
    position: relative; display: block; height: var(--h, 150px); max-width: 100%;
    overflow: hidden; border-radius: 10px; background: #e9efe9; cursor: zoom-in;
}
.sg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.sg-item::after {
    content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 26px; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s ease;
}
.sg-item:hover img, .sg-item:focus-visible img { transform: scale(1.06); }
.sg-item:hover::after, .sg-item:focus-visible::after { opacity: 1; }
.sg-item:focus-visible { outline: 3px solid #05ae00; outline-offset: 2px; }

/* Lightbox */
.sg-lb {
    position: fixed; inset: 0; z-index: 100002; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .92); touch-action: pan-y;
}
.sg-lb.open { display: flex; }
.sg-lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); user-select: none; }
.sg-lb img.loading { opacity: .3; }
.sg-lb button {
    position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.sg-lb button:hover, .sg-lb button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.sg-lb .sg-close { top: 16px; right: 16px; }
.sg-lb .sg-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.sg-lb .sg-next { right: 16px; top: 50%; transform: translateY(-50%); }
.sg-lb .sg-count { position: absolute; top: 24px; left: 20px; color: #ddd; font-size: 14px; }
.sg-lb .sg-cap { position: absolute; bottom: 18px; left: 16px; right: 16px; text-align: center; color: #eee; font-size: 14px; }
@media (max-width: 575px) {
    .sg-grid { gap: 4px; }
    .sg-item { border-radius: 6px; }
    .sg-lb .sg-prev, .sg-lb .sg-next { top: auto; bottom: 56px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sg-item img { transition: none; } }