/**
 * Velonix Labs — Laboratory Analysis (page-specific)
 * Enqueued only on the Laboratory Analysis page template (see inc/enqueue.php).
 *
 * Deliberately reuses existing components rather than inventing new ones:
 *   - .trust-card       — the document card's shell (border, radius, padding, hover)
 *   - .coa-row (.k/.v)  — batch/date/lab meta rows, identical pattern to the COA card
 *   - .btn-secondary / .btn-ghost — View/Download actions
 *   - .grid-3           — already-responsive 3→2→1 column grid
 *   - .search-field / .filter-field select — the catalogue's lightweight,
 *     borderless search/sort pattern (this is a library, not a shop, so
 *     the heavier boxed .field-input treatment isn't appropriate here —
 *     matching the catalogue's own established distinction between
 *     "browsing" controls and "transactional" ones)
 *
 * Only the parts genuinely unique to a document card live in this file.
 *
 * Utility Layout note: this page is part of the Utility Layout
 * (body.layout-utility — see inc/theme-setup.php), which centres the
 * hero and .section-head automatically (components.css). .doc-toolbar
 * is capped and centred here too, since it's a control cluster unique
 * to this page (not shared, so it doesn't belong in components.css).
 *
 * The .grid-3 document library was previously left deliberately
 * full-width at every breakpoint, on the reasoning that narrowing a
 * multi-column browsing grid to match the toolbar's width would work
 * against its purpose. That held at desktop (three comfortable
 * columns) and mobile (a single column, already effectively
 * "centred" by being full-width), but at tablet specifically — two
 * columns — an odd number of documents leaves a lone card sitting on
 * the left of its own row with a large empty gap beside it, which
 * reads as the whole page being pulled left rather than a browsing
 * grid doing its job. #doc-grid is centred with a constrained width
 * at tablet only (below) specifically to correct that, while desktop
 * and mobile keep the original full-width treatment unchanged.
 */

.doc-toolbar{display:flex; gap:28px; align-items:center; justify-content:center; flex-wrap:wrap; margin:0 auto 40px; max-width:600px;}

.doc-card{display:flex; flex-direction:column;}
.doc-card .index-cat{margin-bottom:10px;}
.doc-card h3{font-size:17px; font-weight:600; margin-bottom:16px;}
.doc-card .coa-rows{margin-bottom:20px; flex:1;}
.doc-card .coa-row{padding:9px 0; font-size:12.5px;}
.doc-card-actions{display:flex; gap:12px; flex-wrap:wrap;}

.doc-empty{grid-column:1/-1;}

@media (min-width:768px) and (max-width:1023px){
  #doc-grid{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:767px){
  .doc-toolbar{flex-direction:column; align-items:stretch;}
}