/* team.css. Scoped stylesheet for the ShareRing team page and /team/{slug} profiles.
 *
 * Every rule is prefixed with .shr-team-root. That is both containment (nothing
 * here can touch the theme) and armour: the page loads with body.elementor-kit-5,
 * whose "a" rule carries (0,1,1) specificity, so every colour-bearing selector
 * below needs at least (0,2,0) to win. The :where() reset sits at (0,1,0), the
 * DM precedent: it beats bare element rules from the theme and the WPCode global
 * reset while losing to every classed rule in this file.
 *
 * Tokens are custom properties on the root wrapper; no design value appears
 * twice. Inter Tight is the site face; the theme self-hosts and loads it on
 * every page, so this file declares no @font-face and pulls no external font. */

.shr-team-root {
  /* No z-index here on purpose. The backdrop layers sit at z-index -1, which
     already puts them behind in-flow content. Giving this wrapper a z-index
     makes it a stacking context, which traps those fixed layers inside it and
     paints them OVER the site footer, hiding it completely. */
  position: relative;

  /* Team tokens resolve to house style values. No raw colour is declared
     here, so this page and the Link page cannot drift apart. Two colours are
     deliberately gone: #D6006E magenta predates the Verify Green decision and
     was the main reason this page read as a different site, and #2D6CDF
     matched neither the theme brand blue nor any Link token. */
  --stp-canvas: transparent;
  --stp-navy: var(--srh-pale);
  --stp-blue: var(--srh-blue);
  --stp-accent: var(--srh-accent);
  --stp-muted: var(--srh-ink-fade);
  --stp-line: var(--srh-hairline);
  --stp-chip: var(--srh-surface);
  --stp-panel: var(--srh-surface);
  --stp-body-ink: var(--srh-ink-soft);
  --stp-shadow: 0 12px 40px rgba(1, 2, 41, 0.45);
  --stp-radius: var(--srh-radius);
  --stp-focus: 2px solid var(--srh-accent);

  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--stp-navy);
  background: var(--stp-canvas);
  -webkit-font-smoothing: antialiased;
}

/* Defensive reset (DM precedent): typography only, layout untouched. */
.shr-team-root :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, li, div, span, a, button, em, strong, small) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.shr-team-root :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol) { margin: 0; padding: 0; }
.shr-team-root :where(ul, ol) { list-style: none; }
.shr-team-root :where(a) { text-decoration: none; }
.shr-team-root :where(button) { background: none; border: 0; cursor: pointer; }
.shr-team-root :where(img) { max-width: 100%; height: auto; }

.shr-team-root .shr-wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px 70px; }
.shr-team-root .shr-wrap--narrow { max-width: 760px; }

/* ---- Hero ---- */
.shr-team-root .shr-hero { padding: 76px 0 40px; border-bottom: 1px solid var(--stp-line); }
.shr-team-root .shr-eyebrow {
  color: var(--stp-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.shr-team-root .shr-h1 {
  /* The reference hero scale, item 1.4. This was clamp(36px, 3vw + 22px, 52px),
     which is 52px at 1440 against the 60 to 62px every other hero on the site
     now sets. It matches --srk-display-m so the team page opens at the same
     size as the product and company pages either side of it. The plugin cannot
     read the theme tokens, so the clamp is written out rather than referenced. */
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.05;
  font-weight: 600;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.shr-team-root .shr-lede { font-size: 19px; color: var(--stp-muted); max-width: 60ch; margin: 0; }

/* ---- Section heads ---- */
.shr-team-root .shr-section-head { display: flex; align-items: baseline; gap: 14px; margin: 56px 0 22px; }
.shr-team-root .shr-section-head h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--stp-navy);
}
.shr-team-root .shr-rule { flex: 1; height: 1px; background: var(--stp-line); }
.shr-team-root .shr-count { font-size: 13px; color: var(--stp-muted); }

/* ---- Grid ---- */
.shr-team-root .shr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .shr-team-root .shr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shr-team-root .shr-grid { grid-template-columns: 1fr; } }

