/* Better Together Diabetes - shared work-mosaic tile CSS.
   Extracted from apps.html, interactives.html, newsletters.html, travel.html, index.html.
   Only rules that were byte-identical across all five pages live here; each page keeps
   its own min-height/padding/font-size values inline since those vary by tile size. */
.work-mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.wtile:hover{ transform:translateY(-5px); filter:drop-shadow(0 14px 26px rgba(30,42,66,0.26)); }
.wtile:hover .wcap{ transform:translateY(-5px); }

/* A11y contrast fix (LAUNCH-TEST-2026-07 Stage C item 7): the scrim thins out right at the
   eyebrow line, so eyebrow/pill text over the lightest posters fell as low as 1.21:1. Text-shadow
   plus a small dark chip behind the text restore readability without restyling the tiles.
   Selectors scoped under .wtile so specificity beats each page's own .weyebrow/.pill rules. */
.wtile .weyebrow{
  text-shadow: 0 1px 3px rgba(10,16,28,.85);
  display: inline-block;
  background: rgba(23,34,54,.72);
  padding: 2px 8px;
  border-radius: 4px;
}
.wtile .pill{ text-shadow: 0 1px 3px rgba(10,16,28,.85); }
.wtile .pill-live, .wtile .pill-soon{ background: rgba(23,34,54,.72); }

/* Bloom-overlay mosaic on image tiles (LAUNCH-TEST-2026-07, bead claude-code-jefxz).
   A transparent <canvas data-mosaic> layered directly over a real photo/poster <img>.
   mosaic.js hit-tests every canvas by its document-level pointermove bounding rect
   (mosaic.js:232-234), so a canvas here still blooms and tracks the cursor even with
   pointer-events:none and even though photo tiles sit above it visually.
   NEVER hide with display:none: mosaic.js:96 bails out of buildTiles() the moment a
   canvas reports zero clientWidth/clientHeight, silently killing the tile for good.
   Reveal by opacity only. Kept OUT of data-static so it joins the pointer-tracking
   INTERACTIVES array like every other full-tile canvas on this site (only the small
   G1-G5 / wbadge emblem canvases use data-static; this is a bloom, not an emblem). */
.wtile > canvas.bloom-overlay,
.rs-card > canvas.bloom-overlay,
.shelf-thumb > canvas.bloom-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
@media (prefers-reduced-motion: no-preference){
  .wtile:hover > canvas.bloom-overlay, .wtile:focus-within > canvas.bloom-overlay,
  .rs-card:hover > canvas.bloom-overlay, .rs-card:focus-within > canvas.bloom-overlay,
  .shelf-tile:hover .shelf-thumb > canvas.bloom-overlay, .shelf-tile:focus-within .shelf-thumb > canvas.bloom-overlay{
    opacity:.22;
  }
}