/* Companion styles for gallery-lazy.js */
/* Hidden until masonry has positioned the tiles; the delayed animation is a fallback if the script never runs. */
[data-lazy-gallery-wrap]:not(.is-laid-out) {
  visibility: hidden;
  animation: gallery-reveal 0s 3s forwards;
}
@keyframes gallery-reveal {
  to { visibility: visible; }
}
/*
 * Tile ratio = the JPEG crop the WordPress site loaded for sizes="(max-width: 768px) 140px, (max-width: 1024px) 273px, 100vw"
 * with crops 320w/586w/826w: the smallest crop with width >= sizes × DPR. The crops' ratios differ by rounding,
 * and masonry is sensitive to that, so matching them keeps tiles in the same columns as on the original site.
 */
img[data-lazy-gallery] {
  aspect-ratio: var(--ar-826);
  object-fit: cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: inset(0);
}
@media (max-width: 1024px) {
  img[data-lazy-gallery] { aspect-ratio: var(--ar-586); }
}
@media (max-width: 1024px) and (max-resolution: 1.172dppx) {
  img[data-lazy-gallery] { aspect-ratio: var(--ar-320); }
}
@media (max-width: 1024px) and (min-resolution: 2.147dppx) {
  img[data-lazy-gallery] { aspect-ratio: var(--ar-826); }
}
@media (max-width: 768px) {
  img[data-lazy-gallery] { aspect-ratio: var(--ar-586); }
}
@media (max-width: 768px) and (max-resolution: 2.285dppx) {
  img[data-lazy-gallery] { aspect-ratio: var(--ar-320); }
}
@media (max-width: 768px) and (min-resolution: 4.186dppx) {
  img[data-lazy-gallery] { aspect-ratio: var(--ar-826); }
}
img[data-lazy-gallery].is-loaded {
  animation: gallery-focus-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes gallery-focus-in {
  from { filter: blur(14px); }
  to { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  img[data-lazy-gallery].is-loaded { animation: none; }
}