/* TITECH v3 · logos.css: owned by WO-08 (see work-orders/PHASE-2.md). */
/* The logo system (DESIGN-SPEC §10.2, owner polish 2026-09-22 in WO-19b): a colour grid of the partners (greyscale at
   rest), mono logos for the inline rows and the old marquee, a colour wall for clients and the vendor badges. Markup comes
   from inc/logos.php ([titech_logos], [titech_badges]). */

/* Lists made by the shortcodes carry no list styling of their own. */
:is(.logo-list, .logo-inline, .logo-tiles, .logo-badges) {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.logo-item, .logo-tile, .logo-badge) { margin-block: 0; padding-block: 0; }

/* ---- Mono logo: a span painted with currentColor through a mask, so SVG and PNG behave alike and one file suits
   every surface. --w is the file's width/height, --s the optical scale that balances the set, --logo-h the row's
   base height (28px in the marquee, 26px inline). The box is sized here, so nothing moves when the file loads. */
.logo-mono {
  display: block;
  flex: none;
  height: calc(var(--logo-h, 28px) * var(--s, 1));
  width: calc(var(--logo-h, 28px) * var(--s, 1) * var(--w, 3));
  background-color: currentColor;
  color: var(--logo-color, var(--ctx-muted));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: color var(--dur-hover) var(--ease-hover);
}

/* ---- Marquee: WO-04's .m-marquee. The home proof section is light, so the logos rest at --ctx-muted and light up
   to --ctx-heading under the pointer. Both ends fade out. */
.logo-marquee {
  --m-marquee-gap: clamp(40px, 5vw, 72px);
  --logo-h: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee .logo-item:hover .logo-mono { color: var(--ctx-heading); }
/* The strip already has a rule above and below it; the marquee needs no extra frame. */
.partner-strip .logo-marquee { margin-block: 4px 0; }

/* ---- Grid (owner, 2026-09-22): every partner in a static, centred, organised grid, replacing the marquee in the home
   ecosystem strip. Equal cells, each padded the same, so the gaps are even: 9 per row on a wide desktop, then 6, 4 and 3
   as the list narrows (container queries on the list itself, so the grid also behaves in a narrower column). Flex-wrap
   centres an incomplete last row. Each logo is its colour file, --logo-h x optical scale tall, and never wider than 94% of
   its cell: a wide wordmark that would not fit is scaled down whole, so nothing is clipped or stretched and the 1.05 hover
   grow stays inside the cell. Partner logos rest greyscale and muted, and fade back to their own colours with a slight
   grow under the pointer (only where hover exists: on touch screens they stay grey). Client emblems are never filtered
   (owner rule). The colour files are made for light grounds, so the grid belongs on a light surface, as the home proof
   section is. */
.logo-grid {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-grid__item {
  --cols: 3;
  --logo-h: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(100% / var(--cols));
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 6px;
}
@container (min-width: 560px) { .logo-grid__item { --cols: 4; --logo-h: 22px; height: 52px; padding-inline: 8px; } }
@container (min-width: 800px) { .logo-grid__item { --cols: 6; --logo-h: 24px; height: 56px; } }
@container (min-width: 1140px) { .logo-grid__item { --cols: 9; height: 60px; padding-inline: 6px; } }
.logo-grid__img {
  display: block;
  flex: none;
  width: min(94%, calc(var(--logo-h) * var(--s, 1) * var(--w, 3)));
  height: auto;
  aspect-ratio: var(--w, 3);
  object-fit: contain;
  transition: filter var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover),
    scale var(--dur-hover) var(--ease-hover);
}
.logo-grid--partners .logo-grid__img { filter: grayscale(1); opacity: .68; }
@media (hover: hover) {
  .logo-grid--partners .logo-grid__item:hover .logo-grid__img { filter: grayscale(0); opacity: 1; scale: 1.05; }
}
/* The strip keeps its kicker above and its link below; the grid sits between them with the same spacing as the old row. */
.partner-strip .logo-grid { margin-block: 4px 0; }

/* ---- Inline: a short row inside a card (the featured tiles). The tile's own CSS may change --logo-h and --logo-color. */
.logo-inline {
  --logo-h: 26px;
  --logo-color: var(--ctx-heading);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
/* A logo wider than its row (a long wordmark in a narrow card) shrinks whole instead of running out of the card: the mask is
   contained, so it scales down without distortion. */
.logo-inline .logo-item { min-width: 0; max-width: 100%; }
.logo-inline .logo-mono { max-width: 100%; }

/* ---- Wall: colour logos on clean tiles, never filtered, grouped under a mono label. */
.logo-wall { display: grid; gap: clamp(40px, 5vw, 64px); }
.logo-group__label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-label, .75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ctx-muted);
}
.logo-group__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ctx-line); }
.logo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.logo-tile {
  --tile-pad: 20px;
  position: relative;
  aspect-ratio: 16 / 10;
  padding: var(--tile-pad);
  background: var(--c-white); /* colour logos need a light ground in every context; in a light section this is --ctx-surface */
  border: 1px solid var(--ctx-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
.logo-tile:hover { border-color: rgb(76 141 255 / .35); box-shadow: var(--glow-soft); }
/* The logo sits in a box of its natural size, 52px x optical scale tall, held inside the tile's padding. A tile that is
   too small for it scales the logo down whole (object-fit), so an emblem is never cropped or stretched and every tile
   keeps the same 16:10 shape. The source files are 160px tall, so nothing is shown larger than its file. */
.logo-img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: min(calc(100% - 2 * var(--tile-pad)), calc(52px * var(--s, 1) * var(--w, 3)));
  height: min(calc(100% - 2 * var(--tile-pad)), calc(52px * var(--s, 1)));
  object-fit: contain;
}
.logo-wall + :is(.text-link, .button) { margin-block-start: clamp(28px, 3vw, 44px); }

/* The home wall: three groups side by side, each a 2 x 2 block of tiles. Below 1001px they stack. */
@media (min-width: 1001px) {
  .logo-wall--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(28px, 3vw, 48px); }
}

