/*
 * Henkilöt (avalon/people + avalon/person).
 *
 * Desktop: round 160px portraits, name, number and email in a grid (as many columns as people, up to 4).
 * Tablet: 120px portraits, up to 4 across (--ab-cols-t from render.php: never one person alone on the last row);
 * the number stays text, call and email are 44px icon buttons (tablets are touch screens).
 * Tablets and desktops: every people grid uses the same column width, a quarter of the row (about 300px at 1440px,
 * 171px at 820px), left-aligned, so the portraits of people blocks one after the other line up (3 people use three of
 * the four tracks, not three wider ones).
 * Phones: compact rows – 72px photo (56px at 380px and less), name and number as text, call and email as 44px icon
 * buttons (.ab-person__actions, ab_person_card() in inc/tel-links.php). The block's own phone column setting no longer
 * applies. Names may be h3 or h4 (both look the same).
 * A card with neither a number nor an email whose name is a link (.is-link, e.g. "Katso tästä lähin
 * jälleenmyyjäsi") is that link: the link covers the card and a chevron in a tint circle follows the name.
 * A "Nostot" block that lists people (.ab-features--people, e.g. 1498 and 1746) renders its items with the same
 * person card, so it looks the same as avalon/people.
 */

.ab-people .ab-grid,
.ab-features--people .ab-grid {
	gap: 48px var(--ab-gap, 48px);
}

/* one column width for every people grid: a quarter of the row (the gaps of 32px taken off) */
@media (min-width: 1025px) {
	.ab-people .ab-grid,
	.ab-features--people .ab-grid {
		grid-template-columns: repeat(var(--ab-cols, 3), calc((100% - 3 * 32px) / 4));
		justify-content: start;
	}
}

/* phone numbers made tel: links (inc/tel-links.php) stay on one line */
.ab-tel {
	white-space: nowrap;
}

/* the number in the intro of the people and features sections ("puh. 040 841 9100") */
.ab-intro .ab-tel {
	color: inherit;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 3px;
}

.ab-person {
	min-width: 0;
}

/* the photo, the text and the buttons: no item rhythm from blocks.css (.ab-item) */
.ab-person.ab-item > *,
.ab-person .ab-person__body > * {
	margin-block: 0;
}

.ab-person .wp-block-image {
	margin: 0;
}

.ab-person .wp-block-image img {
	display: block;
	/* the stored image width (200px) is an inline style */
	width: 160px !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ab-tint, #eaf8f9);
	object-fit: cover;
}

.ab-person.ab-item > .wp-block-image + * {
	margin-block-start: 20px;
}

.ab-person .ab-person__body > * + * {
	margin-block-start: 4px;
}

.ab-person.ab-item :is(h2, h3, h4, h5, h6) {
	margin: 0;
	color: var(--ab-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	hyphens: manual;
}

.ab-person.ab-item :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 6px;
}

.ab-person.ab-item :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: 4px;
}

.ab-person :is(p, li) {
	font-size: 16px;
	line-height: 1.5;
	/* a written-out email address breaks after "(at)" / "@" (<wbr> from inc/tel-links.php); a longer one as a last
	   resort, not over the next column */
	overflow-wrap: break-word;
}

.ab-person .ab-tel {
	color: inherit;
	white-space: nowrap;
	text-decoration: none;
}

.ab-person a:where(.ab-person__mail) {
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 2px;
}

.ab-person .ab-tel:hover {
	text-decoration: underline;
}

/* a card without a number or an email whose name is a link (.is-link from ab_person_card(), e.g. "Katso tästä lähin
   jälleenmyyjäsi"): the whole card is the link, a chevron in a tint circle follows the name (only on the site: the
   editor shows the plain card) */
.ab-person.is-link {
	position: relative;
}

.ab-person.is-link :is(h2, h3, h4, h5, h6):first-of-type a {
	color: inherit;
	text-decoration: none;
}

.ab-person.is-link :is(h2, h3, h4, h5, h6):first-of-type a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ab-person.is-link:hover :is(h2, h3, h4, h5, h6):first-of-type a {
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 0.18em;
}

.ab-person.is-link :is(h2, h3, h4, h5, h6):first-of-type a:focus-visible {
	outline: none;
}

.ab-person.is-link:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent, #30cbd3);
	outline-offset: 4px;
	border-radius: var(--ab-radius, 12px);
}

/* tablets and desktops: right after the name's last word, never on a line of its own (the last word and the chevron
   are one unit, .ab-person__last from ab_person_card()); phones: at the right end of the row, see below */
.ab-person__last {
	white-space: nowrap;
}

