/* ============================================================
   Statera — Individual Team page
   Sections unique to a bio: hero, biography + credentials,
   pull-quote, insights, other advisors head, CTA.
   The team card grid, CTA card and pill button reuse team.css.
   ============================================================ */

/* ---------- Hero ---------- */
.member-hero {
  padding: 0 var(--gutter) 0;
  width: 100%;
}
.member-hero__card {
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--footer-ink);
  border-radius: var(--radius-lg);
  overflow: clip;
  display: flex;
  align-items: center;
  gap: 54px;
  padding: 20px;
}
.member-hero__photo {
  flex: none;
  width: 326.667px;
  height: 374px;
  background: #F6F5F2;
  border-radius: 21px;
  overflow: clip;
  position: relative;
}
.member-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.member-hero__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.member-hero__head {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

body.wp-theme-statera .member-hero__eyebrow {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #D7D7D7;
}

body.wp-theme-statera .member-hero__name {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--white);
}
.member-hero__actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.member-hero__linkedin img { width: 40px; height: 40px; }
.member-hero__schedule {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 10px;
  /* height: 50px; */
  padding: 10px 20px;
  background: var(--white);
  border-radius: 80px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--black);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
/* Hover-only: guarded so a tap doesn't leave the button stuck green until the
   next tap lands elsewhere. Keyboard focus keeps working on every device. */
@media (hover: hover) and (pointer: fine) {
  .member-hero__schedule:hover { background: var(--green-accent); color: var(--black); }
}
  .member-hero__schedule:active { background: var(--green-accent); color: var(--black); }

.member-hero__schedule:focus-visible { background: var(--green-accent); color: var(--black); }
.member-hero__schedule img { width: 24px; height: 24px; }

/* ---------- Biography + Credentials ----------
   Block padding/margin comes from overrides.css (section-spacing model);
   only the inline gutter stays here. */
.member-bio-section {
  padding: 0 var(--gutter);
  display: flex;
  gap: 110px;
  align-items: flex-start;
}
.member-bio {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.member-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #686E76;
}
.member-bio__content {
  font-size: 17px;
  line-height: 1.5;
  color: var(--black);
}
.member-bio__content p { margin: 0 0 1.5em; }
.member-bio__content p:last-child { margin-bottom: 0; }

.member-credentials {
  flex: none;
  width: 404px;
  max-width: 100%;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.member-credentials__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.member-credentials__item {
  font-size: 17px;
  line-height: 1.5;
  color: var(--black);
}
.member-credentials__item p { margin: 0; }
.member-credentials__item p:first-child:has(+ p) { font-weight: 700; }
.member-credentials__divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .15);
  margin: 0;
}

/* ---------- Pull-quote ---------- */
.member-quote {
  margin: 0 var(--gutter);
  background: #404040;
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 47px;
}
.member-quote__label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--signal-blue);
}
.member-quote__text {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--fog);
}
.member-quote__text p { margin: 0 0 1em; }
.member-quote__text p:last-child { margin-bottom: 0; }

/* ---------- Insights (reuses the "Latest from Insights" pattern) ---------- */
.member-ins {
  padding: 100px var(--gutter);
}
.member-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}
.member-section-head__text { display: flex; flex-direction: column; gap: 20px; }

body.wp-theme-statera .member-section-head__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: #2B2B29;
}
.member-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: 50px;
  padding: 0 20px;
  background: #404040;
  border-radius: 80px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--white);
  white-space: nowrap;
  flex: none;
  transition: background-color .2s ease, color .2s ease;
}
/* Hover-only, same reasoning as .member-hero__schedule above. */
@media (hover: hover) and (pointer: fine) {
  .member-btn-dark:hover {
    background: var(--green-accent);
    color: var(--charcoal);
  }
}
  .member-btn-dark:active {
    background: var(--green-accent);
    color: var(--charcoal);
  }

.member-btn-dark:focus-visible {
  background: var(--green-accent);
  color: var(--charcoal);
}

.member-ins__row {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.member-ins__row::-webkit-scrollbar { display: none; }
.member-ins__card { flex: 0 0 343px; scroll-snap-align: start; display: flex; flex-direction: column; }
.member-ins__img {
  position: relative;
  aspect-ratio: 265.44 / 165.9;
  border: 1px solid;
  border-radius: 18px;
  overflow: clip;
  background: var(--fog);
}
.member-ins__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-ins__txt { display: flex; flex-direction: column; gap: 12px; padding: 30px 0; }

body.wp-theme-statera .member-ins__title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1.04px;
  color: #2B2B29;
}
.member-ins__title a { color: inherit; }
/* Hover-only underline; no focus-visible pairing needed, the link gets
   native focus styling. */
@media (hover: hover) and (pointer: fine) {
  .member-ins__card:hover .member-ins__title a { text-decoration: underline; }
}
  .member-ins__card:active .member-ins__title a { text-decoration: underline; }

