/* =========================================================
   INESC People — shared "people" component
   Single source of truth for the parts the Team and Awards modules
   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 --ip-cols (or other
   custom properties) locally.
   "People" is generic here: team members and award winners alike.
   Registered as the `inesc-people` handle (depends on `inesc-tokens`) by
   INESC_People::register_shared_styles(); markup comes from
   modules/team/frontend.php and modules/awards/frontend.php.
========================================================= */

.inesc-people {
	/* --ip-text and --ip-placeholder-bg come from tokens.css (the
	   `inesc-tokens` dependency). The other variables used below (--blue,
	   --green, --gray, --text-*, --medium, --bold, ...) are not defined by
	   this plugin and must come from the theme; see the tokens.css header. */
	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;
}

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

.inesc-people__title {
	font-size: var(--text-35);
	font-weight: var(--semi-bold);
	color: var(--blue);
	border-bottom: 3px solid var(--green);
}

/* Shown in place of the grid when a section has no cards. */
.inesc-people__empty {
	color: var(--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:
   at most 2 per row up to 780px (a 1-column section stays at 1), and
   1 per row up to 480px. */
.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) {
	/* min(--ip-cols, 2) per row: never more than 2, but a section set to
	   1 per row keeps 1. Same formula as above. */
	.inesc-people__grid > .inesc-people__card {
		flex-basis: calc((100% - (min(var(--ip-cols, 3), 2) - 1) * var(--ip-gap)) / min(var(--ip-cols, 3), 2) - 1px);
	}
}

@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;
	/* 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(10rem, 15vw, 14rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0.4rem auto 0.7rem;
	flex-shrink: 0;
}

/* The photo is a background-image set inline by PHP (not an <img>), so
   `cover` crops any aspect ratio into the circle. */
.inesc-people__photo {
	width: 100%;
	height: 100%;
	background: var(--ip-placeholder-bg) no-repeat center / cover;
}

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

/* Empty span rendered by Team when a member has no photo; the grey
   placeholder background comes from .inesc-people__photo. */
.inesc-people__photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

/* Name (<h4>) and role/award (<h6>) also carry the site's person classes
   .inesc-person-name / .inesc-person-role, the same as the person blocks of
   the WPBakery pages. Their font size, weight, color and alignment come
   from the site's general CSS (WPBakery Design Options →
   uploads/js_composer/custom.css), not from this plugin; only layout is
   set here. That CSS gives .inesc-person-role line-height 0.5, meant for
   the wrapper <div> it sits on in those pages; here the class is on the
   <h6> itself, so the line height is set again (two classes, to win
   whatever the stylesheet order) to keep a wrapped role readable. */
.inesc-people .inesc-people__name {
	line-height: 1.2;
	margin: 0;
}

.inesc-people .inesc-people__role {
	line-height: 1.3;
	margin: 0;
}

/* Name → role/award spacing matches the site's person inner rows
   (H4 name at --text-21 / lh 1.5 directly above an H6 role / lh 2): about
   0.68em of --text-21 between the two text boxes (~14px at 1523px wide).
   Here it is that distance minus the card gap (0.4rem) and the half-leading
   already present (0.1em name + 0.15em role). */
.inesc-people__name + .inesc-people__role {
	margin-top: calc(0.43em - 0.4rem);
}

.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(--blue) !important;
	font-weight: var(--bold) !important;
	text-decoration: none;
}

/* Visitors who ask for reduced motion: no zoom/lift on hover or focus. */
@media (prefers-reduced-motion: reduce) {
	.inesc-people__card {
		transition: none;
		will-change: auto;
	}

	.inesc-people__card:hover,
	.inesc-people__card:focus-within {
		transform: none;
	}
}