/* Hide the collage until this visit's shuffle marks it, so the first order a visitor
   sees is the shuffled one. The tile sizes stay the page's own collage. */
html body .gal:not(.is-shuffled){visibility:hidden}
html body .gal.is-shuffled{visibility:visible}

/* Announcements. Desktop: three cards across, wrapping when there are more.
   Phone: one horizontal row you can swipe, with the next card peeking in. */
@media(min-width:1024px){
  html body:not(#z):not(#y):not(#x) #ev-grid:not([data-n="1"]){grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:759px){
  html body:not(#z):not(#y):not(#x) #ev-grid{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:14px!important;margin:28px -20px 0!important;padding:4px 20px 8px!important;scroll-padding-inline:20px;scrollbar-width:none}
  html body:not(#z):not(#y):not(#x) #ev-grid::-webkit-scrollbar{display:none}
  html body:not(#z):not(#y):not(#x) #ev-grid>.ev-c{flex:0 0 84%!important;width:84%!important;scroll-snap-align:start;scroll-snap-stop:always}
  .ev-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .ev-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(13,60,135,.28);cursor:pointer}
  .ev-dots button[aria-current]:not([aria-current=false]){width:18px;border-radius:999px;background:#0D3C87}
  .ev-dots:not(:has(button:nth-child(2))){display:none}
}
/* Phones: the flyer sits on top of the card at full width, and the words run underneath
   at the same width. The flyer keeps its own shape, so the type on it is not cropped. */
@media(max-width:639px){
  html body:not(#z):not(#y):not(#x) #ev-grid{margin:28px 0 0!important;margin-right:calc(-1*(var(--edge) + var(--pad)))!important;padding:4px calc(var(--edge) + var(--pad)) 8px 0!important;scroll-padding-inline:0;gap:12px!important}
  html body:not(#z):not(#y):not(#x) #ev-grid>.ev-c{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;flex:0 0 calc(100vw - (var(--edge) + var(--pad)) - 48px)!important;width:calc(100vw - (var(--edge) + var(--pad)) - 48px)!important;scroll-snap-align:start;scroll-snap-stop:always;align-items:stretch}
  html body #ev-grid .ev-f:not(.tx){aspect-ratio:auto!important;width:100%!important;height:auto!important}
  html body #ev-grid .ev-f:not(.tx) img{position:static!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  html body #ev-grid .ev-b{width:100%!important;padding:14px 4px 4px!important}
}
@media(min-width:760px){.ev-dots{display:none!important}}