.member-ins__date { font-size: 14px; color: #777; }
.member-ins__subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: #44474F;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Other Advisors (reuses .team-grid / .team-card from team.css) ---------- */
.member-advisors {
  background: #E8E8E8;
  padding: 0 var(--gutter);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.member-advisors .member-section-head,
.member-advisors .member-rail {
  max-width: var(--content-max);
  margin-inline: auto;
}
.member-advisors .team-grid {
  max-width: var(--content-max);
  margin: 0;
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.member-advisors .team-grid::-webkit-scrollbar { display: none; }
.member-advisors .team-card {
  flex: 0 0 326.667px;
  scroll-snap-align: start;
}


.member-rail { display: flex; flex-direction: column; gap: 30px; align-items: flex-end; }
.member-rail [data-rail] { width: 100%; }

/* ---------- CTA (reuses .team-cta__* from team.css; different copy) ---------- */
.member-cta { padding: 100px var(--gutter) 54px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .member-hero { padding-left: 60px; padding-right: 60px; }
  .member-hero__card { flex-direction: column; align-items: stretch; padding: 24px; }
  .member-hero__photo { width: 100%; height: 320px; }
  .member-bio-section { flex-direction: column; gap: 60px; }
  .member-credentials { width: 100%; }
  .member-quote { margin-left: 60px; margin-right: 60px; padding: 30px; }
  .member-quote__text { font-size: 24px; }
  .member-ins, .member-advisors { padding-left: 60px; padding-right: 60px; }
  .member-ins__card { flex-basis: 300px; }
  .member-advisors .team-card { flex-basis: 280px; }
  .member-cta { padding: 60px 60px 40px; }
}

/* This tier used to sit at 700, off the rest of the site's 1180/900/600
   ladder (style.css, team.css, about.css all break their phone tier at 600).
   Realigned to 600 so this page's phone step is the same media query as
   everywhere else, and so it starts exactly where the mobile system's specs
   apply. Figma sxOTqM7HfYLXDnt0sEItgn, node 40:5175 (390x2554): viewport 390,
   side gutter 20px, content width 350px, card inner padding 20px. */
@media (max-width: 600px) {
  .member-hero { padding-left: 20px; padding-right: 20px; }
  .member-hero__photo {
    /* The 1180 tier's fixed height:320px against a near-full-width photo
       reads almost square at 390. The mobile card image block is 350x272
       (Figma token above); an aspect-ratio keeps it landscape and scales
       cleanly at 360 too, instead of a fixed px height that doesn't. */
    width: 100%;
    height: auto;
    aspect-ratio: 350 / 272;
  }
  .member-hero__actions {
    /* LinkedIn icon + "Schedule a Conversation" pill run close to the 350px
       content width; wrap rather than risk overflow at 360. */
    flex-wrap: wrap;
    row-gap: 14px;
  }

body.wp-theme-statera .member-hero__name { font-size: 34px; letter-spacing: -1px; }
  .member-bio-section { padding-left: 20px; padding-right: 20px; }
  .member-credentials { padding: 20px; }
  .member-quote { margin-left: 20px; margin-right: 20px; padding: 20px; }
  .member-quote__text { font-size: 20px; }
  .member-ins, .member-advisors { padding-left: 20px; padding-right: 20px; }
  .member-section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .member-ins__row, .member-advisors .team-grid { gap: 20px; }
  .member-ins__card { flex-basis: 280px; }
  .member-advisors .team-card { flex-basis: 260px; }
  .member-rail__nav { align-self: center; }
  .member-cta { padding: 40px 20px; }
}

/* ---------- Elementor container reset ---------- */
/* The bio page's sections are Elementor widgets inside one container.
   Elementor's default flex container adds a 20px gap and 10px padding, which
   would show up as extra space between every section; the sections carry their
   own padding, so the container is reduced to a plain block. */
.elementor .elementor-element.member-root {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  --content-width: 100%;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --gap: 0px;
}

.elementor .elementor-element[class*="elementor-widget-statera-member-"]:not(:last-child),
.elementor .elementor-element.elementor-widget-statera-insights:not(:last-child),
.elementor .elementor-element.elementor-widget-statera-team-cta:not(:last-child) {
  margin-block-end: 0;
}

/* The shared Insights widget's margin-top: 0 lives in overrides.css with
   the rest of the section-spacing model (scoped to the single template). */

/* The hero's navbar gap (56px / 36px) and all section block spacing come
   from overrides.css — nothing here may add its own. */

/* The shared Team CTA uses the Team page's 152 gutters; this page's design
   keeps the standard 180. */
.member-root .team-cta { padding-left: var(--gutter); padding-right: var(--gutter); }

@media (max-width: 900px) {
  /* Tap target: 44x44 CSS px minimum. Desktop's 10px vertical padding plus a
     16px line height nets ~36px tall, short of the mark; min-height tops it
     up without touching the desktop button. 900 also covers the 768 tablet
     check, not just 390/360. */
  .member-hero__schedule { min-height: 44px; }
}