/* CtaGrid — the card widths are picked in the template from the item count and written
   as fixed percentage utilities (.half / .third), so the grid holds its column count at
   every viewport. With four cards that leaves two ~146px columns on a phone: the copy
   wraps to eight lines and the button labels break mid-phrase and spill past the card
   edge. Collapsing to one column below the 700 breakpoint is the whole fix — the
   template keeps choosing the column count, and nothing above 700 changes.

   The item rule repeats the gap hook because the width it has to beat is
   `[class*="gp_sp"] > .half` (0,2,0) in global.css, which a plain `> li` would lose to. */
.cta-grd {

	@media screen and (max-width: 699px) {

		&[class*="gp_sp"] > li {
			width: var(--full);
		}

	}

	/* A four-card set runs across in one row on desktop rather than the 2x2 the
	   template's count rule gives it (4 % 2 === 0 -> .half). The :has() guard keeps
	   that to sets of exactly four — a six-card set widened the same way would run
	   four across and leave two orphans on a second row.

	   The width repeats global.css's own .fourth gap math rather than reusing the
	   class, because the class is assigned by the template from the item count and
	   is not ours to change per breakpoint. */
	@media screen and (min-width: 1280px) {

		&[class*="gp_sp"]:has(> li:nth-child(4):last-child) > li {
			width: calc(var(--fourth) - (var(--grd-sp-dyn) * 0.75));
		}

	}

}