/* _archive-fix.css ---------------------------------------------------------
   Static-hosting shim for the win6village.org archive.

   Squarespace's ImageLoader script does two layout jobs at runtime that plain
   CSS never did:

     1. It writes an inline percentage `padding-bottom` onto .image-block-wrapper
        to reserve an aspect-ratio box, because the <img> inside is positioned
        absolutely by site.css.
     2. It writes inline width/height/left/top onto images inside "fill"
        containers (#page-thumb.content-fill, .summary-thumbnail) to crop them.

   With the script gone, those wrappers collapse to zero height and the images
   render at natural size, escaping their containers and painting across the
   whole page. Everything below re-creates that sizing declaratively.
   -------------------------------------------------------------------------- */


/* --- 1. Undo the fade-in that never completes ---------------------------- */
/* site.css starts these at opacity:0 and waits for JS to add .loaded.        */

img, .thumb-image, .sqs-image img, .summary-thumbnail img,
.gallery-item img, .section-background img, [data-src] {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.image-block-outer-wrapper[class*="combination-animation"] .image-inset,
.image-block-outer-wrapper[class*="combination-animation"] .image-block-wrapper,
.image-block-outer-wrapper[class*="individual-animation"] .image-inset,
.image-block-outer-wrapper[class*="individual-animation"] .image-block-wrapper {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: none !important;
}


/* --- 2. Page banner (#page-thumb) --------------------------------------- */
/* site.css gives #page-thumb `position:absolute; inset:0` inside a banner
   area roughly 400px tall. The <img> had no dimensions of its own, so it
   rendered at natural size and painted over the entire page.                */

#page-thumb,
.content-fill {
  overflow: hidden;
}

#page-thumb > img,
.content-fill > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}


/* --- 3. Summary / blog-roll thumbnails: DELIBERATELY NOT OVERRIDDEN ------ */
/*
   Do not add rules here. site.css already sizes these correctly with plain
   CSS and needs nothing from JavaScript except the .loaded class, which the
   archiver writes into the markup:

     .sqs-block-summary-v2 .img-wrapper      { position:relative; width:100%; height:auto }
     .sqs-block-summary-v2 .img-wrapper img  { display:block; width:100%; height:auto; opacity:0 }
     .sqs-block-summary-v2 .img-wrapper img.loaded { opacity:1 }

   An earlier version of this file absolutely-positioned those images at
   height:100% inside a wrapper whose height is `auto`. Taking the image out
   of the flow collapsed the wrapper to zero, so every sidebar thumbnail
   vanished. Section 1 above already guarantees they are opaque.
*/


/* --- 4. Content image blocks -------------------------------------------- */
/* site.css absolutely-positions these images and expects JS to give the
   wrapper its height. Simplest correct answer without JS: put the image back
   into normal flow so the wrapper takes its natural height.                  */

.sqs-block-image .image-block-wrapper,
.sqs-block-image .intrinsic,
.sqs-block-image .image-inset {
  position: relative;
  height: auto;
  padding-bottom: 0;
}

.sqs-block-image .image-block-wrapper > img,
.sqs-block-image .intrinsic img,
.sqs-block-image .image-inset img {
  position: static !important;
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  margin: 0 auto;
}


/* --- 5. Event / excerpt thumbnails: DELIBERATELY NOT OVERRIDDEN ---------- */
/*
   Also leave alone. site.css reserves space for these with a real
   `padding-bottom:100%` written in the stylesheet, not injected by JS:

     .view-list article .excerpt-thumb .intrinsic { padding-bottom:100%; position:relative; width:100% }
     .view-list article .excerpt-thumb .intrinsic .excerpt-image     { height:100%; overflow:hidden }
     .view-list article .excerpt-thumb .intrinsic .excerpt-image img { height:100%; width:auto }

   Nothing here depends on the ImageLoader, so there is nothing to replace.
*/


/* --- 6. Blocks that only function on live Squarespace -------------------- */

.sqs-block-tourdates,
.sqs-block-opentable {
  display: none;
}


/* --- 7. Archive replacements -------------------------------------------- */

.archive-contact-block .sqs-html-content p {
  margin: .75em 0;
  font-size: 1rem;
  line-height: 1.6;
}

.archive-contact-block a {
  text-decoration: underline;
  text-underline-offset: .18em;
}