/*
 * Section: Channels — where local customers find you.
 *
 * Loaded only on pages carrying the `channels` layout.
 *
 * The section argues that the three placements are not worth the same, so the
 * three weights are the design, not decoration on top of it:
 *
 *   primary  — the raised card. Paper, ink border, offset shadow. One only.
 *   standard — a ruled block. No box at all.
 *   aside    — a ruled block in support ink, for a placement we do not sell.
 *
 * The difference between them is surface and weight, never colour temperature:
 * nothing here may read as a warning or a downgrade. `aside` in particular is
 * a placement we are being straight about, not one we are marking down.
 *
 * Paper and ink are named directly for the raised card, the same way `.card`
 * does it in chrome.css — a card stays a light surface on a dark band, which
 * is what keeps it raised rather than merged.
 */

.channels__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
}

.channels__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	max-width: 68ch;
}

.channels__header > * {
	margin: 0;
}

.channels__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.98;
}

.channels__intro > * {
	margin: 0;
	text-wrap: pretty;
}

.channels__intro > * + * {
	margin-top: var(--sq-space-4);
}


/* =============================================================== LAYOUT == */

.channels__layout {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-6);
	align-items: flex-start;
}

.channels__list {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-6);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.channels__cell {
	margin: 0; /* base.css spaces li + li; the flex gap owns it here */
}

.channel {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	max-width: 68ch;
}

.channel__title {
	margin: 0;
	font-size: var(--sq-text-h3);
	line-height: 1.05;
	text-transform: uppercase;
}

.channel__body > * {
	margin: 0;
	text-wrap: pretty;
}

.channel__body > * + * {
	margin-top: var(--sq-space-3);
}

.channel__more {
	margin: 0;
}


/* ============================================================== PRIMARY ==
 *
 * The one that produces the calls. Raised rather than tinted or badged: the
 * step out of the flow is doing the work, so the copy inside it does not have
 * to announce its own importance.
 */

.channel--primary {
	padding: var(--sq-space-card-padding);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	box-shadow: var(--sq-shadow);
	color: var(--sq-color-ink);
}

/* Inside the card the roles are the light set again, whatever band we are on. */
.sq-on-dark .channel--primary {
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-support);
	--sq-link: var(--sq-color-blue);
	--sq-link-hover: var(--sq-color-orange-text);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-hairline);
	--sq-accent: var(--sq-color-orange-text);
}


/* ================================================== STANDARD AND ASIDE ==
 *
 * A rule above, and nothing else. Not a box — a second box under the primary
 * card would put the two back on the same footing.
 */

.channel--standard,
.channel--aside {
	padding-top: var(--sq-space-4);
	border-top: var(--sq-border-width-hair) solid var(--sq-rule);
}

/*
 * A placement we do not sell.
 *
 * A DEPARTURE FROM THE COMP, and a deliberate one. The comp sets this whole
 * block in #4A4A47, body copy included. Support ink is AA, but the design
 * system reserves it for captions and labels and bans grey body text outright,
 * and this block is three sentences someone is meant to read. `factors` made
 * the same call for the same reason — see the limitation note in factors.css.
 *
 * So the step down lands on the title, which is label-like, and the paragraph
 * stays at full contrast. The copy is what says we do not run ads; the styling
 * only has to stop the block claiming equal billing.
 */
.channel--aside .channel__title {
	color: var(--sq-fg-muted);
}


/* ============================================================== DIAGRAM ==
 *
 * A schematic of what a phone search returns. The caption is not optional
 * dressing — a diagram a reader takes for a screenshot is a claim about a real
 * SERP that we did not intend to make.
 */

.channels__diagram {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
	width: 100%;
	max-width: 20rem; /* 320 — the artboard width of the schematic */
	margin: 0;
}

.channels__diagram-image {
	display: block;
	width: 100%;
	height: auto;
	border: var(--sq-border-width) solid var(--sq-border);
	background-color: var(--sq-color-paper);
}

.channels__diagram-caption {
	margin: 0;
	color: var(--sq-fg-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-micro);
	line-height: var(--sq-leading-normal);
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	.channels__inner {
		gap: var(--sq-space-6);
	}

	.channels__heading {
		letter-spacing: var(--sq-tracking-display);
	}

	/*
	 * The diagram moves beside the list, at its own width. The list keeps 1fr
	 * rather than a fraction of the row, so the prose measure is set by the
	 * `68ch` on the channel itself and not by whatever is left over.
	 */
	.channels--has-diagram .channels__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: var(--sq-space-7);
		align-items: start;
	}
}