/* ==========================================================================
   Sporometrics components — pure-CSS reproductions of the old sliced-PNG
   bezels (Design Guide §5). Every recipe = fill + gloss + rim + shadow.
   Depends on css/tokens.css.
   ========================================================================== */

/* ---- White content card ------------------------------------------------ */
.spo-card {
  background: var(--grad-card);              /* subtle gradient, not flat white */
  border: var(--border-rim);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg), var(--sh-gloss-top);
  padding: var(--sp-5) var(--sp-8);          /* tightened 20/32 (was 32/40) */
}
@media (max-width:640px){
  .spo-card { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-banner); box-shadow: var(--sh-md); }
  .spo-card { border-left:0; border-right:0; }   /* drop side rim on mobile */
}

/* ---- Orange billboard / banner ----------------------------------------- */
.spo-banner {
  background: var(--grad-orange);
  border: var(--border-banner);
  border-radius: var(--r-banner);
  box-shadow: var(--sh-brand),
              inset 0 1px 0 rgba(255,255,255,.45),
              inset 0 -3px 8px rgba(0,0,0,.12);
  color: var(--text-onbrand);
  padding: var(--sp-6) var(--sp-8);
}
.spo-banner, .spo-banner :where(h1,h2,h3,p) { text-shadow: 0 1px 1px rgba(0,0,0,.2); }

/* ---- Silver title panel / list tab ------------------------------------- */
.spo-tab {
  display:flex; align-items:center; gap: var(--sp-3);
  background: var(--grad-silver);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--r-tab);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6);
  padding: var(--sp-3) var(--sp-4);
  min-height: 52px;                          /* mobile tap target */
  color: var(--heading-grey);
  font: var(--fw-bold) 15px/1.2 var(--font-body);   /* label (slightly smaller) */
  text-transform: uppercase; letter-spacing: var(--tr-label);
  text-decoration: none;
  justify-content: flex-start;
}
/* Header text sits in a single flex item so multi-node titles (e.g. an <em>
   binomial + trailing code) wrap as one left-justified block instead of the
   parts being pushed to opposite edges. */
.spo-tab .tab-label { flex: 1 1 auto; min-width: 0; text-align: left; }
/* Silver-tab chevron: text glyph in Breuer Medium, to the LEFT of the text,
   flipped horizontally, with a white outline stroke. */
.spo-tab .spo-chevron { display:none; }
.spo-tab::before {
  content: "\203A";
  font-family: var(--font-display); font-weight: 500; font-size: 1.8em; line-height: 1;  /* +20% */
  color: var(--chevron);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  transform: scaleX(-1);
}
.spo-tab:hover::before { color: var(--chevron-hover); }
/* Stacked list: one continuous silver gradient across the whole panel, rows
   transparent, separated by white seam lines. */
.spo-tablist {
  background: var(--grad-silver);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--r-tab);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
}
.spo-tablist .spo-tab { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.spo-tablist .spo-tab + .spo-tab { border-top: 1px solid rgba(255,255,255,.9); }

/* ---- Chevron marker  ">"  (lime to orange on hover) -------------------- */
.spo-chevron {
  /* em-based so it scales to the surrounding text */
  display:inline-block; width:.44em; height:.44em;
  border:0; border-top:.11em solid var(--chevron); border-right:.11em solid var(--chevron);
  transform: rotate(45deg);
  transition: border-color var(--mo-hover), transform var(--mo-hover);
}
.spo-chevron--white { border-top-color:#fff; border-right-color:#fff; }
a:hover .spo-chevron, .spo-tab:hover .spo-chevron, .spo-row:hover .spo-chevron {
  border-top-color: var(--chevron-hover); border-right-color: var(--chevron-hover);
  transform: rotate(45deg) translate(1px,-1px);
}

/* ---- Black glossy nav pill + recessed search --------------------------- */
.spo-nav {
  display:flex; align-items:center; gap: var(--sp-6);
  background: var(--grad-nav);
  border-radius: var(--r-nav);              /* 9px override */
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.15);
  padding: 6px var(--sp-4);          /* shorter bar */
  color:#fff;
}
.spo-nav a {
  color:#fff; text-decoration:none;
  font: var(--fw-regular) var(--fs-base)/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.01em;
}
.spo-nav a:hover { color: var(--heading-orange); }
.spo-search {
  margin-left:auto; display:flex; align-items:center;
  background:#111; border-radius: var(--r-input);
  box-shadow: var(--sh-inset-field);
  padding: var(--sp-2) var(--sp-3);
}
.spo-search input {
  background:transparent; border:0; outline:0; color:#fff;
  font: var(--fw-regular) var(--fs-sm) var(--font-body); width:120px;
}

/* ---- Buttons (true pill) ----------------------------------------------- */
.spo-btn {
  display:inline-flex; align-items:center; gap: var(--sp-2);
  background: var(--grad-orange); color:#fff;
  border:1px solid var(--orange-rim); border-radius: var(--r-pill);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.45);
  padding: var(--sp-2) var(--sp-5);
  font: var(--fw-bold) var(--fs-sm) var(--font-body);
  text-transform:uppercase; letter-spacing: var(--tr-label);
  text-decoration:none; text-shadow:0 1px 1px rgba(0,0,0,.2);
  transition: filter var(--mo-hover);
}
.spo-btn:hover { filter:brightness(.94); }

/* ---- Footer icon badge (square, to match the AddToAny share icons) ------ */
.spo-badge {
  width:28px; height:28px; border-radius:4px;
  background: var(--heading-orange); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.spo-badge svg { width:16px; height:16px; display:block; }

/* ---- Page title  ("Services ›") ---------------------------------------- */
.spo-title {
  font: var(--fw-regular) var(--fs-display)/var(--lh-tight) var(--font-display);  /* Breuer Regular */
  letter-spacing: var(--tr-display); color: var(--heading-grey);
  display:flex; align-items:center; gap: var(--sp-3);
}

/* ---- Two-tone service label / link ------------------------------------- */
/* light-grey word on top (Bold), darker word beneath, 50% larger (Light) */
.spo-service { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.02em; line-height: 1.05; }  /* +20% */
.spo-service .word1 { display:block; color: var(--text-muted); font-weight: 700; }
.spo-service .word2 { display:block; color: var(--n-600); font-weight: 300; font-size: 1.815em; }  /* dark-grey word, +21% total */

/* ---- List row (mobile silver tabs / catlist) --------------------------- */
.spo-row {
  display:flex; align-items:center; gap: var(--sp-3);
  min-height:44px; padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-divider);
  color: var(--text-body); text-decoration:none;
  font: var(--fw-regular) var(--fs-base) var(--font-body);
}
.spo-row .spo-chevron { margin-left:auto; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }