/* ===========================================================================
   Aqaratk — featured developers / brokers showcase (includes/pros.php)
   ===========================================================================
   A dark band, not another white row.

   On a homepage made of white cards on a warm neutral page, the way to make a
   handful of people read as HAND-PICKED is to change the ground they stand on.
   Adding more ornament to a card on the same background just makes it louder,
   not more important. So: navy field, gold as the only accent, white cards
   floating on it with real elevation.

   Everything is built from the site's own tokens (--navy, --gold, --teal), so
   it reads as the same brand turned up, not a different design.
   =========================================================================== */

.pro-sec {
  position: relative;
  isolation: isolate;
  padding: 42px 0 46px;
  margin: 34px 0;
  background: var(--navy, #0B1B33);
  overflow: hidden;
}

/* Two soft gold pools, top-left and bottom-right, so the field has depth
   without a visible gradient sweep across it. */
.pro-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 62% at 8% 0%,   rgba(201,162,39,.22), transparent 62%),
    radial-gradient(46% 58% at 96% 100%, rgba(15,118,110,.20), transparent 62%);
}
/* A hairline of gold along the top and bottom edges: it frames the band as a
   deliberate section rather than a colour change. */
.pro-sec::before,
.pro-sec::after {
  content: ''; position: absolute; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
}
.pro-sec::before { top: 0; }
.pro-sec::after  { bottom: 0; }


/* ---------- Section header ----------
   Centred as a stack: title, then a gold rule, then the "view all" pill. The
   side-by-side arrangement pinned the heading left and the link right, which
   fought the centred card row underneath it. */
/* Centred as one line rather than a centred stack: the stack put the pill on
   its own row and cost ~50px per section for nothing. */
.pro-head {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 0 20px; flex-wrap: wrap; text-align: center;
}

.pro-title {
  position: relative;
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0; color: #fff; letter-spacing: -.015em;
}
/* Short gold rule under the centred heading. */
.pro-title::after {
  content: '';
  display: block; margin: 10px auto 0;
  width: 54px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold, #C9A227), var(--gold-light, #E3C15A));
}

