/* =====================================================================
   THE OHS — the middle door tile, filled
   ---------------------------------------------------------------------
   The "I'm checking a licence" tile shows a white band above and below
   the licence artwork while the tiles either side fill their frames
   edge to edge. This closes that gap.

   WHY NOT SIMPLY CROP IT LIKE THE OTHER TWO.

   The obvious fix is object-fit: cover, and it was the first thing I
   tried. The numbers say why it is wrong. The tile is 549x412; the
   artwork is 1011x638. Cover scales it to 653x412 and throws away 52px
   from each side -- 8% off both edges -- and rendering that crop shows
   exactly what those 52px contain:

       the L of "LICENCE TO PERFORM HIGH RISK WORK"
       the final E of "REPUBLICA DEMOCRATICA DE TIMOR-LESTE"
       the right edge of the national flag
       the end of "Date of Birth/Loron Moris:"
       the corner block at the bottom right

   A tile advertising licence verification, with the word LICENCE cut in
   half, reads as broken rather than as full-bleed. The other two tiles
   crop happily because they are photographs of people and machinery,
   where the edges carry no meaning. This one is a document.

   WHAT THIS DOES INSTEAD.

   The artwork stays whole, and the two 33px bands are filled with the
   artwork's own edge colours, sampled from the file itself:

       top row of the image     #243166   (the navy header)
       bottom row of the image  #f7f7fc   (the pale card body)

   Because the fill continues the exact colours the picture ends on,
   there is no visible seam -- the tile reads as one filled panel, which
   is what "same as the other two" actually means to the eye.
   ===================================================================== */

/* The card is the only tile in the row whose picture is set to contain,
   which is what leaves the bands. The gradient sits behind it. */
.door .ph:has(img[src*="home-verify"]) {
  background-image: linear-gradient(180deg, #243166 0%, #243166 22%, #eceaf6 55%, #f7f7fc 100%);
  background-color: #243166;
}

/* :has() is in every current browser, but it is a recent arrival. A
   browser without it gets a flat navy behind the artwork rather than
   white, which is still better than the band it has today, and costs
   nothing anywhere else because only a letterboxed image ever shows
   its container's background. */
@supports not selector(:has(img)) {
  .door .ph {
    background-color: #243166;
  }
}

/* -----------------------------------------------------------------
   IF YOU WOULD RATHER HAVE THE HARD CROP

   Delete everything above and use this one line instead. It fills the
   frame exactly like the two photographs, at the cost of the clipped
   words listed at the top of this file.

     .door .ph img { object-fit: cover !important; }

   It needs !important because the theme carries
   [data-fit="card"] img { object-fit: contain !important }, which is
   what marks a document photo as one that must not be cropped.
   ----------------------------------------------------------------- */