/*
 * Case related.
 *
 * 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.
 *
 * Two surfaces — the band and the card — and the ink for each is computed in
 * PHP against whatever an editor picked, arriving as `--btxc-case-related-*`.
 * Nothing here names a colour token for type.
 */

@layer bertex-components {

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

		box-sizing: border-box;
		padding-block: var( --btx-spacing-lg, 3rem );
		padding-inline: var( --btx-spacing-m, 1.25rem );

		background: var( --btxc-case-related-bg );
		color: var( --btxc-case-related-ink );
	}

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

	.btxc-case-related--width-full {
		max-width: none;
	}

	.btxc-case-related__inner {
		box-sizing: border-box;
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;

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

	.btxc-case-related__heading {
		margin: 0;

		font-family: var( --btx-font-heading-family, "Outfit", sans-serif );
		font-size: var( --btx-font-heading-lg, 2rem );
		font-weight: 700;
		line-height: var( --btx-line-height-heading, 1.2 );
		letter-spacing: -0.02em;
		text-wrap: pretty;
		color: var( --btxc-case-related-ink );
	}

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

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

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

	/*
	 * `position: relative` is load-bearing: it is what the stretched link below
	 * is stretched against. Without it the pseudo-element takes the nearest
	 * positioned ancestor, which is the page, and the whole document becomes
	 * one enormous link to the last card.
	 */
	.btxc-case-related__card {
		position: relative;
		box-sizing: border-box;

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

		background: var( --btxc-case-related-card-bg );
		color: var( --btxc-case-related-card-ink );
	}

	/*
	 * A filled card needs padding; a bare one must not have it, or the image
	 * stops sitting flush with the headline under it. The class comes from PHP
	 * because a stylesheet cannot ask whether a custom property resolved to
	 * anything.
	 */
	.btxc-case-related--filled .btxc-case-related__card {
		padding: var( --btx-card-spacing, 1.25rem );
		border-radius: var( --btx-border-radius-lg, 0.75rem );
	}

	.btxc-case-related__media {
		display: block;
		overflow: hidden;

		border: 1px solid color-mix( in srgb, var( --btxc-case-related-card-ink ) 18%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.75rem );
	}

	/*
	 * A fixed ratio, not a fixed height. The three images are different
	 * photographs at different proportions and the row has to read as a row —
	 * this is the opposite call from case-comparison's pair, where the mismatch
	 * *is* the argument. Here it is three unrelated projects and the shape
	 * carries no meaning, so the grid wins.
	 */
	.btxc-case-related__image {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;

		transition: transform 0.3s ease;
	}

	.btxc-case-related__card:hover .btxc-case-related__image {
		transform: scale( 1.03 );
	}

	/*
	 * 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-case-related__meta {
		margin: 0;

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.75rem );
		line-height: var( --btx-line-height-heading, 1.2 );
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var( --btxc-case-related-card-quiet );
	}

	.btxc-case-related__title {
		margin: 0;

		font-family: var( --btx-font-heading-family, "Outfit", sans-serif );
		font-size: var( --btx-font-heading-m, 1.375rem );
		font-weight: 600;
		line-height: var( --btx-line-height-heading, 1.2 );
		text-wrap: pretty;
	}

	/*
	 * `!important` on the colour: these are links, so theme.json's unlayered
	 * `a:where(:not(.wp-element-button)){color:…}` rule would otherwise take
	 * them, and unlayered beats every cascade layer whatever the specificity.
	 * On a navy band that rule paints a light-mode navy, which is invisible.
	 */
	.btxc-case-related__link {
		color: inherit !important;
		text-decoration: none;
		background-image: linear-gradient( var( --btxc-case-related-accent ), var( --btxc-case-related-accent ) );
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0 2px;

		transition: background-size 0.25s ease;
	}

	/*
	 * The stretched link: the anchor names only the headline, and this is what
	 * makes the rest of the card clickable. See the note in component.php for
	 * why the markup is not simply wrapped in one <a>.
	 */
	.btxc-case-related__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.btxc-case-related__card:hover .btxc-case-related__link,
	.btxc-case-related__link:focus-visible {
		background-size: 100% 2px;
	}

	.btxc-case-related__link:focus-visible {
		outline: 2px solid var( --btxc-case-related-card-ink );
		outline-offset: 3px;
	}

	.btxc-case-related__outcome {
		margin: 0;

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

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

		.btxc-case-related__card:hover .btxc-case-related__image {
			transform: none;
		}
	}
}