/* ============================================================
   CARD FIT — dossier card layout correction
   ============================================================

   Defect, in the client's words: "Dossier cards 11, 12 and 13 don't fit their
   boxes." Cards 1-10 carry one-word labels and look right; the three real
   dossier titles cram and overflow.

   CAUSE, measured over CDP on build 8c3156a rather than guessed
   (tools/card-geom-probe.mjs, homepage at 1440):

     .topic-card    { min-height: 220px; overflow: hidden; display: block; }
     .topic-content { position: absolute; inset: auto var(--space-5) var(--space-5); }

   `.topic-content` wraps the icon, the title and the count, and it is OUT OF
   FLOW. It therefore contributes nothing to the card's height: the card stays
   220px no matter how long the title is. A short title ("Genre") leaves slack
   above the block and reads fine. A long one wraps to five lines and, because
   the block is pinned by its BOTTOM edge, those extra lines grow UPWARD —
   through the icon, past the file number, and out through the top border,
   where `overflow: hidden` guillotines them.

   Measured at 1440: card 1's content starts 61.8px below the card's padding
   edge, comfortably clear. Card 12's starts at -11.1px — eleven pixels ABOVE
   its own card — and collides with the header strip by 63.1px.

   That overflow is INVISIBLE to the usual `scrollHeight > clientHeight` test,
   because scrollHeight only ever grows past the bottom and right edges and by
   definition can never report content escaping the top. Cards 12 and 13
   reported a clean 218/218 while visibly clipping their own icons. The
   per-edge check in tools/card-overflow.mjs is what catches it.

   FIX: put the content back in flow so the card can size to it, and let each
   grid's rows share one height. Three rules do the work; the rest is wrapping
   hygiene. Nothing here touches palette, font family, copy or card design
   language — the block stays bottom-anchored and short-title cards keep their
   exact geometry.

   Kept in its own file, like the motion pass in a11y-enhance.css, so the whole
   correction reverts by removing one stylesheet and its <link>.
   ============================================================ */

/* 1 — Each grid resolves its rows to one shared height and stretches every
       card to fill its row, so a row can never come out ragged.

       #topics-grid and #dossiers-grid are separate grid containers, so this
       equalises within each section rather than forcing the ten short topic
       cards to match the taller dossier row. */
.topics-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* 2 — The card becomes a flow container again, so its height follows its
       content instead of being frozen at min-height.

       padding-top reserves the header strip that the two absolutely
       positioned pseudo-elements occupy. Both sit at `top: var(--space-4)`;
       the taller is `::before` (the file number) at --text-xl with
       line-height 1, so the strip runs from 16px to 52px at 1440 and 16px to
       40px at 375. The reservation resolves to 60px and 48px respectively,
       clearing it at both ends because --text-xl is itself fluid. Without it
       a tall title would grow up underneath the number instead of out through
       the top — a nicer failure than clipping, but still a collision. */
.topic-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: calc(var(--space-4) + var(--text-xl) + var(--space-2));
}

/* 3 — Back in flow. `margin-top: auto` keeps the block pinned to the bottom of
       the card exactly as the absolute positioning did, so a card whose title
       already fitted is unchanged, but the block's height now counts toward
       the card's height and a long title makes the card TALLER instead of
       overflowing it. */
.topic-content {
  position: static;
  inset: auto;
  width: 100%;
  margin-top: auto;
}

/* 4 — Wrapping hygiene. The handover sets `line-height: 1` on the title, which
       makes its own content box overflow by 1px on every card (measured 25/24
       at 1440) and crops the accents on French capitals — É and Î open two of
       these titles. It also reads as cramped the moment a title wraps to five
       lines, which is the other half of what the client is complaining about.
       1.15 clears the overflow and opens the wrap without changing the type.

       A single long word can exceed the 166px title column at 1440, so allow
       it to break rather than push the box sideways. `balance` evens out the
       line lengths on the multi-line titles. */
.topic-name {
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: auto;
}

/* The count under the title is short, but it shares that narrow column and
   must not push the card sideways either. */
.topic-count {
  overflow-wrap: break-word;
}