/* =============================================================================
   Section: Units
   File: css/sections/units.css
   =============================================================================
   Loaded automatically on every page of the Units section (includes/header.php
   picks up css/sections/<section>.css if it exists).

   Unit pages are mostly tables, and those rules live in css/base.css with the
   rest of the .datapage family. What is here is only what a unit page needs
   and no other page in this section does: the photograph figure and the grid
   it sits in.

   These match the .svcfig / .svcgrid rules in css/sections/training.css on
   purpose — a photograph should carry the same visual weight wherever it
   appears on the site. They are repeated rather than shared because each
   section stylesheet is meant to stand on its own; if these two ever need to
   move, they move together into css/base.css.
   ========================================================================== */


/* ------------------------------------------------------------------ figures
   A photograph with its title under it. The border and tint match .dcard, so
   a picture and a card sit at the same weight on a page that has both. */

.svcfig{
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

.svcfig img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;              /* photographs arrive at every size; crop
                                    rather than let the grid go ragged */
  background:var(--surface-2);
}

.svcfig figcaption{
  padding:10px 14px;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-3);
  border-top:1px solid var(--line);
}


/* ----------------------------------------------------------------- galleries
   The same auto-fill grid as .dcards, so photographs and cards line up on a
   page that shows both. */

.svcgrid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  margin:14px 0 var(--gap-2);
}

@media (max-width:640px){
  .svcgrid{grid-template-columns:1fr}
}