/**
 * Type D — Recommendation Row.
 *
 * Centred header stacked above three split tiles:
 *
 *   ┌─────────────────────────────────────────┐
 *   │          Recommended For You            │
 *   │      Trusted brands. Real savings.      │
 *   ├───────────┬───────────┬─────────────────┤
 *   │  tile 1   │  tile 2   │     tile 3      │
 *   └───────────┴───────────┴─────────────────┘
 *
 * The tiles are `.csl-card--sm` — the same variant, at the same size, with the same wash as the
 * feature grid's small tiles. This section owns its layout and nothing about the tile.
 *
 * `.csl-header--centred` is styled here in full rather than inherited. The base `.csl-header`
 * rules live in `csl-product-row.css`, which this section does not load; the feature grid defines
 * `--cell` for itself for the same reason. Only `.csl-section-title` and `-description`, which are
 * in the token layer, come from outside.
 */

.csl-rec {
	/*
	 * No max-width and no auto margins — the Divi row already sets the site's content width, and
	 * capping again here leaves visible gutters inside it. Same reasoning as the feature grid and
	 * the hero. The side padding is this section's own gutter, not a width cap.
	 */
	padding: 0 var( --csl-space-5 );
}

/* ---------------------------------------------------------- centred header */

.csl-header--centred {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --csl-space-2 );
	margin-bottom: var( --csl-space-6 );
	text-align: center;
}

.csl-header--centred .csl-section-title {
	/* Divi styles bare h1-h6 with a 10px bottom padding; a class rule that sets only margin
	 * leaves it in place. */
	margin: 0;
	padding: 0;
	font-size: var( --csl-text-2xl );
	font-weight: var( --csl-weight-bold );
	line-height: 1.12;
	letter-spacing: var( --csl-tracking-tight );
}

.csl-header--centred .csl-section-description {
	margin: 0;
	max-width: 48ch;
	font-size: var( --csl-text-sm );
	line-height: 1.45;
	color: var( --csl-ink-soft );
}

/* ----------------------------------------------------------------- tiles */

.csl-rec__track {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );

	/* Tile gutter — shared with the feature grid, see `--csl-tile-gap`. */
	gap: var( --csl-tile-gap );
}

/* ------------------------------------------------------------- responsive */

/*
 * Two up, then one. A split tile is text beside a packshot: squeezed below about a third of a
 * tablet it stops being a split and becomes a stripe of text beside a stamp, so it drops a column
 * early rather than scaling down into that. The feature grid reaches one column at the same
 * width, so the two sections narrow together.
 */
@media ( max-width: 900px ) {
	.csl-rec__track { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
	.csl-rec { padding: 0 var( --csl-space-3 ); }
	.csl-rec__track { grid-template-columns: minmax( 0, 1fr ); }
	.csl-header--centred { margin-bottom: var( --csl-space-5 ); }
}