/* ---- Badges: the vendor artwork exactly as supplied, the vendor's caption and one disclaimer. */
.logo-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.logo-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 240px; }
.logo-badge__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 132px; object-fit: contain; }
.logo-badge__caption { margin: 0; font-size: var(--fs-small, .875rem); line-height: 1.55; color: var(--ctx-body); }
.logo-badges__disclaimer { max-width: 72ch; margin-block-start: clamp(28px, 3vw, 40px); }
.logo-badges__disclaimer p { margin: 0 0 8px; font-size: var(--fs-small, .875rem); line-height: 1.55; color: var(--ctx-muted); }
.logo-badges-section .section-head { margin-block-end: var(--space-block); }

/* ---- Arabic: the label follows the label rules (no Mono, no case, 13px, no tracking). */
:is([dir="rtl"], html[lang^="ar"]) .logo-group__label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, Arial, sans-serif;
  font-size: .8125rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Reduced motion and print: the marquee is a static wrapped row (WO-04 sets that up), so the edge fade goes.
   The hover fades stay (colour is not movement); the legacy rule that zeroes every transition is beaten here, as in
   components.css. */
@media (prefers-reduced-motion: reduce), print {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.logo-mono, .logo-tile) {
    transition-property: color, border-color, box-shadow !important;
    transition-duration: var(--dur-hover) !important;
    transition-timing-function: var(--ease-hover) !important;
  }
  /* The grid: the colour fade stays, the grow goes. */
  .logo-grid__img {
    transition-property: filter, opacity !important;
    transition-duration: var(--dur-hover) !important;
    transition-timing-function: var(--ease-hover) !important;
  }
  .logo-grid--partners .logo-grid__item:hover .logo-grid__img { scale: none; }
}

/* Forced colours drop background-color, which would erase the masked logos. */
@media (forced-colors: active) {
  .logo-mono { forced-color-adjust: none; background-color: CanvasText; }
}

/* ---------------------------------------------------------------- Home client wall: the group names (colleague review, 2026-09-29, note 11)
   Each name was a line of text with a hairline running after it, so its length depended on the words and never matched the
   two tiles below it. It is now a bar exactly as wide as those two tiles, with the name centred in it: the names and the
   boxes share one left edge, one right edge and one corner radius. A dot in the group's colour (brandbook navy, plum and
   sage), always at the bar's start edge, is the only decoration. Below 1200px a name can wrap to two lines, so the bar is always two lines tall there and
   the three tile blocks still start on one row. The other walls (Projects) keep the text-and-hairline label. */
.logo-wall--featured .logo-group__label {
  --group-rgb: 38 67 108;
  justify-content: center;
  gap: 10px;
  position: relative;
  min-block-size: 42px;
  margin-block-end: 16px;
  padding: 10px 34px;
  border-radius: var(--r-md);
  background: rgb(var(--group-rgb) / .08);
  color: var(--ctx-heading);
  text-align: center;
  text-wrap: balance;
}
.logo-wall--featured .logo-group__label::before {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--group-rgb));
}
.logo-wall--featured .logo-group__label::after { content: none; }
.logo-wall--featured .logo-group:nth-child(2) .logo-group__label { --group-rgb: 99 72 104; }
.logo-wall--featured .logo-group:nth-child(3) .logo-group__label { --group-rgb: 98 150 106; }
@media (min-width: 1001px) and (max-width: 1199px) {
  .logo-wall--featured .logo-group__label { min-block-size: 60px; }
}