/*
 * Spec panel.
 *
 * 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.
 *
 * The container is deliberately the same surface treatment as promise-panel —
 * a lift off whatever is behind it rather than a colour of its own, so it
 * survives the hero changing its background. The long version of that argument
 * is in promise-panel/style.css; it is not repeated here, but the two files
 * must stay in step on the 7% / 16% mix and the radius, because they appear in
 * the same slot on sibling pages.
 *
 * What differs is the row: a quiet label over a loud value, read as a table,
 * where a promise is a flat ticked line read as a list.
 */

@layer bertex-components {

	.btxc-spec {
		--btxc-spec-ink: var( --btx-color-text-bg-1, #f9fafb );
		--btxc-spec-quiet: var( --btx-color-text-bg-2, #d3e1f7 );
		--btxc-spec-heading: var( --btxc-spec-quiet );

		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-m, 1.25rem );

		color: var( --btxc-spec-ink );
	}

	/*
	 * The lift. This is the container the component was built for and the one
	 * that has to stay in step with promise-panel and case-figures' `panel` —
	 * the three appear in the same hero slot on sibling pages, so the 7% / 16%
	 * mix and the radius are shared and none of them may drift alone.
	 */
	.btxc-spec--panel {
		padding: var( --btx-spacing-lg, 1.875rem );

		background: color-mix( in srgb, currentColor 7%, transparent );
		border: 1px solid color-mix( in srgb, currentColor 16%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.875rem );
	}

	/*
	 * 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.
	 *
	 * A <p> and not a heading: it labels the panel rather than titling a
	 * section, and a stray h3 inside a hero breaks the page outline. The list
	 * is tied to it with aria-labelledby instead.
	 */
	.btxc-spec__heading {
		margin: 0;

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.8125rem );
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var( --btxc-spec-heading );
	}

	.btxc-spec__list {
		margin: 0;

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

	/*
	 * Row: the same pairs across the page as separate outlined cells, for a
	 * strip of short facts under something else. `auto-fit` rather than a fixed
	 * count, because the row is two facts on one case study and four on the
	 * next — and four cells that each hold two words must not be forced to
	 * three columns on a laptop.
	 */
	.btxc-spec--row .btxc-spec__list {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
		gap: var( --btx-spacing-xxs, 1rem );
	}

	.btxc-spec--row .btxc-spec__row {
		padding: var( --btx-card-spacing, 1.25rem );

		background: color-mix( in srgb, currentColor 5%, transparent );
		border: 1px solid color-mix( in srgb, currentColor 16%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.75rem );
	}

	/*
	 * Bare `monospace` on the label in this layout only, the same deliberate
	 * exception the other components make. In the panel the label is prose
	 * above an answer; in the row it is a column heading over a value, and a
	 * small-caps mono label is what says so at a glance. See the note in
	 * booking-panel/style.css.
	 */
	.btxc-spec--row .btxc-spec__label {
		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.75rem );
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.btxc-spec--row .btxc-spec__value {
		font-size: var( --btx-font-body-m, 1.125rem );
	}

	.btxc-spec__row {
		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-xxxs, 0.25rem );
	}

	/*
	 * The label is quiet by hue, never by being hard to read: the ink it takes
	 * is the measured second tier for this surface, which clears the reading
	 * bar by design. Small, but not grey-on-grey.
	 */
	.btxc-spec__label {
		margin: 0;

		font-size: var( --btx-font-body-xs, 0.875rem );
		line-height: var( --btx-line-height-body, 1.5 );
		color: var( --btxc-spec-quiet );
	}

	/*
	 * The heading family on the value, because it is the answer and should
	 * carry the weight of one. A long answer — "Right for you if" runs to a
	 * sentence — drops to the body size so it does not become a paragraph set
	 * in display type.
	 */
	.btxc-spec__value {
		margin: 0;

		font-family: var( --btx-font-heading-family, inherit );
		font-size: var( --btx-font-body-lg, 1.25rem );
		font-weight: 600;
		line-height: var( --btx-line-height-heading, 1.35 );
		text-wrap: pretty;
		color: var( --btxc-spec-ink );
	}

	/*
	 * A sentence-length answer is set as prose, not as a display-type headline.
	 * "Right for you if" runs to a clause where "How long" is two words, and
	 * 20px semibold over three lines reads as a pull quote.
	 *
	 * The class comes from PHP counting the answer rather than from a prop:
	 * whether an answer is a phrase or a sentence is a property of the answer,
	 * not a decision an editor should have to make twice.
	 */
	.btxc-spec__value--prose {
		font-family: var( --btx-font-body-family, inherit );
		font-size: var( --btx-font-body-s, 1rem );
		font-weight: 400;
		line-height: var( --btx-line-height-body, 1.6 );
	}

	@media ( width < 48rem ) {
		/*
		 * The padding belongs to the panel, not to the component — the row
		 * layout pads its cells instead, and shrinking a container that has no
		 * padding does nothing while looking like it does something.
		 */
		.btxc-spec--panel {
			padding: var( --btx-spacing-m, 1.375rem );
		}

		.btxc-spec--panel .btxc-spec__value {
			font-size: var( --btx-font-body-m, 1.125rem );
		}
	}
}