/*
 * Section: Service list.
 *
 * Loaded only on pages carrying the `service_list` layout.
 *
 * Design: _design/SharpQuery Services.dc.html.
 *
 * The grid here is this section's own, not the shared card grid in chrome.css
 * — the comp gives featured cards a wider cell, ends every card in a read-more
 * link, and runs one card full width, none of which the shared grid allows.
 * template-parts/partials/service-grid.php carries the full argument.
 *
 * Nothing in this file may move to chrome.css: a second section wanting these
 * rules would be a sign it should use the shared grid instead.
 */


.service-list__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5); /* 24 */
}

.service-list__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	/* 900 for the headline, which is condensed display type; the intro under
	 * it is capped narrower on its own. */
	max-width: 56.25rem; /* 900 */
}

.service-list__header > * {
	margin: 0;
}

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

.service-list__intro {
	max-width: 48.75rem; /* 780 */
}


/* =============================================================== GRID ==
 *
 * Twelve tracks at desktop, which is the comp's six doubled. That is what lets
 * all three cell sizes and all three column counts land on whole tracks:
 *
 *   columns 2 / 3 / 4  → standard spans 6 / 4 / 3
 *   featured           → spans 6, half a row, as the comp draws it
 *   wide               → 1 / -1, its own row
 *
 * The comp's own figures are the `columns: 3` case: standard 4 (three up),
 * featured 6 (two up).
 *
 * Collapse is the theme's fixed one — 2 on tablet, 1 on mobile — with `wide`
 * spanning whatever the row is at every size.
 */

.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.125rem; /* 18 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-grid__cell {
	display: flex;
	margin: 0; /* base.css spaces li + li; the grid gap owns it here */
}

.service-grid__cell--wide {
	grid-column: 1 / -1;
}


/* =============================================================== CARD ==
 *
 * Equal heights: the cell stretches to the tallest in its row, the card fills
 * the cell, and the summary takes the slack so every read-more sits on the
 * same line.
 */

.service-card {
	position: relative; /* anchor for the stretched link */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
	padding: 1.25rem; /* 20 */
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-concrete);
	color: var(--sq-color-ink);
	transition:
		transform var(--sq-duration) var(--sq-ease),
		box-shadow var(--sq-duration) var(--sq-ease);
}

.service-card__head {
	display: flex;
	gap: 0.625rem; /* 10 */
	align-items: center;
	justify-content: space-between;
}

/*
 * The ordinal. Enumeration for scanning — aria-hidden in the markup, because
 * the title carries the meaning and "01" before every service is noise.
 *
 * The comp paints it #8B8A85 on concrete, which is 2.98:1 — under the 3:1
 * large-text floor. Support ink instead, the same substitution problem_cards
 * makes for the same reason.
 */
.service-card__number {
	margin: 0;
	color: var(--sq-color-support);
	font-family: var(--sq-font-display);
	font-size: 1.375rem; /* 22 */
	font-weight: var(--sq-weight-bold);
	line-height: 1;
}

/*
 * The reason a card is featured. Rendered only on featured cards and only when
 * it is written — a featured card with no reason given is just louder, and an
 * empty tag would leave a gap where the comp has a statement.
 */
.service-card__label {
	margin: 0;
	padding: 0.25rem 0.5rem; /* 4 8 */
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
	font-size: 0.6875rem; /* 11 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.4;
	text-transform: uppercase;
}

.service-card__title {
	margin: 0;
	font-size: 1.375rem; /* 22 */
	font-weight: var(--sq-weight-semibold);
	line-height: 1.2;
	text-wrap: balance;
}

/* flex:1 pushes the read-more to the bottom edge of every card in the row. */
.service-card__summary {
	flex: 1 1 auto;
	margin: 0;
	max-width: none;
	font-size: var(--sq-text-body);
	line-height: 1.5;
}

/*
 * The read-more. A paragraph, not an anchor: the whole card is already one
 * anchor through the title, and a second link reading "Learn more" would add a
 * non-descriptive name to the accessibility tree for no gain. It is
 * aria-hidden in the markup and styled as the affordance for the link that is
 * already there.
 */
