/**
 * Squarespace fluid-image blocks rely on JS to set container height.
 * Without it, images collapse into thin horizontal strips.
 */

/* Stretch image fe-blocks to fill their grid area */
.fe-block:has([data-definition-name="website.components.imageFluid"]) {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
}

.fe-block .sqs-block[data-definition-name="website.components.imageFluid"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.fe-block .sqs-block[data-definition-name="website.components.imageFluid"] .sqs-block-content,
.fe-block .sqs-block[data-definition-name="website.components.imageFluid"] .fluid-image-component-root,
.fe-block .sqs-block[data-definition-name="website.components.imageFluid"] .fluid-image-animation-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Stretched images: fill grid cell */
.fluid-image-component-root[data-is-image-stretched="true"] {
  height: 100%;
  min-height: 320px;
}

.fluid-image-component-root[data-is-image-stretched="true"] .fluid-image-container.visitor-mode {
  flex: 1;
  height: 100% !important;
  min-height: 320px;
}

@media (min-width: 768px) {
  .fluid-image-component-root[data-is-image-stretched="true"] {
    min-height: calc(min(1500px, 92vw) * 0.086);
  }

  .fluid-image-component-root[data-is-image-stretched="true"] .fluid-image-container.visitor-mode {
    min-height: calc(min(1500px, 92vw) * 0.086);
  }
}

.fluid-image-component-root[data-is-image-stretched="true"] .js-content-mode-element-wrapper,
.fluid-image-component-root[data-is-image-stretched="true"] .js-content-mode-element,
.fluid-image-component-root[data-is-image-stretched="true"] .content-fill {
  height: 100%;
  min-height: inherit;
}

/* Fallback: use native aspect-ratio when height chain still collapses */
.fluid-image-container.visitor-mode {
  position: relative;
  width: 100%;
}

.fluid-image-container.visitor-mode .content-fill {
  position: relative;
  width: 100%;
  aspect-ratio: var(--image-component-native-aspect-ratio, 16 / 10);
}

.fluid-image-component-root[data-is-image-stretched="true"] .fluid-image-container.visitor-mode .content-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

.fluid-image-container.visitor-mode .content-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-component-focal-point, center);
  position: absolute;
  top: 0;
  left: 0;
}

/* Mobile: image blocks need explicit min-height (grid row is only 24px) */
@media (max-width: 767px) {
  .fe-block .sqs-block[data-definition-name="website.components.imageFluid"] {
    min-height: 240px;
  }

  .fluid-image-component-root[data-is-image-stretched="true"] {
    min-height: 240px;
  }

  .fluid-image-component-root[data-is-image-stretched="true"] .fluid-image-container.visitor-mode {
    min-height: 240px;
  }

  .fluid-image-container.visitor-mode .content-fill {
    aspect-ratio: var(--image-component-native-aspect-ratio, 4 / 3);
  }
}