/* ---- Cards ---- */
.shr-team-root .shr-card {
  position: relative;
  border: 1px solid var(--stp-line);
  border-radius: var(--stp-radius);
  padding: 24px;
  background: var(--stp-canvas);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.shr-team-root .shr-card--link:hover { border-color: var(--stp-blue); transform: translateY(-2px); box-shadow: var(--stp-shadow); }
.shr-team-root .shr-card--pending { background: var(--stp-panel); border-style: dashed; }

.shr-team-root .shr-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  flex: none;
}
.shr-team-root .shr-avatar--mono { background: var(--stp-chip); color: var(--stp-blue); }
.shr-team-root .shr-name { font-size: 19px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; }
.shr-team-root .shr-role { font-size: 14px; color: var(--stp-blue); font-weight: 500; margin: 0 0 14px; }
.shr-team-root .shr-card--pending .shr-role { color: var(--stp-muted); }
.shr-team-root .shr-bio { font-size: 14.5px; color: var(--stp-muted); margin: 0 0 16px; flex: 1; }

.shr-team-root .shr-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.shr-team-root .shr-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--stp-navy);
  background: var(--stp-chip);
  border-radius: 999px;
  padding: 4px 11px;
}

.shr-team-root .shr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--stp-line);
  padding-top: 14px;
  margin-top: auto;
}

/* "Read full bio" stretches over the whole card: one real link, the visual
 * affordance of a clickable card, and keyboard focus in a single element. */
.shr-team-root .shr-readmore { font-size: 13px; font-weight: 500; color: var(--stp-blue); display: inline-flex; align-items: center; gap: 5px; }
.shr-team-root .shr-readmore::after { content: ""; position: absolute; inset: 0; border-radius: var(--stp-radius); }
.shr-team-root .shr-readmore:focus-visible { outline: none; }
.shr-team-root .shr-readmore:focus-visible::after { outline: var(--stp-focus); outline-offset: 2px; }

.shr-team-root .shr-flag { font-size: 12px; color: var(--stp-accent); font-weight: 500; }
.shr-team-root .shr-flag--muted { color: var(--stp-muted); }

.shr-team-root .shr-li { position: relative; z-index: 2; display: inline-flex; align-items: center; color: var(--stp-navy); padding: 4px; margin: -4px; border-radius: 6px; }
.shr-team-root .shr-li:hover { color: var(--stp-blue); }
.shr-team-root .shr-li:focus-visible { outline: var(--stp-focus); outline-offset: 2px; }
.shr-team-root .shr-li svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- Modal ---- */
.shr-team-root .shr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 2, 41, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px;
  overflow: auto;
  z-index: 100000;
}
.shr-team-root .shr-modal-overlay[hidden] { display: none; }
.shr-team-root .shr-modal {
  background: var(--stp-canvas);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  padding: 36px;
  position: relative;
}
.shr-team-root .shr-modal:focus { outline: none; }
.shr-team-root .shr-modal-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--stp-line);
  background: var(--stp-canvas);
  font-size: 18px;
  color: var(--stp-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shr-team-root .shr-modal-x:hover { color: var(--stp-navy); border-color: var(--stp-navy); }
.shr-team-root .shr-modal-x:focus-visible { outline: var(--stp-focus); outline-offset: 2px; }

.shr-team-root .shr-modal-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.shr-team-root .shr-modal-head .shr-avatar { margin-bottom: 0; width: 76px; height: 76px; }
.shr-team-root .shr-modal-name { font-size: 24px; font-weight: 600; margin: 0; }
.shr-team-root .shr-modal-role { color: var(--stp-blue); font-weight: 500; margin: 2px 0 0; font-size: 15px; }
.shr-team-root .shr-modal-bio p { font-size: 15.5px; color: var(--stp-body-ink); margin: 0 0 14px; }
.shr-team-root .shr-modal-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stp-muted);
  margin: 22px 0 10px;
}
.shr-team-root .shr-modal-cred { font-size: 14.5px; color: var(--stp-body-ink); margin: 0; }
.shr-team-root .shr-modal-foot {
  margin-top: 26px;
  border-top: 1px solid var(--stp-line);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.shr-team-root .shr-btn-li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--stp-navy);
  color: var(--srh-pale);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 10px;
}
.shr-team-root .shr-btn-li:hover { background: var(--stp-blue); color: var(--srh-pale); }
.shr-team-root .shr-btn-li:focus-visible { outline: var(--stp-focus); outline-offset: 2px; }
.shr-team-root .shr-btn-li svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.shr-team-root .shr-modal-permalink { font-size: 13px; font-weight: 500; color: var(--stp-blue); }
.shr-team-root .shr-modal-permalink:hover { color: var(--stp-navy); }
.shr-team-root .shr-modal-permalink:focus-visible { outline: var(--stp-focus); outline-offset: 2px; border-radius: 4px; }

