/* =========================================================================
   Leadership team grid (Figma 362:10978; modal 376:13688)
   Two tabs (Executive / Senior Leadership), each tab shows a responsive
   grid of square portrait cards. Each card opens a centered modal with a
   larger portrait, name + role + LinkedIn link, accent rule, and bio.

   Tab chrome (green active underline + gray 1px baseline + 32px gap)
   visually mirrors `latest-updates` but stays under `.leadership__` so
   the two sections can evolve independently. Mobile diverges from
   latest-updates: leadership tabs stay as simple tabs at all widths
   (panels are big grids that don't squeeze into an accordion well).

   Modal backdrop reuses the same rgba(0,9,25,0.85) as the video-cta
   modal so dark-panel-over-content overlays read consistently.
   ========================================================================= */

.leadership {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.leadership__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ----------- Header ----------- */
.leadership__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.leadership__eyebrow {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-eyebrow);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-body-copy);
  line-height: 1;
}

.leadership__eyebrow-slash {
  color: var(--color-green-2);
  margin-right: 0.25em;
}

.leadership__heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
}

.leadership__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-h2);
  line-height: 1.2;
  color: var(--color-navy-blue);
  /* Sized to its text so the heading stays on one line beside the
     subheading; the subheading absorbs the remaining row width. */
  flex: 0 0 auto;
  white-space: nowrap;
}

.leadership__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.leadership__subheading {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);
  line-height: 28px;
  color: var(--color-body-copy);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 585px;
}

@media (max-width: 767px) {
  .leadership__heading-row {
    flex-direction: column;
  }
  .leadership__heading,
  .leadership__subheading {
    flex-basis: auto;
    max-width: none;
  }
  .leadership__heading {
    white-space: normal;
  }
}

/* ----------- Tabs ----------- */
.leadership__tabs {
  position: relative;
}

.leadership__tablist {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--color-card-border);
}

.leadership__tab {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 0 8px;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 24px;
  color: var(--color-body-copy);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.leadership__tab > span {
  display: inline-block;
}

.leadership__tab[aria-selected="true"] {
  color: var(--color-navy-blue);
  font-weight: var(--font-weight-medium);
}

/* Green 2px underline drawn just below the tab label, overlapping the
   1px gray baseline of `.leadership__tablist`. `bottom: -1px` so the
   green line covers the baseline at the active tab's width. */
.leadership__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--color-green-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
}

.leadership__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.leadership__tab:focus-visible {
  outline: 2px solid var(--color-green-2);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ----------- Panels + cards grid ----------- */
.leadership__panels {
  position: relative;
}

.leadership__panel {
  /* Default state — hidden via [hidden] from the DOM; .is-active sets
     display:grid to override. Animation matches the latest-updates
     panel-in pattern (opacity + slight rise). */
  display: none;
}

.leadership__panel.is-active {
  display: block;
  animation: leadership-panel-in 0.35s ease-out both;
}

@keyframes leadership-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .leadership__panel.is-active {
    animation: none;
  }
}

.leadership__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}

@media (max-width: 1099px) {
  .leadership__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .leadership__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .leadership__cards { grid-template-columns: 1fr; }
}

/* ----------- Card ----------- */
.leadership__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Admin-only edit link — only rendered when the current user can edit the
   leadership_team post. Absolute-positioned top-left of the card so it's
   easy to spot without disrupting the layout. Matches the case-studies
   catalogue card-edit pill styling. */
.leadership__card-edit {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease;
}

.leadership__card-edit:hover,
.leadership__card-edit:focus-visible {
  background: var(--color-green-2, #00a86b);
  color: #fff;
}

.leadership__card-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--color-card-border);
  overflow: hidden;
}

.leadership__card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------- Card meta (name + linkedin row, role, View Bio) ----------- */
.leadership__card-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Name (left) shares the top row with the LinkedIn icon (right),
   per Figma 646:1039. */
.leadership__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.leadership__card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.leadership__card-name {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);
  line-height: 24px;
  color: var(--color-navy-blue);
}

.leadership__card-role {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 20px;
  color: var(--color-body-copy);
}

.leadership__card-linkedin {
  flex: 0 0 auto;
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--color-navy-blue);
  transition: color 0.2s ease, transform 0.2s ease;
}

.leadership__card-linkedin:hover,
.leadership__card-linkedin:focus-visible {
  color: var(--color-teal);
  transform: translateY(-2px);
  outline: none;
}

.leadership__card-linkedin:focus-visible {
  outline: 2px solid var(--color-green-2);
  outline-offset: 4px;
  border-radius: 2px;
}

