/* ============================================================
   TRENCHPORT RECIPES — ALL CATEGORY COLLAGE BANNER
   Shows all seven station images in the default ALL view.
   Individual station filters still show one full-width image.
   ============================================================ */

.station-banner-collage,
.station-banner-single{
  position:absolute;
  inset:0;
  transition:opacity .25s ease, transform .45s ease;
}

.station-banner-collage{
  z-index:-3;
  overflow:hidden;
  background:#050505;
}

.station-banner-single{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-3;
}

/* Override the older generic .station-banner img rules for collage tiles. */
.station-banner .station-banner-collage img{
  position:absolute;
  top:-8%;
  bottom:auto;
  right:auto;
  left:var(--x);
  width:31%;
  height:116%;
  object-fit:cover;
  object-position:center;
  z-index:var(--z);
  opacity:.92;
  filter:saturate(.76) contrast(1.08) brightness(.84);
  transform:translateX(-50%) rotate(var(--rot));
  transform-origin:center;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  border-left:1px solid rgba(225,121,38,.34);
  border-right:1px solid rgba(0,0,0,.50);
  box-shadow:-18px 0 28px rgba(0,0,0,.52);
  transition:opacity .25s ease,filter .3s ease,transform .45s ease;
}

.station-banner .station-banner-collage img:nth-child(1){--x:22%;--rot:-2.6deg;--z:1;}
.station-banner .station-banner-collage img:nth-child(2){--x:34%;--rot:1.8deg;--z:2;}
.station-banner .station-banner-collage img:nth-child(3){--x:46%;--rot:-1.3deg;--z:3;}
.station-banner .station-banner-collage img:nth-child(4){--x:58%;--rot:2.2deg;--z:4;}
.station-banner .station-banner-collage img:nth-child(5){--x:70%;--rot:-1.7deg;--z:5;}
.station-banner .station-banner-collage img:nth-child(6){--x:82%;--rot:1.4deg;--z:6;}
.station-banner .station-banner-collage img:nth-child(7){--x:94%;--rot:-2.1deg;--z:7;}

.station-banner.is-changing .station-banner-collage{
  opacity:.55;
  transform:scale(1.015);
}

/* Preserve each tile's custom position/rotation during the fade transition. */
.station-banner.is-changing .station-banner-collage img{
  opacity:.58;
  transform:translateX(-50%) rotate(var(--rot)) scale(1.02);
}

.station-banner.is-changing .station-banner-single{
  opacity:.35;
  transform:scale(1.025);
}

/* Slightly brighter treatment for the new orange artwork. */
.trenchport-site .station-banner .station-banner-collage img,
.trenchport-site .station-banner .station-banner-single{
  filter:saturate(.72) contrast(1.08) brightness(.82);
}

@media (max-width:760px){
  .station-banner .station-banner-collage img{
    top:-4%;
    width:46%;
    height:108%;
  }

  .station-banner .station-banner-collage img:nth-child(1){--x:12%;}
  .station-banner .station-banner-collage img:nth-child(2){--x:26%;}
  .station-banner .station-banner-collage img:nth-child(3){--x:40%;}
  .station-banner .station-banner-collage img:nth-child(4){--x:54%;}
  .station-banner .station-banner-collage img:nth-child(5){--x:68%;}
  .station-banner .station-banner-collage img:nth-child(6){--x:82%;}
  .station-banner .station-banner-collage img:nth-child(7){--x:96%;}
}