/* =============================================================================
   hyyryn-board-bar.css                                        21 Oct 2026 (rp177)
   The board's top and its cards where they fail, on Find jobs, Saved jobs and
   Find a trade (the three pages built on the board: browse-tradesperson.html,
   saved-tradesperson.html, results.html). Loaded after each page's own board
   sheet, so equal rules read last. The behaviour half is hyyryn-board-bar.js.

   Found by the phone sweep (Sir, 21 Oct 2026: "the mobile view needs some
   serious improvements and fixes"; Mason 61, the walk at 390):
     1  THE SEARCH CARD. Below 560 its row wraps into three lines (the word,
        the postcode, the button) but kept the pill's 999px corner, so a
        157px-tall box drew as a stadium with the button hanging off its foot.
        It becomes the homepage's card: a 20px corner, the fields stacked with
        the rule between them, the button across the foot.
     2  THE BAR UNDER THE MASTHEAD. The filter bar stuck at top 0, under the
        masthead that also sticks at top 0 (z 100 over its 60): once scrolled,
        the filters were behind the masthead at every width (wholly at 1440,
        the first of two rows on a phone). It sticks under the masthead now
        (74px, 64px from 768 down), and on a phone it scrolls with the page:
        two rows of filters under a 64px masthead would hold a fifth of the
        screen for good.
     3  THE CARD'S PICTURE. Square at every width, so on a phone each card was
        a screen and a third and one job showed at a time. On a phone the
        picture is wide (16:10), the empty well with the trade's mark shorter
        still (16:9) with its mark drawn smaller.
     4  THE SORT'S CHOICES. Each choice was a Tab stop while the list was
        shut (opacity 0): eight invisible stops on Saved jobs. Shut, the list
        is not there for the keyboard either (WCAG 2.4.7).
   ============================================================================= */

/* 2 · the bar sticks under the masthead */
.tmh-bar { top: 74px; }
@media (max-width: 768px) { .tmh-bar { top: 64px; } }
@media (max-width: 720px) { .tmh-bar { position: relative; top: auto; } }

/* 4 · a shut list is not there for the keyboard */
.custom-select .custom-select-options { visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.custom-select.open .custom-select-options { visibility: visible; transition: opacity .2s ease, transform .2s ease, visibility 0s; }

@media (max-width: 560px) {
  /* 1 · the search, as the homepage's card */
  .nm-foot { padding: 0 16px; }
  .nm-search-row { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 8px; border-radius: 20px; }
  .nm-search-row .nm-field, .nm-search-row .nm-field-loc { flex: none; width: 100%; }
  .nm-search-row .nm-div { display: block; width: auto; height: 1px; margin: 0 14px; }
  .nm-search-row .nm-go { width: 100%; min-height: 46px; margin-top: 6px; padding: 14px 0; }
}

@media (max-width: 600px) {
  /* 3 · the card's picture, wide on a phone */
  .tc :is(.result-img, .feat-img) { aspect-ratio: 16 / 10; }
  .tc :is(.result-img, .feat-img).is-nopix { aspect-ratio: 16 / 9; }
  .tc :is(.result-img, .feat-img) .tw { padding: 18px 20px 46px; }
  .tc :is(.result-img, .feat-img) .tw .tw-ring { width: 62px; }
  .tc :is(.result-img, .feat-img) .tw .tw-t { margin-top: 10px; font-size: 17px; }
  .tc :is(.result-img, .feat-img) .tw .tw-k { margin-top: 4px; }
  .tc :is(.result-img, .feat-img) .tw .tw-f { bottom: 14px; padding-top: 8px; }
}