/* Loaded after main.css, home.css, about.css and services.css, on developers.php only. */

/* Deliberately not another card grid — with ~19 developers, a wall of
   identical white boxes reads as filler. A rule-divided directory list
   (numbered index, wordmark, running bio, trailing meta) reads closer to
   an auction-house catalogue: calmer, more premium, and one continuous
   rhythm instead of nineteen repeated shadows. */
.devs__grid {
  border-top: 1px solid var(--border-light);
  counter-reset: devrow;
}

.dev-row {
  counter-increment: devrow;
  display: flex; flex-direction: column; gap: 12px;
  padding-block: 24px;
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--transition-base);
}
.dev-row:hover { background: var(--bg-section-alt); }

.dev-row__head { display: flex; align-items: center; gap: 16px; }

.dev-row__index {
  width: 30px; flex-shrink: 0;
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
}
.dev-row__index::before { content: counter(devrow, decimal-leading-zero); }

/* Uniform logo stage: same footprint for every row regardless of whether
   the source logo is a wide horizontal lockup or a tall/square mark. */
.dev-row__logo {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
}

/* Logo files ship in a mix of colors (some white-on-transparent, some
   dark/branded) — masking each shape with the source file and filling it
   with brand navy gives every row the same single-color treatment without
   touching the source assets. */
.dev-row__logo-mark {
  display: block; width: 100%; height: 100%;
  background-color: var(--navy);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.dev-row h3 { font-size: 1.0625rem; }
.dev-row h3 a:hover { color: var(--gold-dark); }

.dev-row__desc {
  padding-left: 60px;
  font-size: 0.875rem; color: var(--text-muted);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.dev-row__meta {
  padding-left: 60px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
}

/* RTL: the index/logo lead-in mirrors to the visual right (flex row
   auto-reverses under dir="rtl"), so the name-aligned indent below it
   must come from the right instead of the left. */
[dir="rtl"] .dev-row__desc,
[dir="rtl"] .dev-row__meta { padding-left: 0; padding-right: 60px; }
.dev-row__count {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy);
}
.dev-row__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 700; color: var(--navy);
}
.dev-row__link .icon { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.dev-row:hover .dev-row__link .icon { transform: translateX(3px); }
[dir="rtl"] .dev-row:hover .dev-row__link .icon { transform: scaleX(-1) translateX(-3px); }

/* Keeps a developer row's anchor target clear of the fixed header when
   navigated to directly (e.g. from a project card's developer link). */
[id^="developer-"] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Developer overview logo ---------- */
/* The eyebrow label is inline-block by default (main.css), so without this
   it shares a line with the also-inline-flex logo frame that follows it.
   Forcing the eyebrow to its own line here (scoped to this section only)
   gives the logo its own row between the label and the name, matching every
   other inline-level sibling's normal block stacking. */
#overview .eyebrow { display: block; }

/* A neutral frame (rather than the logo sitting directly on the page
   background) keeps every logo readable regardless of its own colors —
   some ship dark-on-transparent, others light-on-transparent. */
.developer-logo-frame {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 220px; margin-bottom: 20px;
  padding: 16px 24px;
  background: var(--bg-section-alt); border: 1px solid var(--border-light);
  border-radius: var(--r-md);
}
.developer-logo-frame img {
  max-width: 100%; max-height: 56px; width: auto; height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .dev-row {
    flex-direction: row; align-items: center; gap: 24px;
    padding-block: 26px;
  }
  .dev-row__head { flex: 0 0 340px; }
  .dev-row__desc { flex: 1; padding-left: 0; -webkit-line-clamp: 1; }
  .dev-row__meta { flex: 0 0 auto; padding-left: 0; }
  [dir="rtl"] .dev-row__desc,
  [dir="rtl"] .dev-row__meta { padding-right: 0; }
}