/**
 * PX Contact Card — Shared card-level styles
 *
 * Reusable styles for individual contact cards, used by both:
 * - The standalone px-contact-cards module (grid layout)
 * - The minibuilder inside card/hero modules (vertical layout)
 *
 * Section/grid-specific layout lives in the module's own css/frontend.css.
 */


/* ==========================================================================
   Single Card
   ========================================================================== */

.px-contact-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-d15);
}


/* ==========================================================================
   Photo
   ========================================================================== */

.px-contact-card__image {
	width: 6.5rem;
	height: 6.5rem;
	border-radius: var(--radius-full);
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--white);
}

.px-contact-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   Text Group
   ========================================================================== */

.px-contact-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}


/* ==========================================================================
   Name (heading with divider)
   ========================================================================== */

.px-contact-card__name {
	margin-bottom: var(--space-d025);
}


/* ==========================================================================
   Role
   ========================================================================== */

.px-contact-card__role {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	margin: 0 0 var(--space-d075) 0;
}


/* ==========================================================================
   Contact List
   ========================================================================== */

.px-contact-card__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
}

.px-contact-card__contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-normal);
}


/* ==========================================================================
   Contact Icon
   ========================================================================== */

.px-contact-card__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--action);
}

.px-contact-card__contact-icon svg {
	width: 1em;
	height: 1em;
}

/* Force currentColor on paths with hardcoded fills (e.g. LinkedIn) */
.px-contact-card__contact-icon svg path {
	fill: currentColor;
}


/* ==========================================================================
   Contact Link
   ========================================================================== */

.px-contact-card__contact-link {
	color: var(--gray-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-contact-card__contact-link:hover {
	color: var(--action);
}


/* ==========================================================================
   Vertical layout (minibuilder context)
   ========================================================================== */

.px-card__contact-cards,
.px-hero__contact-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-d2);
}

.px-card__contact-cards .px-contact-card__name,
.px-hero__contact-cards .px-contact-card__name {
	font-size: var(--text-d15);
}

.px-card__contact-cards .px-contact-card:last-child,
.px-hero__contact-cards .px-contact-card:last-child {
	margin-bottom: var(--space-d1);
}


/* ==========================================================================
   Responsive — Mobile (≤767px)
   ========================================================================== */

@media screen and (max-width: 767px) {
	.px-contact-card {
		gap: var(--space-d1);
	}

	.px-contact-card__image {
		width: 5rem;
		height: 5rem;
	}
}