/* ---------- Logo grid (homepage "Some of the organisations we've worked with") ----------
   Bordered square-ish tiles, diamond markers on interior grid crossings,
   greyscale logos. Only tiles with a verified result (.lg__tile--flip) turn
   over; js/logo-grid.js adds .is-flipped on a timer while the grid is on
   screen. Without JS every logo still shows; with reduced motion the back is
   an opacity swap on hover/focus and nothing moves on its own. */

.lg { padding-block: 72px; }
.lg__label { text-align: center; color: var(--muted); font-size: 14px; line-height: 20px; margin: 0 0 32px; }

.lg__grid {
  --cols: 7;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  position: relative;
}
.lg__tile {
  position: relative; min-height: 150px; margin: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Diamond marker centred on the crossing at each tile's bottom-right corner. */
.lg__tile::after {
  content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px;
  background: var(--rule); transform: rotate(45deg); z-index: 2; pointer-events: none;
}
/* Interior crossings only: none on the last column or the last row. */
.lg__tile:nth-child(7n)::after, .lg__tile:nth-child(n+8)::after { display: none; }
.lg__tile--fill { display: none; }

.lg__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: perspective(720px) rotateY(0deg);
  transition: transform .52s cubic-bezier(.4, 0, .2, 1);
}
.lg__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.lg__front img {
  display: block; width: auto; height: auto; max-width: 66%; max-height: 44px;
  filter: grayscale(1) contrast(1.15) brightness(0.55); opacity: .62;
  transition: filter .35s, opacity .35s;
}
.lg__front img[src*="client-ju"], .lg__front img[src*="client-tya"] { max-height: 52px; }
.lg__tile:hover .lg__front img { opacity: .9; }

.lg__back {
  transform: rotateY(180deg); flex-direction: column; gap: 6px; text-align: center;
  background: var(--surface); padding: 16px 14px;
}
.lg__tile--flip { cursor: pointer; }
/* The turning face paints over a normal outline, so draw the site's focus ring on top. */
.lg__tile--flip:focus-visible { outline: none; border-radius: 0; }
.lg__tile--flip:focus-visible::before {
  content: ""; position: absolute; inset: 3px; border: 2px solid var(--ember); border-radius: 6px;
  z-index: 3; pointer-events: none;
}
.lg__tile.is-flipped .lg__inner,
.lg__tile--flip:focus-visible .lg__inner { transform: perspective(720px) rotateY(180deg); }
/* Hover flips only on devices that really hover; on touch, :hover sticks after a tap. */
@media (hover: hover) {
  .lg__tile--flip:hover .lg__inner { transform: perspective(720px) rotateY(180deg); }
}

.lg__who { font-family: var(--mono); font-size: 10px; line-height: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lg__num { font-size: 28px; line-height: 1; letter-spacing: -0.04em; font-weight: 400; color: var(--ink); }
.lg__ctx { font-size: 12px; line-height: 16px; color: var(--ink-2); max-width: 17ch; }
.lg__sector { font-size: 11px; line-height: 14px; color: var(--muted); }
/* Full sentence for assistive tech (via aria-describedby); the visible back is num + ctx. */
.lg__what { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lg__tile--cta { display: flex; align-items: center; justify-content: center; }
.lg__tile--cta a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.lg__tile--cta a:hover, .lg__tile--cta a:focus-visible { color: var(--ink); }

/* Tablet: 4 columns. 14 tiles + 2 plain filler cells close the last row. */
@media (max-width: 1080px) {
  .lg__grid { --cols: 4; }
  .lg__tile--fill { display: block; }
  .lg__tile:nth-child(n)::after { display: block; }
  .lg__tile:nth-child(4n)::after, .lg__tile:nth-child(n+13)::after { display: none; }
}

/* Mobile: 2 columns, 7 rows; fillers not needed. */
@media (max-width: 640px) {
  .lg { padding-block: 52px; }
  .lg__label { margin-bottom: 24px; }
  .lg__grid { --cols: 2; }
  .lg__tile { min-height: 132px; }
  .lg__tile--fill { display: none; }
  .lg__tile:nth-child(n)::after { display: block; }
  .lg__tile:nth-child(2n)::after, .lg__tile:nth-child(n+13)::after { display: none; }
  .lg__front img { max-height: 36px; }
  .lg__front img[src*="client-ju"], .lg__front img[src*="client-tya"] { max-height: 44px; }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .lg__tile--flip:hover .lg__back { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lg__inner { transition: none; transform: none !important; }
  .lg__back { transform: none; opacity: 0; transition: none; }
  .lg__tile.is-flipped .lg__back,
  .lg__tile--flip:focus-visible .lg__back { opacity: 1; }
  .lg__front img { transition: none; }
}