/* culprit-row.css (27 Oct 2026; Coop approved the 'one row with names' mockup 8:52 AM AEDT, names always on, more gap above the panel; SANDBOX). "Meet the culprits" on the org landing page: the carousel is replaced by
   all nine object icons in one centred, evenly spaced row (3x3 grid under 760px). Same grey-until-hover / colour-on-hover /
   click-or-Enter-to-select behaviour and the same description panel (js/culprit-toys.js). Names always show under icons. */
.cr.cr--row .cro{margin-top:40px}
.cr.cr--row .cro-row{list-style:none;margin:0 auto;padding:10px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;gap:var(--cro-gap,20px)}
.cr.cr--row .cro-item{flex:0 0 var(--cro-tile,104px);display:flex;justify-content:center}
/* tile = hit area (104x104, well over the 44px target); icon = 84px inside it */
.cr.cr--row .occ-card.cr-fig{width:var(--cro-tile,104px);height:auto;aspect-ratio:auto;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:10px 0 8px;border-radius:14px;gap:0}
.cr.cr--row .cr-fig .ct-art.occ-fig-ico{flex:none;width:var(--cro-ico,84px);height:var(--cro-ico,84px);max-width:none;aspect-ratio:1/1}
.cr.cr--row .cr-fig .occ-ico{width:100%;height:100%}
.cr.cr--row .cr-fig:hover .ct-art,.cr.cr--row .cr-fig:focus-visible .ct-art,.cr.cr--row .cr-fig[aria-pressed="true"] .ct-art{transform:translateY(-4px)}
/* WCAG 2.2 AA focus: 3px ink ring, 2px offset (ink on cream about 17:1) */
.cr.cr--row .occ-card.cr-fig:focus-visible{outline:3px solid #1D1D1F;outline-offset:2px}
/* selected is not shown by colour alone: a short matt grey bar under the tile */
.cr.cr--row .cr-fig::after{content:"";display:block;width:28px;height:3px;border-radius:2px;margin-top:8px;background:transparent;transition:background-color .3s}
.cr.cr--row .cr-fig[aria-pressed="true"]::after{background:#7C7C80}
/* short names under each icon (always on) */
.cr.cr--row .cro-nm{display:block;margin-top:6px;font-size:13px;line-height:1.2;font-weight:500;color:#5E5E63;text-align:center;white-space:nowrap}
.cr.cr--row .cr-fig:hover .cro-nm,.cr.cr--row .cr-fig:focus-visible .cro-nm,.cr.cr--row .cr-fig[aria-pressed="true"] .cro-nm{color:#1D1D1F;font-weight:600}
/* Coop 8:52: more gap between the names row and the panel's top label (was ~40px, now ~68px at 1280) */
.cr.cr--row .cr-panel{margin-top:50px}
@media (max-width:1180px){.cr.cr--row .cro-row{--cro-gap:12px}}
@media (max-width:1100px){.cr.cr--row .cro-row{--cro-tile:92px;--cro-ico:74px;--cro-gap:10px}}
/* tablet / mobile: tidy 3x3 grid */
@media (max-width:960px){
  .cr.cr--row .cro{margin-top:28px}
  .cr.cr--row .cr-panel{margin-top:42px}
  .cr.cr--row .cro-row{display:grid;grid-template-columns:repeat(3,var(--cro-tile));justify-content:center;column-gap:28px;row-gap:6px;--cro-tile:96px;--cro-ico:72px}
}
@media (max-width:380px){.cr.cr--row .cro-row{column-gap:16px}}
@media (prefers-reduced-motion:reduce){.cr.cr--row .cr-fig::after{transition:none}}
@media (forced-colors:active){.cr.cr--row .cr-fig[aria-pressed="true"]::after{background:Highlight}}