/* Even Spacing — row-aligns Custom Cards across a columns block so each section
   of every card starts at the same y, regardless of how much text the section
   above it holds. Opt in by adding the "even-spacing" class to a wp:columns
   block wrapping the cards.

   Implemented with CSS subgrid: the columns block owns one shared set of row
   tracks, and the column / card / card-content each pass those tracks down so
   every card's content lands on the same rows. A row track is as tall as the
   tallest card's content for that row, which is where the extra space comes
   from — no fixed heights, no JS measurement.

   Row tracks
     1  card image
     2  heading group (title + subheading + ribbon, wrapped in a Group block)
     3  button        (so every card's button lines up, ribbon or not)
     4  feature list
     5  "Best Suited For" heading
     6  "Best Suited For" list

   The title, subheading and ribbon share one row rather than getting one each,
   so each sits directly under the one before it instead of being pushed down to
   match the tallest equivalent across the cards. Two grid items cannot share a
   row without overlapping, which is why the three are wrapped in a Group block
   in the page content — the group is the single grid item, and its children
   flow normally, separated only by their own margins. Any slack lands below the
   group, not between its lines.

   Only applied at the width where the columns block is side by side. Below
   that, columns stack and each card flows normally — there is nothing to
   align against. 782px is where core stops stacking wp-block-columns. */

@media (min-width: 782px) {

    .wp-block-columns.even-spacing {
        display: grid;
        /* Flow by column with auto columns rather than a hardcoded count, so
           this keeps working if the columns block gains or loses a column. */
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        align-items: start;
        /* The columns block's gap is meant to separate columns. Once it is a
           grid that same gap would also open up between every row — and subgrid
           inherits it — so each section's spacing would gain 2rem on top of its
           own margins. Keep the gutter, drop the row gap. */
        row-gap: 0;
    }

    /* Pass the shared row tracks down through each nesting level. */
    .wp-block-columns.even-spacing > .wp-block-column,
    .wp-block-columns.even-spacing .wp-block-custom-card-block {
        display: grid;
        grid-row: 1 / span 6;
        grid-template-rows: subgrid;
        row-gap: 0;
        /* Overrides the card's flex column and height:100%, which would other-
           wise fight the grid. The card still fills the tallest card's height
           because it spans every row track. */
        height: auto;
    }

    .wp-block-columns.even-spacing .card-content {
        display: grid;
        grid-row: 2 / span 5;
        grid-template-rows: subgrid;
        row-gap: 0;
        /* Sit each section at the top of its row rather than stretching to fill
           it — the top edges are what have to line up. */
        align-items: start;
        /* The card's flex rules set flex:1; harmless here but cleared for clarity. */
        flex: none;
    }

    /* Grid does not collapse adjacent margins the way normal flow does, so a
       heading's margin-top would stack on top of the previous block's
       margin-bottom and double every gap. Drop the top margins and let the
       bottom ones alone set the rhythm. */
    .wp-block-columns.even-spacing .card-content > * {
        margin-top: 0;
    }

    .wp-block-columns.even-spacing .card-image {
        grid-row: 1;
    }

    /* Place each piece of card content on its row. */
    .wp-block-columns.even-spacing .card-content > .card-heading-group { grid-row: 1; }
    .wp-block-columns.even-spacing .card-content > .wp-block-buttons   { grid-row: 2; }
    .wp-block-columns.even-spacing .card-content > h5                  { grid-row: 4; }

    /* A card ends with two lists: the feature list, then "Best Suited For".
       Matched by position rather than class so a rename does not drop one back
       into auto-placement — where, with its row already occupied, the grid
       would spill it into a second column instead of stacking it. The trailing
       list is a paragraph on cards that have not been converted yet; a card has
       one or the other, never both. */
    .wp-block-columns.even-spacing .card-content > ul:nth-of-type(1) { grid-row: 3; }
    .wp-block-columns.even-spacing .card-content > ul:nth-of-type(2),
    .wp-block-columns.even-spacing .card-content > p                 { grid-row: 5; }

    /* Inside the heading group the headings and ribbon flow normally. Their own
       margins set the spacing, with the top ones zeroed so nothing doubles up
       (core's flow-layout rules also zero the last child's bottom margin, so
       the gap down to the button is restated on the group itself). */
    .wp-block-columns.even-spacing .card-heading-group > * {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .wp-block-columns.even-spacing .card-heading-group > *:last-child {
        margin-bottom: 0;
    }

    .wp-block-columns.even-spacing .card-heading-group {
        margin-bottom: 2rem;
    }

    /* The ribbon belongs to the section above it, so the button keeps its own
       row on every card and all four buttons line up. Cards with no ribbon
       simply leave the ribbon row empty. */

    /* The card's flex layout pushed the buttons to the bottom with margin-top:auto.
       In a grid that would drop the button to the bottom of its row track instead
       of sitting at the top of its section. */
    .wp-block-columns.even-spacing .card-content .wp-block-buttons {
        margin-top: 0;
    }
}