/*
 * O nas: „Poznaj nasz zespół” (template-parts/about/team.php). From the
 * preview docs/preview/onas.png: a short line above the centred heading, a
 * line under it, rounded filter buttons (the chosen one filled), cards in
 * two columns: a photo of about 7 : 8 on the left, on the right the name
 * with a short line, a short description, the fields as labels and
 * „Więcej o mnie”; „Pokaż kolejne osoby” under the cards. Below 64em one
 * card per row; on phones a narrower photo.
 */

.hf-about-team
{
	padding-block: var(--hf-space-section-block);
}

.hf-about-team__header
{
	text-align: center;
}

.hf-about-team__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-about-team__title.hf-title-rule-above::before
{
	margin-inline: auto;
}

.hf-about-team__lead
{
	margin: var(--hf-space-xs) 0 0;
	color: var(--hf-color-heading);
	font-size: var(--hf-text-l);
	line-height: 1.4;
}

/* Filters: rounded in this preview (Inspiracje has square-ish ones). */
.hf-about-team__filters
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--hf-space-l);
}

.hf-about-team__filters[hidden]
{
	display: none;
}

.hf-about-team__filter
{
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4em 1.5em;
	border: 1px solid color-mix(in srgb, var(--hf-color-outline) 45%, transparent);
	border-radius: 999px;
	background: var(--hf-color-surface);
	color: var(--hf-color-heading);
	cursor: pointer;
	font: inherit;
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	line-height: 1.3;
	transition: background-color var(--hf-transition), border-color var(--hf-transition), color var(--hf-transition);
}

.hf-about-team__filter:hover
{
	border-color: var(--hf-color-primary);
}

.hf-about-team__filter[aria-pressed="true"]
{
	border-color: var(--hf-color-primary);
	background: var(--hf-color-primary);
	color: var(--hf-color-on-dark);
}

.hf-about-team__list
{
	display: grid;
	gap: var(--hf-space-m);
	margin: var(--hf-space-l) 0 0;
	padding: 0;
	list-style: none;
}

.hf-about-team__item[hidden]
{
	display: none;
}

/* Card: photo and text side by side, the same height in a row. */
.hf-person
{
	display: grid;
	grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
	height: 100%;
	background: var(--hf-color-surface);
}

/* At least 7 : 8 (the spacer), taller with a taller text beside it: the
   photo covers the whole height of the card (with aspect-ratio it stayed
   7 : 8 and left an empty strip under it on phones). */
.hf-person__media
{
	position: relative;
	overflow: hidden;
	background: var(--hf-color-band-strong);
}

.hf-person__media::before
{
	display: block;
	padding-top: calc(100% * 8 / 7);
	content: "";
}

.hf-person__photo
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photo: the initials on the warm ground. */
.hf-person__media--empty
{
	display: grid;
	place-items: center;
}

.hf-person__media--empty::before
{
	grid-area: 1 / 1;
}

.hf-person__initials
{
	grid-area: 1 / 1;
	color: var(--hf-color-primary);
	font-family: var(--hf-font-display);
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	letter-spacing: 0.08em;
}

.hf-person__body
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem);
}

.hf-person__name
{
	margin: 0;
	font-size: var(--hf-text-card-title);
}

/* The name gets focus after „Pokaż kolejne osoby”; it is not a control. */
.hf-person__name:focus
{
	outline: none;
}

.hf-person__name:focus-visible
{
	outline: 2px solid var(--hf-color-primary);
	outline-offset: 4px;
}

.hf-person__role
{
	margin: var(--hf-space-s) 0 0;
	font-size: var(--hf-text-m);
	line-height: 1.5;
	text-wrap: pretty;
}

.hf-person__fields
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--hf-space-s) 0 0;
	padding: 0;
	list-style: none;
}

.hf-person__field
{
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: var(--hf-color-band-strong);
	color: var(--hf-color-heading);
	font-size: 0.875rem;
	line-height: 1.4;
}

/* At the bottom of the card, under the labels. */
.hf-person__more
{
	margin: auto 0 0;
	padding-top: var(--hf-space-m);
}

/* Dialog: small round photo, the name and the short description, the text.
   The name goes under the photo only when its longest word does not fit
   beside it („Magdalena” at 320 px ran under the close button, 2026-11-02). */
.hf-person__dialog-header
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hf-space-s) var(--hf-space-m);
	margin-bottom: var(--hf-space-m);
	padding-right: 2.5rem;
}

.hf-person__avatar
{
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.hf-person__dialog-text
{
	flex: 1 1 0;
	min-width: min-content;
}

.hf-person__dialog-name
{
	margin: 0;
	font-size: var(--hf-text-card-title);
}

.hf-person__dialog-role
{
	margin: 0.25rem 0 0;
	font-size: var(--hf-text-s);
	line-height: 1.5;
}

.hf-person__bio
{
	line-height: 1.65;
}

.hf-person__bio p
{
	margin: 0 0 1em;
}

.hf-person__bio p:last-child
{
	margin-bottom: 0;
}

.hf-about-team__next
{
	margin: var(--hf-space-l) 0 0;
	text-align: center;
}

/* Nothing more to show (or no script): no empty gap under the cards. */
.hf-about-team__next:has(> [hidden])
{
	display: none;
}

/* Two cards per row, as in the preview. */
@media (min-width: 64em)
{
	.hf-about-team__list
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: a narrower photo leaves room for the text. */
@media (max-width: 40em)
{
	.hf-person
	{
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	}

	.hf-person__body
	{
		padding: var(--hf-space-s);
	}

	.hf-person__role
	{
		font-size: var(--hf-text-s);
	}
}