/*
 * Section: Trades grid.
 *
 * Loaded only on pages carrying the `trades_grid` layout.
 *
 * The card grid itself is the shared pattern in chrome.css. This file adds the
 * three densities and the not-yet-published treatment.
 *
 * The job of this section is: a contractor finds their own trade in about two
 * seconds. Everything below serves scanning, not elegance — big targets, one
 * consistent shape per row, nothing hidden behind an interaction.
 */

.trades-grid__inner {
	display: flex;
	flex-direction: column;
	gap: 1.375rem; /* 22 */
}

/* =============================================================== HEADER ==
 *
 * Stacked on mobile, two columns from desktop: eyebrow and heading left,
 * intro right. Grid rather than flex so the two halves top-align on their own
 * grid lines — the heading is condensed display type running two or three
 * lines, and the intro is body copy, so they will never share a baseline and
 * should not pretend to.
 */

.trades-grid__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-4);
}

.trades-grid__title {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
}

.trades-grid__header > *,
.trades-grid__title > * {
	margin: 0;
}

.trades-grid__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.96;
}

.trades-grid__intro {
	display: flex;
	flex-direction: column;
	gap: 1.125rem; /* 18 */
}

.trades-grid__intro > * {
	margin: 0;
}

.trades-grid__closing,
.trades-grid__note {
	max-width: var(--sq-measure);
}

/* The comp sets the closing one step above body — it is the line that catches
 * the contractor whose trade is not in the grid, so it is not fine print. */
.trades-grid__closing {
	font-size: var(--sq-text-lead);
	line-height: var(--sq-leading-normal);
}

/* ================================================================ TILES ==
 *
 * One fused block, not sixteen cards. The list carries the rule colour and the
 * 2px grid gap lets it through between tiles, so the whole thing reads as a
 * single table of contents — which is what it is. Sixteen separately-bordered
 * cards at this density read as sixteen competing objects.
 *
 * Raw ink/paper rather than the role tokens, matching `.card`: a tile stays a
 * light surface on a dark band, so its own hover inversion still means
 * something.
 */

.trade-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sq-border-width);
	margin: 0;
	padding: 0;
	border: var(--sq-border-width) solid var(--sq-color-ink);
	background-color: var(--sq-color-ink);
	list-style: none;
}

.trade-tiles__item {
	display: flex;
	margin: 0;
}

.trade-tiles__link,
.trade-tiles__inner {
	display: flex;
	flex: 1;
	gap: var(--sq-space-3);
	align-items: center;
	justify-content: space-between;
	min-height: 5.125rem; /* 82 */
	padding: var(--sq-space-4) 1.25rem; /* 16 20 */
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
	font-size: var(--sq-text-lead);
	font-weight: var(--sq-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
}

.trade-tiles__text {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-1);
}

.trade-tiles__summary {
	color: var(--sq-color-support);
	font-size: var(--sq-text-small);
	font-weight: var(--sq-weight-regular);
	line-height: 1.45;
}

.trade-tiles__arrow {
	flex-shrink: 0;
	color: var(--sq-color-orange-text);
	font-size: 1.1875rem; /* 19 */
	line-height: 1;
}

/*
 * Hover and focus invert the whole tile. The transition is on colour only —
 * nothing moves, so a pointer travelling across a 4×4 grid does not set off a
 * wave of motion.
 */
.trade-tiles__link {
	transition:
		background-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease);
}

.trade-tiles__link:hover,
.trade-tiles__link:focus-visible {
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
}

/*
 * The inverted tile is the one place in the theme where the accent sits on
 * near-black, so it uses the on-dark orange. The text orange fails contrast
 * there.
 */
.trade-tiles__link:hover .trade-tiles__arrow,
.trade-tiles__link:focus-visible .trade-tiles__arrow {
	color: var(--sq-color-on-dark-accent);
}

.trade-tiles__link:hover .trade-tiles__summary,
.trade-tiles__link:focus-visible .trade-tiles__summary {
	color: var(--sq-color-on-dark-muted);
}

/* ==================================================== NOT PUBLISHED YET ==
 *
 * Same link rule as everywhere else: no anchor at all, so there is nothing to
 * tab to and nothing announced as a link. A tint rather than a dashed edge —
 * inside a fused grid a dashed border would fight the hairlines — plus the
 * stated label in the slot the arrow would occupy. The space says "not yet"
 * rather than "missing".
 */

.trade-tiles__item--pending .trade-tiles__inner {
	background-color: var(--sq-color-concrete);
	color: var(--sq-fg-muted);
	cursor: default;
}

