/* STS Instructors — listing cards and the single instructor page.
   Uses site tokens when present (var(--x, fallback)) so it also works standalone.
   Tokens are declared on every block that renders independently: the listing is a
   shortcode that can be dropped on any page, so it cannot rely on an ancestor. */
.sts-instructor-group, .sts-instructor-single, .sts-instructor-card{
  --_accent:var(--accent,#2f7d4f); --_deep:var(--accent-deep,#1b5233);
  --_surface:var(--surface,#fff); --_surface2:var(--surface-2,#e9efe6);
  --_ink:var(--ink,#161d18); --_soft:var(--ink-soft,#4e5a51); --_faint:var(--ink-faint,#84918a);
  --_line:var(--line,#dce4d9);
  --_sans:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,system-ui,sans-serif;
  font-family:var(--_sans);color:var(--_ink)}

/* ---------- listing ---------- */
.sts-instructor-group{margin:0 0 46px}
.sts-instructor-group-head{margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--_line)}
.sts-instructor-group-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.015em}
.sts-instructor-group-lede{margin:4px 0 0;font-size:14.5px;color:var(--_soft)}

.sts-instructor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px}
.sts-instructor-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.sts-instructor-card-media{position:relative;border-radius:14px;overflow:hidden;
  background:var(--_surface2);border:1px solid var(--_line)}
/* The ratio goes on the IMAGE, in normal flow, rather than on the box. `aspect-ratio`
   on the box did nothing — the in-flow image was taller than the ratio and pushed the
   box open, which is why card heights varied — and taking the image out of flow
   collapsed the box to nothing. Sizing the replaced element avoids both: the image
   gives the box its height, and the ratio makes every one the same shape.

   The !important that used to be here is gone. These classes were called sts-inst-*
   and collided with the theme's legacy instructor cards in global.css, which pin the
   photo to 120x150; the !important was out-shouting a rule I had not found rather than
   fixing anything. Renaming to sts-instructor-* removed the conflict, so ordinary
   specificity is enough. */
.sts-instructor-card-media{width:100%}
.sts-instructor-card .sts-instructor-photo:not(.is-empty){display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;transition:transform .35s ease}
.sts-instructor-card:hover .sts-instructor-photo{transform:scale(1.03)}
/* No photograph yet. Needs the SAME aspect-ratio as a real one: it used to be
   height:100% of a box with no height, so the card collapsed to a name floating under
   a hairline — which is how Ron Bonstetter rendered. A silhouette reads as "photo to
   come" rather than as something broken. */
.sts-instructor-photo.is-empty{display:block;width:100%;aspect-ratio:3/4;
  background:
    radial-gradient(circle at 50% 34%, var(--_line) 0 17%, transparent 17.5%),
    radial-gradient(ellipse 30% 26% at 50% 88%, var(--_line) 0 60%, transparent 61%),
    linear-gradient(160deg,var(--_surface2),var(--_surface))}
/* The flag sits bottom-right at 48px minimum: below that, Mexico and Italy are
   indistinguishable — identical bands once the coat of arms stops resolving. */
.sts-instructor-flag{position:absolute;right:9px;bottom:9px;width:48px;height:48px;border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.sts-instructor-card-body{display:flex;flex-direction:column;gap:2px}
.sts-instructor-card-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.sts-instructor-card:hover .sts-instructor-card-name{color:var(--_deep)}
.sts-instructor-card-creds{font-size:12.5px;color:var(--_soft);line-height:1.4}

/* ---------- single ---------- */
.sts-instructor-single{max-width:900px;margin-inline:auto}
.sts-instructor-head{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.sts-instructor-head-media{position:relative;border-radius:18px;overflow:hidden;
  background:var(--_surface2);border:1px solid var(--_line);
  box-shadow:0 1px 2px rgba(22,29,24,.06),0 26px 50px -30px rgba(27,82,51,.5)}

.sts-instructor-head-media .sts-instructor-photo:not(.is-empty){display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover}
.sts-instructor-title{margin:0;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
/* GNI mark + flag beside the name. Sized in em so they track the heading rather than
   drifting out of proportion when it scales down on narrow screens, and nudged up
   slightly because optical centring against a cap-height line sits low otherwise. */
.sts-instructor-marks{display:inline-flex;align-items:center;gap:8px;margin-left:12px;
  vertical-align:middle;transform:translateY(-.06em)}
.sts-instructor-marks img{display:block;width:1em;height:1em;font-size:inherit}
.sts-instructor-mark-flag{border-radius:50%;box-shadow:0 1px 4px rgba(22,29,24,.28)}
@media (max-width:520px){
  /* Below this the name usually wraps; the marks go under it rather than orphaning a
     line-break between a surname and two small images. */
  .sts-instructor-marks{display:flex;margin:10px 0 0}
}
.sts-instructor-creds{margin:6px 0 0;font-size:16px;color:var(--_soft);font-weight:600}
.sts-instructor-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.sts-instructor-badge{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--_surface2);color:var(--_deep);
  border:1px solid var(--_line)}
.sts-instructor-badge-status{background:var(--_accent);color:#fff;border-color:transparent}
.sts-instructor-badge-emeritus{background:var(--_deep)}
.sts-instructor-summary{margin:22px 0 0;font-size:16.5px;line-height:1.65;color:var(--_soft)}
.sts-instructor-summary p:first-child{margin-top:0}
@media (max-width:720px){
  .sts-instructor-head{grid-template-columns:1fr}
  .sts-instructor-head-media{max-width:280px}
}


/* ============================================================================
   GNI page: badge beside the opening, and the map drawn from instructor records
   ========================================================================== */

.sts-gni-intro{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;margin:0 0 26px}
.sts-gni-intro-text{flex:1 1 340px;min-width:0}
.sts-gni-intro-text > :first-child{margin-top:0}
.sts-gni-logo{flex:0 0 190px;width:190px;height:auto;display:block}
@media (max-width:640px){.sts-gni-logo{margin-inline:auto}}

.sts-gni-map{margin:26px 0 0}
/* The map is inline SVG filled with currentColor, so the landmasses take this colour and
   follow the theme instead of being baked into a picture. */
.sts-gni-map-stage{position:relative;color:#c3cfc4;background:#eaf0ea;border:1px solid var(--_line,#c9d3c5);
  border-radius:14px;padding:12px}
:root[data-theme="dark"] .sts-gni-map-stage{color:#3c4a41;background:#1d2420;border-color:#38453d}
.sts-gni-map-stage svg{display:block;width:100%;height:auto}
.sts-gni-pin{position:absolute;width:34px;height:34px;border-radius:50%;object-fit:cover;
  transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
@media (max-width:600px){.sts-gni-pin{width:24px;height:24px;border-width:1.5px}}
.sts-gni-map-cap{margin:10px 0 0;font-size:13.5px;color:var(--_soft,#4e5a51)}
.sts-gni-countries{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px}
.sts-gni-country{display:flex;align-items:center;gap:8px;font-size:14.5px}
.sts-gni-country img{border-radius:3px;display:block}
.sts-gni-n{color:var(--_soft,#4e5a51);font-variant-numeric:tabular-nums}
.sts-gni-cta{margin:26px 0 0}