/* Page banners as photo collages (applied by Programs/hero-collages/apply.py).
   Desktop: 7x2 grid, first photo 2x2 (11 tiles). Tablet: 4x3, first photo 2 wide (11). Phone: 3x4 (12). */
.page-hero.has-collage,.page-hero:has(.hero-collage){min-height:min(74vh,42rem);}
.hero-collage{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(2,1fr);gap:3px;background:var(--ink);}
.hero-collage-tile{position:relative;overflow:hidden;min-height:0;}
.hero-collage-tile picture,.hero-collage-tile img{display:block;width:100%;height:100%;}
.page-hero-media.hero-collage .hero-collage-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(0.92);}
.hero-collage .t1{grid-column:span 2;grid-row:span 2;}
.hero-collage-tile:nth-child(n+12){display:none;}
.page-hero-media.hero-collage::after{background:
  linear-gradient(90deg,rgba(9,13,11,0.86) 0%,rgba(9,13,11,0.62) 38%,rgba(9,13,11,0.18) 75%,rgba(9,13,11,0.3) 100%),
  linear-gradient(180deg,rgba(9,13,11,0.55) 0%,rgba(9,13,11,0) 25%,rgba(9,13,11,0) 60%,rgba(9,13,11,0.9) 100%);}
@media (max-width:900px){
  .hero-collage{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);}
  .hero-collage .t1{grid-column:span 2;grid-row:span 1;}
}
@media (max-width:560px){
  .hero-collage{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);}
  .hero-collage .t1{grid-column:span 1;}
  .hero-collage-tile:nth-child(n+12){display:block;}
  .page-hero-media.hero-collage::after{background:linear-gradient(180deg,rgba(9,13,11,0.6) 0%,rgba(9,13,11,0.45) 40%,rgba(9,13,11,0.92) 100%);}
}

/* Homepage banner (.collage-strip in styles.css) as a 7x2 collage; headline overlay and animations stay */
.collage-strip.home-collage{grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(2,1fr);}
.home-collage .t1{grid-column:span 2;grid-row:span 2;}
.home-collage figure:nth-child(n+12){display:none;}
.home-collage .hero-collage-tile picture{display:block;width:100%;height:100%;}
.home-collage .hero-collage-tile img{filter:saturate(0.92);}
html.js .home-collage figure:nth-child(4) img{animation-delay:120ms;}
html.js .home-collage figure:nth-child(5) img{animation-delay:160ms;}
html.js .home-collage figure:nth-child(6) img{animation-delay:200ms;}
html.js .home-collage figure:nth-child(7) img{animation-delay:240ms;}
html.js .home-collage figure:nth-child(8) img{animation-delay:280ms;}
html.js .home-collage figure:nth-child(9) img{animation-delay:320ms;}
html.js .home-collage figure:nth-child(10) img{animation-delay:360ms;}
html.js .home-collage figure:nth-child(11) img{animation-delay:400ms;}
.collage-strip.home-collage::after{background:
  linear-gradient(90deg,rgba(9,13,11,0.82) 0%,rgba(9,13,11,0.5) 42%,rgba(9,13,11,0.1) 75%),
  linear-gradient(180deg,rgba(9,13,11,0.55) 0%,rgba(9,13,11,0.1) 22%,rgba(9,13,11,0.2) 50%,rgba(9,13,11,0.75) 78%,rgba(9,13,11,0.97) 100%);}
@media (min-width:801px) and (max-width:1100px){
  .collage-strip.home-collage{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);}
  .home-collage .t1{grid-column:span 2;grid-row:span 1;}
}
@media (max-width:800px){
  .collage-strip.home-collage{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-auto-rows:26vw;gap:3px;}
  .home-collage .t1{grid-column:span 1;grid-row:span 1;aspect-ratio:auto;}
  .collage-strip.home-collage figure:not(:first-child){display:block;}
  .collage-strip.home-collage figure:nth-child(n+7){display:none;}
  .home-collage .collage-headline{grid-column:1 / -1;}
}