/* =========================================================
   INESC Team — frontend list
   Card styling mirrors the INESC Awards winner card so the
   visual language stays consistent across the site.
========================================================= */

.inesc-team {
	--it-blue:       #005f80;
	--it-dark-blue:  #004d6d;
	--it-green:      #97ca3d;
	--it-gray:       #6a858e;
	--it-placeholder-bg: #d9d9d9;
	--it-text:       #2c3338;

	width: 100%;
	margin: 0 auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
	color: var(--it-text);
}

.inesc-team__list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

/* ----- Section ----- */
.inesc-team__section {
	scroll-margin-top: 80px;
}

.inesc-team__section-title {
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 600;
	color: var(--it-blue);
	margin: 0 0 1.4rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--it-green);
}

/* Keeps the theme's h4 heading look (size/weight/font); we only force the
   brand blue and full width. */
.inesc-team__section-desc {
	color: var(--it-blue);
	margin: 0 0 1.4rem;
	width: 100%;
	max-width: none;
}

.inesc-team__empty {
	color: var(--it-gray);
	font-style: italic;
}

/* ----- Grid of member cards -----
   Columns per row are set per section via the inline --it-cols variable
   (admin field), defaulting to 3. Small-screen breakpoints below cap it. */
.inesc-team__grid {
	--it-gap: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centers the last, incomplete row */
	gap: 2rem var(--it-gap);
}

/* Each card takes 1/N of the row (N = --it-cols), accounting for the gaps,
   so full rows fill the width and the last partial row stays centered.
   The `- 1px` absorbs sub-pixel rounding (notably on large / OS-scaled
   monitors) so N rounded card widths never overflow the row and wrap early.
   `min-width: 0` lets a card shrink instead of forcing the photo to push a
   card onto the next line — together they keep exactly N cards per row. */
.inesc-team__grid > .inesc-team__card {
	flex: 0 1 calc((100% - (var(--it-cols, 3) - 1) * var(--it-gap)) / var(--it-cols, 3) - 1px);
	min-width: 0;
}

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

/* ----- Card ----- */
.inesc-team__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem 0.6rem 0.6rem;
	background: transparent;
	gap: 0.4rem;
}

/* Circular frame clips the image; the image inside zooms on hover. */
.inesc-team__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-team__photo {
	width: 100%;
	height: 100%;
	background: var(--it-placeholder-bg) no-repeat center / cover;
	filter: grayscale(100%);
	transition: filter 0.45s ease;
}

/* Black & white by default, full colour on hover/focus. */
.inesc-team__card:hover .inesc-team__photo,
.inesc-team__card:focus-within .inesc-team__photo {
	filter: grayscale(0);
}

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

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

.inesc-team__name {
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--it-blue);
	line-height: 1.2;
	margin: 0;
}

.inesc-team__role {
	font-size: 1rem;
	font-weight: 400;
	color: var(--it-green);
	line-height: 1.3;
	margin: 0;
}

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

.inesc-team__name-link:hover,
.inesc-team__name-link:focus {
	color: var(--it-green);
	text-decoration: underline;
}

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