/* ==========================================================================
   Pro Auction — Page-level composition (build order step 5)
   ========================================================================== */

/* --- Hero §5.1 -----------------------------------------------------------
   Full-bleed photography with an ink scrim. Not a stock slider. */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The scrim: without it, white type over photography fails contrast
   unpredictably depending on the image.

   Mobile-first, and deliberately not the same gradient at both ends. At 375px
   the hero copy spans the full width, so a left-to-right gradient puts the
   standfirst over the weak end — measured at 4.35:1 against the 4.5 that
   20px regular text needs. Narrow viewports therefore get a near-uniform
   scrim; the horizontal falloff only returns once the copy is confined to a
   column and the right-hand side is free for the photograph. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--ink-rgb), .93) 0%,
    rgba(var(--ink-rgb), .88) 100%
  );
  z-index: -1;
}

@media (min-width: 1024px) {
  .hero::after {
    background: linear-gradient(
      to right,
      rgba(var(--ink-rgb), .92) 0%,
      rgba(var(--ink-rgb), .78) 55%,
      rgba(var(--ink-rgb), .55) 100%
    );
  }
}
.hero__inner {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-16);
  align-items: end;
}
.hero__copy { max-width: min(60rem, 100%); }
/* The heading is a sentence quoted from the original, not a short phrase.
   At --fs-3xl it ran to seven lines and filled the viewport, so it steps
   down a level and takes a tighter measure. */
.hero__title {
  color: var(--paper);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-2xl);
  max-width: 26ch;
}
.hero__standfirst {
  font-size: var(--fs-base);
  max-width: 52ch;
  color: var(--paper);
  opacity: .9;
  margin: 0 0 var(--s-8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Through --rem: Bricks' 62.5% root made a bare 24rem only 240px, and the
   sale name wrapped to seven lines. */
.hero__next-sale { max-width: calc(24 * var(--rem)); }
/* The card is a light surface inside the on-ink hero, so the hero's
   light-on-dark button and focus treatment must not reach into it — the
   outline "View catalogue" was paper-on-white, all but invisible. */
.on-ink .sale-card .btn--secondary { color: var(--brand-deep); border-color: var(--brand-deep); }
.on-ink .sale-card .btn--secondary:hover { background: var(--brand-deep); color: var(--white); }
.on-ink .sale-card :where(a, button):focus-visible { outline-color: var(--focus); }
.hero__next-sale .eyebrow { color: var(--steel); margin-bottom: var(--s-2); }

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.5fr 1fr; }
}

/* --- Empty state §5.2 ---------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-12) var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.empty-state p { margin: 0; color: var(--muted); }

/* --- Between sales -------------------------------------------------------
   Replaces the dashed empty box on the home calendar band. Left-aligned and
   factual rather than centred and apologetic: between sales the section still
   has to say what the firm does and give the reader somewhere to go. */
.between-sales { display: grid; gap: var(--s-8); }
.between-sales__line { font-size: var(--fs-lg); color: var(--slate); margin: 0 0 var(--s-6); }
.between-sales__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.between-sales__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.between-sales__facts li {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--slate);
  max-width: 34ch;
}
.between-sales__facts .eyebrow { display: block; margin-bottom: var(--s-1); }

@media (min-width: 900px) {
  .between-sales { grid-template-columns: 1.15fr 1fr; gap: var(--s-16); align-items: start; }
}

.section__more { margin-top: var(--s-8); }
.section__more a { font-weight: var(--fw-medium); text-decoration: none; }
.section__more a:hover { text-decoration: underline; }

/* --- Two paths §5.1 item 4 ----------------------------------------------
   Equal weight. Both funnels are first-class (§1). */
/* §5.1 asks for two large panels of equal weight. A top rule alone left them
   reading as columns of text next to the image tiles below; a surface and a
   hairline give them presence without adding a second accent. */
