/* ==========================================================================
   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.

   BRASA's widths are already stated by the section that owns them — .fire__main
   is 72vw in fire.css, .pour__frame is a 384px cell in menu.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.
   What lives here is only what every grid shares.
   ========================================================================== */

/* base.css sets `picture { display: contents }`, so a mounted <picture> adds no
   box and the <img> is laid out as a direct child of the figure. It fills that
   figure 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 > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   The reservation, and why it is refused here.

   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.

   On this site that reservation is never needed and sometimes wrong. Every
   photographic box in BRASA is already sized by its own stylesheet — an
   aspect-ratio on .fire__main, .cocktail__frame, .poster, .plate__shot and the
   rest, or inset: 0 against a parent that has a height, as on .nights__media,
   .final__media and .menuhero__media. Where a crop's ratio differs from the
   tile's, the reservation would stretch the tile until the photograph arrived
   and then snap it back: the menu board cells are 3:2 and several of the boxes
   they sit in are not.

   !important is the mechanism because the value it overrides is inline.
   -------------------------------------------------------------------------- */
[data-img] { min-height: 0 !important; }

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

   g-hero / g-hero-tall        the opening frame and its phone recomposition
   g-plate                     the plate that opens the story
   g-fire / g-fire-a / g-fire-b   the grill, and its two smaller details
   g-dish                      a signature plate in the homepage teaser
   g-sea                       one frame in the drifting sea rail
   g-cocktail                  the narrow bar column
   g-poster                    an event poster
   g-chef                      the kitchen portrait
   g-social / g-social-wide    the social grid, one column and two
   g-sharing / g-sharing-inset the sharing photograph and its overlap
   g-bleed / g-bleed-tall      a full-width band behind type, and its phone crop
   g-moment                    a menu dish given the whole width
   g-cell                      a 384x256 menu board cell — all forty-eight
   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.
   -------------------------------------------------------------------------- */