/* SABRE — team bio pages.

   Shared by all 29 /team/<slug>/ pages, which is why it lives in the plugin
   rather than inline: repeating it in every page body would ship the same 8KB
   thirty times and make a styling change a 29-file edit.

   Each page body sets --line on .sabre-bio to its service-line color. */

.sabre-bio {
  --sabre-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --sabre-mono: "Space Mono", ui-monospace, monospace;
  --acc: #E4F35B;
  --acc-ink: #B8C43A;
  --line: var(--acc-ink);
  background: var(--sabre-paper);
  color: var(--sabre-fg-1);
  font-family: var(--sabre-display);
}
.sabre-bio *, .sabre-bio *::before, .sabre-bio *::after { box-sizing: border-box; }
.sabre-bio p { margin: 0; white-space: normal; }

/* ---------- Hero ---------- */
.sabre-bio__hero { position: relative; overflow: hidden; padding: 0 var(--sabre-gutter) 120px; background: var(--sabre-paper); }

.sabre-bio__in { position: relative; max-width: var(--sabre-max); margin: 0 auto; padding-top: 40px; }
.sabre-bio__back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--sabre-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sabre-fg-3); text-decoration: none; border-bottom: 1px solid transparent;
}
.sabre-bio__back:hover { color: var(--sabre-black); border-bottom-color: var(--acc-ink); }

.sabre-bio__grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 72px; align-items: start; }

/* Portrait */
.sabre-bio__card { border: 1px solid var(--sabre-line); background: #FFFFFF; overflow: hidden; }
.sabre-bio__photo {
  width: 100%; aspect-ratio: 4 / 5;
  background-color: #FFFFFF; background-size: 88% auto;
  background-position: center bottom; background-repeat: no-repeat;
}
.sabre-bio__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--sabre-line); }
.sabre-bio__dept { font-family: var(--sabre-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sabre-fg-3); }
.sabre-bio__tick { width: 26px; height: 3px; background: var(--line); display: inline-block; }

/* Name and body */
.sabre-bio h1.sabre-bio__name {
  margin: 0; font-family: var(--sabre-display); font-weight: 700;
  font-size: clamp(36px, 5.2vw, 76px); line-height: 0.98; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--sabre-fg-1);
}
.sabre-bio__title { margin-top: 22px; font-family: var(--sabre-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sabre-fg-2); }
.sabre-bio__rule { margin-top: 18px; width: 132px; height: 4px; background: var(--line); }
.sabre-bio__body { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; max-width: 65ch; }
.sabre-bio__body p { font-size: 13px; line-height: 1.7; color: var(--sabre-fg-2); text-wrap: pretty; }

