/* v6-only: the placements showcase (companies.html + home proof) and the
   "Teams we recruit for" logo wall. Linked after /styles.css; uses its
   night-theme tokens directly since every consumer of this file is a v6
   page. Neither section links into a Raydar-hosted page per company: the
   full grid and the logo wall link straight out to each company's own
   site, and the home page's compact strip is never clickable at all. */

/* ------------------------------------------------------------ Card grid */
/* A true CSS grid, sized so 15 placed companies always fill every row:
   1 column below 768, 3 at 768+, 5 at 1280+ (15 is a clean multiple of
   1, 3 and 5, so no breakpoint ever leaves a partial last row). */
.plc-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); }
@media (min-width: 768px) { .plc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .plc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.plc { border-radius: 20px; background: var(--card); border: 1px solid var(--hair); transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease); }
.plc:hover, .plc:focus-within { transform: translateY(-4px); border-color: var(--hair-2); background: var(--card-2); }

/* Full grid (companies.html): logo + hires badge only, centred, linking out. */
.plc__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; min-height: 128px; padding: 26px 20px; color: var(--t1); text-decoration: none; text-align: center; }
.plc__card--static { cursor: default; }
.plc__logo { display: flex; align-items: center; justify-content: center; height: 36px; max-width: 80%; }
.plc__logo img { display: block; height: 100%; max-height: 36px; width: auto; max-width: 100%; object-fit: contain; object-position: center; filter: brightness(0) invert(1); opacity: .88; transition: opacity .3s var(--ease); }
.plc:hover .plc__logo img, .plc:focus-within .plc__logo img { opacity: 1; }
.plc__mono { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hair-2); font: 600 15px/1 var(--rd-font-ui); color: var(--t1); }
.plc__n { flex: none; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(127, 114, 255, .5); background: rgba(127, 114, 255, .12); color: var(--violet); font: 600 12.5px/1 var(--rd-font-ui); white-space: nowrap; }

/* Compact strip (home): same grid, never a link. All 15 placed companies
   so every breakpoint (1/3/5 columns) still fills its last row. */
.plc-grid--compact .plc__card { min-height: 116px; padding: 22px 16px; gap: 12px; position: relative; }
.plc__role { position: absolute; left: 12px; right: 12px; bottom: 10px; font: 500 12px/1.3 var(--rd-font-ui); color: var(--t2); opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .25s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc--static:hover .plc__role { opacity: 1; transform: none; }
.plc--static:hover .plc__n { opacity: 0; }
.plc__n { transition: opacity .2s var(--ease); }
.plc__logo.has-name, .logowall .has-name { gap: 10px; }
.logo-name { font: 600 15px/1 var(--rd-font-ui); color: var(--t1); white-space: nowrap; }
.logowall .logo-name { font-size: 14px; opacity: .82; }

.logowall { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.logowall li { box-sizing: border-box; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 16px; }
.logowall li:has(a):hover, .logowall li:has(a:focus-visible) { border-color: var(--hair-2); background: var(--card-2); }
.logowall a, .logowall span { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; }
.logowall a { transition: transform .3s var(--ease); }
.logowall a:hover, .logowall a:focus-visible { transform: scale(1.06); }
.logowall img { display: block; max-height: 32px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .84; transition: opacity .3s var(--ease); }
.logowall a:hover img, .logowall a:focus-visible img { opacity: 1; }
.logowall span img { opacity: .7; }
@media (min-width: 480px) { .logowall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .logowall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logowall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .logowall { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.logowall--compact { gap: 8px; }
.logowall--compact li { min-height: 60px; padding: 10px; }
.logowall--compact img { max-height: 22px; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 767px) {
  .plc__card, .plc-grid--compact .plc__card { min-height: 96px; padding: 16px 8px; gap: 10px; }
  .plc__n { padding: 4px 8px; font-size: 11.5px; }
  .logo-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .plc, .plc__logo img, .logowall a, .logowall img { transition: none !important; }
}