/* smbplasteringandsons.com - the photo lightbox.
   GENERATED from lp_design.py on branch smb-gtm-thankyou. */

/* =========================================================================
   THE PHOTO LIGHTBOX.

   Frank's ads manager reported that clicking a photograph on /work/ did
   nothing, which was true: they were plain <img> in a <figure> and nothing
   listened. Every photograph OF A JOB is now a button that opens the full
   size file over the page.

   THE THUMBNAIL BUTTON IS LAYOUT-NEUTRAL, and it has to be. The grids are
   Birkdale's, inherited, and the photographs sit inside them at a fixed
   aspect ratio with object-fit:cover. A <button> wrapped round one brings a
   browser's own button styling with it -- border, padding, background,
   inline-block, a font that is not the page's. Every one of those is reset
   here, so the element the grid lays out is the same box it laid out before.
   Proved, not assumed: the deploy diff renders /work/ and the home page at
   390 and 1440 against the live site and they are pixel for pixel identical.

   cursor:zoom-in is the whole affordance. The complaint was that nothing
   said the photographs could be clicked.
   ========================================================================= */
.lb-open{display:block;width:100%;padding:0;margin:0;border:0;background:none;
  font:inherit;color:inherit;text-align:inherit;cursor:zoom-in;
  -webkit-appearance:none;appearance:none}
/* THE ONE PLACE THE WRAPPER BREAKS A HEIGHT CHAIN, scoped to that one place.
   The CTA band's photograph is sized by `.es-media img{height:100%}` against
   `.es-media{position:absolute;inset:0 0 0 auto}`, which has a definite
   height. A button in between with auto height leaves that percentage nothing
   to resolve against, and the image fell back to its intrinsic size: 884x1178
   inside a 571px band, cropped to a completely different part of the
   photograph. The page height never moved, so only a pixel diff caught it.

   NOT a blanket rule. Applied to every .lb-open it breaks the gallery
   instead: .gal-cell is a grid item, so it HAS a definite height from its row,
   and a button stretched to it pushes the 4:3 image away from its caption.
   That cost a round of screenshots to learn. .es-media img is the only
   height:100% image rule in the sheet that applies to a photograph we wrap --
   the others are the hero, the badges and the form thumbnails, none of which
   this touches. */
.es-media .lb-open{height:100%}
.lb-open:focus-visible{outline:3px solid #B18D34;outline-offset:3px}
/* The frames are object-fit:cover, so a thumbnail is a crop. A hair of lift
   on hover says it is live without moving anything around it. */
.lb-open img{transition:filter .18s ease}
@media(hover:hover){.lb-open:hover img{filter:brightness(1.04)}}
@media(prefers-reduced-motion:reduce){.lb-open img{transition:none}}

.lb{position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(12,12,12,.94);
  padding:clamp(.75rem,2vw,2rem);
  /* The caption sits under the photograph and both are centred in what is
     left, so a portrait shot and a landscape one both fill the height they
     can without the caption ever leaving the screen. */
  grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:.9rem}
.lb.is-open{display:grid}
.lb-fig{margin:0;display:flex;align-items:center;justify-content:center;
  min-height:0;width:100%;height:100%}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  object-fit:contain;border-radius:4px;
  /* Nothing is shown until the full size file has decoded, or the viewer
     watches a 2048px photograph paint in bands. */
  background:rgba(255,255,255,.04)}
.lb-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.5rem .8rem;max-width:min(100%,70ch);text-align:center;
  color:#F7F4EE;font-size:.95rem;line-height:1.5}
.lb-stage{display:inline-block;padding:.15rem .55rem;border-radius:3px;
  background:#B18D34;color:#141414;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.lb-title{font-weight:600}
.lb-count{opacity:.6;font-size:.82rem;font-variant-numeric:tabular-nums}

/* The controls. 44px minimum, because these are tapped on a phone. */
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;-webkit-appearance:none;appearance:none}
.lb-btn:hover,.lb-btn:focus-visible{background:rgba(255,255,255,.24)}
.lb-btn:focus-visible{outline:3px solid #B18D34;outline-offset:2px}
.lb-btn[hidden]{display:none}
.lb-x{top:clamp(.5rem,2vw,1.2rem);right:clamp(.5rem,2vw,1.2rem);font-size:1.5rem}
.lb-prev{left:clamp(.4rem,2vw,1.4rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.4rem,2vw,1.4rem);top:50%;transform:translateY(-50%)}
/* display:contents, so .lb-prev and .lb-next are positioned against .lb
   itself and sit over the photograph. THIS RULE MUST STAY ABOVE THE MEDIA
   QUERY: it has the same specificity as the mobile one, so whichever comes
   last wins, and with it last the phone layout lost -- the two arrows became
   grid items of their own, the grid grew past the fixed overlay, and both
   buttons painted on the page BELOW the dark backdrop. */
.lb-nav{display:contents}
@media(max-width:600px){
  /* On a phone the arrows sit under the photograph rather than over it: at
     390px an overlaid arrow covers a tenth of the picture, and the swipe is
     the primary gesture there anyway. */
  .lb{grid-template-rows:1fr auto auto}
  .lb-nav{display:flex;gap:1.2rem;justify-content:center;align-items:center}
  .lb-prev,.lb-next{position:static;transform:none}
}