/* Person Widget Styles
 *
 * Styles for the Person widget displaying team member contact information.
 */

/* Widget Container */
.person-widget {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}

/* Person Item (for multiple persons) */
.person-widget__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* First Row: Header (Featured Image + Title/Position) */
.person-widget__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;

}

.person-widget__image {
	flex-shrink: 0;
}

.person-widget__image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.person-widget__info {
	flex: 1;
	display: flex;
	flex-direction: column;

}

.person-widget__title {
	margin: 0;
	font-size: var(--paragraph-font-size) !important;
	line-height: var(--paragraph-line-height) !important;
	font-weight: 700 !important;
	margin: 0 !important;
	color: var(--text);
}

.person-widget__position {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--text);
}

/* Second Row: Email */
.person-widget__email {
	font-size: 1rem;
	line-height: 1.5;
}

.person-widget__email-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
	position: relative;
	margin-left: 24px;
}

.person-widget__email-link::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	mask-image: var(--person-widget-email-icon);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var(--person-widget-email-icon);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
}

.person-widget__email-link:hover,
.person-widget__email-link:focus {
	opacity: 0.7;
	text-decoration: underline;
}

/* Third Row: Phone */
.person-widget__phone {
	font-size: 1rem;
	line-height: 1.5;
}

.person-widget__phone-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
	position: relative;
	margin-left: 24px;
}

.person-widget__phone-link::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	mask-image: var(--person-widget-phone-icon);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: var(--person-widget-phone-icon);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
}

.person-widget__phone-link:hover,
.person-widget__phone-link:focus {
	opacity: 0.7;
	text-decoration: underline;
}

.person-widget__phone-link:hover,
.person-widget__phone-link:focus {
	opacity: 0.7;
	text-decoration: underline;
}

/* Fourth Row: Organisation */
.person-widget__organisation {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
}

.person-widget__organisation-title {
	margin: 0;
	font-size: var(--paragraph-font-size) !important;
	line-height: var(--paragraph-line-height) !important;
	font-weight: 700 !important;
	color: var(--text) !important;
}

.person-widget__organisation-description {
	font-size: var(--paragraph-font-size) !important;
	line-height: var(--paragraph-line-height) !important;
	color: var(--text) !important;
}

/* Fifth Row: Button */
.person-widget__button {
	margin-top: 32px;
}

.person-widget__button a{
	width: min-content;
	white-space: nowrap;
}

.person-widget__button-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.person-widget__button-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

@media screen and (max-width: 768px) {
	.person-widget__button a{
	width: 100%;
	white-space: nowrap;
}
}