/* =============================================================================
   hyyryn-results-card.css                                     21 Oct 2026 (rp179)
   Find a trade (results.html), the footer pass's second page.

   Sir, 21 Oct 2026: improve each footer page, push it live, then the next.
   Measured on the live board the morning of the pass: no listing yet, so a
   visitor meets an empty board: a filter bar with four filters for nothing, a
   count of nought, a sort, a square empty box in grey sans, then three
   square doors and a square navy band, the band saying again what the box had
   just said. Now:
     - an empty board (html.rz-empty, set by the page's draw) has no filters,
       count or sort, and one card does what the page can still do: send the
       job out with the words already typed (my-jobs.html?title=&trade=#post,
       which fills the form), and ask a trade who does the work to list it;
       the band under the doors, which said the same, steps aside;
     - the card grammar of the rest of the site: a 22px corner (18 on a
       phone), an inner ring and a near and long shadow; the three doors as
       three cards; the band as a card.
   ============================================================================= */
:root { --rc-r: 22px; --rc-ring: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 #FFFFFF;
  --rc-drop: 0 1px 2px rgba(10,22,40,.07), 0 10px 22px -14px rgba(10,22,40,.24), 0 34px 60px -36px rgba(10,22,40,.42); }
@media (max-width: 600px) { :root { --rc-r: 18px; } }

/* ── an empty board ── */
html.rz-empty .tmh-bar .tmh-filters, html.rz-empty .results-header, html.rz-empty .rz-post { display: none; }
.results-list .board-empty.rz-none { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; padding: 0;
  border: 0; border-radius: var(--rc-r); overflow: hidden; text-align: left; background: #FAF8F3; box-shadow: var(--rc-ring), var(--rc-drop); }
.rz-none .rz-none-a { padding: clamp(28px, 3.4vw, 52px); }
.rz-none .rz-none-b { padding: clamp(28px, 3.4vw, 52px); background: #F3EFE4; box-shadow: inset 1px 0 0 rgba(10,22,40,.08); display: flex; flex-direction: column; }
.rz-none .rz-none-k { margin: 0 0 12px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #83632C; }
.rz-none .be-t { margin: 0; font-family: var(--serif-display, var(--serif)); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; color: var(--navy, #0A1628); }
.rz-none .rz-none-t { margin: 0; font-family: var(--serif-display, var(--serif)); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; color: var(--navy, #0A1628); }
.rz-none .be-s { margin: 14px 0 0; max-width: 54ch; font-family: var(--serif); font-size: 16px; line-height: 1.6; color: #4A5262; }
.rz-none .be-s a { color: var(--navy, #0A1628); }
.rz-none .rz-none-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--navy, #0A1628); color: #FAF8F3; text-decoration: none; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 12px 24px -14px rgba(10,22,40,.7); transition: transform 200ms ease, background-color 200ms ease; }
.rz-none .rz-none-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 220ms ease; }
.rz-none .rz-none-go:hover { background: #1B2638; transform: translateY(-1px); }
.rz-none .rz-none-go:hover svg { transform: translateX(3px); }
.rz-none .rz-none-go2 { align-self: flex-start; margin-top: auto; padding: 12px 20px; border-radius: 999px; text-decoration: none; color: var(--navy, #0A1628);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.28); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.rz-none .rz-none-b .be-s { margin-bottom: 22px; }
.rz-none .rz-none-go2:hover { box-shadow: inset 0 0 0 1px rgba(10,22,40,.6); }
.rz-none :is(.rz-none-go, .rz-none-go2):focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 3px; }

/* ── the three doors and the band, as cards ── */
.rz-before.rz-before { border-top: 0; padding-top: 0; }
.rz-doors.rz-doors { gap: clamp(12px, 1.4vw, 20px); border-top: 0; border-bottom: 0; }
.rz-doors.rz-doors li + li { border-left: 0; }
.rz-doors .rz-door.rz-door { border-radius: var(--rc-r); background: #FAF8F3; box-shadow: var(--rc-ring), var(--rc-drop);
  transition: box-shadow 260ms cubic-bezier(.16,1,.3,1), translate 260ms cubic-bezier(.16,1,.3,1), background-color 200ms ease; }
.rz-doors .rz-door.rz-door:hover, .rz-doors .rz-door.rz-door:focus-visible { background: #FFFDF8; translate: 0 -2px; }
.rz-post.rz-post { border-radius: var(--rc-r); overflow: hidden; box-shadow: 0 2px 4px rgba(10,22,40,.1), 0 28px 60px -30px rgba(10,22,40,.55); }
.results-list .board-empty:not(.rz-none) { border-radius: var(--rc-r); border: 0; box-shadow: var(--rc-ring), var(--rc-drop); }

@media (max-width: 760px) {
  .results-list .board-empty.rz-none { grid-template-columns: minmax(0, 1fr); }
  .rz-none .rz-none-b { box-shadow: inset 0 1px 0 rgba(10,22,40,.08); }
  .rz-none .rz-none-go { width: 100%; justify-content: center; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .rz-doors .rz-door.rz-door, .rz-none .rz-none-go, .rz-none .rz-none-go svg { transition: none; } }

/* ── one or two listings: the rest of the row is a card that does something (as Saved jobs has no empty cell) ── */
.results-list .board-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: clamp(24px, 3vw, 44px);
  border: 0; border-radius: var(--rc-r); background: #F3EFE4; box-shadow: var(--rc-ring); text-align: center; }
.results-list .board-more .bm-t { margin: 0; font-family: var(--serif-display, var(--serif)); font-size: clamp(22px, 2vw, 28px); color: var(--navy, #0A1628); }
.results-list .board-more .bm-s { margin: 0; max-width: 36ch; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: #4A5262; }
.results-list .board-more .bm-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--navy, #0A1628); color: #FAF8F3; text-decoration: none; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.results-list .board-more .bm-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.results-list .board-more .bm-go:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 3px; }
@media (max-width: 760px) { .results-list .board-more { grid-column: 1 / -1 !important; } }