/*
 * Contact cards.
 *
 * 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.
 *
 * One thing is different here, and it is worth reading before editing. The
 * surface and the ink are *not* chosen in this file — the render callback
 * measures the editor's background choice and writes four custom properties
 * onto the card:
 *
 *   --btxc-contact-card-bg          the resting background
 *   --btxc-contact-card-bg-hover    the hovered background
 *   --btxc-contact-card-ink         type, whichever of primary-1 / text-bg-1
 *                                   measured better against that background
 *   --btxc-contact-card-ink-quiet   the second tier, from the same decision
 *
 * Every one of those already resolves to a `var(--btx-…, #hex)` pair, so the
 * fallbacks below cover the case where the *component* property is missing —
 * an unfilled card — rather than the case where a token is. Both layers matter:
 * an unfilled card sits on the page and takes page ink, which is why the
 * fallback here is primary-1 and not something neutral.
 */

@layer bertex-components {
	.btxc-contact-cards {
		display: grid;
		gap: var(--btx-spacing-m, 1rem);
		container-type: inline-size;
	}

	/*
	 * "Fit to width" rather than a column count: the card has a natural minimum
	 * and the container decides how many fit, which is the behaviour that
	 * survives being dropped into a sidebar as well as a full-width section.
	 */
	.btxc-contact-cards--auto {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	}

	.btxc-contact-cards--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.btxc-contact-cards--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.btxc-contact-cards--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	/*
	 * Container queries rather than media queries, so a card row narrows because
	 * *its own* container is narrow — correct inside a two-column layout, where
	 * the viewport is wide and the space for the cards is not.
	 */
	@container (max-width: 52rem) {
		.btxc-contact-cards--3,
		.btxc-contact-cards--4 {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@container (max-width: 26rem) {
		.btxc-contact-cards--2,
		.btxc-contact-cards--3,
		.btxc-contact-cards--4 {
			grid-template-columns: 1fr;
		}
	}

	/* The card ------------------------------------------------------------- */

	.btxc-contact-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 0.65rem);

		box-sizing: border-box;
		padding: var(--btx-card-spacing, 1rem);
		border: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
		border-radius: var(--btx-border-radius-lg, 0.5rem);

		background: var(--btxc-contact-card-bg, transparent);
		color: var(--btxc-contact-card-ink, var(--btx-color-primary-1, #1a2744));

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

		transition:
			background 0.18s ease,
			border-color 0.18s ease,
			box-shadow 0.18s ease;
	}

	/*
	 * A card that paints its own surface does not also need a hairline against
	 * the page — the fill is the edge.
	 */
	.btxc-contact-card--filled {
		border-color: transparent;
	}

	.btxc-contact-card--clickable:hover {
		background: var(--btxc-contact-card-bg-hover, var(--btxc-contact-card-bg, transparent));
	}

	.btxc-contact-card--clickable:not(.btxc-contact-card--filled):hover {
		border-color: var(--btx-color-primary-1, #1a2744);
	}

	/* Parts ---------------------------------------------------------------- */

	.btxc-contact-card__icon {
		--btx-icon-size: 1.75rem;

		color: inherit;
	}

	.btxc-contact-card__title {
		margin: 0;
		color: inherit;
		font-family: var(--btx-font-heading-family, georgia, serif);
		font-size: var(--btx-font-heading-lg, 1.375rem);
		line-height: var(--btx-line-height-heading, 1.15);
	}

	.btxc-contact-card__subtext {
		margin: 0;
		color: var(--btxc-contact-card-ink-quiet, var(--btx-color-primary-1-light-40, #4a5f8f));
		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
	}

	/*
	 * The value line — the phone number, the obfuscated address. It is the
	 * thing someone came to the card for, so it reads at body size in the loud
	 * ink rather than joining the subtext tier.
	 */
	.btxc-contact-card__value {
		margin: 0;
		color: inherit;
		font-size: var(--btx-font-body-m, 1rem);
		line-height: var(--btx-line-height-body, 1.6);
		overflow-wrap: anywhere;
	}

	/*
	 * The obfuscate shortcode emits its own inline `display` — flex or block
	 * depending on the site's render mode — on a span it also gives `direction:
	 * rtl`. Neither is ours to fight: the reversal *is* the obfuscation. This
	 * only stops the flex variant from stretching the line to the card width.
	 */
	.btxc-contact-card__value > span {
		max-inline-size: 100%;
	}

	.btxc-contact-card__cta {
		display: inline-flex;
		align-items: center;
		gap: var(--btx-spacing-xxs, 0.3rem);
		margin-block-start: auto;
		padding-block-start: var(--btx-spacing-xxs, 0.3rem);
		color: inherit;
		font-size: var(--btx-font-body-s, 0.875rem);
		font-weight: 600;
	}

	.btxc-contact-card__arrow {
		flex: none;
		transition: transform 0.18s ease;
	}

	.btxc-contact-card--clickable:hover .btxc-contact-card__arrow {
		transform: translateX(0.2em);
	}

	/* The click target ------------------------------------------------------ */

	/*
	 * An <a> on the linked kinds and a <button> the script builds on the email
	 * card. The button gets its chrome stripped rather than the two being
	 * styled apart, because visually they are the same control — the element
	 * differs only because one has a destination in the markup and one cannot.
	 */
	.btxc-contact-card__link {
		appearance: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: inherit;
		text-decoration: none;
		cursor: pointer;
	}

	/* Stretch the heading's control over the whole card. */
	.btxc-contact-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.btxc-contact-card--clickable:hover .btxc-contact-card__link {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	/* Focus lands on the control, but the card is what the user sees. */
	.btxc-contact-card:has(.btxc-contact-card__link:focus-visible) {
		outline: 2px solid var(--btxc-contact-card-ink, var(--btx-color-primary-1, #1a2744));
		outline-offset: 2px;
	}

	.btxc-contact-card__link:focus-visible {
		outline: none;
	}

	/* Social row ------------------------------------------------------------ */

	/*
	 * The one card that holds links instead of being one. Its items sit above
	 * the stretched-link layer that the other kinds paint, which is why the
	 * social card never gets `--clickable`: two overlapping hit areas on one
	 * card is a trap, not a convenience.
	 */
	.btxc-contact-card__social {
		display: flex;
		flex-wrap: wrap;
		gap: var(--btx-spacing-xs, 0.5rem);
		margin: 0;
		margin-block-start: auto;
		padding: 0;
		padding-block-start: var(--btx-spacing-xxs, 0.3rem);
		list-style: none;
	}

	.btxc-contact-card__social-item {
		margin: 0;
	}

	.btxc-contact-card__social-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 1px solid currentcolor;
		border-radius: var(--btx-border-radius-round, 9999px);
		color: inherit;
		text-decoration: none;
		transition:
			background-color 0.18s ease,
			transform 0.18s ease;
	}

	/*
	 * The hover fill is the card's own ink at low alpha rather than a token:
	 * the card's surface is unknown at authoring time, so the only colour
	 * guaranteed to read against it is the one already measured against it.
	 */
	.btxc-contact-card__social-link:hover {
		background-color: color-mix(in oklab, currentcolor 14%, transparent);
	}

	.btxc-contact-card__social-link:focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 2px;
	}

	.btxc-contact-card__mark {
		--btx-icon-size: 1.25rem;
	}

	/* A platform in neither icon set falls back to its own name. */
	.btxc-contact-card__mark-text {
		font-size: var(--btx-font-body-xs, 0.8rem);
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	.btxc-contact-card__sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-contact-card,
		.btxc-contact-card__arrow,
		.btxc-contact-card__social-link {
			transition-duration: 0.01ms;
		}

		.btxc-contact-card--clickable:hover .btxc-contact-card__arrow {
			transform: none;
		}
	}
}