/* ferdi.tech v2 — hero "TOOLS I WORK WITH" logo wall (used by index.html only).
   Watermark strip: monochrome, gray, never colourised, no JS. Marks live in
   assets/icons/ (simple-icons CC0-1.0 + one theSVG MIT mark) and are recoloured
   with opacity (+ invert on dark) so they sit in the theme background at
   --text-faint and lift to --text-muted on hover. */

.logo-wall { margin: 64px 0 0; }
.logo-wall > .kicker { margin-bottom: 14px; }

.logo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 16px 10px; margin: 0; padding: 0; list-style: none;
}

.logo-cell {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; transition: transform var(--dur) var(--ease);
}
.logo-cell img {
  display: block; width: 28px; height: 28px;
  opacity: .36; transition: opacity var(--dur) var(--ease);
}
.logo-name {
  font-size: 11px; line-height: 1.2; color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}

/* hover: one step darker inside the same gray family + tiny lift (no color) */
.logo-cell:hover { transform: translateY(-2px); }
.logo-cell:hover img { opacity: .58; }
.logo-cell:hover .logo-name { color: var(--text-muted); }

/* text badges for tools with no standard mark (Hermes, Z.ai) */
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px;
  font: 700 9.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}
.logo-cell:hover .logo-mark { color: var(--text-muted); }

/* CapCut's mark is full-bleed inside its 24-box — trim to the icons' optical size */
.logo-cell--capcut img { transform: scale(.9); }

/* dark theme: flip the black marks to white so the same opacities read gray */
[data-theme="dark"] .logo-cell img { filter: invert(1); opacity: .44; }
[data-theme="dark"] .logo-cell:hover img { opacity: .64; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-cell img { filter: invert(1); opacity: .44; }
  :root:not([data-theme="light"]) .logo-cell:hover img { opacity: .64; }
}

@media (max-width: 640px) {
  .logo-wall { margin-top: 28px; }
  .logo-grid { gap: 14px 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}