.ab-person__chev {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: 8px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--ab-tint, #eaf8f9);
	color: var(--ab-navy, #002b56);
	transition: background-color 0.2s ease;
}

.ab-person__chev svg {
	display: block;
	width: 18px;
	height: 18px;
}

.ab-person.is-link:hover .ab-person__chev {
	background: var(--wp--preset--color--accent, #30cbd3);
}

.is-dark .ab-person__chev {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--accent, #30cbd3);
}

.is-dark .ab-person.is-link:hover .ab-person__chev {
	background: var(--wp--preset--color--accent, #30cbd3);
	color: var(--ab-navy, #002b56);
}

/* the icon buttons are for touch screens (phones and tablets); on desktops the number and the email link are text */
.ab-person__actions {
	display: none;
}

.ab-person__action {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ab-tint, #eaf8f9);
	color: var(--ab-navy, #002b56);
	text-decoration: none;
}

.ab-person__action .ab-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.ab-person__action:hover {
	background: var(--wp--preset--color--accent, #30cbd3);
}

.is-dark .ab-person__action {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.is-dark .ab-person__action:hover {
	background: var(--wp--preset--color--accent, #30cbd3);
	color: var(--ab-navy, #002b56);
}

@media (max-width: 1024px) {
	.ab-person__actions {
		display: flex;
		gap: 8px;
	}

	/* the email link and its line break give way to the email button */
	.ab-person.has-actions .ab-person__mail,
	.ab-person.has-actions br:has(+ .ab-person__mail) {
		display: none;
	}
}

/* ---------------------------------------------------------------- tablet */

@media (min-width: 769px) and (max-width: 1024px) {
	/* a quarter of the row, as on desktops (the gaps of 24px taken off) */
	.ab-people .ab-grid,
	.ab-features--people .ab-grid {
		grid-template-columns: repeat(var(--ab-cols-t, 3), calc((100% - 3 * 24px) / 4));
		justify-content: start;
		gap: 40px var(--ab-gap, 32px);
	}

	/* the icon buttons under the name and the number */
	.ab-person.ab-item > .ab-person__actions {
		margin-block-start: 12px;
	}

	.ab-person .wp-block-image img {
		width: 120px !important;
	}

	.ab-person.ab-item > .wp-block-image + * {
		margin-block-start: 16px;
	}

	.ab-person.ab-item :is(h2, h3, h4, h5, h6) {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------- phones: rows */

@media (max-width: 768px) {
	.ab-people .ab-grid,
	.ab-features--people .ab-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 10px;
	}

	.ab-person {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		box-sizing: border-box;
		min-height: 88px;
		padding: 7px 12px 7px 7px;
		border-radius: var(--ab-radius, 12px);
		background: #fff;
		color: var(--wp--preset--color--body, #282828);
	}

	.ab-person.has-actions {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		padding-right: 8px;
	}

	.ab-person.no-photo {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 16px;
	}

	.ab-person.no-photo.has-actions {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ab-person .wp-block-image img {
		width: 72px !important;
	}

	.ab-person.ab-item > .wp-block-image + * {
		margin-block-start: 0;
	}

	.ab-person.ab-item :is(h2, h3, h4, h5, h6) {
		color: var(--wp--preset--color--heading, #012b55);
		font-size: 17px;
		line-height: 1.25;
	}

	.ab-person.ab-item :is(h2, h3, h4, h5, h6) + * {
		margin-block-start: 3px;
	}

	.ab-person :is(p, li) {
		font-size: 15px;
		line-height: 1.4;
	}

	/* navy section: translucent rows with white text */
	.is-dark .ab-person {
		border-color: rgba(255, 255, 255, 0.18);
		background: rgba(255, 255, 255, 0.07);
		color: #fff;
	}

	.is-dark .ab-person.ab-item :is(h2, h3, h4, h5, h6) {
		color: #fff;
	}

	/* a link card: the chevron at the right end of the row, in the middle */
	.ab-person.is-link {
		padding-right: 56px;
	}

	.ab-person__last {
		white-space: normal;
	}

	.ab-person__chev {
		position: absolute;
		top: 50%;
		right: 12px;
		display: grid;
		width: 32px;
		height: 32px;
		margin: -16px 0 0;
	}
}

/* small phones: a 56px photo leaves the name and the number about 130px next to the two buttons */
@media (max-width: 380px) {
	.ab-person.has-photo {
		grid-template-columns: 56px minmax(0, 1fr);
		min-height: 72px;
	}

	.ab-person.has-photo.has-actions {
		grid-template-columns: 56px minmax(0, 1fr) auto;
	}

	.ab-person .wp-block-image img {
		width: 56px !important;
	}
}

.ab-person__action:focus-visible,
.ab-person a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #30cbd3);
	outline-offset: 2px;
}