/*
 * Case showcase.
 *
 * 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.
 *
 * Ink is computed in PHP against whatever backgrounds were picked and arrives
 * as `--btxc-cases-*` properties; the defaults below are the paper case.
 */

@layer bertex-components {

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

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

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

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

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

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

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

	.btxc-cases__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, 2.5rem);
	}

	/* ── The featured case ─────────────────────────────────────────────── */

	/*
	 * The image gets the wider column. It is the only thing on the page that
	 * shows the work rather than describing it, and at parity with the copy it
	 * shrinks to a thumbnail with a paragraph beside it.
	 */
	.btxc-cases__featured {
		display: grid;
		grid-template-columns: 1.25fr 1fr;
		align-items: center;
		gap: var(--btx-spacing-xl, 3rem);
	}

	/*
	 * `media_side` is presentation only: the copy stays first in the document
	 * either way, so the reading order does not depend on which side the
	 * picture landed on.
	 */
	.btxc-cases__featured--media-end {
		grid-template-columns: 1fr 1.25fr;
	}

	.btxc-cases__featured--media-end .btxc-cases__media {
		order: 2;
	}

	.btxc-cases__featured--no-media {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * No screenshot, but figures: they take the second column, so the section
	 * reads as prose against numbers rather than one column with a footnote.
	 * The figures then wrap to two-up in their own half rather than stretching
	 * to a single row of four thin ones.
	 */
	.btxc-cases__featured--figures-aside {
		grid-template-columns: 1fr 1fr;
	}

	.btxc-cases__featured--figures-aside .btxc-cases__figures {
		margin: 0;
		padding-top: 0;
		border-top: 0;

		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --btx-spacing-m, 1.125rem );
	}

	.btxc-cases__media {
		overflow: hidden;
		border-radius: var(--btx-border-radius-lg, 0.75rem);
		border: 1px solid color-mix(in srgb, var(--btxc-cases-ink) 14%, transparent);
	}

	/* `display: block` kills the inline-image baseline gap under the frame. */
	.btxc-cases__image {
		display: block;
		width: 100%;
		height: auto;
	}

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

	.btxc-cases__eyebrow {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.8125rem);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-cases-quiet);
	}

	.btxc-cases__title {
		margin: 0;

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

	.btxc-cases__body {
		margin: 0;

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

	/* ── Figures ───────────────────────────────────────────────────────── */

	/*
	 * A <dl>, and the rule above it is the design's. Graphic work, mixed from
	 * the section's ink so it survives a dark background.
	 */
	.btxc-cases__figures {
		margin: var(--btx-spacing-xs, 0.5rem) 0 0;
		padding-top: var(--btx-spacing-m, 1rem);
		border-top: 2px solid color-mix(in srgb, var(--btxc-cases-ink) 55%, transparent);

		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
		gap: var(--btx-spacing-m, 1.25rem);
	}

	/*
	 * The figure reads first and the label under it. In the markup the label is
	 * the <dt> and comes first, because that is the only order a <dl> allows —
	 * `order` is what puts the figure on top without writing invalid HTML.
	 */
	.btxc-cases__figure {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.25rem);
		min-width: 0;
	}

	.btxc-cases__value {
		order: -1;
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-lg, 2rem);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: var(--btx-line-height-heading, 1.1);
		color: var(--btxc-cases-ink);
	}

	.btxc-cases__measure {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.875rem);
		font-weight: 400;
		line-height: var(--btx-line-height-body, 1.4);
		color: var(--btxc-cases-quiet);
	}

	/* ── Call to action ────────────────────────────────────────────────── */

	.btxc-cases__cta {
		align-self: flex-start;
		margin-top: var(--btx-spacing-xxs, 0.25rem);

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

		padding-bottom: 0.2rem;

		/*
		 * Mixed with the ink rather than painted neat. The brand green measures
		 * 1.59:1 against paper — under the 3:1 graphics floor — so a neat rule
		 * would be invisible on a light section and perfect on a dark one. The
		 * mix keeps the hue and borrows enough ink to stay seen on both.
		 */
		border-bottom: 2px solid color-mix(
			in srgb,
			var(--btxc-cases-accent, currentColor) 70%,
			var(--btxc-cases-ink)
		);

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

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

	/* ── The others ────────────────────────────────────────────────────── */

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

		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
		gap: var(--btx-spacing-lg, 1.5rem);
	}

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

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

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

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

		transition: border-color 0.18s ease;
	}

	.btxc-cases__thumb {
		flex: none;
		width: 9.375rem;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		border-radius: var(--btx-border-radius-m, 0.5rem);
	}

	.btxc-cases__thumb-image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.btxc-cases__card-copy {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.375rem);
		min-width: 0;
	}

	.btxc-cases__card-eyebrow {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.75rem);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-cases-card-quiet);
	}

	.btxc-cases__card-title {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-s, 1.3125rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.25);
		text-wrap: pretty;
		color: var(--btxc-cases-card-ink);
	}

	.btxc-cases__card-stat {
		margin: 0;

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

	/* ── Links ─────────────────────────────────────────────────────────── */

	/*
	 * `!important`, and not decoration — see the long note in
	 * service-menu/style.css. theme.json prints an unlayered link-colour rule
	 * that outranks every cascade layer; without this the case titles take the
	 * theme's link colour and disappear on a dark section.
	 */
	.btxc-cases__link {
		color: inherit !important;
		text-decoration: none;
	}

	.btxc-cases__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	/*
	 * The featured title's link stretches over its copy column rather than the
	 * whole section: the two compact cards below are their own links, and a
	 * stretched link over all of it would swallow them.
	 */
	.btxc-cases__copy {
		position: relative;
	}

	.btxc-cases__copy:hover .btxc-cases__arrow,
	.btxc-cases__card--linked:hover .btxc-cases__arrow {
		transform: translateX(0.2em);
	}

	.btxc-cases__copy:hover .btxc-cases__link,
	.btxc-cases__card--linked:hover .btxc-cases__link {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

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

	.btxc-cases__copy:has(.btxc-cases__link:focus-visible),
	.btxc-cases__card:has(.btxc-cases__link:focus-visible) {
		outline: 2px solid var(--btxc-cases-ink);
		outline-offset: 4px;
	}

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

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

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

		/* Stacked, the picture leads whichever side it was on. */
		.btxc-cases__featured--media-end .btxc-cases__media {
			order: 0;
		}
	}

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

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

		.btxc-cases__card {
			flex-direction: column;
			align-items: flex-start;
		}

		.btxc-cases__thumb {
			width: 100%;
		}
	}
}

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

		.btxc-cases__copy:hover .btxc-cases__arrow,
		.btxc-cases__card--linked:hover .btxc-cases__arrow {
			transform: none;
		}
	}
}