.sabre-bio__contact { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }.sabre-bio__contact a { font-family: var(--sabre-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--sabre-black); text-decoration: none; border-bottom: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.sabre-bio__contact a:hover { border-bottom-color: var(--acc-ink); color: var(--sabre-black); }
.sabre-bio__contact .sabre-bio__sep { width: 1px; height: 16px; background: var(--sabre-line); display: inline-block; }

/* "See my listings" — brokers only. Points at the Realty NA author archive,
   which is the plugin's own agent-listings page, so it inherits that template
   rather than anything in this stylesheet. */
.sabre-bio__listings {
  margin-top: 28px; min-height: 44px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sabre-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sabre-black); background: transparent;
  border: 1px solid var(--line); padding: 13px 20px; text-decoration: none;
  transition: background var(--sabre-med) var(--sabre-ease), color var(--sabre-med) var(--sabre-ease);
}
.sabre-bio__listings:hover { background: var(--line); color: #FFFFFF; border-color: var(--line); }

/* Small personal-social button. Sits next to "See my listings" where both
   appear, so the two share a row. */
.sabre-bio__actions { margin-top: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sabre-bio__actions .sabre-bio__listings { margin-top: 0; }
.sabre-bio__social {
  min-height: 38px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sabre-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sabre-fg-2); background: transparent;
  border: 1px solid var(--sabre-line-strong); padding: 10px 14px; text-decoration: none;
  transition: color var(--sabre-med) var(--sabre-ease), border-color var(--sabre-med) var(--sabre-ease);
}
.sabre-bio__social:hover { color: var(--sabre-black); border-color: var(--sabre-black); }
.sabre-bio__social svg { width: 15px; height: 15px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* Transaction list, collapsed by default. Native <details> so it needs no JS
   and keeps keyboard and screen-reader behaviour for free. Used where a bio
   carries a deal sheet long enough to bury the rest of the page. */
.sabre-bio__tx { margin-top: 32px; border-top: 1px solid var(--sabre-line); border-bottom: 1px solid var(--sabre-line); }
.sabre-bio__tx > summary {
  cursor: pointer; list-style: none; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0;
  font-family: var(--sabre-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sabre-fg-2);
  transition: color var(--sabre-fast) var(--sabre-ease);
}
.sabre-bio__tx > summary::-webkit-details-marker { display: none; }
.sabre-bio__tx > summary:hover { color: var(--sabre-fg-1); }
.sabre-bio__tx-sign { font-size: 15px; line-height: 1; color: var(--line); flex: 0 0 auto; }
.sabre-bio__tx[open] > summary { color: var(--sabre-fg-1); }
.sabre-bio__tx[open] .sabre-bio__tx-sign::before { content: "\2212"; }
.sabre-bio__tx-sign::before { content: "+"; }
.sabre-bio__tx-list { display: flex; flex-direction: column; padding: 4px 0 24px; }
.sabre-bio__tx-item { display: grid; grid-template-columns: minmax(0,0.34fr) minmax(0,1fr); gap: 24px; padding: 16px 0; border-top: 1px solid var(--sabre-line); }
.sabre-bio__tx-item:first-child { border-top: 0; }
.sabre-bio__tx-where { font-family: var(--sabre-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line); }
.sabre-bio__tx-what { font-size: 13px; line-height: 1.7; color: var(--sabre-fg-2); text-wrap: pretty; }
@media (max-width: 768px) {
  .sabre-bio__tx-item { grid-template-columns: minmax(0,1fr); gap: 6px; }
}

.sabre-bio__meta { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--sabre-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; }
.sabre-bio__meta-item { display: flex; flex-direction: column; gap: 8px; }
.sabre-bio__meta-label { font-family: var(--sabre-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sabre-fg-3); }
.sabre-bio__meta-value { font-size: 14px; line-height: 1.4; color: var(--sabre-fg-1); }
/* Service line links through to its own page; underlined in that line's colour
   so the accent stays consistent with the rule and tick above. */
.sabre-bio__meta-value a {
  color: var(--sabre-fg-1); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--sabre-fast) var(--sabre-ease);
}
.sabre-bio__meta-value a:hover { color: var(--line); }

/* ---------- Prev / next ---------- */
.sabre-bio__nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sabre-line-on-dark); border-bottom: 1px solid rgba(255,255,255,0.14); background: #23231F; }
.sabre-bio__nav a { display: flex; align-items: center; gap: 20px; padding: 34px var(--sabre-gutter); color: var(--sabre-fg-on-dark-1); text-decoration: none; transition: background var(--sabre-med) var(--sabre-ease); }
.sabre-bio__nav a:hover { background: rgba(255,255,255,0.04); color: var(--sabre-fg-on-dark-1); }
.sabre-bio__nav a:first-child { border-right: 1px solid var(--sabre-line-on-dark); }
.sabre-bio__nav a:last-child { justify-content: flex-end; }
.sabre-bio__nav-label { font-family: var(--sabre-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.sabre-bio__nav-name { font-family: var(--sabre-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--sabre-fg-on-dark-1); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .sabre-bio__grid { grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 40px; }
}
@media (max-width: 860px) {
  .sabre-bio__grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .sabre-bio__card { max-width: 420px; }
}
@media (max-width: 768px) {
  .sabre-bio__hero { padding: 0 var(--sabre-gutter) 72px; }
  .sabre-bio__in { padding-top: 24px; }
  /* Stack phone and email rather than letting the row wrap: a wrapped row can
     strand the 1px divider alone on its own line, where it reads as a stray
     tick mark. */
  .sabre-bio__contact { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sabre-bio__contact .sabre-bio__sep { display: none; }
  .sabre-bio__nav { grid-template-columns: minmax(0,1fr); }
  .sabre-bio__nav a { padding: 24px var(--sabre-gutter); gap: 14px; }
  .sabre-bio__nav a:first-child { border-right: 0; border-bottom: 1px solid var(--sabre-line-on-dark); }
  .sabre-bio__nav a:last-child { justify-content: flex-start; flex-direction: row-reverse; }
  .sabre-bio__nav-name { font-size: 16px; }
}