/*
 * Service menu.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * Colour arrives computed, as in lead-capture and problem-grid: the section's
 * ink and the card's ink are measured in PHP against whatever backgrounds were
 * picked and land as `--btxc-services-*` properties. The defaults below are
 * what they fall back to on paper.
 */

@layer bertex-components {

	/* ── Shell ─────────────────────────────────────────────────────────── */

	.btxc-services {
		--btxc-services-bg: transparent;
		--btxc-services-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-services-quiet: var(--btx-color-primary-1-light-40, #2e4578);
		--btxc-services-card-bg: transparent;
		--btxc-services-card-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-services-card-quiet: var(--btx-color-primary-1-light-40, #2e4578);

		box-sizing: border-box;
		width: 100%;

		background: var(--btxc-services-bg);
		color: var(--btxc-services-ink);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
	}

	.btxc-services--width-wide {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
	}

	.btxc-services--width-full {
		max-width: none;
	}

	.btxc-services__inner {
		box-sizing: border-box;
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
		padding: var(--btx-section-spacing, 5rem) var(--btx-spacing-xl, 3rem);

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xl, 3rem);
	}

	/* ── Header ────────────────────────────────────────────────────────── */

	/*
	 * Heading and intro sit on one line, bottom-aligned: the intro is a
	 * subordinate clause to the heading rather than a paragraph under it, and
	 * baseline-ish alignment is what says so.
	 */
	.btxc-services__header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: var(--btx-spacing-xl, 3rem);
	}

	.btxc-services__heading {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-xl, 2.25rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.1);
		letter-spacing: -0.02em;
		text-wrap: pretty;
		color: var(--btxc-services-ink);
	}

	.btxc-services__intro {
		margin: 0;

		font-size: var(--btx-font-body-m, 1.0625rem);
		line-height: var(--btx-line-height-body, 1.65);
		color: var(--btxc-services-quiet);
	}

	/* ── Cards ─────────────────────────────────────────────────────────── */

	/*
	 * `columns` is a maximum rather than a count. The track minimum is what
	 * decides how many actually fit, so the grid steps down on its own instead
	 * of holding two 9rem columns on a phone.
	 */
	.btxc-services__grid {
		margin: 0;
		padding: 0;
		list-style: none;

		display: grid;
		gap: var(--btx-spacing-lg, 1.5rem);
	}

	.btxc-services__grid--cols-2 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
	}

	.btxc-services__grid--cols-3 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	}

	/*
	 * The long form. One service per row, and the card itself becomes the
	 * grid: copy on the left, the "What you get" panel on the right. The
	 * minimum on the second track is what makes it drop under the copy on a
	 * tablet rather than squeezing three deliverables into 8rem.
	 */
	.btxc-services__grid--cols-1 {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --btx-spacing-m, 1.25rem );
	}

	.btxc-services__grid--cols-1 .btxc-services__card {
		display: grid;
		grid-template-columns: 1.15fr minmax( 0, 1fr );
		gap: var( --btx-spacing-xl, 2.75rem );
		align-items: start;
	}

	.btxc-services__card {
		position: relative;
		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.5rem);

		padding: var(--btx-card-spacing, 1.875rem);

		background: var(--btxc-services-card-bg);
		color: var(--btxc-services-card-ink);
		border: 1px solid color-mix(in srgb, var(--btxc-services-card-ink) 16%, transparent);
		border-radius: var(--btx-border-radius-lg, 0.5rem);

		transition: border-color 0.18s ease;
	}

	.btxc-services__eyebrow {
		margin: 0;

		display: flex;
		align-items: center;
		gap: var( --btx-spacing-xs, 0.75rem );

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-xs, 0.8125rem);
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.02em;
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-services-card-quiet);
	}

	.btxc-services__number {
		font-variant-numeric: tabular-nums;
	}

	/*
	 * The accent, and the only place any type sits near it: the rule is a
	 * graphic judged against the 3:1 floor, which is what lets it be a bright
	 * yellow. The category beside it is ink, never the accent.
	 */
	.btxc-services__rule {
		flex: none;

		inline-size: 2.125rem;
		block-size: 4px;

		background: var( --btxc-services-accent, currentColor );
	}

	.btxc-services__label {
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.btxc-services__title {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-lg, 1.625rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.2);
		text-wrap: pretty;
		color: var(--btxc-services-card-ink);
	}

	/*
	 * `!important` on the colour, and it is not decoration.
	 *
	 * theme.json sets `styles.elements.link.color.text`, so WordPress prints an
	 * unlayered `a:where(:not(.wp-element-button)){color:…}` rule. An unlayered
	 * declaration beats every cascade layer regardless of specificity, so the
	 * ordinary rule here loses and the title takes the theme's link colour —
	 * which is a light-mode colour, and disappears the moment this section is
	 * given a dark background.
	 *
	 * The class core offers as its opt-out is `wp-element-button`, and that is
	 * wrong here: it would also pull in theme.json's button background, padding
	 * and radius, turning a heading into a button. An important declaration in
	 * a layer beats an unlayered normal one, which is the narrowest tool that
	 * actually works. Same trade the visually-hidden rules in lead-trajectory
	 * and management-model make.
	 */
	/*
	 * The copy column. In the two- and three-across layouts this is the whole
	 * card and the wrapper does nothing; in the one-across layout it is the
	 * left half. Wrapping it is what lets the card be a grid without the grid
	 * reaching through into the eyebrow, title and body individually.
	 */
	.btxc-services__copy {
		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-xs, 0.5rem );

		min-width: 0;
	}

	/*
	 * The call to action and the terms share a line. The terms are often what
	 * decides whether the link gets followed, so they sit beside it rather
	 * than at the foot of the card.
	 */
	.btxc-services__foot {
		margin: 0;
		margin-top: var( --btx-spacing-xs, 0.5rem );

		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var( --btx-spacing-s, 1rem );
	}

	.btxc-services__meta {
		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.8125rem );
		line-height: var( --btx-line-height-body, 1.5 );
		color: var( --btxc-services-card-quiet );
	}

	/* ── What you get ─────────────────────────────────── */

	/*
	 * A lift off the card rather than a colour of its own, the same trick
	 * promise-panel uses and for the same reason: the card underneath it can
	 * be paper, a tint or the inverted navy, and one named token cannot be
	 * right on all three. Mixing against the card's own ink is right on each.
	 */
	.btxc-services__panel {
		box-sizing: border-box;
		padding: var( --btx-spacing-m, 1.625rem );

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-s, 0.75rem );

		background: color-mix( in srgb, currentColor 5%, transparent );
		border-radius: var( --btx-border-radius-m, 0.75rem );
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third. See the note in booking-panel/style.css.
	 */
	.btxc-services__panel-heading {
		margin: 0;

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.75rem );
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var( --btxc-services-card-quiet );
	}

	.btxc-services__gets {
		margin: 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-xs, 0.75rem );
	}

	/*
	 * The dash is drawn rather than typed, so it never lands in a copied
	 * selection or a screen reader's output — it is a bullet, and the list is
	 * already a list.
	 */
	.btxc-services__get {
		display: flex;
		gap: var( --btx-spacing-xs, 0.5rem );

		font-size: var( --btx-font-body-s, 1rem );
		line-height: var( --btx-line-height-body, 1.55 );
		color: var( --btxc-services-card-quiet );
	}

	.btxc-services__get::before {
		content: "\2014";
		flex: none;
		color: var( --btxc-services-accent, currentColor );
	}

	/* ── The inverted card ───────────────────────────────── */

	/*
	 * One card in a run painted the other way round, to break the rhythm at
	 * the service that matters most. Its ink is measured against that surface
	 * separately in PHP, which is why a dark choice here is safe on a light
	 * section — and why this rule only has to reassign the local channels
	 * rather than restate every colour.
	 */
	.btxc-services__card--invert {
		--btxc-services-card-ink: var( --btxc-services-inv-ink );
		--btxc-services-card-quiet: var( --btxc-services-inv-quiet );

		/*
		 * `transparent`, not a navy literal. With no inverted background chosen
		 * the ink was measured against the *section*, so painting navy here
		 * anyway would put that section's dark ink on a dark card. No paint and
		 * the measured ink agree in every case.
		 */
		background: var( --btxc-services-inv-bg, transparent );
		color: var( --btxc-services-card-ink );
		border-color: transparent;
	}

	.btxc-services__link {
		color: inherit !important;
		text-decoration: none;
	}

	/*
	 * Stretch the title's link over the whole card. The link stays the only
	 * focusable element and keeps the title as its accessible name; only the
	 * hit area grows.
	 */
	.btxc-services__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.btxc-services__body {
		margin: 0;

		font-size: var(--btx-font-body-s, 1rem);
		line-height: var(--btx-line-height-body, 1.65);
		color: var(--btxc-services-card-quiet);
	}

	/*
	 * The call to action. `aria-hidden` in the markup, because the card's link
	 * already announces itself through the title — this is the visual affordance
	 * for that link, not a second one.
	 */
	.btxc-services__cta {
		align-self: flex-start;
		margin-top: var(--btx-spacing-xs, 0.5rem);

		display: inline-flex;
		align-items: center;
		gap: var(--btx-spacing-xxs, 0.4rem);

		padding-bottom: 0.2rem;
		border-bottom: 2px solid var(--btxc-services-accent, currentColor);

		font-size: var(--btx-font-body-s, 0.9375rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.3);
		color: var(--btxc-services-card-ink);
	}

	.btxc-services__arrow {
		transition: transform 0.18s ease;
	}

	.btxc-services__card--linked:hover {
		border-color: color-mix(in srgb, var(--btxc-services-card-ink) 40%, transparent);
	}

	.btxc-services__card--linked:hover .btxc-services__arrow {
		transform: translateX(0.2em);
	}

	.btxc-services__card--linked:hover .btxc-services__link {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	/* Focus lands on the link; the card is what the reader sees. */
	.btxc-services__card:has(.btxc-services__link:focus-visible) {
		outline: 2px solid var(--btxc-services-card-ink);
		outline-offset: 2px;
	}

	.btxc-services__link:focus-visible {
		outline: none;
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	/* The panel stops being a column and goes under the copy: two columns of
	 * a card do not survive a tablet. */
	@media ( width < 64rem ) {
		.btxc-services__grid--cols-1 .btxc-services__card {
			grid-template-columns: minmax( 0, 1fr );
			gap: var( --btx-spacing-m, 1.25rem );
		}
	}

	@media (width < 60rem) {
		.btxc-services__header {
			grid-template-columns: minmax(0, 1fr);
			align-items: start;
			gap: var(--btx-spacing-m, 1rem);
		}
	}

	@media (width < 40rem) {
		.btxc-services__inner {
			padding: var(--btx-spacing-xxl, 4rem) var(--btx-spacing-m, 1.25rem);
			gap: var(--btx-spacing-lg, 2rem);
		}

		.btxc-services__heading {
			font-size: var(--btx-font-heading-lg, 1.75rem);
		}

		.btxc-services__title {
			font-size: var(--btx-font-heading-m, 1.375rem);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-services__card,
		.btxc-services__arrow {
			transition: none;
		}

		.btxc-services__card--linked:hover .btxc-services__arrow {
			transform: none;
		}
	}
}