/*
 * Team 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.
 *
 * Two surfaces, each measured for its own ink in PHP and arriving as
 * `--btxc-team-*`: the section and the card. Nothing here names a colour token
 * for type; the defaults below are the paper case.
 */

@layer bertex-components {

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

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

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

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

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

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

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

	.btxc-team__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 on one line, bottom-aligned — the same header
	 * service-menu uses, so two sections on one page read as one family.
	 */
	.btxc-team__header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: var(--btx-spacing-xl, 3rem);
	}

	.btxc-team__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-team-ink);
	}

	.btxc-team__intro {
		margin: 0;

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

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

	/*
	 * `columns` is a maximum rather than a count: each setting is a track
	 * minimum, and `min(100%, …)` keeps a track from overflowing a phone.
	 */
	.btxc-team__grid {
		margin: 0;
		padding: 0;
		list-style: none;

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

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

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

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

	.btxc-team__card {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow: hidden;

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

	/*
	 * A fixed ratio rather than a fixed height, so a row of three photos lines
	 * up whatever shape each one was uploaded in. Anchored at the top: a
	 * portrait cropped to landscape loses the chin, not the eyes.
	 */
	.btxc-team__media {
		aspect-ratio: 3 / 2;

		/* A lift off the card's own ink — the ground the initials sit on, and
		 * what shows for the moment before a lazy photo arrives. */
		background: color-mix(in srgb, var(--btxc-team-card-ink) 7%, transparent);
	}

	.btxc-team__photo {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}

	.btxc-team__initials {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-xl, 2.5rem);
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--btxc-team-card-quiet);
	}

	.btxc-team__copy {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.625rem);
		flex: 1;

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

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

		font-family: monospace;
		font-size: var(--btx-font-body-xs, 0.8125rem);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-team-card-quiet);
	}

	.btxc-team__name {
		margin: 0;

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

	.btxc-team__bio {
		margin: 0;

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

	/*
	 * Pinned to the foot of the card so a row of links lines up however long
	 * each bio runs.
	 */
	.btxc-team__link {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: var(--btx-spacing-xxs, 0.4rem);
		margin-top: auto;
		padding-top: var(--btx-spacing-xs, 0.5rem);

		font-size: var(--btx-font-body-s, 0.9375rem);
		font-weight: 600;
		color: var(--btxc-team-card-ink) !important;
		text-decoration: none;
	}

	.btxc-team__link span:last-child {
		border-block-end: 1px solid color-mix(in srgb, var(--btxc-team-card-ink) 30%, transparent);
	}

	.btxc-team__link:hover span:last-child {
		border-block-end-color: currentColor;
	}

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

	.btxc-team__link-icon {
		display: inline-flex;
		width: 1rem;
		height: 1rem;
	}

	.btxc-team__link-icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}

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

	@media (width < 56rem) {
		.btxc-team__header {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--btx-text-spacing, 1rem);
		}
	}

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

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