.grid-cards__inner {
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Feature row — text on a colour block, landscape image beside it
   -------------------------------------------------------------------------- */

.grid-cards__feature {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-cards__feature-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem;
}

.grid-cards__feature h2,
.grid-cards__feature h3 {
    margin-bottom: 1.5rem !important;
}

.grid-cards__feature-title {
    margin: 0;
    font-weight: normal;
}

.grid-cards__feature-image figure {
    margin: 0;
    height: 100%;
}

.grid-cards__feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    /* Landscape by default; the image still fills the cell once the row is
       taller than the crop on wider screens. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Card grid — portrait cards, button pinned to the bottom
   -------------------------------------------------------------------------- */

.grid-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grid-cards__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    box-sizing: border-box;
}

.grid-cards__grid h2,
.grid-cards__grid h3 {
    margin-top: 0 !important;
}

.grid-cards__card-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--large);
    font-weight: normal;
}

/* With no gap on the card, the space before the button lives here */
.grid-cards__card-text,
.grid-cards__feature-text {
    margin-bottom: 3rem;
}

.grid-cards__card-text p:first-child,
.grid-cards__feature-text p:first-child {
    margin-top: 0;
}

.grid-cards__card-text p:last-child,
.grid-cards__feature-text p:last-child {
    margin-bottom: 0;
}

/* Pushes the button to the foot of the card whatever the text length.
   style.css has `:where(.is-layout-flow) > .wp-block-buttons { margin-block-start }`
   at the same specificity, so this selector is deliberately longer rather than
   left to win on load order. */
.block-grid-cards .grid-cards__card .grid-cards__card-buttons,
.block-grid-cards .grid-cards__feature-content .wp-block-buttons {
    margin-top: auto;
    margin-block-start: auto;
}

/* The theme's outline button, in the colour chosen per card or feature row.
   style.css styles every button through `:root :where()` with !important, so
   these need !important and a selector that outranks it. The template sets
   --grid-cards-button-color and, for hover, --grid-cards-button-hover-label. */
.block-grid-cards .grid-cards__card .wp-block-button__link,
.block-grid-cards .grid-cards__feature-content .wp-block-button__link {
    background: transparent !important;
    border-color: var(--grid-cards-button-color, var(--wp--preset--color--contrast)) !important;
    color: var(--grid-cards-button-color, var(--wp--preset--color--contrast)) !important;
}

/* Hover inverts: the chosen colour becomes the fill */
.block-grid-cards .grid-cards__card .wp-block-button__link:hover,
.block-grid-cards .grid-cards__feature-content .wp-block-button__link:hover {
    background: var(--grid-cards-button-color, var(--wp--preset--color--accent-1)) !important;
    border-color: var(--grid-cards-button-color, var(--wp--preset--color--accent-1)) !important;
    color: var(--grid-cards-button-hover-label, var(--wp--preset--color--base)) !important;
}

/* The chevron is a background image in two fixed colours. By default it is
   the theme's dark one at rest and the light one on a dark hover fill... */
.block-grid-cards .grid-cards__card .wp-block-button__link:hover:after,
.block-grid-cards .grid-cards__feature-content .wp-block-button__link:hover:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%23f9f8e8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* ...and the other way round when the chosen colour is light */
.block-grid-cards .wp-block-button__link.grid-cards__button--light:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%23f9f8e8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.block-grid-cards .grid-cards__card .wp-block-button__link.grid-cards__button--light:hover:after,
.block-grid-cards .grid-cards__feature-content .wp-block-button__link.grid-cards__button--light:hover:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%230F5452' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* Two cards abreast before the feature row splits, so the grid does not jump
   straight from one column to three. */
@media (min-width: 600px) {

    .grid-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cards__card {
        /* Portrait. Content longer than the ratio grows the card rather than
           overflowing it. */
        aspect-ratio: 4 / 5;
    }

}

@media (min-width: 900px) {

    .grid-cards__feature {
        grid-template-columns: 1fr 1fr;
    }

    /* Beside the text, the image sits on the right despite coming first */
    .grid-cards__feature-image {
        order: 1;
    }

    .grid-cards__feature-content {
        padding: var(--wp--preset--spacing--50);
    }

    .grid-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }

}