/* ==========================================================================
   Réalisations page (2026), DW-73: port rules
   ==========================================================================
   The design's réalisations page (realisations.html, 916df3f) as rendered by
   the module: its own stylesheets (realisations/manifest.php),
   layout/layout.css for the shared header and footer, then these rules.
   Every rule here says which difference from the design it closes.
   ========================================================================== */

/* An archive row whose project page is gone prints no link
   (du2026_project_link()): a span, laid out as the design lays out a row's
   link (pages/realisations-v2.css, .rw-arch a and .rw-arch--logos a), without
   the arrow or the hover. The design has no such row. */
html .rw-arch--logos .rw-arch__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  border-bottom: 1px solid var(--rw-line);
  font-size: 1rem;
}

/* A project's own logo where the design had a stand-in (DW-73, 27 Oct
   2026): many are white, made for the old archive's coloured cards. The
   design's rw-arch__logo--invert prints a white logo in black
   (filter: brightness(0)); a white shape with a dark mark inside would
   become a black blot, so this prints it in negative instead. */
html .rw-arch--logos .rw-arch__logo--negative img {
  filter: invert(1);
}

/* TF1's tile logo on hover (staging, 27 Oct 2026: "logo bị trắng"). The
   design's hover rule turns every tile logo into a white silhouette
   (brightness(0) invert(1), pages/realisations-v2.css); TF1's logo is white
   letters cut out of a coloured box, so it became a blank white box.
   Inverting its greys instead gives a light box with dark letters on the
   dark cover. Matched by file name, as the design matches the Life In and
   Linework logos; the other logos read well as silhouettes. */
html .rv .rg-in:hover .rg-logo[src*="/tf1."],
html .rv .rg-in:focus-visible .rg-logo[src*="/tf1."] {
  filter: grayscale(1) invert(1) brightness(1.1);
}

/* A client logo that links its project page (28 Oct 2026, asked by the
   user; the design links none of its client logos, du2026_client_logo_url()).
   The link takes the logo's place without moving it: a flex box, it is the
   row's item where the list is a flex row and a block where the logo was
   one (the hero's marquee), with no line box around the logo; it can shrink
   as the logo could. */
.du2026-logo-link { display: flex; align-items: center; min-width: 0; max-width: 100%; }

/* No count on the project type tabs (5 Nov 2026, asked for in review): with
   one to six projects a type, a count only shows how little each filter
   holds. realisations.js still writes it into the tab's <em>; it stays out of
   sight and out of the accessibility tree. */
html .rl-tabs button em { display: none; }

/* On phones the design hides the tab's label (pages/realisations-v2.css),
   which left the count as the tab's only text and its name for a screen
   reader. Without the count the icon-only tab would have no name, so the
   label is hidden from the eye only. */
@media (max-width: 639px) {
  html .rl-tabs button span {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}