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

   SALTA's widths are already stated by the section that owns them — an
   experience card is 24vw in experiences.css, a gallery tile 52vw or 30vw in
   gallery.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 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.

   Every photographic box on this site is already sized by its own stylesheet:
   an aspect-ratio on .frame, .exp-card__frame and the gallery tiles, or
   inset: 0 against a pinned stage on the hero, the waterline, the sunset and
   the closing frame. Where a crop's ratio differs from the box's, the
   reservation would stretch the box until the photograph arrived and then snap
   it back.

   !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 crop
   g-bleed / g-bleed-tall        a full-width band behind type, and its crop
   g-exp                         one of the four experience cards
   g-route                       the photograph beside the island map
   g-intro / g-gear / g-boat     the paired story frames
   g-sunset-lead                 the golden-hour frame
   g-underwater                  the reef panel the copy sits on
   g-tile-wide / -bay / -coast / -beach / -gear   the five gallery columns
   g-hgal                        a frame in the sideways gallery
   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.
   -------------------------------------------------------------------------- */