/* Image Block (sections/image-block): one image, optionally linked. No text, no overlay. */

.image-block {
  padding-top: var(--ib-pt, 0px);
  padding-bottom: var(--ib-pb, 0px);
}

/* Full width runs edge to edge; contained uses the site .container (1408px, 16/36px gutters),
   optionally narrowed and centered by the Contained width setting (--ib-max). */
.image-block--full .image-block__inner {
  width: 100%;
}

.image-block--contained .image-block__frame {
  max-width: var(--ib-max, none);
  margin-inline: auto;
}

.image-block__frame {
  position: relative;
  overflow: hidden;
}

.image-block__link {
  display: block;
  color: inherit;
}

.image-block__link:focus-visible {
  outline: 2px solid var(--clr-primary, #49473e);
  outline-offset: -4px;
}

.image-block picture {
  display: block;
}

/* Original ratio: the image keeps its own shape, nothing is cropped. */
.image-block__img {
  display: block;
  width: 100%;
  height: auto;
}

/* A fixed ratio sets the frame's shape; the image fills it (Fill) or sits inside it (Fit).
   The image is positioned absolutely rather than sized with height: 100%, which Safari can
   resolve to auto inside an aspect-ratio box. */
@media (max-width: 767px) {
  .image-block--ratio-m .image-block__frame {
    aspect-ratio: var(--ib-ratio-m);
  }
  .image-block--ratio-m .image-block__img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: var(--ib-fit, cover);
    object-position: var(--ib-position, center);
  }
}

@media (min-width: 768px) {
  .image-block--ratio-d .image-block__frame {
    aspect-ratio: var(--ib-ratio-d);
  }
  .image-block--ratio-d .image-block__img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: var(--ib-fit, cover);
    object-position: var(--ib-position, center);
  }
}

/* Empty state (no image picked yet), so the section is visible and clickable in the editor. */
.image-block--empty .image-block__frame {
  aspect-ratio: 16 / 9;
  background: var(--clr-neutral-light, #f1ece0);
}

.image-block__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--clr-neutral-medium, #a6a6a6);
  opacity: 0.5;
}