/* ==========================================================================
   VIVID — AGENTS PAGE
   --------------------------------------------------------------------------
   Page-scoped only. .acard / .avatar / .agrid / .chip / .stats / .marquee /
   .qcta all come from components.css — this file only adds the page chrome.
   Rhythm: phead (white) → NETWORK (ink) → the grid (white) → red panel.
   Logical properties only. Flat red, hard edges, no gradients, no blurs.
   ========================================================================== */


/* ==========================================================================
   1. COVERAGE — the ink band.
   ========================================================================== */
.netband {
  position: relative;
  overflow: hidden;                 /* the offset block must never spill */
}
/* A hard-edged red block, rotated. Vivid's elevation is solid, never a blur. */
.netband::after {
  content: '';
  position: absolute;
  inset-block-start: -90px;
  inset-inline-end: -70px;
  inline-size: 260px;
  block-size: 260px;
  background: var(--red-brand);
  border-radius: var(--r-lg);
  transform: rotate(22deg);
  opacity: 0.9;
  pointer-events: none;
}
[dir="rtl"] .netband::after { transform: rotate(-22deg); }
.netband > .container { position: relative; z-index: 1; }
/* Below the desktop breakpoint the headline reaches the far edge, so the block
   pulls back into the corner instead of sitting under the type. */
@media (max-width: 1099px) {
  .netband::after {
    inline-size: 190px;
    block-size: 190px;
    inset-block-start: -128px;
    inset-inline-end: -58px;
  }
}
@media (max-width: 719px) {
  .netband::after { inline-size: 150px; block-size: 150px; inset-block-start: -104px; }
}

.netband__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-end: var(--sp-8);
}
.netband__intro { min-inline-size: 0; flex: 1 1 420px; }

.netband__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  /* ON THE BAND — and the band's luminance MOVES between the themes, so every
     colour in here must be an --*-on-ink token, never a page token and never a
     raw ramp value. */
  color: var(--text-on-ink);
  text-wrap: balance;
}
.netband__sub {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  /* was --text-subtle: a PAGE token. It only scored 3.9:1 on the light band and
     went muddy on the dark one. */
  color: var(--text-on-ink-muted);
  max-inline-size: 58ch;
}

/* The stats sit in a hairline-ruled slab so the ink band has structure. */
.netband .stats {
  border: var(--bw) solid var(--surface-ink-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  gap: 0;
}
.netband .stat {
  border-block-end: 1px solid var(--line-on-ink);
  border-inline-end: 1px solid var(--line-on-ink);
}
.netband .stat:nth-child(2n) { border-inline-end: 0; }
.netband .stat:nth-last-child(-n+2) { border-block-end: 0; }
@media (min-width: 720px) {
  .netband .stat { border-block-end: 0; }
  .netband .stat:nth-child(2n) { border-inline-end: 1px solid var(--line-on-ink); }
  .netband .stat:last-child { border-inline-end: 0; }
}

/* City ticker ------------------------------------------------------------ */
.netband__cities {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line-on-ink);
  min-inline-size: 0;
}
.netband__cities-label {
  flex: none;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
  max-inline-size: 8rem;
}
.netband__cities .marquee { min-inline-size: 0; }
/* Size only. The COLOUR is .marquee--on-ink's job (components.css) — this used
   to hard-set --line-strong, a LINE token used as text: it was #373D4E on the
   #262C3C dark band, i.e. invisible. */
.netband__cities .marquee__item { font-size: var(--fs-xl); }
/* The RTL loop direction used to be patched here, page-scoped. It now lives in
   components.css with the rest of the marquee mechanic, so the brand ticker and
   this city ticker share one implementation. */
@media (max-width: 719px) {
  .netband__cities { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .netband__cities-label { max-inline-size: none; }
  .netband__cities .marquee { inline-size: 100%; }
}


/* ==========================================================================
   2. FILTER BAR — chips + a live result count, on a hard ink rule.
   ========================================================================== */
.agents__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block-end: var(--sp-4);
  border-block-end: var(--bw) solid var(--line-bold);
}

/* Scrolls horizontally on narrow screens; the PAGE never scrolls. */
.agents__filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-block: 4px;            /* room for the chip hover lift + focus ring */
}
.agents__filters::-webkit-scrollbar { display: none; }
.agents__chip { flex: none; }

.agents__count {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.agents__count strong {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  color: var(--text);
}


/* ==========================================================================
   3. REGION GROUPS
   ========================================================================== */
.agents__group { margin-block-start: var(--sp-10); }

.agents__group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  margin-block-end: var(--sp-6);
  border-block-end: 1px solid var(--line);
}
.agents__group-n {
  flex: none;
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.agents__group-txt { min-inline-size: 0; flex: 1 1 auto; }
.agents__group-title {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.agents__group-sub {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* The count block: a solid ink chip, hard-edged. */
.agents__group-n2 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 34px;
  block-size: 34px;
  padding-inline: var(--sp-2);
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-radius: var(--r-sm, 8px);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   4. AGENT CARD — extras on top of .acard (components.css)
   ========================================================================== */
.agent { block-size: 100%; }
.agent .acard__top { align-items: flex-start; }
.agent .acard__name { line-height: var(--lh-snug); }

.agent__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: calc(var(--sp-2) * -1);
}
.agent__city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.agent__city svg { inline-size: 14px; block-size: 14px; flex: none; }

.agent__tel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  min-inline-size: 0;
}
.agent__tel svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--brand-text); }
.agent__tel a { color: inherit; text-decoration: none; }
.agent__tel a:hover { color: var(--brand-text); text-decoration: underline; }

.agent .acard__links { gap: var(--sp-2); }
.agent .acard__links .btn svg { inline-size: 15px; block-size: 15px; }
.agent__mail { color: var(--text-muted); }

/* On the narrowest phones the three actions stack into a clean 1-2 split. */
@media (max-width: 380px) {
  .agent .acard__links .btn { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   5. BECOME AN AGENT — the closing red panel
   ========================================================================== */
/* The kicker only auto-recolours inside .band--red; this panel is a red block
   inside a normal section, so it is recoloured here — with the ON-RED tokens.
   The rule used to take --surface, which is white in light but #14161E in dark:
   a black smear on the red block. On red, the answer is white in both themes. */
.become .qcta .kicker { color: var(--text-on-red); }
.become .qcta .kicker::before { background: var(--white); }
.become .qcta__actions .btn { min-inline-size: 0; }