/* ==========================================================================
   BAKKAR PRINTING — THEME "MOMENTUM"
   pages/agents.css — agents.html only.
   --------------------------------------------------------------------------
   OWNED BY: the agents page agent. Nothing here leaks outside this page.

   THE IDEA
   The visitor came here for the offices, so the page gives them the offices
   first: the shared slim page head (base.css `.page-head--slim` — do NOT
   restyle it here), then straight into the sticky region filter and the agents
   grouped by region. Each group is a real <section> with its own heading, not
   a decorated <div>. The "how the network works" bento — the factory tile plus
   the three steps an order travels — sits BELOW the list, as the explanation
   rather than the entrance, and carries the three real figures.

   No stock faces anywhere: the avatar is a CSS monogram built from the agent's
   initials, and the head office wears the brand mark instead.

   Everything is expressed with logical properties. The only mirrored
   declaration is the group rule's gradient sweep — `linear-gradient(to right)`
   takes no logical keyword, so it is flipped explicitly under [dir="rtl"].
   ========================================================================== */

/* ==========================================================================
   1. NETWORK BENTO — the factory tile + how an order travels
   ========================================================================== */
.ag-net__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .ag-net__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
}

/* ---- the factory tile ---- */
.ag-net__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--tile-r);
  min-block-size: 300px;
  box-shadow: var(--sh-4), var(--sh-ring);
  isolation: isolate;
}
.ag-net__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
}
.ag-net__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-b);
}
.ag-net__caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  block-size: 100%;
  justify-content: flex-end;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  color: var(--text-on-ink);
}
.ag-net__pin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: 7px var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  color: #fff;
}
.ag-net__pin svg { inline-size: 14px; block-size: 14px; flex: none; }
.ag-net__cap-text {
  max-inline-size: 42ch;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .92);
}

/* ---- the "how it works" tile ---- */
.ag-net__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border-radius: var(--tile-r);
  background: var(--grad-ink);
  color: var(--text-on-ink);
  box-shadow: var(--sh-4);
  overflow: hidden;
  position: relative;
}
.ag-net__panel::after {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -18%;
  inline-size: 22rem;
  block-size: 22rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(249, 115, 22, .26) 0%, rgba(237, 28, 36, .12) 45%, rgba(237, 28, 36, 0) 70%);
  pointer-events: none;
}
.ag-net__panel > * { position: relative; z-index: 1; }
.ag-net__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: #fff;
}
.ag-net__body {
  margin-block-start: var(--sp-3);
  max-inline-size: 52ch;
  font-size: var(--fs-sm);
  color: var(--text-on-ink-2);
  line-height: var(--lh-normal);
}
/* Three real figures, counted up from data.js. Pills on ink, never a table. */
.ag-net__figs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
  padding: 0;
  list-style: none;
}
.ag-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-inline-size: 0;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--line-ink-strong);
}
.ag-stat__num {
  flex: none;
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber-300);
  direction: ltr;
  unicode-bidi: isolate;
}
.ag-stat__label {
  min-inline-size: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink-2);
  line-height: var(--lh-snug);
}

.ag-net__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.ag-net__step {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.ag-net__step-n {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--r-md);
  background: var(--grad-cta);
  box-shadow: var(--glow-brand);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: #fff;
  direction: ltr;
}
.ag-net__step-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  color: #fff;
  line-height: 1.35;
}
.ag-net__step-desc {
  margin-block-start: 5px;
  font-size: var(--fs-sm);
  color: var(--text-on-ink-2);
  line-height: var(--lh-normal);
}

/* ==========================================================================
   2. STICKY FILTER BAR — pill chips, one per region group
   ========================================================================== */
/* It sits directly under `.page-head--slim`, which already draws the hairline
   above it — so this bar only draws the one below. */
