/* =========================================================
   INESC People — shared "people" component
   Single source of truth for the parts INESC Team and INESC Awards
   render the same way: the section heading + list wrapper, and the
   circular photo + name + role card (with grid and hover).
   Consumers add the neutral .inesc-people__* classes alongside
   their own namespaced classes and may override the brand
   tokens / --ip-cols locally.
   "People" is generic here: team members and award winners alike.
========================================================= */

.inesc-people {
	/* Brand colors (--ip-blue/-dark-blue/-green/-gray/-placeholder-bg/-text)
	   come from the shared token palette (the `inesc-tokens` handle), which
	   the people stylesheet enqueues as a dependency. */
	color: var(--ip-text);
}

/* ----- Sections -----
   The list stacks one section per group (Team) or per year (Awards);
   each section has a heading above its grid of cards. */
.inesc-people__list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.inesc-people__section {
	scroll-margin-top: 80px; /* offset for in-page anchor jumps under the fixed header */
}

.inesc-people__title {
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: var(--ip-fw-semi);
	color: var(--ip-blue);
	margin: 0 0 1.4rem;
	padding-bottom: 0.4rem;
	border-bottom: 0.125rem solid var(--ip-green);
}

/* Shown in place of the grid when a section has no cards. */
.inesc-people__empty {
	color: var(--ip-gray);
	font-style: italic;
}

/* ----- Grid of cards -----
   A flex row that wraps, with the last incomplete row centered.
   Columns per row come from --ip-cols (default 3); consumers can set
   it inline (e.g. a per-section "columns" field). Small screens cap it. */
.inesc-people__grid {
	--ip-cols: 3;
	--ip-gap: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centers the last, incomplete row */
	gap: 2rem var(--ip-gap);
}

/* Each card takes 1/N of the row (N = --ip-cols), accounting for the gaps.
   The `- 1px` absorbs sub-pixel rounding so N rounded card widths never
   overflow and wrap early. `min-width: 0` lets a card shrink instead of
   forcing the photo to push a card onto the next line. */
.inesc-people__grid > .inesc-people__card {
	flex: 0 1 calc((100% - (var(--ip-cols, 3) - 1) * var(--ip-gap)) / var(--ip-cols, 3) - 1px);
	min-width: 0;
}

@media (max-width: 780px) {
	.inesc-people__grid > .inesc-people__card {
		flex-basis: calc((100% - var(--ip-gap)) / 2); /* 2 per row */
	}
}

@media (max-width: 480px) {
	.inesc-people__grid {
		gap: 1.5rem 1rem;
	}
	.inesc-people__grid > .inesc-people__card {
		flex-basis: 100%; /* 1 per row */
	}
}

/* ----- Card ----- */
.inesc-people__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem 0.6rem 0.6rem;
	background: transparent;
	gap: 0.4rem;
	/* The whole card (photo + name + role) zooms in slightly and lifts up
	   on hover. */
	transition: transform 0.3s ease;
	will-change: transform;
}

.inesc-people__card:hover,
.inesc-people__card:focus-within {
	transform: scale(1.04) translateY(-6px);
}

/* Circular frame clips the image. */
.inesc-people__photo-frame {
	width: clamp(11rem, 16vw, 15rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0.4rem auto 0.7rem;
	flex-shrink: 0;
}

.inesc-people__photo {
	width: 100%;
	height: 100%;
	background: var(--ip-placeholder-bg) no-repeat center / cover;
}

/* Photo link wraps the circular frame; keep it block-level so it sizes to it. */
.inesc-people__photo-link {
	display: inline-block;
	line-height: 0;
	cursor: pointer;
}

.inesc-people__photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

/* Name + role are sized to the theme's fluid --text-21 step. */
.inesc-people__name {
	font-size: var(--text-21);
	font-weight: var(--ip-fw-medium);
	color: var(--ip-blue);
	line-height: 1.2;
	margin: 0;
}

.inesc-people__role {
	font-size: var(--text-21);
	font-weight: var(--ip-fw-regular);
	color: var(--ip-green);
	line-height: 1.3;
	margin: 0;
}

.inesc-people__name-link {
	color: inherit;
	text-decoration: none;
}

/* On card hover the name turns bold blue. `!important` overrides the theme's
   generic heading/link hover (which paints the text green). */
.inesc-people__name-link:hover,
.inesc-people__name-link:focus,
.inesc-people__card:hover .inesc-people__name,
.inesc-people__card:focus-within .inesc-people__name {
	color: var(--ip-blue) !important;
	font-weight: var(--ip-fw-bold) !important;
	text-decoration: none;
}