/* People page — loads AFTER menterra-home.css (uses its :root colours/fonts) */

/* ---------- Banner ---------- */
.peoplebannerSection { padding: 90px 0 40px; }
.peoplebannerSection .secHeading { text-align: center; max-width: 1320px; padding: 0 10px; margin: 0 auto 36px; }
.peoplebannerSection h1 { font-size: clamp(32px, 4vw, 42px); margin-bottom: 14px; }
.peoplebannerSection .secHeading p { font-family: "soleilregular", "soleillight", Arial, sans-serif !important; font-size: 18px; letter-spacing: .04em; line-height: 1.5; color: #20242A; }
.bannerImg img { width: 100%; max-height: 560px; object-fit: cover; }

/* ---------- Tabs ---------- */
.peopleContent { padding-top: 40px; }
.tabs-container { display: flex; justify-content: center; margin-bottom: 40px; }
.tabs [role="tablist"] { display: flex; border: 1px solid #bdbdbd; background: #fff; }
.tabs .tabHead { display: none; }
.tabs [role="tab"] {
	min-width: 270px; padding: 24px 20px; background: #fff; color: var(--text);
	border: 0; border-right: 1px solid #bdbdbd; font-family: var(--font-head); font-size: 17px;
	font-weight: 700; cursor: pointer;
}
.tabs [role="tab"]:last-child { border-right: 0; }
.tabs [role="tab"][aria-selected="true"] { background: var(--beige); box-shadow: inset 0 -3px 0 var(--green); }
.tabs [role="tab"]:hover { background: var(--beige); }

.tab-content { display: none; }
.tab-content.current { display: block; }
.tab-content:focus-visible { outline-offset: 6px; }

/* ---------- Team grid ---------- */
.peopleContent .teamContent {
	max-width: 1200px; margin: 0 auto; padding: 0; display: grid;
	grid-template-columns: repeat(3, 1fr); gap: 40px 0;
}
.peopleContent .teammemberBox { position: relative; padding: 0 20px; border-right: 1px solid #bdbdbd; }
.peopleContent .teammemberBox:nth-child(3n) { border-right: 0; }
.peopleContent .teammemberBox a.teamCardLink { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }
.peopleContent .teamImgBox img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; background: #e8e8e8; display: block; transition: transform .5s ease; transform-origin: center; }
.peopleContent .teamImgBox { overflow: hidden; }
.peopleContent .teamCardLink:hover .teamImgBox img,
.peopleContent .teamCardLink:focus-visible .teamImgBox img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
	.peopleContent .teamImgBox img { transition: none; }
	.peopleContent .teamCardLink:hover .teamImgBox img,
	.peopleContent .teamCardLink:focus-visible .teamImgBox img { transform: none; }
}
.peopleContent .teamInfoBox { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px; }
.peopleContent .teamInfo { position: relative; padding-top: 12px!important; border-top: 1px solid rgba(255,255,255,.6); }
.peopleContent .teamInfo h2 { font-size: 22px; color: #fff; margin-bottom: 4px; }
.peopleContent .teamInfo p { font-size: 14px; color: #fff; padding-right: 28px; }
.peopleContent .pageIndi { position: absolute; right: 0; top: 14px; width: 13px; height: 13px; }

/* LinkedIn badge */
.socialLink { position: absolute; top: 18px; right: 38px; z-index: 3; }
.socialLink a {
	display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
	border-radius: 50%; background: var(--green); color: #fff; text-decoration: none;
}
.socialLink a:hover { background: var(--green-dark); }

/* ---------- Partners ---------- */
.partnersContent { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.partnersBox a { display: block; border: 1px solid #ddd; background: #fff; color: var(--text); text-decoration: none; text-align: center; height: 100%; }
.partnerLogo { height: 150px; display: flex; align-items: center; justify-content: center; padding: 20px; }
.partnerLogo img { max-height: 100px; width: auto; object-fit: contain; }
.partnerHeading { padding: 14px 12px 20px; border-top: 1px solid #eee; }
.partnerHeading h2 { font-size: 16px; }
.partnersBox a:hover .partnerHeading h2 { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.peopleContent .teamContent { grid-template-columns: repeat(2, 1fr); }
	.peopleContent .teammemberBox:nth-child(3n) { border-right: 1px solid #bdbdbd; }
	.peopleContent .teammemberBox:nth-child(2n) { border-right: 0; }
	.partnersContent { grid-template-columns: repeat(2, 1fr); }
    .peoplebannerSection .secHeading p {
    font-family: "soleilregular", "soleillight", Arial, sans-serif !important;
    font-size: 14px!important;
    letter-spacing: .04em;
    line-height: 1.5;
    color: #20242A;
}
}
@media (max-width: 600px) {
	.peoplebannerSection { padding-top: 60px; }
	.tabs-container { display: block; }
	.tabs .tabHead { display: block; font-weight: 600; margin-bottom: 8px; }
	.tabs [role="tablist"] { width: 100%; }
	.tabs [role="tab"] { min-width: 0; flex: 1; padding: 18px 10px; }
	.peopleContent .teamContent, .partnersContent { grid-template-columns: 1fr; }
	.peopleContent .teammemberBox { border-right: 0 !important; padding: 0; }
	.socialLink { right: 18px; }
}

.emptyMsg { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 16px; }

/* ---------- Single person page (matches the live site) ---------- */
.personSingle { padding: 28px 0 90px; }
.personSingle .innerContainer { max-width: 1650px; margin: 0 auto; padding: 0 2rem; box-sizing: border-box; }
.personBreadcrumb { margin-bottom: 50px; }
.personBreadcrumb a {
	display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
	color: var(--text, #20242A); font-size: 20px; letter-spacing: .02em; text-decoration: none;
}
.personBreadcrumb a span { text-decoration: underline; text-underline-offset: 4px; }
.personBreadcrumb a:hover span { text-decoration-thickness: 2px; }
.personBreadcrumb a:focus-visible, .personBadge:focus-visible { outline: 3px solid #0a4fd6; outline-offset: 3px; }

.personGrid { display: grid; grid-template-columns: 38.75% 1fr; column-gap: 5.2%; align-items: start; }
.personPhoto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #e8e8e8; }

.personHead { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 16px; }
.personHead h1 { font-size: clamp(30px, 2.4vw, 44px); line-height: 1.2; margin: 0; padding-top: 4px; }
.personBadge {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 67px; height: 67px; border-radius: 50%; background: var(--green); color: #fff; text-decoration: none;
	transition: background-color .2s;
}
.personBadge:hover { background: var(--green-dark); }
.personDesignation { font-size: clamp(18px, 1.35vw, 24px); letter-spacing: .05em; line-height: 1.4; color: #6d6d6d; margin: 6px 0 58px; }

.personBio { border-top: 1px solid #a9a9a9; padding-top: 26px; font-size: clamp(16px, 1.05vw, 18px); line-height: 1.45; letter-spacing: .02em; color: var(--text, #20242A); }
.personBio p { margin: 0 0 16px; }

/* quote: big marks, a rule next to each, quote text in the heading font */
.personQuote { margin: 56px 0 0 -38px; padding: 0; }
.personQuote .qTop, .personQuote .qBottom { display: flex; align-items: center; gap: 10px; }
.personQuote .qLine { flex: 1 1 auto; height: 0; border-top: 1px solid #a9a9a9; }
.personQuote .qMark { flex: 0 0 auto; font-family: var(--font-head); font-size: 84px; line-height: .6; height: 38px; color: #9b9b9b; }
.personQuote .qTop .qMark { margin-top: 10px; }
.personQuote .qBottom .qMark { margin-top: 24px; }
.personQuote blockquote { margin: 0; padding: 28px 0 28px 63px; border: 0; }
.personQuote blockquote p { margin: 0; font-family: var(--font-head); font-size: clamp(20px, 1.5vw, 27px); line-height: 1.35; color: #20242A; }

@media (max-width: 1024px) {
	.personSingle .innerContainer { padding: 0 2rem; }
	.personGrid { grid-template-columns: 1fr; row-gap: 32px; }
	.personPhoto { max-width: 460px; }
	.personQuote { margin-left: 0; }
	.personQuote blockquote { padding-left: 24px; }
}
@media (max-width: 600px) {
	.personSingle .innerContainer { padding: 0 1rem; }
	.personBadge { width: 52px; height: 52px; }
	.personBadge svg { width: 24px; height: 24px; }
	.personDesignation { margin-bottom: 36px; }
}