/* Cards Grid Section (blocks/sections/cards-grid/cards-grid-section.php):
   from 2 columns up, every card is as tall as the tallest card in the block,
   not just the tallest in its own row. A CSS grid with equal rows
   (grid-auto-rows: 1fr) replaces the row's flex wrap; same 1 / 2 / 3 columns
   as the col-12 col-md-6 col-lg-4 cards it holds. On phones (1 column) cards
   keep their own height. Loaded on the site and in the editor.
   `.row.` raises specificity above the theme's `.row { display: flex }`,
   which loads after this file. */
.row.bn-cards-grid-equal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem; /* space above/below each card */
}
@media (min-width: 768px) {
    .row.bn-cards-grid-equal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        row-gap: 2rem;
    }
}
@media (min-width: 992px) {
    .row.bn-cards-grid-equal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 3rem;
    }
}
/* The cards' Bootstrap column widths would shrink them inside the grid cells. */
.row.bn-cards-grid-equal > [class*="col-"] {
    width: auto;
    max-width: none;
}
/* Messages ("No posts found ...") span the whole width. */
.row.bn-cards-grid-equal > :not([class*="col-"]) {
    grid-column: 1 / -1;
}

/* Resource listings (taxonomy-resource_subcategory.php, taxonomy-resource_type.php),
   the grids that mix ON24 event cards in among the resource cards. The theme's
   `.bn-cards-grid-section .row .col-12` gives each column 0.5rem of side padding,
   so only 1rem ever separates two cards horizontally while the row gap is 3rem -
   cramped, and more obvious once a webinar card sits between two resources. These
   two listings get a 1.5rem gutter on both axes instead (Bootstrap's own default).
   Scoped to `.bn-resource-grid` so the Cards Grid block above is untouched, and the
   selectors carry four classes to outrank the theme's three-class rule whichever
   order the two files load in. Padding rather than `column-gap`, because the cards keep their
   col-lg-4 33.3% widths and a real gap would push the third card onto its own row. */
.bn-cards-grid-section .row.bn-resource-grid {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}
.bn-cards-grid-section .row.bn-resource-grid > [class*="col-"] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
/* One column on phones, so the row gap is the only separation there. */
@media (max-width: 575.98px) {
    .bn-cards-grid-section .row.bn-resource-grid {
        row-gap: 1.5rem;
    }
}

/* The ON24 events listing ([on24_events], e.g. /en-GB/events/). Its row is rendered
   by the shortcode straight into page content, so - unlike every other card grid -
   it has no `.bn-cards-grid-section` wrapper and never picks up that section's row
   gap. Bootstrap leaves 1.5rem between columns horizontally but no row gap at all,
   so stacked cards touch. Same gap scale as the grids above. The class is on both
   the htmx container and the row it swaps in; `.row.` targets the row itself. */
.row.bn-on24-events {
    row-gap: 1.5rem;
}
@media (min-width: 768px) {
    .row.bn-on24-events {
        row-gap: 2rem;
    }
}
@media (min-width: 992px) {
    .row.bn-on24-events {
        row-gap: 3rem;
    }
}