/*
 * tests-density.css — exp-0018 on tests.php (inc/tests-density.php), loaded for the
 * treated arms only.
 *
 * Every treated arm: the "TESTS" heading block (.testi-head.td-nohead) is hidden; its
 * <h1> stays readable to screen readers and search engines.
 * dense / densest (.td-grid): the rows of four become one grid — 5 / 6 columns on
 * desktop, 3 on phones. Row spacing and the tile's own look stay as in control; densest
 * on phones shrinks the tile (smaller icon and title, no teaser line).
 */
body .page-content .testi-head.td-nohead { margin: 0; padding: 0; border: 0; }
body .page-content .testi-head.td-nohead > p { display: none; }
body .page-content .testi-head.td-nohead #tests-heading {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the grid */
body .page-content section.ct-tests .td-grid { display: grid; grid-template-columns: repeat(var(--td-cols), minmax(0, 1fr)); row-gap: 2em; }
body .page-content section.ct-tests .td-grid .collection { display: contents; }
body .page-content section.ct-tests .td-grid .collection .ct-test { width: auto; display: block; min-height: 0; }
body .page-content section.ct-tests .td-grid .collection .ct-test.placehold { display: none; }
body .page-content section.ct-tests .td-grid > :not(.collection) { grid-column: 1 / -1; }
.td-grid.td-dense { --td-cols: 5; }
.td-grid.td-densest { --td-cols: 6; }
@media only screen and (min-width: 728px) {
  body .page-content section.ct-tests .td-grid.td-densest .collection .ct-test p { padding: 0.5em 0.75em; }
}

/* phones: three per row */
@media only screen and (max-width: 727px) {
  .td-grid.td-dense, .td-grid.td-densest { --td-cols: 3; }
  body .page-content section.ct-tests .td-grid { row-gap: 0.5em; }
  body .page-content section.ct-tests .td-grid .collection .ct-test { padding-top: 1em; }
  body .page-content section.ct-tests .td-grid .collection .ct-test img { width: 88px; height: 88px; }
  body .page-content section.ct-tests .td-grid .collection .ct-test p { font-size: 15px; padding: 0.4em 3px !important; }
  body .page-content section.ct-tests .td-grid .collection .ct-test p span.desc { font-size: 12px; margin-top: 0.6em; }
  /* densest: smaller tiles, title only */
  body .page-content section.ct-tests .td-grid.td-densest .collection .ct-test img { width: 72px; height: 72px; }
  body .page-content section.ct-tests .td-grid.td-densest .collection .ct-test p { font-size: 13.5px; }
  body .page-content section.ct-tests .td-grid.td-densest .collection .ct-test p span.desc { display: none; }
}
@media only screen and (max-width: 320px) {
  .td-grid.td-dense, .td-grid.td-densest { --td-cols: 2; }
}