/* ─── Gallery (responsive grid + lightbox widget) ──────────────────────
   Responsive image grid (2/3/4-up by default), tiles cropped square via
   aspect-ratio, tighter gap than the content .hzo-grid. Behavior (the
   lightbox) lives in gallery.js; options in gallery.js + gallery.php.

   Variant sheets are @imported here so the component loader — which enqueues
   only gallery.css — pulls them on the same request (widget convention). */
@import './gallery-lightbox.css?ver=1787769613';
@import './gallery-masonry.css?ver=1787769613';

/* Column counts + gap are overridable via CSS vars the [hzo_gallery]
   shortcode emits (columns / columns-md / columns-sm / gap). The var()
   fallbacks ARE the legacy values, so attribute-free markup renders
   identically to the pre-widget grid. */
.hzo-gallery { display: grid; grid-template-columns: repeat(var(--hzo-gallery-cols-sm, 2), 1fr); gap: var(--hzo-gallery-gap, var(--space-sm)); }
@media (min-width: 768px)  { .hzo-gallery { grid-template-columns: repeat(var(--hzo-gallery-cols-md, 3), 1fr); } }
@media (min-width: 1024px) { .hzo-gallery { grid-template-columns: repeat(var(--hzo-gallery-cols, 4), 1fr); } }
.hzo-gallery__item { display: block; overflow: hidden; border-radius: var(--radius-control); aspect-ratio: 1 / 1; background: var(--bg-alt); }
.hzo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow, 400ms) var(--ease-standard, ease); }
a.hzo-gallery__item:hover img { transform: scale(1.05); }
a.hzo-gallery__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .hzo-gallery__item img { transition: none; }
    a.hzo-gallery__item:hover img { transform: none; }
}