/* ---- Staff bio modal ----
   Template built against one card (Darren Mills, about/team) — reusable
   for other cards later by adding the same .team-card--interactive /
   data-staff-trigger / <template data-staff-bio> markup, no CSS/JS changes
   needed. Open/close state lives in a data-* attribute on .staff-modal
   (matches nav.css's data-subnav-open convention), not a class. Uses
   --z-modal (tokens.css), defined but otherwise unused site-wide. */

/* ---- Card trigger affordance — scoped to .team-card--interactive only,
   so the other (currently static) cards are completely unaffected. ---- */
.team-card--interactive .team-card__trigger {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.team-card--interactive .team-card__trigger:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

/* Keyboard-focus zoom for interactive cards' media — team-intro.css's
   .team-card:focus-visible .team-card__media-zoom rule never matches here:
   :focus-visible only applies to the element actually receiving focus,
   and that's .team-card__trigger (a <button> nested inside .team-card),
   not .team-card itself. (:hover doesn't have this problem — hovering the
   trigger already counts as hovering its ancestor .team-card, so that half
   of the shared rule already works without a repeat here.) */
.team-card--interactive .team-card__trigger:focus-visible .team-card__media-zoom {
  transform: scale(1.06);
}

/* ---- Modal shell — backdrop + centred panel, fade/scale transition ---- */
.staff-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
}

.staff-modal[data-staff-modal-open="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.staff-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 26, 23, 0.6);
  backdrop-filter: blur(6px);
}

.staff-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1520px;
  max-height: min(900px, 94vh);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto; /* mobile: whole panel scrolls as one column */
  transform: translateY(16px) scale(0.98);
  filter: blur(6px);
  transition:
    transform var(--duration-slow) var(--ease-standard),
    filter var(--duration-slow) var(--ease-standard);
}

.staff-modal[data-staff-modal-open="true"] .staff-modal__panel {
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .staff-modal,
  .staff-modal__panel {
    transition: none;
  }
}

/* ---- Split layout — mobile: image capped, whole panel scrolls (rules
   above). Desktop (>=1024px): image pinned left ~35%, sized to
   approximate the same 2:3 crop .team-card__media uses on the grid, bio
   takes the remaining ~65%, editorial two-column. ---- */
.staff-modal__media {
  flex: 0 0 auto;
  max-height: 48vh;
  overflow: hidden;
}

/* object-position: top — same reasoning as .team-card__media img
   (team-intro.css): a centered crop on a tall/narrow photo pushes the
   crop above the subject's head; anchoring top keeps the face in frame. */
.staff-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.staff-modal__body {
  flex: 1 1 auto;
  padding: var(--space-12);
}

.staff-modal__name {
  margin-bottom: var(--space-3);
}

/* Same treatment as .team-card__role (team-intro.css) — Title Case as
   authored (no uppercase transform, unlike .eyebrow), sand accent colour,
   sized up a step from .caption's 11px default so that colour stays
   legible. Sits below the name here, matching the grid's name-then-role
   order. */
.staff-modal__role {
  margin-bottom: var(--space-10);
  font-size: var(--font-size-4);
  color: var(--color-accent);
}

/* Hairline divider ahead of the bio copy — same rhythm as the project
   detail fact-list's label/value/hairline pattern (project-detail.css). */
.staff-modal__bio {
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.staff-modal__bio p + p {
  margin-top: var(--space-6);
}

/* Footer — same hairline rhythm as the divider above the bio, prev/next
   CTAs at opposite edges (reuses .btn--text.btn--underline, the site's
   standard CTA treatment — see footer "Make an enquiry" — but muted to
   --color-text-muted rather than the default ink, since these are
   secondary navigation, not the modal's primary action). */
.staff-modal__footer {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-6);
}

/* margin-left: auto (not justify-content: space-between on the container)
   so "Meet {name}" keeps sitting flush right even when the prev button is
   hidden at the start of the team list — space-between would otherwise
   collapse a single remaining child back to the flex-start edge. */
.staff-modal__nav-btn[data-staff-modal-next] {
  margin-left: auto;
}

.staff-modal__nav-btn {
  color: var(--color-text-muted);
}


@media (min-width: 1024px) {
  .staff-modal__panel {
    flex-direction: row;
    overflow: hidden; /* panel itself no longer scrolls; body does */
    max-height: min(860px, 92vh);
  }

  /* flex-basis is a plain percentage, not aspect-ratio-derived — an
     aspect-ratio on a flex item with flex-basis: auto doesn't reliably
     size against the panel's cross-axis height in practice (the child
     <img>'s own width:100% fights the derivation, and the image col
     ends up sized off the photo's intrinsic pixel width instead). 35%
     of the panel's own max-width (1520px) at the panel's own max-height
     (760px) works out close to the photo's real 2:3 crop ratio. */
  .staff-modal__media {
    flex: 0 0 35%;
    max-height: none;
    align-self: stretch;
  }

  .staff-modal__body {
    flex: 0 0 65%;
    min-width: 0;
    overflow-y: auto; /* independent scroll region, desktop only */
    padding: var(--space-20);
  }

  /* Editorial two-column bio — a real two-track grid (not a multi-column
     flow), both columns top-aligned. staff-modal.js splits the cloned bio
     paragraphs into two .staff-modal__bio-col wrappers before appending. */
  .staff-modal__bio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: var(--space-20);
  }
}

/* ---- Close button — no icon-button precedent exists site-wide; built
   fresh, focus-visible treatment matches .btn's. ---- */
.staff-modal__close {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.staff-modal__close svg {
  width: 16px;
  height: 16px;
}

.staff-modal__close:hover {
  background: var(--color-bg-alt);
}

.staff-modal__close:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Body scroll lock (html[data-scroll-locked]) now lives in layout.css,
   loaded on every page — nav.js's mobile menu and enquiry-modal.js both
   rely on the same rule, not just this modal. */