/*
 * Problem grid.
 *
 * 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.
 *
 * As in lead-capture, this file is short on colour on purpose. The section's
 * ink and the card's ink are *computed* in PHP against whatever backgrounds an
 * editor picked, and arrive as `--btxc-problem-*` custom properties. Nothing
 * here names a colour token for type — it names those properties, and the
 * defaults below are what they fall back to when the component renders with no
 * background at all, which is paper.
 *
 * The one colour this file does name is the hairline, and that is graphic work
 * judged against the 3:1 floor rather than a reading contrast.
 */

@layer bertex-components {

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

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

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

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

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

	/*
	 * Sizes itself rather than relying on a container, the same deal the hero
	 * and lead-capture make: `--width-wide` caps at the design system's max
	 * width, `--width-full` takes whatever the parent gives it — which in a
	 * page's content flow is the viewport — and the inner column caps either
	 * way, so only the background reaches the screen edges.
	 */
	.btxc-problem--width-wide {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
	}

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

	.btxc-problem__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);
	}

	/* ── The diagnosis ─────────────────────────────────────────────────── */

	/*
	 * Slightly wider on the left: the heading is the claim and wants the room,
	 * and an even split leaves it breaking at an awkward width against body
	 * copy that does not need the same measure.
	 */
	.btxc-problem__header {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		align-items: start;
		gap: var(--btx-spacing-xl, 3rem);
	}

	.btxc-problem__lead,
	.btxc-problem__aside {
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 1rem);
		min-width: 0;
	}

	.btxc-problem__eyebrow {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-s, 0.875rem);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-problem-quiet);
	}

	.btxc-problem__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-problem-ink);
	}

	.btxc-problem__body {
		margin: 0;

		font-size: var(--btx-font-body-lg, 1.125rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-problem-quiet);
	}

	/*
	 * Graphic, not type: judged against the 3:1 floor. Drawn from the section's
	 * own ink through color-mix so it follows a dark background as readily as a
	 * light one, rather than being a paper assumption baked into a literal.
	 */
	.btxc-problem__rule {
		height: 1px;
		background: color-mix(in srgb, var(--btxc-problem-ink) 22%, transparent);
	}

	.btxc-problem__conclusion {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-lg, 1.125rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.35);
		text-wrap: pretty;
		color: var(--btxc-problem-ink);
	}

	/* ── The symptoms ──────────────────────────────────────────────────── */

	/*
	 * A grid with a minimum column width rather than a fixed count, the same
	 * reason card-grid.php gives: the container decides how many fit, so four
	 * cards are four across on a wide page and two on a tablet with no
	 * breakpoint written anywhere.
	 */
	.btxc-problem__grid {
		margin: 0;
		padding: 0;
		list-style: none;

		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
		gap: var(--btx-spacing-lg, 1.5rem);
	}
	@media (max-width: 768px) {
		.btxc-problem__grid {
			grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
		}
	}

	.btxc-problem__card {
		--btxc-problem-accent: var(--btxc-problem-card-ink);

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

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

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

	/*
	 * The accent, and the only thing on the card wearing it. The brand colours
	 * measure between 1.15 and 3.55 against paper — fine for a mark at the 3:1
	 * graphics floor, nowhere near the 4.5:1 a heading needs. See the note at
	 * the top of component.php.
	 */
	.btxc-problem__mark {
		width: 1.75rem;
		height: 0.25rem;
		flex: none;
		background: var(--btxc-problem-accent);
	}

	/*
	 * 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-problem__card-eyebrow {
		margin: 0;

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

	.btxc-problem__card-title {
		margin: var(--btx-spacing-xxs, 0.3rem) 0 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-m, 1.25rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.2);
		color: var(--btxc-problem-card-ink);
	}

	.btxc-problem__card-body {
		margin: 0;

		font-size: var(--btx-font-body-s, 0.9375rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-problem-card-quiet);
	}

	/*
	 * What the symptom costs.
	 *
	 * Three things separate it from the body above, and the accent is
	 * deliberately none of them — see the note in component.php, and the
	 * README under "the accent is a mark and never type". A brand colour here
	 * would measure about 1.15:1 on paper and look correct in this file,
	 * because the fallback beside the token is readable.
	 *
	 * Instead: the card's full ink rather than its quiet tier, a hairline
	 * above, and the label in weight. All three survive whatever background an
	 * editor picks, because both inks were measured against it in PHP.
	 *
	 * The hairline is the same mix as the card's own border, and it echoes the
	 * rule above `conclusion` — the section's existing way of saying "this is
	 * the line the rest was leading to".
	 *
	 * `margin-top: auto` pins it to the foot of the card, so a row of cards
	 * lines its costs up instead of hanging each one wherever its body happened
	 * to stop. Cards in a grid row are already equal height; this is what makes
	 * that height do something. It also needs more air above the rule than the
	 * card's flex gap gives, or the rule reads as an underline on the body
	 * rather than a separator — hence the padding as well.
	 */
	.btxc-problem__card-cost {
		margin: auto 0 0;
		padding-top: var(--btx-spacing-xs, 0.6rem);

		border-top: 1px solid color-mix(in srgb, var(--btxc-problem-card-ink) 14%, transparent);

		font-size: var(--btx-font-body-s, 0.9375rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-problem-card-ink);
	}

	.btxc-problem__card-cost-label {
		font-weight: 700;
	}

	/* ── Beside, not under ────────────────────────────────── */

	/*
	 * The router arrangement. The prose asks the question on one side and the
	 * cards answer it on the other, which is a different section from the
	 * diagnosis even though it is built out of the same parts — so it is a
	 * layout switch rather than a second component.
	 *
	 * Three changes, and they are all the same change: what was two rows
	 * becomes two columns. The header stops being a two-column thing of its
	 * own (it is now the left column), and the cards stop sizing themselves to
	 * the page (they are now in half of it, so `auto-fit` against a 15rem
	 * minimum would give one column at most widths).
	 */
	.btxc-problem--aside .btxc-problem__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var( --btx-spacing-xl, 3.25rem );
	}

	.btxc-problem--aside .btxc-problem__header {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --btx-text-spacing, 1rem );
	}

	.btxc-problem--aside .btxc-problem__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --btx-spacing-m, 1.125rem );
	}

	/* ── The way out ─────────────────────────────────────── */

	.btxc-problem__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var( --btx-spacing-s, 0.875rem );

		padding-block-start: var( --btx-spacing-xxs, 0.375rem );
	}

	/*
	 * Painted in the section's own measured ink, with the surface under it as
	 * the label — so the button inverts correctly whether the section is paper
	 * or navy, without a second colour control.
	 */
	.btxc-problem__cta {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		gap: var( --btx-spacing-xs, 0.625rem );

		padding: var( --btx-button-spacing, 1rem ) var( --btx-spacing-lg, 1.625rem );

		background: var( --btxc-problem-ink );
		color: var( --btxc-problem-on-ink, var( --btx-color-text-bg-1, #f9fafb ) );

		border-radius: var( --btx-border-radius-m, 0.5rem );

		font-size: var( --btx-font-body-s, 1.0625rem );
		font-weight: 600;
		line-height: var( --btx-line-height-heading, 1.3 );
		text-decoration: none;

		transition: filter 0.18s ease;
	}

	.btxc-problem__cta:hover {
		filter: brightness( 1.12 );
	}

	.btxc-problem__cta:focus-visible,
	.btxc-problem__alt:focus-visible {
		outline: 2px solid var( --btxc-problem-ink );
		outline-offset: 3px;
	}

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

	.btxc-problem__cta:hover .btxc-problem__arrow {
		transform: translateX( 3px );
	}

	/*
	 * The cheaper door, and it should read as one: a link with a rule under it
	 * rather than a second button competing with the first.
	 */
	.btxc-problem__alt {
		font-size: var( --btx-font-body-s, 1rem );
		font-weight: 600;
		color: var( --btxc-problem-ink );
		text-decoration: none;

		border-block-end: 2px solid var( --btx-color-primary-2, #09e76a );
		padding-block-end: 2px;
	}

	.btxc-problem__alt:hover {
		border-block-end-color: var( --btxc-problem-ink );
	}

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

	@media (width < 60rem) {
		.btxc-problem__header {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--btx-spacing-lg, 1.5rem);
		}

		/* Two half-width columns of cards do not survive a tablet: the prose
		 * goes back above them and the cards take the full width. */
		.btxc-problem--aside .btxc-problem__inner {
			grid-template-columns: minmax( 0, 1fr );
		}
	}

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

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