/* ============================================================
   v6.26: the "View Our Work" pill - the hero's Gallery button

   It started (v6.21) as a floating button pinned to the bottom-right
   corner. At v6.26 the person asked for it to sit NEXT TO the
   "Review Us on Google" pill, so it is now an ordinary inline pill in
   the hero's .hero-review row: no fixed position, no stacking order, no
   safe-area inset and no transform on hover that could shift the row -
   it simply flows beside the Google pill and wraps under it when the
   phone is too narrow for both.

   Unchanged from the passing v6.25 button: the brand red (var(--red)
   #C9242C, hover var(--red-dk) #A81A22 - white on red is 5.6:1), the
   52px capsule with even 22px padding, and the picture icon. The label
   changed at v6.26: "Check Out Our Portfolio" -> "View Our Work", the
   person's own words (uppercase is CSS, not the markup).

   .hero-review is a wrapping flex row in review-button.css, so the two
   pills share one baseline with a 14px gap. The file name and the
   .fab-gallery class are historical - they are kept because the saved
   versions and the test suite key off them.

   It is a link, not a script: it works with JavaScript off, and it is
   hidden in print.
   ============================================================ */
.fab-gallery{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:999px;
  background:var(--red);color:var(--white);
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;line-height:1;text-transform:uppercase;
  box-shadow:0 10px 24px -16px rgba(201,36,44,.9);
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.fab-gallery svg{width:17px;height:17px;flex:0 0 17px}
.fab-gallery:hover{
  background:var(--red-dk);color:var(--white);transform:translateY(-1px);
  box-shadow:0 16px 28px -18px rgba(201,36,44,.95);
}
.fab-gallery:active{transform:translateY(0)}

@media (max-width:620px){
  /* v6.39: full width on a PHONE, so its left AND right edges match the
     "Review Us on Google" pill above it. site.css stretches that pill with
     `.hero-copy .btn{width:100%}`, but this pill is .fab-gallery, not .btn,
     so it stayed content-wide (171.7px against the Google pill's 354px at
     390 wide). Same padding, label on one line, its own picture icon.
     .hero-review is a wrapping flex row, so two 100%-wide pills each take
     a line and the edges line up. Phone only - desktop keeps them side by
     side, which is measured identical. */
  /* v6.40: on a PHONE this pill comes FIRST. The person asked for the red
     "View Our Work" pill to sit ABOVE the "Review Us on Google" pill, so
     order:-1 on the .hero-review flex row lifts it ahead of the Google pill
     in the stacked phone stack only. Desktop is untouched: there the two
     pills share one baseline and the Google pill stays on the left. */
  .fab-gallery{order:-1;width:100%;min-height:48px;padding:0 18px;gap:9px;font-size:11.5px}
  .fab-gallery svg{width:16px;height:16px;flex:0 0 16px}
}

@media print{.fab-gallery{display:none !important}}