/* ─────────────────────────────────────────────────────────────────────────
   layout.css — the ONE grid rule, v9.54.

   Before this file, each two-column public page carried its own column
   widths, in its own stylesheet or its own markup — measured, not guessed:

     .pd-grid   63fr / 33fr   (65.6 / 34.4)  app.css — listing, every
                                             engine's detail page, profile
     search.php col-lg-3 / col-lg-9          Bootstrap — 25 / 75
     blog       col-lg-8 / col-lg-4          Bootstrap — 66.7 / 33.3

   Three numbers for one idea, and they had already drifted — which is why a
   sidebar was a different width depending on which page you were reading.
   There are now two, and both live here:

     .g-2-1   66.66 / 33.33   content + rail   — listing, profile, blog
     .g-3-7   30 / 70         filters + results — search only

   Search flips because its left column is an INSTRUMENT, not a passenger:
   a person works it, and the results have to stay wide enough for two cards
   side by side. At the 1180px container 33/67 would drop the result grid to
   a single column on a common laptop.

   minmax(0,Nfr) rather than plain Nfr: a bare fr track refuses to shrink
   below its content's min-content width, so one long unbroken string — a
   URL in a rail, a wide table in the main column — used to push the whole
   grid sideways. minmax(0,…) lets the track shrink and the child scroll.
   ───────────────────────────────────────────────────────────────────────── */

.g-2-1,
.g-3-7{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--g-gutter,16px);
  align-items:start;
}

/* One breakpoint, shared. Below it both layouts are a single column with the
   rail LAST — on a phone the thing you came for is never below the sidebar. */
