/* =========================================
   Trust Roofing Image Masks
   3-Part Split Mask
   ========================================= */

.tr-split-mask {
  --tr-mask-gap: 2%;
  --tr-mask-space-v: 5%;
  --tr-mask-columns: 1fr 2fr 1fr;
  --tr-mask-radius: 1rem;
  --tr-mask-height: clamp(250px, 40vw, 400px);

  width: 100%;
  max-width: 1000px;
  height: var(--tr-mask-height);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

/* Image layer */
.tr-split-mask img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mask layer */
.tr-split-mask__mask {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #ffffff;
  mix-blend-mode: screen;

  display: grid;
  grid-template-columns: var(--tr-mask-columns);
  grid-template-rows:
    var(--tr-mask-space-v)
    var(--tr-mask-space-v)
    1fr
    var(--tr-mask-space-v)
    var(--tr-mask-space-v);
  gap: var(--tr-mask-gap);
}

/* Mask pieces */
.tr-split-mask__mask > * {
  background: #000000;
  border-radius: var(--tr-mask-radius);
}

/* Left piece */
.tr-split-mask__mask > *:nth-child(1) {
  grid-row: 3 / span 3;
}

/* Center piece */
.tr-split-mask__mask > *:nth-child(2) {
  grid-row: 1 / span 3;
}

/* Right piece */
.tr-split-mask__mask > *:nth-child(3) {
  grid-row: 2 / span 3;
}

/* Optional: smaller mobile height */
@media (max-width: 767px) {
  .tr-split-mask {
    --tr-mask-height: clamp(220px, 70vw, 340px);
  }
}