/*
 * leadership.css
 *
 * Used by: wp-content/novamira-sandbox/team-member-archive.php (Team Member CPT archive)
 * Page URL: /about/leadership/
 *
 * NOTE: There is no leadership.html page template. This CSS is loaded directly
 * by the team_member CPT archive sandbox template. Do NOT delete.
 */

/* Page-specific styles for leadership. */

.qpa-hero{position:relative;isolation:isolate;display:flex;min-height:min(820px,100svh);overflow:hidden;background:var(--ink);color:#fff}

.qpa-hero-media{position:absolute;z-index:-2;inset:0;width:100%;overflow:hidden;background:var(--ink-3)}

.qpa-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#061a20db 0%,#061a2066 32%,#061a20d4 72%,#061a20f7 100%),linear-gradient(90deg,#061a20a0 0%,#061a201a 62%)}

.qpa-hero-media img{height:100%;object-fit:cover;object-position:center 32%;filter:saturate(.86) contrast(1.02)}

.qpa-hero-inner{position:relative;width:var(--page);margin:auto;padding:clamp(184px,20vh,226px) 0 clamp(70px,8vh,96px)}

.qpa-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,7vw,124px);align-items:end;min-height:470px}

.qpa-hero h1{max-width:15ch;margin:0;color:#fff;font-size:clamp(48px,5vw,76px);font-weight:500;line-height:1.015;letter-spacing:-.031em;text-wrap:balance}

.qpa-hero-side{align-self:end;max-width:600px;padding:4px 0 4px clamp(28px,3.2vw,48px);border-left:1px solid transparent;border-image:var(--divider-v-dark)}

.qpa-hero-copy{margin:0;color:#d9e3e4;font-size:17.5px;line-height:1.7;text-wrap:pretty}

.qpa-lead{background:#fff}

.qpa-lead-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(48px,7vw,124px);align-items:start}

.qpa-lead-statement{max-width:23ch;margin:0;font-size:clamp(32px,3.2vw,48px);line-height:1.12;text-wrap:balance}

.qpa-lead-support{max-width:650px;padding:8px 0 0 clamp(28px,3.2vw,48px);border-left:1px solid transparent;border-image:var(--divider-v)}

.qpa-lead-support p{margin:0;font-size:18px;line-height:1.7;text-wrap:pretty}

.qpa-lead-support p+p{margin-top:24px}

.qpa-stats{position:relative;overflow:hidden;background:var(--ink);color:#dce5e6}

.qpa-stats:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(780px 500px at 4% -8%,#17a3981f,transparent 68%),radial-gradient(640px 460px at 98% 106%,#3ec9bb14,transparent 70%),linear-gradient(112deg,transparent 32%,#ffffff08 47%,transparent 62%)}

.qpa-stats:after{content:"";position:absolute;right:-120px;top:14%;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,#17a3981f,transparent 68%);filter:blur(46px);pointer-events:none}

.qpa-stats>.qpa-wrap{position:relative;z-index:1}

.qpa-stats-head{margin-bottom:clamp(48px,5vw,70px)}

.qpa-stats-head h2{max-width:none;margin:0;color:#fff;font-size:clamp(38px,4vw,60px);white-space:nowrap}

/* Use the global .qpa-metrics rules (4→2→1 responsive from qpa-global.css).
   Only reset margin-top — leadership's stats-head already provides spacing. */
.qpa-stats .qpa-metrics{margin-top:0}

.qpa-metric-value{margin:0;color:#fff;font:500 clamp(34px,3.1vw,50px)/1 var(--display);letter-spacing:-.035em;transition:color .32s}

.qpa-metric-value.qpa-statement{font:400 clamp(21px,1.8vw,26px)/1.28 var(--display);letter-spacing:-.018em}

.qpa-people{background:var(--neutral)}

.qpa-people-head{margin-bottom:clamp(48px,5vw,70px)}

.qpa-people-head h2{max-width:22ch;margin:0;font-size:clamp(38px,4vw,60px);text-wrap:balance}

.qpa-person-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.qpa-person{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;transition:border-color .25s,transform .25s,box-shadow .25s}

.qpa-person:hover{border-color:#17a39866;transform:translateY(-3px);box-shadow:0 18px 40px #0f2e3812}

.qpa-person-photo{position:relative;display:block;aspect-ratio:4/4.35;overflow:hidden;background:var(--ink-3)}

.qpa-person-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,#061a2040 100%);pointer-events:none}

.qpa-person-photo img{height:100%;object-fit:cover;object-position:center top;filter:saturate(.9) contrast(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1);will-change:transform;backface-visibility:hidden}

.qpa-person:hover .qpa-person-photo img{transform:scale(1.03)}

.qpa-person-body{display:flex;flex:1;flex-direction:column;padding:26px 24px 25px}

.qpa-person-name{margin:0 0 12px;font-size:clamp(23px,1.8vw,28px);line-height:1.08;letter-spacing:-.024em}

.qpa-person-role{min-height:4.5em;margin:0;color:var(--teal-deep);font:500 12px/1.48 var(--mono);letter-spacing:.1em;text-transform:uppercase}

.qpa-person-hook{margin:20px 0 28px;color:var(--text);font-size:16px;line-height:1.58}

.qpa-person .qpa-link{margin-top:auto;align-self:flex-start}

.qpa-person.qpa-feature{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr;min-height:520px;max-height:520px}

.qpa-person.qpa-feature .qpa-person-photo{min-height:520px;max-height:520px;aspect-ratio:auto}

.qpa-person.qpa-feature .qpa-person-body{padding:clamp(36px,4.2vw,58px);justify-content:center}

.qpa-person.qpa-feature .qpa-person-name{font-size:clamp(36px,3.6vw,54px)}

.qpa-person.qpa-feature .qpa-person-role{min-height:0;font-size:13px}

.qpa-person.qpa-feature .qpa-person-hook{max-width:48ch;margin:28px 0 38px;font-size:18px;line-height:1.65}

.qpa-footer .qpa-language{font-size:16px;color:var(--grey);font-family:var(--body);font-weight:400}

.qpa-metric-number{display:inline-block;color:#fff;font-variant-numeric:tabular-nums;transition:color .38s ease}

.qpa-metric-card:hover .qpa-metric-number{color:var(--teal-lite)}

@media(max-width:1180px){
.qpa-person-grid{grid-template-columns:1fr 1fr}
.qpa-person.qpa-feature{grid-column:1/-1}
}

@media(max-width:900px){
.qpa-hero{min-height:auto}
.qpa-hero-inner{padding:clamp(168px,20vw,206px) 0 clamp(58px,8vw,76px)}
.qpa-hero-grid,.qpa-lead-grid{grid-template-columns:1fr}
.qpa-hero-grid{min-height:0;gap:42px}
.qpa-hero h1{max-width:none}
.qpa-hero-side{max-width:680px;padding:26px 0 0;border-left:0;border-top:1px solid transparent;border-image:var(--divider-h-dark)}
.qpa-lead-support{max-width:680px;padding:28px 0 0;border-left:0;border-top:1px solid transparent;border-image:var(--divider-h)}
.qpa-person.qpa-feature{display:flex;grid-column:auto;grid-template-columns:none;min-height:0;max-height:none}
.qpa-person.qpa-feature .qpa-person-photo{min-height:0;max-height:none;aspect-ratio:4/4.35}
.qpa-person.qpa-feature .qpa-person-body{padding:26px 24px 25px;justify-content:flex-start}
.qpa-person.qpa-feature .qpa-person-name{font-size:clamp(23px,1.8vw,28px)}
.qpa-person.qpa-feature .qpa-person-role{min-height:4.5em;font-size:12px}
.qpa-person.qpa-feature .qpa-person-hook{max-width:none;margin:20px 0 28px;font-size:16px;line-height:1.58}
}

@media(max-width:800px){
.qpa-hero h1{font-size:clamp(40px,8.4vw,56px)}
.qpa-person-grid{grid-template-columns:1fr}
.qpa-person.qpa-feature{grid-column:auto}
.qpa-person.qpa-feature .qpa-person-photo{aspect-ratio:4/3.7}
.qpa-person-role{min-height:0}
}

@media(max-width:520px){
.qpa-hero h1{font-size:38px}
.qpa-lead-statement,.qpa-stats-head h2,.qpa-people-head h2{font-size:34px}
.qpa-stats-head h2{font-size:clamp(30px,8vw,34px);white-space:nowrap}
.qpa-person-body{padding:24px 20px}
}

/* ============================================================
   Design refinements — static typography + keyboard polish.
   No hover added to non-clickable elements.
   ============================================================ */

/* Balanced name wrapping — multi-word names break more evenly */
.qpa-person-name{text-wrap:balance}

/* Pretty paragraph wrapping for the hook text */
.qpa-person-hook{text-wrap:pretty}

/* Tabular numerals on stats so 180+, 10 GWp+, US$25B+ align cleanly */
.qpa-stats .qpa-metric-value{font-variant-numeric:tabular-nums}

/* Keyboard focus ring on clickable person cards (accessibility polish) */
.qpa-person:focus-visible{outline:2px solid var(--teal-deep);outline-offset:4px}