/* =========================
   Mosaic Gallery
   ========================= */
.mosaic-gallery {
  --gap: 0px;
  --caption-bg: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  --caption-pad: 12px 14px;
}
/* Base Grid (mobile first) */
.mosaic-gallery .mosaic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  grid-auto-rows: 58vw;
}
/* Tile */
.mosaic-gallery .mosaic-item {
  position: relative;
  display: block;
  overflow: hidden;
  background: #000;
}
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Specific span definitions for each item */
#mosaic-item-1,
#mosaic-item-4,
#mosaic-item-6 {
  grid-column: span 2;
}
#mosaic-item-2,
#mosaic-item-5 {
  grid-column: span 2;
}
#mosaic-item-3 {
  grid-column: span 2;
  grid-row: span 2;
}
#mosaic-item-7 {
  grid-column: span 6;
}
/* ==============================
   COMPLEX MOSAIC LAYOUT ( -cmplx )
   ============================== */
.mosaic-gallery-cmplx {
  width: 100%;
  max-height: 900px;
  overflow: hidden;
  position: relative;
}
.mosaic-grid-cmplx {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* TOP AREA */
.mosaic-top-cmplx {
  display: flex;
  gap: 0;
  min-height: 360px;
}
.mosaic-top-left-cmplx {
  flex: 0 0 72%;
  display: flex;
  flex-wrap: wrap;
}
.mosaic-top-right-cmplx {
  flex: 0 0 28%;
  position: relative;
  display: block;
  max-height: 600px;
}
.mosaic-top-right-cmplx .mosaic-caption-cmplx {
  top: auto;
  bottom: 7px;
}
.mosaic-top-left-cmplx .mosaic-item-cmplx {
  box-sizing: border-box;
}
.mosaic-top-left-cmplx .mosaic-slot-1,
.mosaic-top-left-cmplx .mosaic-slot-5 {
  width: 35%;
  max-height: 300px;
}
.mosaic-top-left-cmplx .mosaic-slot-2,
.mosaic-top-left-cmplx .mosaic-slot-4 {
  width: 65%;
  max-height: 300px;
}
/* BOTTOM AREA */
.mosaic-bottom-cmplx {
  display: flex;
  gap: 0;
  margin-top: 0;
}
.mosaic-bottom-left-cmplx {
  flex: 0 0 32%;
}
.mosaic-bottom-right-cmplx {
  flex: 0 0 68%;
}
/* COMMON ITEM */
.mosaic-item-cmplx {
  position: relative;
  display: block;
  overflow: hidden;
}
.mosaic-item-cmplx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.52) 10%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.28) 28%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.1) 42%, rgba(0,0,0,0.04) 48%, rgba(0,0,0,0) 55%);
  z-index: 2;
}
.mosaic-item-cmplx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.mosaic-item-cmplx:hover img {
  transform: scale(1.03);
}
/* Caption */
.mosaic-caption-cmplx {
  position: absolute;
  left: 24px;
  top: 250px;
  z-index: 3;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: clamp(24px, 0.6vw + 0.55rem, 24px);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Rajdhani, sans-serif;
}
.mosaic-caption-cmplx::after {
  content: "";
  width: 21px;
  height: 18px;
  display: inline-block;
  background: url(./assets/images/chevron-right.svg) center center / contain no-repeat;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* RESPONSIVE */
@media (max-width: 768px) {
  .mosaic-gallery-cmplx {
    max-height: none;
  }
  .mosaic-top-cmplx {
    flex-direction: column;
  }
  .mosaic-top-left-cmplx,
  .mosaic-bottom-cmplx {
    flex: 0 0 auto;
  }
  .mosaic-top-left-cmplx {
    display: block;
  }
  .mosaic-top-left-cmplx .mosaic-item-cmplx,
  .mosaic-bottom-left-cmplx,
  .mosaic-bottom-right-cmplx,
  .mosaic-top-right-cmplx {
    width: 100% !important;
  }
  .mosaic-item-cmplx {
    max-height: 360px;
  }
  .mosaic-item-cmplx img {
    height: 300px;
  }
  .mosaic-bottom-cmplx {
    display: block;
  }
  .mosaic-caption-cmplx {
    left: 24px;
    top: auto;
    bottom: 14px;
  }
  .mosaic-bottom-right-cmplx .mosaic-caption-cmplx {
    line-height: 1;
  }
}
/* =========================
   End Mosaic Gallery
   ========================= */