/* =================================================================
   THE SERVICES GRID
   =================================================================
   The arrangement only. The cards themselves are in service-card.css,
   shared with the home page's carousel — see the header there.

   PALETTE
   -------
   Declared here because the card sheet deliberately declares none: the
   card is rendered inside whatever is arranging it, and the arranging
   block owns the tokens. #17A2B8 is --themeht-primary-color, the
   colour of the logo and the header; the dark is a teal-black rather
   than a navy, because a blue-black beside a teal accent reads violet.
   ================================================================= */

.cb-grid {
	--brand:      #17A2B8;
	--brand-deep: #0D7C8E;
	--brand-wash: #EAF7F9;

	--ink:        #0A2A33;
	--ink-soft:   #55686F;
	--line:       #DFE9EC;
	--paper:      #FFFFFF;

	--gap:        28px;

	/*
	 * THE BREAKPOINT MUST BE ABLE TO WIN, SO THE SHORTCODE'S VALUE IS A
	 * DEFAULT AND NOT THE PROPERTY ITSELF.
	 *
	 * The shortcode writes its `columns` attribute as an inline style,
	 * and an inline style beats every stylesheet rule including a media
	 * query. Written straight into --cb-grid-cols, "three columns"
	 * survived into the tablet and phone breakpoints below — measured at
	 * 900px wide and still three across.
	 *
	 * This is the same trap the carousel documents at the head of
	 * services-carousel.css, walked into a second time. Read through a
	 * var() default, the breakpoints override the real property freely.
	 */
	--cb-grid-cols: var(--cb-grid-cols-set, 3);

	display: grid;
	grid-template-columns: repeat(var(--cb-grid-cols), minmax(0, 1fr));
	gap: var(--gap);
}

/*
 * The item stretches; the card fills it.
 *
 * Grid items are stretch by default, but a card is a flex column and
 * without this the shorter ones stop at their content and the row
 * loses its bottom edge. Three cards in a row whose bottoms do not
 * line up read as a mistake, not as a variation.
 */
.cb-grid__item {
	display: flex;
	min-width: 0;
}


/* =================================================================
   BREAKPOINTS
   ================================================================= */

@media (max-width: 1024px) {

	.cb-grid {
		--gap: 20px;
		--cb-grid-cols: 2;
	}
}

@media (max-width: 767px) {

	.cb-grid {
		--gap: 18px;
		--cb-grid-cols: 1;
	}
}