/* Chrome composites the theme's sticky, backdrop-filtered header above the
 * fixed overlay no matter the z-index (verified empirically: z-index changes
 * and repaints do not help). While the modal is open the header is behind an
 * inert backdrop anyway, so it hides; visibility keeps its layout box, so
 * nothing shifts on open or close. Page-scoped via the html class team.js
 * toggles with the modal. */
html.shr-modal-open .sr-header { visibility: hidden !important; }

/* ---- Profile page ---- */
.shr-team-root .shr-breadcrumb { padding: 40px 0 0; }
.shr-team-root .shr-breadcrumb a { font-size: 14px; font-weight: 500; color: var(--stp-blue); }
.shr-team-root .shr-breadcrumb a:hover { color: var(--stp-navy); }
.shr-team-root .shr-breadcrumb a:focus-visible { outline: var(--stp-focus); outline-offset: 2px; border-radius: 4px; }
.shr-team-root .shr-profile { padding: 36px 0 0; }
.shr-team-root .shr-profile-head { display: flex; align-items: center; gap: 28px; margin-bottom: 28px; flex-wrap: wrap; }
.shr-team-root .shr-avatar--profile { width: 160px; height: 160px; font-size: 48px; margin-bottom: 0; }
.shr-team-root .shr-profile-name { margin: 0 0 6px; font-size: clamp(30px, 2vw + 20px, 40px); }
.shr-team-root .shr-profile-role { color: var(--stp-blue); font-weight: 500; font-size: 17px; margin: 0; }
.shr-team-root .shr-profile-bio p { font-size: 17px; color: var(--stp-body-ink); margin: 0 0 16px; max-width: 68ch; }
.shr-team-root .shr-profile-foot { margin-top: 30px; border-top: 1px solid var(--stp-line); padding-top: 22px; }

