/* ============================================================
   RaceDay Features — STRUCTURAL CSS ONLY.
   What makes the blocks function: grids, visibility states,
   scroll behaviour. All visual styling (colour, borders, type)
   belongs to the active theme, keyed off these class names.
   ============================================================ */

[hidden]{display:none !important;}

/* --- event card grid (event-grid block, finder results) ----- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap,24px);padding:0 var(--pad,24px);}
@media(max-width:720px){.grid-2{grid-template-columns:1fr;}}
.card.wide{grid-column:1 / -1;}

/* --- race finder layout -------------------------------------
   Cards left, sticky filters right on desktop; filters collapse
   behind the .filters-toggle button on mobile. */
.finder{max-width:var(--maxw,1320px);margin:0 auto;padding:0 var(--pad,24px);display:grid;gap:var(--gap,24px);align-items:start;}
.results{min-width:0;}
.results .grid-2{padding:0;}
.filters-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;}
.filters-toggle .chev{width:16px;height:16px;flex:none;transition:transform .15s;}
.finder-side.open .filters-toggle .chev{transform:rotate(180deg);}
@media(max-width:999px){
  .finder-side .search-panel{display:none;margin-top:12px;}
  .finder-side.open .search-panel{display:block;}
}
@media(min-width:1000px){
  .finder{grid-template-columns:minmax(0,1fr) 380px;}
  .finder-side{order:2;position:sticky;top:16px;}
  .results{order:1;}
  .filters-toggle{display:none;}
  /* sidebar is narrow — stack the two selects */
  .finder-side .fg-grid{grid-template-columns:1fr;}
}
/* --- horizontal scroll (aftermath modules) ------------------ */
.scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;}
.mod{flex:0 0 min(84vw,400px);scroll-snap-align:start;}

/* --- route matrix columns (race-details block) --------------- */
.matrix{display:grid;grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.matrix{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.matrix{grid-template-columns:1fr;}}