/*
 * Dense image wall public block style.
 * The block owns its structural renderer shape and consumes --iss-* tokens
 * with fallbacks; it does not define the global token contract.
 */

.iss-dense-image-wall {
  --iss-dense-image-wall-columns: 4;
  --iss-dense-image-wall-row-size: clamp(6.75rem, 10vw, 9rem);
  display: grid;
  grid-template-columns: repeat(var(--iss-dense-image-wall-columns), minmax(0, 1fr));
  grid-auto-rows: var(--iss-dense-image-wall-row-size);
  gap: var(--iss-space-xs, 0.45rem);
}

.iss-dense-image-wall__cell,
.iss-dense-image-wall__cell.wp-block-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--iss-radius-sm, 4px);
  background: var(--iss-surface-inset, #d7d7d8);
}

.iss-dense-image-wall__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iss-dense-image-wall__cell--captioned::after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(
    180deg,
    rgba(12, 11, 10, 0) 0%,
    rgba(12, 11, 10, 0.58) 72%,
    rgba(12, 11, 10, 0.78) 100%
  );
  pointer-events: none;
}

.iss-dense-image-wall__caption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: grid;
  gap: 0.2rem;
  margin: 0;
  color: var(--iss-white, #fff);
  font-size: 0.88rem;
  line-height: 1.36;
  pointer-events: none;
}

.iss-dense-image-wall__kicker,
.iss-dense-image-wall__title,
.iss-dense-image-wall__text {
  margin: 0;
  color: inherit;
}

.iss-dense-image-wall__kicker {
  color: var(--iss-accent, #f2b705);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iss-dense-image-wall__title {
  font-size: clamp(0.98rem, 0.94rem + 0.18vw, 1.1rem);
  font-weight: 650;
  line-height: 1.04;
}

.iss-dense-image-wall__text {
  color: rgba(249, 249, 250, 0.8);
  font-size: 0.82rem;
  line-height: 1.36;
}

.iss-dense-image-wall__caption strong,
.iss-dense-image-wall__caption b {
  display: block;
  margin: 0;
  color: inherit;
  font-size: clamp(1.02rem, 0.96rem + 0.22vw, 1.18rem);
  font-weight: 650;
  line-height: 1.08;
}

.iss-dense-image-wall__caption span {
  display: block;
  margin: 0;
  color: rgba(249, 249, 250, 0.84);
  font-size: 0.9rem;
  line-height: 1.45;
}

.iss-dense-image-wall__cell--tall {
  grid-row: span 2;
}

.iss-dense-image-wall__cell--wide {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .iss-dense-image-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .iss-dense-image-wall {
    grid-template-columns: 1fr;
    grid-auto-rows: 10rem;
  }

  .iss-dense-image-wall__cell--wide,
  .iss-dense-image-wall__cell--tall {
    grid-column: auto;
    grid-row: auto;
  }
}