/* Geometry defaults are provided via var() fallbacks below so parent scopes can override. */

/* =========================
   Image Collage
   ========================= */

/* Collage base + center in its column */
.ic {
  position: relative;
  float: var(--ic-float, right);
  width: min(100%, var(--ic-w, min(100%, clamp(280px, 80vw, 600px))));
  height: var(--ic-h, clamp(260px, 58vw, 480px));
  max-width: 100%;
  border-radius: var(--ic-radius, 0px);
  isolation: isolate;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
}

/* Common absolute layer */
.ic .ic-layer,
.ic .ic-img,
.ic .ic-dots,
.ic .ic-square {
  position: absolute;
  margin: 0;
}

/* ==== Decorative layers ==== */
.ic .ic-dots {
  width: var(--dots-w, 55%);
  height: var(--dots-h, 73%);
  left: var(--dots-x, 6%);
  top: var(--dots-y, 8%);
  z-index: var(--ic-decor-z, 1);
  pointer-events: none;

  /* Render dots via CSS so no SVG markup is required */
  background-image: radial-gradient(
    circle,
    var(--ic-dots-color, var(--primary)) var(--dots-size, 2.5px),
    transparent calc(var(--dots-size, 2.5px) + 0.75px)
  );
  background-size: var(--dots-density, 14px) var(--dots-density, 14px);
  background-position: 0 0;
  opacity: var(--ic-dots-opacity, 1);
}

.ic .ic-square {
  width: var(--sq-w, 40%);
  height: var(--sq-h, 50%);
  right: var(--sq-x, 6%);
  bottom: var(--sq-y, 16%);
  z-index: var(--ic-decor-z, 1);
  pointer-events: none;

  /* Render square via CSS so no SVG markup is required */
  background: var(--ic-square-color, var(--secondary));
  border-radius: calc(var(--ic-radius, 0px) * var(--sq-radius-mult, 0.6));
  opacity: var(--ic-square-opacity, 1);
}

/* ==== Images ==== */
.ic .ic-img {
  overflow: clip;
  border-radius: var(--ic-radius, 0px);
  z-index: var(--ic-img-z, 2);

  /* Use a real border for the frame so it doesn't visually "eat" the shadow */
  box-sizing: border-box;
  border: var(--ic-frame, 8px) solid #fff;
  box-shadow: var(--ic-shadow, 0 2px 5px 2px var(--black-t-12));
}


.ic .ic-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Top image: right aligned, flush to top (width/height vars) */
.ic .ic-img--top {
  width: var(--top-w, 75%);
  height: var(--top-h, 52%);
  right: 0;
  top: 0;
}

/* Bottom image: left aligned, flush to bottom (width/height vars) */
.ic .ic-img--bottom {
  width: var(--bot-w, 78%);
  height: var(--bot-h, 56%);
  left: 0;
  bottom: 0;
}

/* Admin hint state */
.ic--missing {
  padding: 12px;
  border: 1px dashed currentColor;
}