/* Contact lines of the block "Person details" (plugin RUB Chair Core) as in
   the contact component of the RUB web components (design/README.md): a
   Lucide icon in RUB Blau instead of the word "Room", "Phone" …; the word
   stays for screen readers. Part of the RUB Chair theme. */

/* Two classes: the plugin's own stylesheet may load later. */
.wp-block-rub-chair-person-details.rub-person-details {
	/* Rows 30px high and 8px apart, as the RUB's contact component. */
	gap: 0.5rem;
}

.rub-person-details__line {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	min-height: 1.875rem;
}

/* The word, readable for screen readers only (as .screen-reader-text). */
.rub-person-details .rub-person-details__label {
	clip-path: inset(50%);
	height: 1px;
	min-width: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.rub-person-details__line::before {
	background-color: var(--rub-blue);
	content: "";
	flex: none;
	height: 1.25rem;
	mask: var(--rub-line-icon, url("../icons/link.svg")) center / contain no-repeat;
	width: 1.25rem;
}

.rub-person-details__line--room { --rub-line-icon: url("../icons/house.svg"); }
.rub-person-details__line--phone { --rub-line-icon: url("../icons/phone.svg"); }
.rub-person-details__line--email { --rub-line-icon: url("../icons/mail.svg"); }
.rub-person-details__line--website { --rub-line-icon: url("../icons/globe.svg"); }
.rub-person-details__line--orcid { --rub-line-icon: url("../icons/link.svg"); }

/* List style “Contact lines”: contact details typed by hand (e.g. a shared
   office address) with the same icons, one per line. The icon follows the
   content: a phone link gets the phone, an e-mail address the envelope, any
   other link the globe, plain text (a room) the house. The kind is the
   icon's alternative text for screen readers. */
.rub-content .is-style-rub-contact-lines {
	display: flex;
	flex-direction: column;
	/* 16px (Body Small), so e-mail addresses fit a card of a third. */
	font-size: 1rem;
	gap: 0.5rem;
	list-style: none;
	padding-left: 0;
}

.is-style-rub-contact-lines li {
	--rub-line-icon: url("../icons/house.svg");

	align-items: center;
	display: flex;
	gap: 0.75rem;
	min-height: 1.875rem;
}

.is-style-rub-contact-lines li::before {
	background-color: var(--rub-blue);
	content: "" / "Room";
	flex: none;
	height: 1.25rem;
	mask: var(--rub-line-icon) center / contain no-repeat;
	width: 1.25rem;
}

.is-style-rub-contact-lines li:has(a[href^="http"])::before {
	--rub-line-icon: url("../icons/globe.svg");

	content: "" / "Website";
}

.is-style-rub-contact-lines li:has(a[href^="tel:"])::before {
	--rub-line-icon: url("../icons/phone.svg");

	content: "" / "Phone";
}

.is-style-rub-contact-lines li:has(a[href^="mailto:"], .rub-mail)::before {
	--rub-line-icon: url("../icons/mail.svg");

	content: "" / "E-mail";
}

/* The people table (RUB Chair Core) on narrow screens shows one card per
   person; there, too, as the RUB's contact: the position without a label,
   room, phone and e-mail with the same icons. The column name stays as the
   icon's alternative text for screen readers. */
@media (max-width: 1179.98px) {
	.rub-people-table__table td.rub-people-table__cell--role::before {
		content: none;
	}

	.rub-people-table__table td:is(.rub-people-table__cell--room, .rub-people-table__cell--phone, .rub-people-table__cell--email):not(:empty) {
		align-items: center;
		display: flex;
		gap: 0.75rem;
	}

	.rub-people-table__table td:is(.rub-people-table__cell--room, .rub-people-table__cell--phone, .rub-people-table__cell--email)::before {
		background-color: var(--rub-blue);
		content: "" / attr(data-label);
		flex: none;
		height: 1.25rem;
		mask: var(--rub-line-icon) center / contain no-repeat;
		min-width: 0;
		width: 1.25rem;
	}

	.rub-people-table__cell--room { --rub-line-icon: url("../icons/house.svg"); }
	.rub-people-table__cell--phone { --rub-line-icon: url("../icons/phone.svg"); }
	.rub-people-table__cell--email { --rub-line-icon: url("../icons/mail.svg"); }
}