/* Static-site replacements for what Squarespace's JavaScript used to do. */

/* Index thumbnails: square crops (was Squarespace's ImageLoader "fill" mode). */
#projectThumbs .project .project-image .content-fill img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* srcset makes the intrinsic width follow "sizes"; show them at column width like the original. */
#projectPages .project.active-project .image-list img { width: 100%; height: auto; }

/* Spacer blocks (styles came from a Squarespace component CDN). */
.sqs-block[data-definition-name="website.components.spacer"] .sqs-block-content { visibility: hidden; }

/* Mobile menu slide (was a YUI animation). */
#mobileNav { transition: height .2s ease; }

/* Gallery pages: one slide at a time on desktop (Squarespace Gallery2 "stacked", fit mode).
   Below 751px site.css already stacks every slide vertically. */
.collection-type-gallery #slideshow .slide img { height: auto; }
@media only screen and (min-width: 751px) {
  .collection-type-gallery #slideshowWrapper { height: 500px; }
  .collection-type-gallery #slideshow .slide { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  .collection-type-gallery #slideshow .slide.sqs-active-slide { opacity: 1; visibility: visible; z-index: 1; }
  .collection-type-gallery #slideshow .slide img { width: 100%; height: 100%; object-fit: contain; }
  .collection-type-gallery #tinyThumbControls .tiny-thumb { cursor: pointer; }
  .collection-type-gallery #slideshow { cursor: pointer; }
}