@media (max-width: 600px) {
  .shr-team-root .shr-hero { padding: 56px 0 32px; }
  .shr-team-root .shr-modal { padding: 28px 22px; }
  .shr-team-root .shr-profile-head { gap: 18px; }
  .shr-team-root .shr-avatar--profile { width: 112px; height: 112px; font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .shr-team-root .shr-card, .shr-team-root .shr-card--link:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
 * House style: cards on a dark ground.
 *
 * These were white boxes with a hairline and a soft shadow. On a dark ground
 * that reads as paper pasted onto the page, so they become translucent
 * surfaces that let the drifting glow behind them show through instead.
 * ------------------------------------------------------------------------- */

.shr-team-root .shr-card {
  background: var(--srh-surface);
  border: 1px solid var(--srh-hairline);
  border-radius: var(--srh-radius);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: none;
  transition: background 240ms var(--srh-ease),
              border-color 240ms var(--srh-ease),
              transform 240ms var(--srh-ease);
}

.shr-team-root .shr-card--link:hover,
.shr-team-root .shr-card--link:focus-within {
  background: var(--srh-surface-lift);
  border-color: color-mix(in srgb, var(--srh-accent) 40%, transparent);
  transform: translateY(-3px);
}

/* The pending card keeps its dashed edge but on the dark ground it needs the
 * hairline colour, not the old light-canvas line. */
.shr-team-root .shr-card--pending {
  border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
  .shr-team-root .shr-card--link:hover,
  .shr-team-root .shr-card--link:focus-within {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Explicit colour on every heading.
 *
 * These relied on inheriting from .shr-team-root, which worked on the old
 * white canvas. On the dark ground the theme's own heading rules win over
 * inheritance and paint them navy on navy. Known trap on this project: theme
 * and Elementor kit selectors outrank single-class component styles, so
 * anything that matters gets stated rather than inherited.
 * ------------------------------------------------------------------------- */

.shr-team-root h1,
.shr-team-root h2,
.shr-team-root h3,
.shr-team-root h4,
.shr-team-root .shr-h1,
.shr-team-root .shr-name,
.shr-team-root .shr-modal-name {
  color: var(--srh-pale);
}

.shr-team-root .shr-section-head h2 {
  color: var(--srh-ink-soft);
}

.shr-team-root p,
.shr-team-root li {
  color: var(--srh-ink-soft);
}

.shr-team-root a {
  color: var(--srh-accent);
}

.shr-team-root .shr-lede {
  color: var(--srh-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Portraits become the hero.
 *
 * These were 72px circles, physically smaller than the expertise pills beside
 * them. Seventeen custom duotone portraits are this page's most distinctive
 * asset and they were rendered at thumbnail size. Square them off so the
 * face-centred crop is not thrown away by a circular mask, and let them fill
 * the card width.
 * ------------------------------------------------------------------------- */

.shr-team-root .shr-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--srh-radius) - 4px);
  object-fit: cover;
  border: 1px solid var(--srh-hairline);
  background: var(--srh-navy-deep);
  margin-bottom: 18px;
  font-size: clamp(30px, 4vw, 46px);
}

/* Toon has no photo. On a dark ground the old light treatment reads as a
 * broken image, so the monogram gets a deliberate dashed placeholder instead. */
.shr-team-root .shr-avatar--mono {
  border: 1px dashed var(--srh-hairline);
  background: var(--srh-surface);
  color: var(--srh-ink-fade);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Leadership reads as more important than the team, which it did not before:
 * the two grids were identical and separated only by a small label. */
.shr-team-root .shr-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.shr-team-root .shr-grid--lead {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 2vw, 32px);
}

/* The modal and profile-page avatars keep their own fixed sizes; the rules
 * above would otherwise stretch them to their container. */
.shr-team-root .shr-modal-head .shr-avatar {
  width: 76px;
  height: 76px;
  aspect-ratio: auto;
  margin-bottom: 0;
}

.shr-team-root .shr-avatar--profile {
  width: 180px;
  height: 180px;
  aspect-ratio: auto;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .shr-team-root .shr-avatar--profile { width: 128px; height: 128px; }
}

/* One accent word in the headline, echoing Link's "built your way." */
.shr-team-root .shr-accent { color: var(--srh-accent); }

/* ---------------------------------------------------------------------------
 * Two things the colour remap broke, found by looking at a profile page.
 *
 * The LinkedIn button was navy-on-white. Remapping --stp-navy to a light value
 * for text made its background pale too, so it rendered as an empty pale box
 * with pale text inside it. It becomes an outlined accent button: clearly a
 * button, visible against the ground, and not so loud that a secondary link
 * shouts louder than the bio it sits under.
 *
 * The modal took --stp-canvas, which is now transparent. A transparent modal
 * puts page content straight through the dialog and is unreadable, so it gets
 * an opaque dark surface of its own.
 * ------------------------------------------------------------------------- */

.shr-team-root .shr-btn-li {
  background: transparent;
  color: var(--srh-accent);
  border: 1px solid color-mix(in srgb, var(--srh-accent) 55%, transparent);
  transition: background 200ms var(--srh-ease), border-color 200ms var(--srh-ease);
}

.shr-team-root .shr-btn-li:hover,
.shr-team-root .shr-btn-li:focus-visible {
  background: color-mix(in srgb, var(--srh-accent) 14%, transparent);
  border-color: var(--srh-accent);
  color: var(--srh-accent);
}

.shr-team-root .shr-modal {
  background: var(--srh-navy-deep);
  border: 1px solid var(--srh-hairline);
}

.shr-team-root .shr-modal-close {
  background: var(--srh-surface);
  border: 1px solid var(--srh-hairline);
  color: var(--srh-ink-soft);
}