@media (min-width:880px){
  .g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .g-3-7{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
}

/* Search Builder's four layout settings, expressed on the same grid rather
   than four sets of Bootstrap column classes. The filter panel is always
   FIRST in the source (a phone and a screen reader meet it first); these
   only move it visually.
     .g-3-7            filters left, results right   — sidebar-left
     .g-3-7--right     filters right                 — sidebar-right
     .g-3-7--top       one column, filters above     — top-filters
     .g-3-7--none      one column, filters in the sheet only — full-width */
@media (min-width:880px){
  .g-3-7--right{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
  .g-3-7--right>.g-aside{order:2}
  .g-3-7--right>.g-main{order:1}
  .g-3-7--top,
  .g-3-7--none{grid-template-columns:minmax(0,1fr)}
  .g-3-7--none>.g-aside{display:none}
}

/* The rail sticks to the top of the viewport and scrolls on its own when it
   is taller than the screen — without max-height it would stick at its top
   edge and the bottom of a long filter list became unreachable. */
.g-rail{min-width:0}
@media (min-width:880px){
  .g-rail--sticky{
    position:sticky;
    top:var(--g-gutter,16px);
    max-height:calc(100vh - (var(--g-gutter,16px) * 2));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .g-rail--sticky::-webkit-scrollbar{width:6px}
  .g-rail--sticky::-webkit-scrollbar-thumb{background:#D8E0DE;border-radius:3px}
}
/* A rail whose content is short has nothing to scroll and should not show a
   scrollbar gutter; authors opt in per page with --sticky only where the
   column is genuinely long (search filters, article contents). */

.g-main{min-width:0}

/* Search puts the filters FIRST in the source — a screen reader and a phone
   both meet "what am I looking at" before 40 results. On the desktop grid
   they are already the left track, so nothing needs reordering. */

/* The one gutter, so a page never invents its own spacing between blocks. */
.g-stack{display:flex;flex-direction:column;gap:var(--g-gutter,16px);min-width:0}
.g-stack>*{margin-bottom:0}

/* ── .pd-grid: the detail/profile grid, on the same rule ────────────────
   The business detail page, every engine's detail page and the member
   profile all render on .pd-grid, which declared 63fr/33fr in app.css.
   It is the site rule now.

   ── v9.56: the phone order was wrong, and here is why it changed ──
   This rule used to put the SIDEBAR FIRST on a phone, on the reasoning that
   the phone number and the address are why someone opens a directory page
   on a phone. That reasoning had a hole, reported with a screenshot: on a
   JOB page it put the "Apply for this job" form above the job — you were
   asked to apply before you were told what the role was. The same happens
   on an event (book before you know the date) and a CV (contact before you
   know who).

   And the original argument no longer holds anyway: this page carries a
   STICKY action bar at the bottom of every phone screen with Call and
   Enquire on it, so the action is always one tap away no matter how far
   down the reader is. Hoisting the whole rail to buy that was paying twice.

   So the phone order is now the same as everywhere else on the site — the
   thing you came for, then the detail beside it. */
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:880px){
  .pd-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
}
.pd-main{order:1}
.pd-side{order:2}

/* ═══════════════════════════════════════════════════════════════════════
   The space scale, v9.56.

   Measured on the post page before this existed: the gap between one block
   and the next was 0px, 16px, 16px and 24px — four values for one
   relationship — and the 0 was two cards touching, because one carried
   `mt-3` and the next `mb-4` and nothing owned the space between them.
   Block padding was 22.4px on .sec-card (a rem that landed on a fraction)
   and 20px on .panel: two paddings for one kind of box.

   The rule that makes it stick is not the numbers, it is WHERE they live:
   a block never carries its own margin. The column is a grid with one
   `gap`, so the distance between any two blocks is decided in one place and
   a block added later cannot bring its own idea of it.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
  --g-gutter:var(--s4);   /* between blocks — the one gutter */
  --g-pad:var(--s5);      /* inside a block — the one padding */
}

/* The two columns of the post/profile page are gap containers. Every
   `mt-3` / `mb-4` that used to sit on a block has been removed. */
.pd-main,
.pd-side > .side-card,
.g-main,
.g-rail{display:flex;flex-direction:column;gap:var(--g-gutter);min-width:0}
/* An absolutely-positioned or zero-height child (the section-sheet markup,
   a script tag, an empty ad slot) must not open a gap of its own. */
.pd-main > script,
.g-main > script,
.g-rail > script{display:none}

/* One padding for every block, whichever prefix it came from. */
.lp-editorial .sec-card,
.lp-editorial .panel.pd-block,
.lp-editorial .rail-card{padding:var(--g-pad)}
@media (max-width:768px){
  .lp-editorial .sec-card,
  .lp-editorial .panel.pd-block,
  .lp-editorial .rail-card{padding:var(--s4)}
}

/* The page head — name, stats, meta and the section bar — is one child of
   the gap container, so it keeps its own internal rhythm and the gutter
   applies once, below it. */
.pd-head{display:block}
.pd-head > * + *{margin-top:var(--s2)}
/* v9.57 — the section bar moved OUT of the head (it is a set of links to
   real pages now, built on the server). As a direct child of .pd-main it
   takes the block gutter like any other block; its own bottom padding is
   removed so it does not sit at gutter + padding from the first block. */
.pd-main > .pd-nav{padding-bottom:0}

/* ── Floating chrome yields to anything that opens over the page ────────
   v9.56, reported from a phone: the "Sections" pill and the bug-report
   button both floated on top of the catalogue's enquiry sheet and sat
   across its message box. Three fixed things fighting for the same corner
   of a 390px screen is what "the mobile layout is stressed" looks like.

   One rule, listing every overlay this site can open, rather than a hack
   per widget. :has() is supported by every browser that can run the sheet;
   where it is not, the z-index change alone still keeps the pill under the
   overlay — this only adds the same for the bug button, which deliberately
   sits above everything. */
/* v9.57 — the "Sections" pill is gone (the section bar replaced it, see
   assets/css/listing-editorial.css), so this rule now has one subject
   instead of two: the bug button, which deliberately sits above everything
   and therefore has to be told to stand down for an overlay. */
body:has(.gc-drawer.on) #gdirBugWidgetOpen,
body:has(.modal.show) #gdirBugWidgetOpen,
body:has(#gdirMobBarSheet:not([hidden])) #gdirBugWidgetOpen{display:none !important}