/*
 * Atomic Person widgets and the bundled Elementor Person Loop Item.
 *
 * SGGW Content owns the data. This sheet makes its semantic output usable in
 * Elementor without relying on conditional Gutenberg block-style loading.
 */

.sggw-loop-person-card.e-con {
	align-items: flex-start;
	background-color: var(--sggw-surface-current);
	block-size: 100%;
	border-radius: var(--wp--custom--radius--medium, 8px);
	box-sizing: border-box;
	container-name: sggw-elementor-person-card;
	container-type: inline-size;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50, 32px);
	inline-size: 100%;
	min-inline-size: 0;
	overflow: hidden;
	padding: var(--wp--preset--spacing--40, 24px);
}

.sggw-loop-person-card > .elementor-widget-sggw-person-photo {
	flex: 0 0 160px;
	inline-size: 160px;
	margin: 0;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.sggw-loop-person-card
	> .elementor-widget-sggw-person-photo
	> .elementor-widget-container {
	inline-size: 120px;
	max-inline-size: 100%;
}

.sggw-elementor-person-photo.wp-block-sggw-person-photo {
	aspect-ratio: 3 / 4;
	background-color: var(--sggw-surface-2, var(--sggw-surface-alternating));
	border-radius: var(--wp--custom--radius--small, 4px);
	box-sizing: border-box;
	inline-size: 120px;
	margin: 0;
	max-inline-size: 100%;
	overflow: hidden;
	position: relative;
}

.sggw-elementor-person-photo > img,
.sggw-elementor-person-photo .wp-block-sggw-person-photo__image {
	block-size: 100%;
	border-radius: inherit;
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	object-fit: cover;
}

.sggw-elementor-person-photo .wp-block-sggw-person-photo__fallback {
	background-color: var(--sggw-surface-2, var(--sggw-surface-alternating));
	border-radius: inherit;
	display: grid;
	inset: 0;
	overflow: hidden;
	place-items: center;
	position: absolute;
}

.sggw-elementor-person-photo .wp-block-sggw-person-photo__fallback::before {
	-webkit-mask-image: var(--sggw-person-placeholder-image);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: var(--sggw-line-decorative);
	block-size: 60%;
	content: "";
	display: block;
	inline-size: 60%;
	mask-image: var(--sggw-person-placeholder-image);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.sggw-loop-person-card__content.e-con {
	align-items: stretch;
	flex: 1 1 20rem;
	gap: var(--wp--preset--spacing--40, 24px);
	inline-size: auto;
	min-inline-size: min(100%, 20rem);
	padding: 0;
}

.sggw-loop-person-card--compact.e-con {
	flex-direction: column;
	gap: 0;
}

.sggw-loop-person-card--compact
	> .sggw-loop-person-card__content.e-con {
	flex-basis: auto;
	inline-size: 100%;
	min-inline-size: 0;
}

.sggw-loop-person-card--list-item.e-con {
	align-items: stretch;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20, 12px);
}

.sggw-loop-person-card--list-item
	.sggw-loop-person-list-item__name
	.sggw-elementor-person-name {
	font-size: var(--wp--preset--font-size--medium);
}

.sggw-loop-person-list-item__contact.e-con {
	align-items: stretch;
	gap: var(--wp--preset--spacing--10, 8px);
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

.sggw-loop-person-list-item__primary-contact.e-con {
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 16px);
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

.sggw-loop-person-list-item__primary-contact
	> .elementor-widget-sggw-person-metadata {
	flex: 0 1 auto;
	inline-size: auto;
	min-inline-size: 0;
}

.sggw-loop-person-card--list-item
	.sggw-elementor-person-metadata.wp-block-sggw-person-contact {
	font-size: var(--wp--preset--font-size--small);
}

.sggw-loop-person-card--list-item
	.sggw-elementor-person-office-hours.wp-block-sggw-person-office-hours {
	--sggw-person-office-hours-font-size: var(--wp--preset--font-size--small);
	--sggw-person-office-hours-schedule-font-size: var(--wp--preset--font-size--x-small);
}

.sggw-loop-person-list-item__primary-contact:not(:has(.elementor-widget-container > *)),
.sggw-loop-person-list-item__contact:not(:has(.elementor-widget-container > *)) {
	display: none;
}

.sggw-loop-person-card__identity.e-con {
	align-items: stretch;
	gap: var(--wp--preset--spacing--10, 8px);
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

.sggw-loop-person-card__contact.e-con,
.sggw-loop-person-card__profiles.e-con {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30, 16px);
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

.sggw-loop-person-card__contact.e-con {
	align-items: stretch;
}

.sggw-loop-person-card__contact
	> :where(.elementor-widget-sggw-person-metadata,
	.elementor-widget-sggw-person-office-hours) {
	align-self: stretch;
	inline-size: 100%;
}

.sggw-loop-person-card__profiles.e-con {
	flex-direction: row;
	flex-wrap: wrap;
}

.sggw-loop-person-card
	:where(.elementor-widget-sggw-person-metadata,
	.elementor-widget-sggw-person-office-hours):not(:has(.elementor-widget-container > *)) {
	display: none;
}

.sggw-loop-person-card__profiles:not(:has(.elementor-widget-container > *)) {
	display: none;
}

.sggw-loop-person-card :where(.elementor-widget-sggw-person-name,
	.elementor-widget-sggw-person-role,
	.elementor-widget-sggw-person-metadata,
	.elementor-widget-sggw-person-office-hours) {
	margin: 0;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.sggw-elementor-person-role.wp-block-sggw-person-role {
	color: var(--sggw-text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	letter-spacing: .04em;
	line-height: var(--wp--custom--typography--line-height--supporting, 1.5);
	margin: 0;
	text-transform: uppercase;
}

.sggw-elementor-person-name.wp-block-sggw-person-name {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	line-height: var(--wp--custom--typography--line-height--heading, 1.2);
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
}

.sggw-elementor-person-metadata.wp-block-sggw-person-contact {
	--sggw-person-metadata-icon-size: 1.25em;

	align-items: flex-start;
	color: var(--sggw-text-muted);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	gap: var(--wp--preset--spacing--10, 8px);
	line-height: var(--wp--custom--typography--line-height--supporting, 1.5);
	margin: 0;
	max-inline-size: 100%;
}

.sggw-elementor-person-metadata .wp-block-sggw-person-contact__icon {
	block-size: 1lh;
	display: inline-grid;
	flex: 0 0 auto;
	font-family: var(--sggw-icon-font-family);
	font-size: var(--sggw-person-metadata-icon-size);
	font-style: normal;
	font-weight: var(--sggw-icon-font-weight-regular);
	inline-size: var(--sggw-person-metadata-icon-size);
	line-height: 1;
	place-items: center;
}

.sggw-elementor-person-metadata .wp-block-sggw-person-contact__icon::before {
	display: block;
}

.sggw-elementor-person-metadata.is-sggw-person-contact-phone
	.wp-block-sggw-person-contact__icon::before {
	content: var(--sggw-icon-glyph-phone);
}

.sggw-elementor-person-metadata.is-sggw-person-contact-email
	.wp-block-sggw-person-contact__icon::before {
	content: var(--sggw-icon-glyph-envelope);
}

.sggw-elementor-person-metadata.is-sggw-person-contact-location
	.wp-block-sggw-person-contact__icon::before {
	content: var(--sggw-icon-glyph-map-pin);
}

.sggw-elementor-person-metadata .wp-block-sggw-person-contact__value {
	color: inherit;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.sggw-elementor-person-metadata.wp-block-sggw-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--line-height--small, 1.5);
	margin: 0;
	max-inline-size: 100%;
}

.sggw-elementor-person-metadata.wp-block-sggw-link
	> .wp-block-sggw-link__anchor {
	align-items: baseline;
	color: var(--sggw-link-foreground);
	display: inline-flex;
	max-inline-size: 100%;
	text-decoration-color: currentColor;
	text-decoration-line: var(--sggw-link-decoration-rest);
	text-decoration-skip-ink: auto;
	text-decoration-thickness: var(--sggw-link-decoration-thickness);
	text-underline-offset: var(--sggw-link-underline-offset);
}

.sggw-elementor-person-metadata.wp-block-sggw-link
	> .wp-block-sggw-link__anchor:is(:visited, :hover, :active) {
	color: var(--sggw-link-foreground);
}

.sggw-elementor-person-metadata.wp-block-sggw-link
	> .wp-block-sggw-link__anchor:is(:hover, :focus-visible, :active),
.sggw-elementor-person-metadata.wp-block-sggw-person-contact
	> a.wp-block-sggw-person-contact__value:is(:hover, :focus-visible, :active) {
	text-decoration-line: var(--sggw-link-decoration-interactive);
}

.sggw-elementor-person-metadata.wp-block-sggw-link
	> .wp-block-sggw-link__anchor:focus-visible,
.sggw-elementor-person-metadata.wp-block-sggw-person-contact
	> a.wp-block-sggw-person-contact__value:focus-visible {
	border-radius: var(--wp--custom--radius--x-small);
	outline: var(--wp--custom--line--focus-ring-width) solid var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset-compact);
}

.sggw-elementor-person-metadata.wp-block-sggw-link
	.wp-block-sggw-link__label {
	min-inline-size: 0;
	overflow-wrap: normal;
	word-break: normal;
}

.sggw-elementor-person-metadata.wp-block-sggw-link.has-sggw-link-icon-start
	.wp-block-sggw-link__label::before {
	color: currentColor;
	content: var(--sggw-link-icon-glyph, var(--sggw-icon-glyph-identification-card));
	display: inline-block;
	font-family: var(--sggw-icon-font-family);
	font-size: var(--sggw-icon-size-small);
	font-style: normal;
	font-weight: var(--sggw-icon-font-weight-regular);
	line-height: 1;
	margin-inline-end: var(--wp--preset--spacing--10, 8px);
	text-decoration: none;
	vertical-align: middle;
}

.sggw-elementor-person-office-hours.wp-block-sggw-person-office-hours {
	--sggw-person-office-hours-font-size: var(--wp--preset--font-size--medium);
	--sggw-person-office-hours-schedule-font-size: var(--wp--preset--font-size--small);
	--sggw-person-office-hours-icon-size: 1.25em;

	align-items: flex-start;
	align-self: stretch;
	box-sizing: border-box;
	color: var(--sggw-text-muted);
	container-name: sggw-elementor-person-office-hours;
	container-type: inline-size;
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--sggw-person-office-hours-font-size);
	gap: var(--wp--preset--spacing--10, 8px);
	inline-size: 100%;
	line-height: var(--wp--custom--typography--line-height--supporting, 1.5);
	min-inline-size: 0;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__icon {
	block-size: 1lh;
	color: currentColor;
	display: grid;
	flex: 0 0 auto;
	inline-size: var(--sggw-person-office-hours-icon-size);
	place-items: center;
}

.sggw-elementor-person-office-hours
	.wp-block-sggw-person-office-hours__icon
	> .sggw-phosphor-icon-glyph {
	font-size: var(--sggw-person-office-hours-icon-size);
}

.sggw-elementor-person-office-hours
	.wp-block-sggw-person-office-hours__icon
	> .sggw-phosphor-icon-glyph::before {
	content: var(--sggw-icon-glyph-door-open);
	display: block;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__content {
	flex: 1 1 auto;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.sggw-elementor-person-office-hours
	:where(.wp-block-sggw-person-office-hours__location,
	.wp-block-sggw-person-office-hours__general-note,
	.wp-block-sggw-person-office-hours__placeholder) {
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule {
	column-gap: var(--wp--preset--spacing--30, 16px);
	display: grid;
	font: inherit;
	font-size: var(--sggw-person-office-hours-schedule-font-size);
	grid-template-columns: fit-content(50%) minmax(0, 1fr);
	inline-size: 100%;
	margin-block: 4px;
	max-inline-size: 100%;
	row-gap: 4px;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule-row {
	column-gap: var(--wp--preset--spacing--30, 16px);
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	min-inline-size: 0;
}

.sggw-elementor-person-office-hours
	.wp-block-sggw-person-office-hours__schedule :where(dt, dd) {
	font: inherit;
	margin: 0;
	min-inline-size: 0;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__value {
	align-items: baseline;
	column-gap: .25em;
	display: flex;
	flex-wrap: wrap;
	min-inline-size: 0;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__time {
	flex: 0 0 auto;
	white-space: nowrap;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__time > span {
	margin-inline: .125em;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__row-note {
	flex: 0 1 auto;
	min-inline-size: 0;
}

.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__general-note {
	white-space: pre-line;
}

.sggw-elementor-person-office-hours
	.wp-block-sggw-person-office-hours__location
	+ * {
	margin-block-start: 4px;
}

.sggw-elementor-person-role.is-sggw-person-role-placeholder,
.sggw-elementor-person-name.is-sggw-person-placeholder,
.sggw-elementor-person-metadata.is-sggw-person-placeholder,
.sggw-elementor-person-office-hours.is-sggw-person-placeholder {
	opacity: .65;
}

.sggw-elementor-persons-grid .elementor-loop-container > .e-loop-item,
.sggw-elementor-persons-grid .elementor-loop-container > .e-loop-item > .elementor {
	block-size: 100%;
}

@media (hover: hover) {
	.sggw-loop-person-card:hover {
		box-shadow: var(--wp--custom--shadow--small);
	}

	.sggw-loop-person-card--list-item:hover {
		box-shadow: none;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sggw-loop-person-card {
		transition: box-shadow 150ms ease;
	}
}

@container sggw-elementor-person-card (max-width: 36rem) {
	.sggw-loop-person-card > .elementor-widget-sggw-person-photo {
		flex-basis: 120px;
		inline-size: 120px;
	}

	.sggw-loop-person-card__content.e-con {
		flex-basis: 100%;
		min-inline-size: 100%;
	}
}

@container sggw-elementor-person-office-hours (max-width: 22em) {
	.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule,
	.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule-row {
		gap: 4px;
		grid-column: 1;
	}
}

@media (max-width: 782px) {
	.sggw-loop-person-card > .elementor-widget-sggw-person-photo {
		flex-basis: 120px;
		inline-size: 120px;
	}

	.sggw-loop-person-card__content.e-con {
		flex-basis: 100%;
		min-inline-size: 100%;
	}

	.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule,
	.sggw-elementor-person-office-hours .wp-block-sggw-person-office-hours__schedule-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (forced-colors: active) {
	.sggw-loop-person-card {
		background: Canvas;
		border: var(--wp--custom--line--width, 1px) solid CanvasText;
		box-shadow: none !important;
		color: CanvasText;
		forced-color-adjust: none;
	}

	.sggw-elementor-person-name,
	.sggw-elementor-person-role,
	.sggw-elementor-person-metadata.wp-block-sggw-person-contact,
	.sggw-elementor-person-office-hours {
		color: CanvasText;
	}

	.sggw-elementor-person-metadata :where(a, a:visited),
	.sggw-elementor-person-metadata.wp-block-sggw-link
		> .wp-block-sggw-link__anchor {
		color: LinkText;
		text-decoration: underline;
	}

	.sggw-elementor-person-photo .wp-block-sggw-person-photo__fallback {
		background: Canvas;
		border: 1px solid CanvasText;
	}

	.sggw-elementor-person-photo .wp-block-sggw-person-photo__fallback::before {
		background-color: CanvasText;
	}

	.sggw-elementor-person-metadata :where(a:focus-visible),
	.sggw-elementor-person-metadata.wp-block-sggw-link
		> .wp-block-sggw-link__anchor:focus-visible {
		outline-color: Highlight;
	}
}