/* "View Bio" — the site-wide `.cta-link` (global.css) carries all the visual
   styling: teal underline that wipes away on hover + the arrow that slides in
   after it. This rule only neutralises the <button> defaults that `.cta-link`
   doesn't cover, so the trigger matches every other CTA link on the site.
   padding-bottom is deliberately left to `.cta-link` — it's what the underline
   sits on. */
.leadership__card-viewbio {
  appearance: none;
  margin: 0;
  padding-top: 0;
  padding-inline: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* =========================================================================
   Modal — fixed full-screen overlay with a single centered dialog.
   ========================================================================= */

.leadership__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.leadership__modal[hidden] {
  display: none;
}

.leadership__modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 9, 25, 0.85);
  cursor: pointer;
}

.leadership__modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1196px;
  /* Fixed vertical envelope on desktop — image + header stay pinned and
     only the bio scrolls (see .leadership__modal-content + .__bio below).
     Clamps down to the viewport if the window is shorter than 600px so
     the dialog never exceeds the screen. */
  min-height: min(600px, calc(100vh - 32px));
  max-height: min(800px, calc(100vh - 32px));
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 32px;
  padding-right: clamp(56px, 4vw, 80px); /* leave room for close button */
  display: flex;
  align-items: stretch;
  gap: 32px;
}

@media (max-width: 767px) {
  .leadership__modal-dialog {
    flex-direction: column;
    padding: 24px;
    padding-right: 24px;
    gap: 24px;
    /* Mobile: image stacks above the text — let the whole dialog scroll
       instead of only the bio, since the fixed-height image + bio split
       gets cramped in portrait. */
    min-height: 0;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

.leadership__modal-image {
  flex: 0 0 auto;
  /* align-self: flex-start prevents the parent's align-items: stretch
     (needed by the content column so its bio can scroll) from stretching
     the portrait wrapper to the full dialog height. */
  align-self: flex-start;
  width: clamp(220px, 28vw, 349px);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-card-border);
}

@media (max-width: 767px) {
  .leadership__modal-image {
    width: 100%;
    max-width: 349px;
    align-self: center;
  }
}

.leadership__modal-image img {
  display: block;
  width: 100%;
  height: auto;
}

.leadership__modal-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  /* min-height: 0 lets the child __bio actually shrink and scroll
     inside a flex column with a bounded parent (dialog max-height).
     Without this, the flex item's implicit min-height:auto keeps the
     column at its content height and pushes the dialog to overflow. */
  min-height: 0;
}

.leadership__modal-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leadership__modal-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leadership__modal-name {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(22px, 22px + 0.65vw, 30px);
  line-height: 1.2;
  color: var(--color-navy-blue);
}

.leadership__modal-role {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);
  line-height: 20px;
  color: var(--color-body-copy);
}

.leadership__modal-linkedin {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--color-navy-blue);
  transition: color 0.2s ease, transform 0.2s ease;
}

.leadership__modal-linkedin:hover,
.leadership__modal-linkedin:focus-visible {
  color: var(--color-green-2);
  transform: translateY(-2px);
  outline: none;
}

.leadership__modal-linkedin:focus-visible {
  outline: 2px solid var(--color-green-2);
  outline-offset: 4px;
  border-radius: 2px;
}

.leadership__modal-divider {
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--color-green-2);
  border: 0;
}

.leadership__modal-bio {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-body-copy);
  /* Fill the remaining space in the content column and scroll internally
     so the image + header stay pinned while long bios scroll. On mobile
     the dialog itself scrolls (see the max-width: 767px block above), so
     these rules are effectively a no-op there. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Small right padding so the scrollbar doesn't hug the last word. */
  padding-right: 8px;
}

.leadership__modal-bio p {
  margin: 0 0 1em;
}

.leadership__modal-bio p:last-child {
  margin-bottom: 0;
}

.leadership__modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-navy-blue);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.leadership__modal-close:hover,
.leadership__modal-close:focus-visible {
  background-color: rgba(0, 9, 25, 0.06);
  outline: none;
}

.leadership__modal-close:focus-visible {
  outline: 2px solid var(--color-green-2);
  outline-offset: 2px;
}

.leadership__modal-close svg {
  transition: transform 0.25s ease-out;
}

.leadership__modal-close:hover svg,
.leadership__modal-close:focus-visible svg {
  transform: rotate(90deg);
}

/* When the modal is open, lock body scroll. The JS toggles
   `data-leadership-modal-open` on <html>; we hook the rule here so the
   styling stays co-located with the section. */
:root[data-leadership-modal-open] {
  overflow: hidden;
}