/* =========================================================
   GGGI Hub — align event cards with the search box + filter
   Paste into Splash: Settings → Custom CSS
   ---------------------------------------------------------
   NOTE: Splash's CSS validator rejects minmax(), repeat()
   and the fr unit, so every track size below is a plain
   percentage. Do not reintroduce those functions.

   Why !important: Splash writes width/margins as inline
   styles on each card, so plain rules would lose.
   ========================================================= */

/* The card row becomes a grid that fills the full content rail,
   so the first card's left edge lines up with the search box and
   the last column's right edge lines up with the filter.
   4 x 23.5% + 3 gutters x 2% = 100%. */
#splash-container .cms-hub-element .sf.hub > .children {
  display: grid !important;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5% !important;
  column-gap: 2% !important;   /* gutter between cards only */
  row-gap: 2.5rem !important;  /* vertical spacing between rows */
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important; /* kills the centred inline-block row */
  align-items: stretch !important;
}

/* Drop Splash's per-card side margins and % widths — the grid
   handles sizing, so any number of cards stays on the same rail
   and a partial last row still starts flush left. */
#splash-container .cms-hub-element .sf.hub > .children > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  vertical-align: top !important;
}

/* 3 across: 3 x 32% + 2 gutters x 2% = 100% */
@media (max-width: 1024px) {
  #splash-container .cms-hub-element .sf.hub > .children {
    grid-template-columns: 32% 32% 32% !important;
  }
}

/* 2 across: 2 x 49% + 1 gutter x 2% = 100% */
@media (max-width: 820px) {
  #splash-container .cms-hub-element .sf.hub > .children {
    grid-template-columns: 49% 49% !important;
  }
}

/* Single column */
@media (max-width: 600px) {
  #splash-container .cms-hub-element .sf.hub > .children {
    grid-template-columns: 100% !important;
  }
}

/* Safety net: Splash also toggles these state classes on some
   embeds/devices — keep the column counts predictable there too. */
#splash-container.is-responsive-tablet .cms-hub-element .sf.hub > .children {
  grid-template-columns: 49% 49% !important;
}
#splash-container.is-responsive-phone .cms-hub-element .sf.hub > .children {
  grid-template-columns: 100% !important;
}