/* ==========================================================================
   Grids — the layout side of tools/grid.json.

   A photograph declares WHICH GRID it sits in and nothing else: no width, no
   srcset, no sizes. core/media.js turns the grid into the `sizes` attribute
   through the generated table in core/grid.js, and tools/build-images.py used
   the same table to decide which widths to encode. Three things, one fact.

   FIXD's widths are already stated by the section that owns them — a service
   card is 55vw in services.css, a picker thumbnail a fixed 300px in
   selector.css — so this file does not restate them. A g- class is the NAME of
   that width, and the pairing is asserted in tools/grid.json where both halves
   are written down together.
   ========================================================================== */

/* A mounted photograph fills the frame it was given and is cropped, never
   letterboxed. Section stylesheets say this for their own frames too; stating
   it once here means a new slot dropped into a new box behaves before anyone
   has written a rule for it. */
[data-img] > picture { display: block; width: 100%; height: 100%; }
[data-img] > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   The reservation, and where it must not apply.

   core/media.js reserves a figure's box from the slot's aspect ratio BEFORE
   fetching anything, so the document reaches its true height first and no
   photograph is requested merely because an empty skeleton made every section
   look near the viewport. It does that with an inline min-height, cleared the
   moment the picture is built.

   Two kinds of box here must refuse it. A frame that already states its own
   aspect-ratio would be stretched until the photograph arrived and then snap
   back. A full-bleed frame is positioned against a section that has its own
   height, so a min-height on it would push the section taller than the design.

   !important is the mechanism because the value it overrides is inline.
   -------------------------------------------------------------------------- */
.frame,
.spanel__media,
.svc__media .frame,
.team__media,
.tools__band .frame,
.tools__detail,
.hero__media,
.final__media { min-height: 0 !important; }

/* --------------------------------------------------------------------------
   The grids themselves.

   g-hero / g-hero-tall        the opening frame and its phone recomposition
   g-sel                       a 300px thumbnail in the service picker
   g-svc                       one of the six service photographs
   g-team / g-team-tall        the team frame and its phone crop
   g-tools / g-tools-detail    the equipment band and the detail beside it
   g-final / g-final-tall      the closing frame and its phone crop
   g-share                     not a layout: the social card

   They carry no rules of their own. That is deliberate: a class here that also
   set a width would be a second place for a width to live, and the whole point
   of tools/grid.json is that there is one.
   -------------------------------------------------------------------------- */