/* Page columns component */

.saqi-page-columns {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--60);
}

/* One column on small screens for every variant: these are addresses and
   contact blocks, and a two-column address is harder to read, not denser. */
@media (min-width: 48rem) {
	.saqi-page-columns--2 {
		grid-template-columns: var(--saqi-page-columns-track, repeat(2, minmax(0, 1fr)));
	}

	.saqi-page-columns--3 {
		grid-template-columns: var(--saqi-page-columns-track, repeat(3, minmax(0, 1fr)));
	}
}

/*
 * On the book grid's tracks.
 *
 * Where the template passed `spans`, the columns are placed on the same five
 * tracks and the same 1.5rem gap as the product grid, the footer and the
 * catalogue — so a column edge here is a column edge everywhere else on the
 * page. Only from the width the book grid itself runs five across; below it
 * the equal-column rules above take over, because five tracks in a 48rem
 * viewport are too narrow to set an address in.
 */
@media (min-width: 64rem) {
	.saqi-page-columns--grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.saqi-page-columns--grid > .saqi-page-columns__column {
		grid-column: var(--saqi-start, auto) / span var(--saqi-span, 1);
	}
}

/* An address is as wide as it is — the longest of the sales representatives'
   runs a few pixels past a track — and it breaks rather than clips. On the
   link only: words in prose keep their own breaking. */
.saqi-page-columns__body a {
	overflow-wrap: anywhere;
}

.saqi-page-columns__heading {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

/* A second heading in the same column needs air above it; the first does not. */
.saqi-page-columns__body + .saqi-page-columns__heading,
.saqi-page-columns__body + .saqi-page-columns__region {
	margin-block-start: var(--wp--preset--spacing--50);
}

.saqi-page-columns__body {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

/*
 * Subheads inside a column — Trade Sales' regions, WORLD EX. NORTH AMERICA and
 * the ten after it — are Caslon, the same subhead the About panel and the prize
 * lists use. `base.css` makes a bare `h4` an Inter micro-label on purpose, and
 * that is right for a label sitting on its own; these are the headings of a
 * document read down a column, so they take the document's face.
 *
 * The column heading above them keeps the micro-label and its rule, which is
 * what keeps the two levels apart now they are no longer told apart by weight.
 */
.saqi-page-columns__body :is(h3, h4, h5) {
	margin-block: 1.5em 0.5em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	letter-spacing: normal;
	color: var(--wp--preset--color--light);
}

.saqi-page-columns__body > :first-child {
	margin-block-start: 0;
}

/* A region heading the template prints over a whole column — Inspection
   Copies' USA and UK & ROW — is the same subhead as one inside a body, at
   the top of its column. */
.saqi-page-columns__region {
	margin-block: 0 0.5em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	letter-spacing: normal;
	color: var(--wp--preset--color--light);
}

.saqi-page-columns__body > :last-child {
	margin-block-end: 0;
}