.ag-bar {
  position: sticky;
  inset-block-start: var(--header-h-condensed);
  z-index: var(--z-sticky);
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-block-end: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ag-bar { background: var(--surface); }
}
.ag-bar__in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-block-size: 62px;
  padding-block: var(--sp-2);
  min-inline-size: 0;
}
.ag-bar__label {
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .ag-bar__label { text-transform: none; font-size: var(--fs-xs); }
@media (max-width: 767px) { .ag-bar__label { display: none; } }

/* The live-region count sits at the end of the bar on wide screens and is
   simply read by a screen reader on narrow ones. */
.ag-bar__count {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-3);
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .ag-bar__count {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   3. GROUPS + GRID
   ========================================================================== */
/* The list is the first thing under the head — it does not need a full
   section's worth of air above it before it starts. */
.ag-list { padding-block-start: clamp(1.75rem, 1.2rem + 2vw, 3rem); }

.ag-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);
}
.ag-group__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-6);
}
.ag-group__title {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
.ag-group__n {
  display: inline-grid;
  place-items: center;
  min-inline-size: 26px;
  block-size: 26px;
  padding-inline: 8px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  flex: none;
}
.ag-group__rule {
  flex: 1 1 auto;
  block-size: 1px;
  min-inline-size: var(--sp-4);
  background: linear-gradient(to right, var(--line-strong), transparent);
  border: 0;
}
[dir="rtl"] .ag-group__rule { background: linear-gradient(to left, var(--line-strong), transparent); }

.ag-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* ==========================================================================
   4. AGENT CARD — extends the kit's .a-card
   ========================================================================== */
.ag-card__top { align-items: flex-start; }

/* Head office wears the brand mark; everyone else gets a CSS monogram. */
.ag-card__avatar { position: relative; }
.ag-card__logo {
  inline-size: 34px;
  block-size: 34px;
  object-fit: contain;
}
.ag-card--hq .ag-card__avatar {
  background: var(--surface);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--line-strong);
}

/* City + "Head office" sit on one wrapping meta row, so a long office name
   never has to fight a badge for the same line at 360px. */
.ag-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: 7px;
}
.ag-card__meta:empty { display: none; }
.ag-card__flag { flex: none; }

.ag-card__city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-3);
}
.ag-card__city svg { inline-size: 12px; block-size: 12px; flex: none; }

/* Coverage — the towns this office actually calls on. */
.ag-card__coverage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ag-card__coverage-k {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .ag-card__coverage-k { text-transform: none; font-size: var(--fs-xs); }
.ag-card__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ag-card__cities li {
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

.ag-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 560px) {
  .ag-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-card__actions .ag-card__mail { grid-column: 1 / -1; }
}
.ag-card__actions .btn {
  justify-content: flex-start;
  inline-size: 100%;
  min-inline-size: 0;
}
.ag-card__actions .btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}

.ag-card__quote {
  margin-block-start: calc(var(--sp-2) * -1);
  align-self: flex-start;
}

/* ==========================================================================
   5. EMPTY STATE (only reachable if a region ever ends up with no agent)
   ========================================================================== */
.ag-empty { padding-block: var(--sp-8); }

/* ==========================================================================
   6. BECOME AN AGENT
   ========================================================================== */
.ag-join {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  border-radius: var(--r-3xl);
  background: var(--grad-ink);
  color: var(--text-on-ink);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
@media (min-width: 900px) {
  .ag-join { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
}
.ag-join::before {
  content: '';
  position: absolute;
  inset-block-end: -55%;
  inset-inline-start: -8%;
  inline-size: 30rem;
  block-size: 30rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(237, 28, 36, .30) 0%, rgba(249, 115, 22, .12) 48%, rgba(249, 115, 22, 0) 70%);
  pointer-events: none;
}
.ag-join > * { position: relative; z-index: 1; }
.ag-join__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: #fff;
}
.ag-join__body {
  margin-block-start: var(--sp-4);
  max-inline-size: 56ch;
  color: var(--text-on-ink-2);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
.ag-join__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
  list-style: none;
  padding: 0;
}
.ag-join__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-on-ink);
}
.ag-join__tick {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  border-radius: var(--r-circle);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px var(--line-ink-strong);
  color: var(--amber-300);
}
.ag-join__tick svg { inline-size: 12px; block-size: 12px; }

.ag-join__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line-ink-strong);
}
.ag-join__card-k {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--amber-300);
}
[dir="rtl"] .ag-join__card-k { text-transform: none; font-size: var(--fs-xs); }
.ag-join__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ag-join__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink-2);
}
.ag-join__mail:hover { color: #fff; }
.ag-join__mail svg { inline-size: 15px; block-size: 15px; flex: none; }

/* ==========================================================================
   7. CLOSING BAND
   ========================================================================== */
.ag-cta { padding-block-end: var(--sp-section); }

/* ==========================================================================
   8. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ag-net__img { transform: none !important; }
}