/*
 * Contacts (HANDOFF §4 K.2–K.3, §5.12; Figma 21:257, 21:268 / 61:1716, 61:1722). Loaded on /contacts/ only.
 * The hero is hero.css (.hero--page); the Management cards are .card--concrete in theme.css.
 */

/* ---------- K.2 Customer relations ---------- */

/* The H2, the sentence in columns 1–6, then Learn more to the Our approach page; 48 apart, 24 on mobile
   (Figma 61:1716). */
.contacts-crm {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-48);
}

.contacts-crm__text {
	max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

@media (max-width: 767px) {
	.contacts-crm {
		gap: var(--space-24);
	}
}

/* ---------- K.3 Team (Management cards, Figma 39:338) ---------- */

/* 3 × 2, the gutter apart; 2 columns on tablet, 1 on mobile (HANDOFF §4). The grid stretches the cards,
   so the cards in a row share the tallest height. */
.team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
}

/* The title (H3), the second line (Eyebrow, steel), the email, the phone or LinkedIn line, then
   "Headquarters office" (Small, steel, underlined), 8 apart. As in Figma, the email and phone lines are
   underlined only on hover; LinkedIn, a word rather than an address, is always underlined. */
.team-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

/* The portrait (the owner's photos of 2026-10-09): square, the card's full inner width, 16 more above the name. */
.team-card > picture {
	align-self: stretch;
	margin-bottom: var(--space-16);
}

.team-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.team-card__role {
	color: var(--color-steel);
}

.team-card a {
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
}

.team-card__link {
	text-decoration-line: none;
}

.team-card__link:hover,
.team-card__link--underlined {
	text-decoration-line: underline;
}

.team-card__map {
	color: var(--color-steel);
}

@media (max-width: 1023px) {
	.team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.team__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}