/**
 * Contact Card — Figma 11542:38521 (401x389 in the frame).
 *
 * Card-relative y from the node metadata: heading ~30, email 86, phone 113,
 * eyebrow 221..239, hairline 246, row 266..298, hairline 312, row 329..361,
 * card bottom 389. Side inset 29. The module sets no outer width, margin or
 * min-height — the BB column owns those; the card grows with its rows.
 */

.tbl-contact-card {
	display: flex;
	flex-direction: column;
	background: var(--Primary-90);
	border-radius: 8px;
	padding: 28px 29px 28px;
	color: var(--White);
}

.tbl-contact-card__heading {
	margin: 0 0 22px;
	font-family: var(--header-font);
	font-size: var(--h3-max-font-size);
	line-height: 36px;
	color: var(--White);
}

.tbl-contact-card__direct {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

/* Underline-fade recipe: the line is always drawn, only its colour tweens.
   !important on both longhands because the theme's unlayered body-copy rule
   sets them at a specificity a module selector cannot reach (see the note in
   the retired tbl-contact-hero.css). */
.tbl-contact-card__email {
	font-family: var(--body-font);
	font-size: var(--body-font-size-larger);
	line-height: 1.1;
	color: var(--White);
	text-decoration-line: underline !important;
	text-decoration-color: transparent !important;
	text-decoration-thickness: from-font;
	text-underline-offset: 3px;
	transition: var(--button-easing);
}

.tbl-contact-card__email:hover,
.tbl-contact-card__email:focus-visible {
	color: var(--White);
	text-decoration-color: currentColor !important;
}

/* Underlined at rest per the design; hover lifts it to white. */
.tbl-contact-card__phone {
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--nav-bolt-color);
	text-decoration-line: underline !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: from-font;
	text-underline-offset: 3px;
	transition: var(--button-easing);
}

.tbl-contact-card__phone:hover,
.tbl-contact-card__phone:focus-visible {
	color: var(--White);
}

/* margin-top:auto — the offices block hugs the card bottom whenever the column
   makes the card taller than its content (design: 84px of air above the eyebrow). */
.tbl-contact-card__offices {
	margin-top: auto;
	padding-top: 84px;
}

/* Category-Small metrics, copied from .tbl-sfcs__label. No .h6 class: module CSS
   loads before theme.css and the theme's .h6 rule would win the tie. */
.tbl-contact-card__eyebrow {
	margin: 0 0 7px;
	font-family: var(--body-font);
	font-size: 10px;
	line-height: 17.78px;
	font-weight: 405;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--White);
}

.tbl-contact-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* One hairline per row as a top border — never an <hr>. Rhythm: hairline (1px) ->
   19 -> 32-tall row -> 14 -> next hairline (66 pitch); the last row ends on the card's
   own bottom padding. */
.tbl-contact-card__office {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 19px 0 14px;
}

.tbl-contact-card__office:last-child {
	padding-bottom: 0;
}

.tbl-contact-card__office-name {
	flex: 0 0 auto;
	font-family: var(--body-font);
	font-size: var(--body-font-size-larger);
	line-height: 24px;
	letter-spacing: 0.2px;
	color: var(--White);
}

/* rgba(255,255,255,0.6) over --Primary-90 reproduces the design's #a495b7. */
.tbl-contact-card__office-address {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	font-family: var(--body-font);
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.26px;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}

/* --------------------------------------------------------------- responsive --- */

@media (max-width: 480px) {
	.tbl-contact-card {
		padding: 24px 24px 24px;
	}

	/* The 84px desktop air above the eyebrow reads as a hole at phone widths. */
	.tbl-contact-card__offices {
		padding-top: 44px;
	}

	/* Too narrow for name | address on one line without a mid-street wrap:
	   the address drops under the name, left-aligned. */
	.tbl-contact-card__office {
		flex-direction: column;
		gap: 2px;
	}

	.tbl-contact-card__office-address {
		align-items: flex-start;
		text-align: left;
	}
}