.two-paths { display: grid; gap: var(--s-6); }
.path {
  border: 1px solid var(--line);
  border-top: 2px solid var(--steel);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.section--paper .path { background: var(--white); }
.path h2 { margin: 0; }
.path__links { list-style: none; margin: var(--s-2) 0 0; padding: 0;
               display: flex; flex-direction: column; }
/* 44px minimum tap target — WCAG 2.2 SC 2.5.8. These are stacked text links,
   which without this render ~13px high and sit too close together to hit
   reliably on a phone. */
.path__links a {
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .two-paths { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}

/* --- Process §5.1 item 6 -------------------------------------------------
   Numbered because it genuinely is a sequence. */
.process {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8);
}
.process__step { counter-increment: step; position: relative;
                 padding-top: var(--s-8); border-top: 1px solid var(--line); }
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--s-3);
  left: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--steel);
  font-variant-numeric: tabular-nums lining-nums;
}
.process__step h3 { margin: 0 0 var(--s-2); }
.process__step p { margin: 0; }

/* Six quoted steps rather than four written ones — they are short single
   lines, so they sit in a tighter grid with the number carrying the sequence. */
.process--six .process__step { padding-top: var(--s-6); }
.process--six .process__step p { font-size: var(--fs-base); color: var(--slate); }

@media (min-width: 768px) {
  .process { grid-template-columns: repeat(4, 1fr); }
  .process--six { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-8); }
}

/* --- Sector tiles -------------------------------------------------------- */
/* Same explicit column counts as .child-tile. auto-fit wrapped the six sector
   tiles 4+2 on the home page, which reads as a mistake rather than a layout. */
.card-grid:has(.sector-tile) { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .card-grid:has(.sector-tile) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .card-grid:has(.sector-tile) { grid-template-columns: repeat(3, 1fr); }
}
/* Four across once there is room: the site now names four sectors, so they
   sit on a single row rather than 3 + 1 orphan. */
@media (min-width: 1200px) {
  .card-grid:has(.sector-tile) { grid-template-columns: repeat(4, 1fr); }
}

.sector-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink);
  text-decoration: none;
}
.sector-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .72;
  transition: transform var(--dur-micro) var(--ease-out),
              opacity var(--dur-micro) var(--ease-out);
}
.sector-tile:hover img { transform: scale(var(--hover-scale)); opacity: .55; }
.sector-tile__label {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  right: var(--s-4);
  z-index: 1;                 /* above the schematic and its ruling */
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

/* --- Page hero -----------------------------------------------------------
   Every page has one. Two variants: photographic where a featured image
   exists, generated where one does not. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-16) var(--s-12);
}
.page-hero__inner { display: flex; flex-direction: column; gap: var(--s-3); }
.page-hero__eyebrow { color: var(--steel); margin: 0; }
.page-hero__title { color: var(--paper); margin: 0; max-width: 22ch; }
.page-hero__standfirst {
  color: var(--paper);
  opacity: .88;
  font-size: var(--fs-lg);
  margin: var(--s-2) 0 0;
  max-width: 56ch;
}
.page-hero__meta { color: var(--steel); font-size: var(--fs-sm); margin: var(--s-2) 0 0; }

/* Breadcrumb sits inside the hero, so it needs the light treatment. */
.page-hero .breadcrumb,
.page-hero .breadcrumb a { color: rgba(var(--paper-rgb), .72); }
.page-hero .breadcrumb a:hover { color: var(--paper); }
.page-hero .breadcrumb [aria-current="page"] { color: var(--paper); }
.page-hero .breadcrumb li + li::before { color: rgba(var(--paper-rgb), .35); }

@media (min-width: 768px) {
  .page-hero { padding-block: var(--s-24) var(--s-16); }
}

/* Photographic variant: image plus a scrim strong enough that legibility does
   not depend on which photograph is used. Measured, not assumed. */
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--ink-rgb), .93) 0%,
    rgba(var(--ink-rgb), .86) 100%
  );
  z-index: -1;
}