.service-card__more {
	/* Holds the 44px row the comp gives it, so the read-more sits on the same
	 * line on every card in a row whether the copy is short or long. */
	display: flex;
	align-items: center;
	min-height: var(--sq-tap-target);
	margin: 0;
	color: var(--sq-link);
	font-size: var(--sq-text-small);
	font-weight: var(--sq-weight-bold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Drawn, not written into the markup. */
.service-card__more::after {
	margin-left: 0.5rem;
	content: '\2192';
	text-decoration: none;
}


/* =========================================================== FEATURED ==
 *
 * Priority here IS a wider cell, unlike the shared card grid — the comp gives
 * the two cards that earn the most work half a row each. On top of that: paper
 * rather than concrete, a heavier edge, the orange top rule and the raised
 * shadow.
 */

.service-card--featured {
	padding: 1.25rem;
	border-width: 0.1875rem; /* 3 — heavier than the standard 2px card edge */
	border-top: 0.625rem solid var(--sq-color-orange); /* 10 */
	background-color: var(--sq-color-paper);
	box-shadow: var(--sq-shadow);
}

.service-card--featured .service-card__title {
	font-size: 1.5625rem; /* 25 */
	line-height: 1.15;
}


/* =============================================================== WIDE ==
 *
 * Its own row, with the blue left edge the theme uses for an aside. Stacked on
 * mobile exactly like every other card; the horizontal arrangement is a
 * desktop-only regrouping, below.
 */

.service-card--wide {
	border-left-width: 0.5rem; /* 8 */
	border-left-color: var(--sq-color-blue);
	background-color: var(--sq-color-paper);
}


/* =========================================================== LINK STATE ==
 *
 * The same whole-card anchor the shared grid uses: a real <a> in the title,
 * stretched by a pseudo-element. One tab stop, middle-clickable, copyable, no
 * click handler on a div.
 */

.service-card__title a {
	color: inherit;
	text-decoration: none;
}

.service-card--linked .service-card__link::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: '';
}

.service-card--linked:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--sq-shadow);
}

.service-card--featured.service-card--linked:hover {
	box-shadow: var(--sq-shadow-raised);
}

.service-card--linked:hover .service-card__title {
	color: var(--sq-color-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.service-card--linked:hover .service-card__more {
	color: var(--sq-link-hover);
}

/* Ring the whole card, not just the title text. */
.service-card--linked:has(.service-card__link:focus-visible) {
	outline: 3px solid var(--sq-color-blue);
	outline-offset: 2px;
}

/* Text after the stretched link must stay selectable. */
.service-card__summary,
.service-card__label {
	position: relative;
	z-index: 2;
}


/* ============================================================ TABLET == */

@media (min-width: 30em) {

	.service-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sq-space-card-gap); /* 20 */
	}

}


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

@media (min-width: 61.25em) {

	.service-list__inner {
		gap: 2.5rem; /* 40 */
	}

	.service-list__header {
		gap: 0.875rem; /* 14 */
	}

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

	.service-grid {
		grid-template-columns: repeat(12, 1fr);
	}

	.service-grid--2 .service-grid__cell { grid-column: span 6; }
	.service-grid--3 .service-grid__cell { grid-column: span 4; }
	.service-grid--4 .service-grid__cell { grid-column: span 3; }

	/* Half a row whatever the standard span is, and the full row for wide.
	 * Declared after the counts so they win at equal specificity. */
	.service-grid .service-grid__cell--featured { grid-column: span 6; }
	.service-grid .service-grid__cell--wide { grid-column: 1 / -1; }

	.service-card {
		gap: var(--sq-space-3); /* 12 */
		padding: var(--sq-space-5); /* 24 */
	}

	.service-card__number {
		font-size: 1.625rem; /* 26 */
	}

	.service-card__title {
		font-size: 1.5625rem; /* 25 */
	}

	.service-card__summary {
		font-size: 1.125rem; /* 18 */
		line-height: 1.55;
	}

	.service-card--featured {
		gap: 0.875rem; /* 14 */
		padding: 1.75rem; /* 28 */
		border-top-width: 0.75rem; /* 12 */
		box-shadow: var(--sq-shadow-raised);
	}

	.service-card--featured .service-card__number {
		font-size: 1.875rem; /* 30 */
	}

	.service-card--featured .service-card__label {
		padding: 0.3125rem 0.625rem; /* 5 10 */
		font-size: var(--sq-text-micro);
		letter-spacing: var(--sq-tracking-label);
	}

	.service-card--featured .service-card__title {
		font-size: 2rem; /* 32 */
	}

	.service-card--featured .service-card__summary {
		font-size: var(--sq-text-lead);
	}

	/*
	 * Wide regroups at desktop: number and title share a baseline row, the
	 * summary runs under both, and the read-more sits out to the right across
	 * the whole height. Grid areas rather than a DOM change, so the mobile
	 * order stays the one order in the markup.
	 */
	.service-card--wide {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			'number title more'
			'summary summary more';
		column-gap: var(--sq-space-3);
		row-gap: var(--sq-space-2);
		align-items: baseline;
		padding: var(--sq-space-5) 1.625rem; /* 24 26 */
		border-left-width: var(--sq-border-width-accent); /* 10 */
	}

	.service-card--wide .service-card__head { grid-area: number; }
	.service-card--wide .service-card__title { grid-area: title; }

	.service-card--wide .service-card__summary {
		grid-area: summary;
		max-width: 51.25rem; /* 820 */
	}

	.service-card--wide .service-card__more {
		grid-area: more;
		align-self: center;
		justify-self: end;
		white-space: nowrap;
	}

}