/**
 * Mobile fixes for the theme's feature/checklist lists.
 *
 * .bs-about-3-content-list (Infrastructure "Warehouse & Logistics" and the
 * About page section that reuses the same widget) was authored for a wide
 * two-column desktop layout where each item fits on ONE line. On a phone the
 * column is 343px and every item wraps to 2-3 lines, which exposes four
 * problems at once:
 *
 *   1. the bullet is a Font Awesome `fa-circle` inheriting the 17px text
 *      size — a solid disc as large as the words next to it, reading as an
 *      orange blob rather than a list marker;
 *   2. `align-items: baseline` sits that disc's BASELINE on the text
 *      baseline, so its mass hangs above the line instead of centring on it;
 *   3. `line-height: 1.2` is a single-line value — once the text wraps it is
 *      far tighter than the 1.3-1.5 used for body copy everywhere else;
 *   4. `font-weight: 600` + `capitalize` on wrapped multi-line items makes
 *      each entry read as a heading, heavier than the intro paragraph it is
 *      supposed to support.
 *
 * The gap between items (15px) also stopped separating them: with wrapped
 * lines only ~20px apart, the inter-item gap and the intra-item line gap
 * were nearly equal, so the four items merged into one block of text.
 *
 * Casing is left alone — Title Case is the theme/Figma intent; only the
 * weight comes down.
 *
 * @package MRB
 */

@media (max-width: 767px) {

	.bs-about-3-content-list li {
		/* Match the mobile body step (18 -> 16) and give wrapped lines room. */
		font-size: 16px;
		line-height: 1.55;
		font-weight: 500;

		/* Top-align so the marker stays on the FIRST line of a wrapped item
		   instead of being baseline-shifted. */
		align-items: flex-start;
		gap: 12px;
	}

	/* Separate items by clearly more than the gap between wrapped lines
	   inside one item (16px x 1.55 = ~25px), so the list reads as four
	   entries again. */
	.bs-about-3-content-list li:not(:last-child) {
		margin-bottom: 20px;
	}

	/* A list marker, not a disc: 6px dot, optically centred on the first
	   line (line box ~25px, so 25/2 - 3 = ~9px from the top). flex:none
	   stops the icon being squashed by the wrapping text. */
	.bs-about-3-content-list li i {
		flex: none;
		font-size: 6px;
		line-height: 1;
		margin-top: 9px;
	}

	.bs-about-3-content-list {
		margin-bottom: 32px;
	}
}