@media (min-width: 1024px) {
  .page-hero--image::after {
    background: linear-gradient(
      to right,
      rgba(var(--ink-rgb), .93) 0%,
      rgba(var(--ink-rgb), .80) 60%,
      rgba(var(--ink-rgb), .62) 100%
    );
  }
}

/* Record variant: the generated fallback for pages with no photograph.
   Ledger ruling in steel, at an opacity where it reads as texture rather than
   as lines — the catalogue page the brief's "condition report" concept is
   named after. Pure CSS, so it costs no request and re-themes with the
   tokens. */
.page-hero--record::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(var(--paper-rgb), .05) 0 1px,
      transparent 1px 28px
    ),
    linear-gradient(
      to right,
      rgba(var(--paper-rgb), .05) 0 1px,
      transparent 1px
    );
  background-size: 100% 28px, 100% 100%;
  background-position: 0 0, var(--s-16) 0;
}

/* A single steel rule above the title, the same device the lot card uses. */
.page-hero--record .page-hero__title { padding-top: var(--s-4); }
.page-hero--record .page-hero__eyebrow { padding-top: var(--s-6); border-top: 2px solid var(--steel); display: inline-block; }

/* --- Child tiles ---------------------------------------------------------
   Hub pages (/sectors/, /services/) list their children. Tiles without an
   image fall back to the ink ground rather than a broken or empty box —
   three sectors have no usable photograph yet. */
/* Explicit column counts rather than auto-fit: six sector tiles under auto-fit
   wrapped 4+2, which reads as a mistake. One, two, then three gives 3x2 on
   desktop and never squeezes a tile below a legible width. */
.card-grid:has(.child-tile) { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .card-grid:has(.child-tile) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .card-grid:has(.child-tile) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .card-grid:has(.child-tile) { grid-template-columns: repeat(4, 1fr); }
}

.child-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* No min-height: combined with aspect-ratio it sets the tile's WIDTH from
     its height (200px x 3/2 = 300px), so two columns overflowed a 375px
     viewport by 121px. Aspect-ratio alone derives height from the column. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink);
  text-decoration: none;
}
.child-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  transition: transform var(--dur-micro) var(--ease-out),
              opacity var(--dur-micro) var(--ease-out);
}
.child-tile:hover img { transform: scale(var(--hover-scale)); opacity: .5; }
/* --- Imageless tiles -----------------------------------------------------
   Shared by .sector-tile and .child-tile. Where no photograph exists the tile
   carries a schematic and the same ledger ruling as the record hero, so it
   reads as a deliberate treatment rather than a failed image. */
.tile-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: min(46%, 132px);
  height: auto;
  color: var(--steel);
  opacity: .55;
  z-index: 0;
  transition: opacity var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.sector-tile:hover .tile-glyph,
.child-tile:hover .tile-glyph {
  opacity: .8;
  transform: translate(-50%, -58%) scale(1.04);
}

/* Ledger ruling behind the schematic. */
.sector-tile:has(.tile-glyph)::before,
.child-tile:has(.tile-glyph)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(var(--paper-rgb), .045) 0 1px,
    transparent 1px 22px
  );
}

.child-tile--plain { border: 1px solid var(--line); }
.child-tile__label {
  position: relative;
  z-index: 1;
  padding: var(--s-4);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

/* --- Cards --------------------------------------------------------------- */
.case-card, .post-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
/* index.php titles its cards with h2 (they head a listing); only h3 was
   styled, so they took the full section-heading size and broke mid-word in
   narrow columns ("manufactur-ed"). */
.case-card :is(h2, h3), .post-card :is(h2, h3) { margin: 0; font-size: var(--fs-lg); overflow-wrap: break-word; hyphens: auto; }
.case-card :is(h2, h3) a, .post-card :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.case-card :is(h2, h3) a:hover, .post-card :is(h2, h3) a:hover { color: var(--brand-deep); }
.case-card p, .post-card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

.testimonials { margin-top: var(--s-12); }

/* --- Article layout ------------------------------------------------------
   Body copy is capped at 68ch for readability, which alone left half of a
   1440px viewport empty on every inner page — that reads as a broken layout
   rather than a measured one. A rail carries the section links and the
   standing CTA, so the column has a right-hand edge and the space earns
   its keep. */
.article-layout { display: grid; gap: var(--s-12); }
.article-layout__body { min-width: 0; }

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: var(--s-16);
    align-items: start;
  }
}

