/* Home announcements (Nov 2026): each card, top to bottom, is the label, the title, the whole flyer and one action.
   Loads after gallery.css and sets the card layout for the markup written by lib/announcements.ts and the home page's
   inline script (article.ev-c.ev-fc, four direct children: .ev-t, h3, .ev-f, .rm).
   Alignment: the row of cards is one grid and every card spans the same four rows through subgrid, so the row that holds
   the titles is as tall as the tallest title in the whole row. That puts every flyer at the same height even when a title
   wraps, and the action buttons on one level under them. The same grid runs sideways for the swipe row on tablet and phone,
   so cards there stay consistent too. Every flyer sits in the same 4:5 box, shown whole (object-fit: contain) on a soft
   cream backdrop. */
html body:not(#z):not(#y):not(#x) #ev-grid{--evg:clamp(20px,2vw,32px);display:grid!important;grid-template-rows:none!important;grid-auto-rows:auto;gap:0 var(--evg)!important;align-items:stretch}
html body:not(#z):not(#y):not(#x) #ev-grid>.ev-c.ev-fc{display:grid!important;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)!important;row-gap:0;align-items:start;margin:0 0 var(--evg)!important;padding:20px 12px 20px!important;min-width:0;width:auto!important;flex:none!important}
html body:not(#z):not(#y):not(#x) #ev-grid{margin-bottom:calc(-1*var(--evg))!important}
/* label */
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.ev-t{grid-row:1;justify-self:start;margin:0 8px 12px}
/* title: starts at the top of its row, so all titles share one baseline start */
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>h3{grid-row:2;margin:0 8px 18px!important;padding:0!important;font-size:clamp(19px,1.7vw,22px)!important;line-height:1.22!important;letter-spacing:-.015em;text-wrap:balance}
/* flyer: same 4:5 box in every card, whole flyer, cream backdrop */
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.ev-f{grid-row:3;position:relative;display:block;width:100%!important;aspect-ratio:4/5!important;height:auto!important;margin:0!important;border-radius:16px;overflow:hidden;background:#F4F1EA}
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.ev-f:not(.tx) img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;border-radius:0!important;display:block}
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.ev-f.tx{display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:linear-gradient(160deg,#0D3C87 0%,#0A2F6B 100%)}
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.ev-f.tx img{position:static!important;width:44px!important;height:44px!important;padding:4px;border-radius:50%!important;background:#fff;object-fit:contain!important}
/* action: bottom row, level across cards */
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.rm{grid-row:4;justify-self:start;align-self:end;margin:14px 8px 0!important;padding:0!important;min-height:44px}
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.rm svg{flex:none}
html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>.ev-call{text-decoration:none}
/* a browser without subgrid: reserve two title lines instead */
@supports not (grid-template-rows:subgrid){
  html body:not(#z):not(#y):not(#x) #ev-grid>.ev-c.ev-fc{grid-template-rows:auto auto auto auto}
  html body:not(#z):not(#y):not(#x) #ev-grid .ev-fc>h3{min-height:2.44em}
}

/* desktop: three across (two, or one narrower card, when there are fewer) */
@media(min-width:1024px){
  html body:not(#z):not(#y):not(#x) #ev-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row;max-width:none!important;overflow:visible!important;margin-left:0!important;margin-right:0!important;padding:0!important}
  html body:not(#z):not(#y):not(#x) #ev-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:880px!important}
  html body:not(#z):not(#y):not(#x) #ev-grid[data-n="1"]{grid-template-columns:minmax(0,1fr)!important;max-width:440px!important}
  html body .ev-dots{display:none!important}
}

/* tablet and phone: one row you swipe, the next card peeking in, with dots under it */
@media(max-width:1023px){
  html body:not(#z):not(#y):not(#x) #ev-grid{--evg:14px;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:clamp(270px,44vw,380px);overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;max-width:none!important;margin:28px 0 0!important;margin-right:calc(-1*(var(--edge) + var(--pad)))!important;margin-bottom:0!important;padding:4px calc(var(--edge) + var(--pad)) 8px 0!important;scroll-padding-inline:0;scrollbar-width:none;overscroll-behavior-x:contain}
  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.ev-fc{margin-bottom:0!important;scroll-snap-align:start;scroll-snap-stop:always}
  html body .ev-dots:has(button:nth-child(2)){display:flex!important;justify-content:center;gap:6px;margin-top:12px}
}
@media(max-width:639px){
  html body:not(#z):not(#y):not(#x) #ev-grid{grid-auto-columns:calc(100vw - (var(--edge) + var(--pad)) - 48px)}
}