/* Native replacements for the three captured Squarespace layout controllers.
   Typography, captions, colors, section padding and image focal points remain
   in the captured styles. The static grid is usable before/without JavaScript. */
[data-match-native-layout="gallery-masonry"] > .gallery-masonry-wrapper,
[data-match-native-layout="blog-masonry"] {
  display: grid !important;
  grid-template-columns: repeat(var(--match-layout-columns, 2), minmax(0, 1fr));
  column-gap: var(--match-layout-gap, 4.5%);
  row-gap: var(--match-layout-row-gap, 1.5vw);
  position: relative;
  width: 100%;
}
[data-match-native-layout="gallery-masonry"] .gallery-masonry-item,
[data-match-native-layout="blog-masonry"] > .blog-item {
  position: relative !important;
  inset: auto !important;
  width: auto;
  min-width: 0;
  margin: 0;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
  transition: none !important;
}
[data-match-native-layout="gallery-masonry"] .gallery-masonry-item-wrapper,
[data-match-native-layout="gallery-grid"] .gallery-grid-item-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}
[data-match-native-layout="gallery-masonry"] .gallery-masonry-item-wrapper,
[data-match-native-layout="blog-masonry"] .image-wrapper {
  position: relative;
  display: block;
  height: auto !important;
  aspect-ratio: var(--match-image-ratio, 1);
  overflow: hidden;
}
[data-match-native-layout="gallery-masonry"] .gallery-masonry-item-wrapper img,
[data-match-native-layout="blog-masonry"] .image-wrapper img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
/* Local packing uses the original left-to-right, shortest-column order. */
[data-match-native-layout="gallery-masonry"] > .gallery-masonry-wrapper[data-match-packed],
[data-match-native-layout="blog-masonry"][data-match-packed] {
  display: block !important;
}
[data-match-native-layout="gallery-masonry"] > .gallery-masonry-wrapper[data-match-packed] > .gallery-masonry-item,
[data-match-native-layout="blog-masonry"][data-match-packed] > .blog-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
/* The original site's custom CSS intentionally turns these grids into a
   30-second moving strip. Keep its 20% cards, 5% gaps, crop and travel distance. */
[data-match-native-layout="gallery-grid"][data-match-grid-motion="source-slideshow"] > .gallery-grid-wrapper {
  display: flex !important;
  position: relative;
  width: 100%;
  animation: match-source-slideshow 30s linear infinite;
  will-change: transform;
}
[data-match-native-layout="gallery-grid"] > .gallery-grid-wrapper > .gallery-grid-item {
  flex: 0 0 20%;
  min-width: 20%;
  width: 20% !important;
  margin: 0 5% 0 0;
  position: relative;
  opacity: 1;
  visibility: visible;
}
@keyframes match-source-slideshow {
  from { transform: translateX(0); }
  to { transform: translateX(-225%); }
}
@media (max-width: 992px) {
  [data-match-native-layout="gallery-masonry"] > .gallery-masonry-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  [data-match-native-layout="gallery-masonry"] > .gallery-masonry-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  [data-match-native-layout="blog-masonry"] { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  [data-match-native-layout="gallery-grid"] > .gallery-grid-wrapper { animation: none !important; }
  [data-match-native-layout="gallery-grid"][data-match-grid-motion="source-slideshow"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-behavior: auto !important;
  }
  [data-match-native-layout="gallery-grid"][data-match-grid-motion="source-slideshow"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}