.article-rail { min-width: 0; }
.article-rail__inner { display: flex; flex-direction: column; gap: var(--s-8); }

@media (min-width: 1024px) {
  /* Follows the reader down long sector and service pages. */
  .article-rail__inner { position: sticky; top: var(--s-16); }
}

/* On this page */
.rail-toc ol {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  border-left: 1px solid var(--line);
}
.rail-toc li { margin: 0; }
/* Target size: WCAG 2.2 SC 2.5.8 (AA) requires 24x24. The 44px used on
   buttons, nav and footer links is SC 2.5.5, which is AAA — right for primary
   controls, wrong here, because the conditions of sale have 18 headings and
   44px rows would make the contents list ~790px tall and unusable. 40px with
   a clear hover edge is comfortable and well clear of the AA floor. */
.rail-toc a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
}
.rail-toc a:hover { color: var(--ink); border-left-color: var(--steel); }

/* Standing conversion card */
.rail-cta {
  border-top: 2px solid var(--steel);
  padding-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.rail-cta__line { font-size: var(--fs-sm); color: var(--slate); margin: 0; max-width: none; }
.rail-cta__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-decoration: none;
}
.rail-cta__phone:hover { color: var(--brand-deep); }

/* --- Article body -------------------------------------------------------- */
.entry-content > * + * { margin-top: var(--s-4); }
/* Headings share the body measure so the column has one right edge. Left
   uncapped they ran wider than the paragraphs beneath them, which looked
   like a mistake rather than a hierarchy. */
.entry-content h2,
.entry-content h3,
.entry-content h4 { max-width: var(--measure); }
.entry-content h2 { margin-top: var(--s-12); }
.entry-content h3 { margin-top: var(--s-8); }
/* Anchor jumps from the rail must clear the sticky header. */
.entry-content h2[id],
.faq-section[id] { scroll-margin-top: var(--s-24); }
.entry-content ul, .entry-content ol { padding-left: var(--s-6); max-width: var(--measure); }
.entry-content li + li { margin-top: var(--s-2); }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.entry-content blockquote {
  border-left: 2px solid var(--steel);
  padding-left: var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
}
/* Wide content scrolls in its own container so the body never scrolls
   sideways — matters on the results tables. */
.entry-content table { display: block; overflow-x: auto; max-width: 100%; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-section { margin-top: var(--s-16); }

/* --- 404 / search -------------------------------------------------------- */
.page-narrow { max-width: 44rem; margin-inline: auto; padding-block: var(--s-24); }
.search-form { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.search-form input[type="search"] {
  flex: 1;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 44px;
}

/* --- Results archive ----------------------------------------------------- */
.results-archive__years {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}
.results-archive__years a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.results-archive__years a:hover { border-color: var(--ink); }
.results-archive__year + .results-archive__year { margin-top: var(--s-16); }
.results-archive__year h2 {
  margin: 0 0 var(--s-6);
  font-variant-numeric: tabular-nums lining-nums;
  /* Clear the sticky header when reached from the year links. */
  scroll-margin-top: calc(var(--s-24) + var(--s-4));
}
.results-archive__empty { color: var(--muted); }

/* --- Upcoming auctions --------------------------------------------------- */
.auctions-upcoming__empty p { margin: 0 0 var(--s-4); }
.auctions-upcoming__empty .btn { margin: 0 var(--s-2) var(--s-2) 0; }
.auctions-upcoming__content { margin-top: var(--s-12); }