.pro-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--gold-light, #E3C15A);
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid rgba(227,193,90,.38);
  background: rgba(255,255,255,.04);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.pro-more:hover {
  background: rgba(227,193,90,.14);
  border-color: var(--gold-light, #E3C15A);
  transform: translateY(-1px);
}
.pro-more span { transition: transform .18s ease; }
.pro-more:hover span { transform: translateX(3px); }
[dir="rtl"] .pro-more:hover span { transform: translateX(-3px); }

/* ---------- The two bands ----------
   Developers keep the navy showcase ground; brokers sit on the page's own warm
   neutral with teal as the accent, with real space between them. Different
   ground is what makes them read as two sections rather than one long band. */
.pro-sec + .pro-sec { margin-top: 44px; }

.pro-sec-brk { background: var(--surface-2, #F4F6F9); overflow: visible; }
/* The gold hairlines frame the navy band; on the light one they would be two
   stray lines, so the top edge becomes a single teal rule instead. */
.pro-sec-brk::after { display: none; }
.pro-sec-brk::before {
  background: linear-gradient(90deg, transparent, rgba(15,118,110,.45), transparent);
}
.pro-sec-brk .pro-title { color: var(--navy, #0B1B33); }
.pro-sec-brk .pro-title::after {
  background: linear-gradient(90deg, var(--teal, #0F766E), #35A79B);
}
.pro-sec-brk .pro-more {
  color: var(--teal-ink, #0F6E56);
  border-color: rgba(15,118,110,.35);
  background: rgba(15,118,110,.06);
}
.pro-sec-brk .pro-more:hover {
  background: rgba(15,118,110,.12);
  border-color: var(--teal, #0F766E);
}

@media (max-width: 640px) {
  .pro-head { gap: 10px; }
  .pro-sec + .pro-sec { margin-top: 30px; }
}

/* ---------- The list ----------
   Rows, not a card grid. With three featured accounts a six-across grid shows
   one card and five empty columns; a list of three is just a list of three.
   Rows also have somewhere to put the things that actually matter to a buyer -
   verified, city, how much live stock - which a 150px square does not. */
/* Two or three per line, centred. A full-width row per account left a dead gap
   across the middle of every row and grew the page by ~70px for each account
   added; this keeps the whole section to one or two lines whether there are two
   featured accounts or six. */
.pro-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
}
/* Flex, not grid, and this is the reason: auto-fill leaves the empty tracks in
   place, so a row of three cards in a four-track grid sits hard against one
   edge and justify-content has nothing to centre. Flex only lays out the cards
   that exist. The basis keeps a card ~300px whether there are two or six. */
.pro-list > .pro-row {
  flex: 0 1 300px;
  min-width: 262px; max-width: 340px;
}

/* Avatar spans both text lines; name and pills stack beside it. Keeping the
   pills under the name rather than out at the far edge is what lets the row
   survive at a third of the width. */
.pro-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'ring id go' 'ring stats go';
  align-items: center; column-gap: 12px; row-gap: 7px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line, #E3E8EF);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pro-row:hover {
  transform: translateY(-2px);
  border-color: rgba(15,118,110,.45);
  box-shadow: 0 12px 26px -16px rgba(11,27,51,.4);
}
.pro-row:focus-visible { outline: 3px solid var(--teal, #0F766E); outline-offset: 3px; }

/* On the navy band the row is a lightened panel, not a white card - white
   blocks on navy at this size read as gaps punched in the band. */
.pro-sec-dev .pro-row {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
}
.pro-sec-dev .pro-row:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(227,193,90,.55);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.7);
}
.pro-sec-dev .pro-row:focus-visible { outline-color: var(--gold-light, #E3C15A); }

.pro-ring  { grid-area: ring; }
.pro-id    { grid-area: id; }
.pro-stats { grid-area: stats; }
.pro-go    { grid-area: go; }

/* ---------- Avatar ---------- */
.pro-ring {
  position: relative;
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 50%; padding: 2px;
  background: linear-gradient(145deg, #35A79B, var(--teal, #0F766E) 60%, #9FE1CB);
}
.pro-sec-dev .pro-ring {
  background: linear-gradient(145deg, var(--gold-light, #E3C15A), var(--gold, #C9A227) 55%, #EADFB8);
}
.pro-ring-sq { border-radius: 13px; }
.pro-ava {
  position: relative; width: 100%; height: 100%;
  border-radius: inherit; display: grid; place-items: center;
  background: var(--surface-2, #F4F2EF); overflow: hidden;
}
.pro-mono { font-size: 16px; font-weight: 800; line-height: 1; color: var(--navy, #0B1B33); }
.pro-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: var(--surface-2, #F4F2EF);
}
.pro-ring-sq .pro-img { object-fit: contain; padding: 4px; }

/* ---------- Name block ---------- */
.pro-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pro-name {
  font-size: 14.5px; font-weight: 800; line-height: 1.3;
  color: var(--navy, #0B1B33);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pro-co {
  font-size: 11.5px; color: var(--ink-3, #64748B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pro-sec-dev .pro-name { color: #fff; }
.pro-sec-dev .pro-co   { color: #93A3B8; }

/* ---------- Pills ---------- */
.pro-stats { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.pro-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 1;
  padding: 5px 9px; border-radius: 7px;
  background: var(--surface-2, #F1EFE8); color: var(--ink-2, #3D4A5C);
  white-space: nowrap;
}
.pro-pill b { font-weight: 800; color: var(--navy, #0B1B33); }
.pro-pill-ok { background: rgba(15,118,110,.10); color: var(--teal-ink, #0F6E56); }
.pro-pill-ok b { color: inherit; }
.pro-soon { background: rgba(201,162,39,.14); color: var(--gold-dark, #886B12); }
.pro-sec-dev .pro-pill {
  background: rgba(255,255,255,.09); color: #C9D3E0;
}
.pro-sec-dev .pro-pill b { color: #fff; }
.pro-sec-dev .pro-pill-ok { background: rgba(93,202,165,.16); color: #9FE1CB; }
.pro-sec-dev .pro-soon { background: rgba(227,193,90,.16); color: #E3C15A; }

/* ---------- Chevron ---------- */
.pro-go {
  flex: 0 0 auto; font-size: 15px; line-height: 1;
  color: var(--ink-4, #94A3B8);
  transition: transform .18s ease, color .18s ease;
}
.pro-row:hover .pro-go { color: var(--teal, #0F766E); transform: translateX(-3px); }
[dir="ltr"] .pro-row:hover .pro-go { transform: translateX(3px); }
.pro-sec-dev .pro-go { color: #6B7C93; }
.pro-sec-dev .pro-row:hover .pro-go { color: var(--gold-light, #E3C15A); }

/* On a narrow screen the pills drop under the name rather than squeezing it. */
@media (max-width: 560px) {
  .pro-list > .pro-row { flex: 1 1 100%; max-width: none; }
  .pro-row { padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pro-row, .pro-go { transition: none; }
  .pro-row:hover { transform: none; }
}

/* ===========================================================================
   Featured brokers — horizontal strip
   ===========================================================================
   Native scrolling, no JavaScript. scroll-snap gives the shelf its detents;
   the browser handles RTL, momentum, trackpads and keyboard for free.
   =========================================================================== */
.pro-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* Room for the lift on hover, and for a focus ring, without either being
     clipped by the scroll container. */
  padding: 4px 2px 14px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Centre the shelf while it still fits. With three featured brokers a
   left-packed row under a centred heading looks like a loading state. */
@media (min-width: 700px) {
  .pro-strip { justify-content: safe center; }
}
.pro-strip::-webkit-scrollbar { height: 6px; }
.pro-strip::-webkit-scrollbar-thumb {
  background: var(--line, #E7E5E1); border-radius: 999px;
}
.pro-strip::-webkit-scrollbar-track { background: transparent; }

.pro-chip {
  flex: 0 0 200px;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 20px 16px 17px;
  background: #fff;
  border: 1px solid var(--line, #E7E5E1);
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.pro-chip:hover {
  transform: translateY(-2px);
  border-color: var(--teal, #0F766E);
  box-shadow: 0 8px 20px rgba(11, 27, 51, .10);
}
.pro-chip:focus-visible {
  outline: 3px solid var(--teal, #0F766E);
  outline-offset: 2px;
}
/* Bigger than the row's avatar: on a chip the face is the thing being chosen,
   and at 42px it reads as an icon rather than a person. */
.pro-chip .pro-ring { width: 76px; height: 76px; }
.pro-chip .pro-mono { font-size: 26px; }

.pro-chip-name {
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: var(--navy, #0B1B33);
  /* Two lines maximum, then ellipsis - an Arabic full name is often three
     words and a chip that grows to fit one breaks the row's alignment. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pro-chip-sub {
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-3, #6B7A90);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve the line even when empty, so chips stay the same height. */
  min-height: 18px;
}
.pro-chip-foot {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  margin-top: 2px;
}
.pro-chip .pro-pill { font-size: 11.5px; padding: 4px 9px; }

/* On a phone the strip is swiped rather than seen whole, so the card can stay
   generous - just narrow enough that the next one peeks in and shows there is
   more to swipe. */
@media (max-width: 520px) {
  .pro-chip { flex-basis: 172px; padding: 17px 13px 15px; }
  .pro-chip .pro-ring { width: 66px; height: 66px; }
  .pro-chip .pro-mono { font-size: 23px; }
}

/* A strip that slides sideways is motion. Snapping is fine; the hover lift is
   not, for anyone who asked the system to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  .pro-chip { transition: none; }
  .pro-chip:hover { transform: none; }
  .pro-strip { scroll-behavior: auto; }
}