.trade-tiles__badge {
	flex-shrink: 0;
	padding: 0.0625rem 0.375rem;
	border: var(--sq-border-width-hair) solid currentColor;
	color: var(--sq-color-support);
	font-size: var(--sq-text-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ============================================================ CALLOUT ==
 *
 * The "Also available" aside at the foot of the comp — adjacent work, not a
 * seventeenth trade. Everything about it is chosen to keep that distinction
 * legible: it sits below a rule, outside the fused grid, on paper with the
 * blue edge the theme already uses for a quoted aside, and it is capped at
 * 800px so it never spans the full width the tile grid does.
 *
 * Raw ink/paper here for the same reason as the tiles above: this is a light
 * panel wherever it lands, so the band must not repaint it.
 */

.trades-grid__aside {
	padding-top: var(--sq-space-5);
	border-top: var(--sq-border-width) solid var(--sq-rule);
}

.trades-grid__callout {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
	max-width: 50rem; /* 800 */
	padding: 1.25rem;
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-left-width: 0.5rem; /* 8 */
	border-left-color: var(--sq-color-blue);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

/* Spacing comes from the flex gap, so the flow margins in base.css would
 * double it. */
.trades-grid__callout > * {
	margin: 0;
}

.trades-grid__callout-label {
	color: var(--sq-color-support);
	font-size: var(--sq-text-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label);
	line-height: 1.2;
	text-transform: uppercase;
}

.trades-grid__callout-heading {
	font-family: var(--sq-font-body);
	font-size: 1.375rem; /* 22 */
	font-weight: var(--sq-weight-semibold);
	line-height: var(--sq-leading-snug);
	text-transform: none;
}

.trades-grid__callout-body {
	font-size: var(--sq-text-body);
	line-height: var(--sq-leading-normal);
}

.trades-grid__callout-body > * {
	margin: 0;
	max-width: 41.25rem; /* 660 */
}

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

/*
 * Stacked on mobile so each link keeps its own 44px row; side by side from the
 * first breakpoint, where two fit without either wrapping.
 */
.trades-grid__callout-actions {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
	padding-top: var(--sq-space-1);
}

/* =========================================================== DENSITIES ==
 *
 * The comp draws 2-up at 390px, but only for the name-only density. A tile
 * carrying a one-line description at half of 390px is about four words a line,
 * so `full` stays single column until there is room for it.
 */

.trade-tiles--compact {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 29.99em) {

	/* Two names across a 390px screen: the comp's tighter mobile tile. */
	.trade-tiles--compact .trade-tiles__link,
	.trade-tiles--compact .trade-tiles__inner {
		min-height: 4rem; /* 64 */
		padding: 0.625rem 0.75rem; /* 10 12 */
		font-size: var(--sq-text-body);
	}

	/* The comp drops the arrow here — at this width it costs more room than it
	 * earns, and the trade name already says where the tile goes. */
	.trade-tiles--compact .trade-tiles__arrow {
		display: none;
	}

}

@media (min-width: 30em) {

	.trade-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.trades-grid__callout-actions {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sq-space-5);
	}

}

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

@media (min-width: 61.25em) {

	.trades-grid__inner {
		gap: 2.25rem; /* 36 */
	}

	.trades-grid__header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sq-space-7);
		align-items: start;
	}

	.trades-grid__title {
		gap: var(--sq-space-4);
	}

	.trades-grid__heading {
		line-height: 0.98;
		letter-spacing: var(--sq-tracking-display);
	}

	/* Optical, not structural: nudges the intro's first line down to sit with
	 * the cap height of the heading rather than above it. */
	.trades-grid__intro {
		padding-top: var(--sq-space-2);
	}

	.trade-tiles--2 { grid-template-columns: repeat(2, 1fr); }
	.trade-tiles--3 { grid-template-columns: repeat(3, 1fr); }
	.trade-tiles--4 { grid-template-columns: repeat(4, 1fr); }

	.trades-grid__aside {
		padding-top: 2.25rem; /* 36 */
	}

	.trades-grid__callout {
		gap: var(--sq-space-3);
		padding: 1.625rem 1.75rem; /* 26 28 */
		border-left-width: var(--sq-border-width-accent);
	}

	.trades-grid__callout-label {
		font-size: var(--sq-text-label-sm);
	}

	.trades-grid__callout-heading {
		font-size: 1.6875rem; /* 27 */
	}

	.trades-grid__callout-body {
		line-height: 1.55;
	}

}