/* ============================================================
   Static clone responsive fixes
   Replaces Squarespace's dynamic JS image sizing/positioning
   Works WITH the existing Squarespace CSS, not against it.
   ============================================================ */

/* --- Banner / Hero Image ---
   Squarespace site.css handles the wrapper sizing via padding:
     transparent-header + collection-type-page: padding 180px 0 155px (desktop)
     mobile (max-device-height:768px): padding 60px 0 20px
   The desc-wrapper text (transparent color) provides additional height.
   We only need to handle the image cover behavior that JS normally does. */

.banner-thumbnail-wrapper .content-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner-thumbnail-wrapper .content-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --- Generic image shape containers --- */
.sqs-image-shape-container-element {
  overflow: hidden;
  position: relative;
}
.sqs-image-shape-container-element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --- Gallery: gutter spacing (Squarespace JS normally sets this) --- */
.sqs-gallery-block-grid .slide .margin-wrapper {
  margin: 0 20px 20px 0;
}

/* --- Gallery: image-only slides ---
   The .image-slide-anchor.content-fill gets its size from padding-bottom.
   Images must be absolute to fill the padding-created space. */
.sqs-gallery-block-grid .slide .image-slide-anchor.content-fill {
  display: block;
  position: relative;
  overflow: hidden;
}

.sqs-gallery-block-grid .slide .image-slide-anchor img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  display: block;
}

/* --- Gallery: video slides --- */
.sqs-gallery-block-grid .slide .content-wrapper.content-fill {
  position: relative;
  overflow: hidden;
}

.sqs-gallery-block-grid .slide .sqs-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sqs-gallery-block-grid .slide .sqs-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sqs-gallery-block-grid .slide .sqs-video-overlay img {
  position: relative;
  width: 100%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Lazy-load placeholder opacity fix --- */
img.loading,
img[data-load="false"],
img[data-load="true"],
.sqs-gallery img,
.sqs-gallery .thumb-image,
.sqs-gallery-block-grid img:not(.loaded) {
  opacity: 1 !important;
}

.sqs-video-overlay {
  opacity: 1 !important;
}

/* --- Background images on sections --- */
[data-image-id] {
  background-size: cover;
  background-position: center center;
}

/* --- Content-fill images elsewhere on the site --- */
.content-fill {
  overflow: hidden;
}

/* --- Form styling (matches Squarespace form component) --- */
.pcn-form-wrapper {
  padding: 0;
}
.pcn-form-wrapper .field-list {
  line-height: normal;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pcn-form-wrapper .form-item {
  margin-bottom: 18px;
}
.pcn-form-wrapper .title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}
.pcn-form-wrapper .caption {
  font-size: 12px;
  display: block;
}
.pcn-form-wrapper .field-element,
.pcn-form-wrapper input[type="text"],
.pcn-form-wrapper input[type="email"],
.pcn-form-wrapper input[type="tel"],
.pcn-form-wrapper textarea,
.pcn-form-wrapper select {
  width: 100%;
  padding: 12px;
  margin: 6px 0 4px;
  border: 1px solid #ccc;
  background: #fafafa;
  color: #000;
  font-family: sans-serif;
  font-size: 12px;
  line-height: normal;
  box-sizing: border-box;
  border-radius: 2px;
}
.pcn-form-wrapper input:focus,
.pcn-form-wrapper textarea:focus {
  background: #fff;
  outline: none;
  transition: background 0.1s ease-in;
}
.pcn-form-wrapper textarea {
  min-height: 100px;
  resize: vertical;
}
.pcn-form-wrapper .description {
  padding: 0.5em 0;
  font-size: 12px;
  opacity: 0.7;
  display: block;
}
.pcn-form-wrapper .required {
  color: #c00;
  font-size: 12px;
}
.pcn-form-wrapper .form-button-wrapper {
  text-align: left;
  margin-top: 20px;
}
.pcn-form-wrapper input[type="submit"],
.pcn-form-wrapper button[type="submit"] {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 1em 2.5em;
  color: #fff;
  background-color: #272727;
  border: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1em;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  border-radius: 0;
}
.pcn-form-wrapper button[type="submit"]:hover {
  opacity: 0.85;
}
.pcn-form-wrapper .fields {
  display: flex;
  gap: 0;
}
.pcn-form-wrapper .fields .field {
  flex: 1;
  padding-right: 10px;
}
.pcn-form-wrapper .fields .field:last-child {
  padding-right: 0;
}
.pcn-form-wrapper .form-submission-text {
  text-align: center;
  padding: 20px 0;
}
.pcn-form-wrapper .form-submission-text h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Ensure forms have proper container padding on mobile */
@media (max-width: 640px) {
  .pcn-form-wrapper .fields {
    flex-direction: column;
  }
  .pcn-form-wrapper .fields .field {
    padding-right: 0;
  }
}