/* Shared product collage for banner-capable storefront templates */

.tl-banner-collage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e8e4de;
}

.tl-banner-collage--mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  min-height: 100%;
}

.tl-banner-collage__cell {
  overflow: hidden;
  background: #ddd6cc;
}

.tl-banner-collage__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(3) {
  grid-column: 4;
  grid-row: 1;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(6) {
  grid-column: 1;
  grid-row: 3;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(7) {
  grid-column: 2;
  grid-row: 3;
}

.tl-banner-collage--mosaic .tl-banner-collage__cell:nth-child(8) {
  grid-column: 3 / span 2;
  grid-row: 3;
}

/* Luxe editorial */
.sf-template--luxe-editorial .luxe-hero.has-collage {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--luxe-border);
}

.sf-template--luxe-editorial .luxe-hero.has-collage .tl-banner-collage {
  position: absolute;
  inset: 0;
}

.sf-template--luxe-editorial .luxe-hero.has-collage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(42, 36, 32, 0.38) 0%,
    rgba(42, 36, 32, 0.52) 42%,
    rgba(42, 36, 32, 0.88) 100%
  );
}

/* Premium browse */
.sf-template--premium-browse .browse-banner--collage {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 280px;
  overflow: hidden;
  background: var(--browse-card);
}

/* Plants vivero */
.sf-template--plants-vivero .vv-hero-media.has-collage {
  position: relative;
  overflow: hidden;
}

.sf-template--plants-vivero .vv-hero-media.has-collage .tl-banner-collage {
  position: absolute;
  inset: 0;
}

.sf-template--plants-vivero .vv-hero-media.has-collage .vv-hero-content {
  position: relative;
  z-index: 2;
}

.sf-template--plants-vivero .vv-hero-media.has-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18, 52, 36, 0.15) 0%, rgba(18, 52, 36, 0.72) 100%);
}

/* Hospitality showcase */
.sf-template--hospitality-hospedaje .header-banner.has-collage {
  position: relative;
  overflow: hidden;
}

.sf-template--hospitality-hospedaje .header-banner.has-collage .tl-banner-collage {
  position: absolute;
  inset: 0;
}

.sf-template--hospitality-hospedaje .header-banner.has-collage .banner-content {
  position: relative;
  z-index: 2;
}

.sf-template--hospitality-hospedaje .header-banner.has-collage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(24, 22, 15, 0.18) 0%, rgba(24, 22, 15, 0.72) 100%);
}