/* ==========================================================================
   Pro Auction — Component library (build order step 3)
   Buttons · lot card · sale card · status chip · data row · breadcrumb ·
   accordion · form fields · testimonial · stat block · CTA band.
   Every value derives from tokens.css. Hairlines are the only literal 1px.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   The accent (--steel) is never a button. Two header CTAs must stay visually
   distinct at every breakpoint (§13): primary is solid, secondary outline. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
  /* 44px minimum target — WCAG 2.2 SC 2.5.8 */
  min-height: 44px;
}

.btn--primary {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--white); }

.btn--secondary {
  background: transparent;
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn--secondary:hover { background: var(--brand-deep); color: var(--white); }

/* On ink, the outline button needs a light edge to stay visible. */
.on-ink .btn--secondary { color: var(--paper); border-color: var(--paper); }
.on-ink .btn--secondary:hover { background: var(--paper); color: var(--ink); }

.btn--block { width: 100%; }

/* --- Data row ------------------------------------------------------------
   The hairline-ruled label/value row from the "record" treatment (§4.1).
   Shared by lot cards, sale key-facts and the lot right rail. */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.data-row__label {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.data-row__value {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--slate);
  text-align: right;
}

/* --- Lot card ------------------------------------------------------------
   The signature element (§4.1): monospaced lot number on an ink tab, a
   hairline-ruled data row, and a live status chip. Reused unchanged on the
   calendar, sale pages, sector pages, case studies and results. */
.lot-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.lot-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.lot-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-micro) var(--ease-out);
}
.lot-card:hover .lot-card__media img { transform: scale(var(--hover-scale)); }

/* Steel on ink measures 5.60:1 — the one place the accent carries text. */
.lot-card__number {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ink);
  color: var(--steel);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  padding: var(--s-1) var(--s-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.lot-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-4);
  flex: 1;
}
.lot-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}
.lot-card__title a { color: var(--ink); text-decoration: none; }
.lot-card__title a:hover { color: var(--brand-deep); }
.lot-card .data-row { margin-top: auto; }

/* --- Sale card -----------------------------------------------------------
   Calendar and mega-menu. Same record treatment as the lot card. */
.sale-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.sale-card--live { border-color: var(--live); }
.sale-card__media {
  aspect-ratio: 16 / 9;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.sale-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sale-card__body { display: flex; flex-direction: column; gap: var(--s-2);
                   padding: var(--s-4); flex: 1; }
.sale-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2);
                   align-items: center; }
.sale-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
}
.sale-card__title a { color: var(--ink); text-decoration: none; }
.sale-card__title a:hover { color: var(--brand-deep); }
.sale-card__when,
.sale-card__where { font-size: var(--fs-sm); color: var(--muted);
                    font-variant-numeric: tabular-nums lining-nums; }
.sale-card__cta { margin-top: auto; padding-top: var(--s-3); }
/* Results archive: the record rows sit above the button, and the last one
   closes with a rule so the figures read as a block. */
.sale-card__results { margin-top: var(--s-2); border-bottom: 1px solid var(--line); }
.sale-card__note { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--muted);
                   font-style: italic; }

/* --- Countdown -----------------------------------------------------------
   Fixed dimensions reserved so live ticks never shift layout (§9, CLS<0.05).
   ch units against tabular figures give a stable box. */
.countdown {
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 8ch;
  display: inline-block;
  text-align: right;
}
.countdown--urgent { color: var(--live); font-weight: var(--fw-semibold); }

/* --- Breadcrumb ----------------------------------------------------------
   On every page except home, schema-marked in the PHP part (§3). */
.breadcrumb { font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2);
                 min-height: 44px; }
.breadcrumb li + li::before { content: "/"; color: var(--line); }
.breadcrumb a { color: var(--muted); text-decoration: none;
                display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--brand-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--slate); }

/* --- Accordion -----------------------------------------------------------
   Native <details>/<summary>: keyboard operable and screen-reader correct
   with no JS, which matters on the FAQ blocks every commercial page carries. */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  list-style: none;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  color: var(--steel);
  line-height: 1;
  flex-shrink: 0;
}
.accordion__item[open] summary::after { content: "\2212"; }
.accordion__panel { padding-bottom: var(--s-4); }

/* --- Form fields ---------------------------------------------------------
   Real labels, inline validation, plain-language errors (§8). Error text is
   ink with an icon, never red — red means "live auction" here (§4.2). */
.field { display: flex; flex-direction: column; gap: var(--s-2);
         margin-bottom: var(--s-4); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium);
                color: var(--slate); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  min-height: 44px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: var(--ink); border-width: 2px; }
.field__error { display: flex; align-items: flex-start; gap: var(--s-2);
                font-size: var(--fs-sm); color: var(--ink);
                font-weight: var(--fw-medium); }
.field__error svg { flex-shrink: 0; margin-top: 2px; }

/* --- Testimonial ---------------------------------------------------------
   Attribution is structural, not optional: an anonymous testimonial is worth
   less than no testimonial (§5.1). The PHP part refuses to render without it. */
.testimonial { border-left: 2px solid var(--steel); padding-left: var(--s-6); }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
.testimonial__attribution { font-size: var(--fs-sm); color: var(--muted); }
.testimonial__attribution cite { font-style: normal; font-weight: var(--fw-medium);
                                 color: var(--slate); display: block; }

/* --- Stat block ----------------------------------------------------------
   Credibility strip (§5.1). Tabular figures, hairline dividers. Any figure
   the client has not supplied is dropped, never invented (§14). */
.stats { display: grid; gap: var(--s-6);
         grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: var(--s-1);
        padding-left: var(--s-4); border-left: 1px solid var(--line); }
.stat__figure {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}
.stat__label { font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow);
               text-transform: uppercase; color: var(--muted); }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background: var(--ink); color: var(--paper);
            padding-block: var(--s-16); }
/* Grid rather than space-between: at 1280px the latter threw the buttons to
   the far edge and left a dead gap across the middle of the band. The text
   keeps its measure and the actions sit just beyond it. */
.cta-band__inner { display: grid; gap: var(--s-6); align-items: center; }
.cta-band h2 { color: var(--paper); margin: 0 0 var(--s-2); max-width: 18ch; }
.cta-band p { color: var(--paper); opacity: .85; margin: 0; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (min-width: 860px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-16); }
  .cta-band__actions { justify-content: flex-end; }
}

/* --- Section rhythm §4.4 -------------------------------------------------
   Alternating paper and white bands. */
.section { padding-block: var(--s-16); }
.section--white { background: var(--white); }
.section--paper { background: var(--paper); }
.section--ink   { background: var(--ink); color: var(--paper); }
.section__head  { display: flex; flex-direction: column; gap: var(--s-2);
                  margin-bottom: var(--s-8); }

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

/* --- Card grids ---------------------------------------------------------- */
.card-grid { display: grid; gap: var(--s-4); }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Homepage calendar. Never wider than a third of the row, so one or two
   sales keep card proportions instead of stretching their 16:9 photos to
   ~900px tall; down to one column on a phone. */
.card-grid--sales {
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 280px), calc((100% - 2 * var(--s-4)) / 3)), 1fr));
}
/* A single sale: one wide card, photo beside the details from tablet up. */
.card-grid--feature { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .card-grid--feature .sale-card { flex-direction: row; }
  .card-grid--feature .sale-card__media {
    flex: 0 0 min(45%, 640px);
    aspect-ratio: 4 / 3;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .card-grid--feature .sale-card__body { padding: var(--s-8); justify-content: center; }
  .card-grid--feature .sale-card__title { font-size: var(--fs-xl); }
  .card-grid--feature .sale-card__cta { margin-top: var(--s-4); }
}
.sale-card__media[hidden] { display: none; }

/* --- Valuation request form ----------------------------------------------
   Forminator with its own styling switched off (form-style "none"), so it
   takes the site's controls: hairline inputs at 44px, UI-font labels, native
   radios and checkboxes in the brand colour, the primary button. */
.valuation-form {
  margin: 0 0 var(--s-12);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
@media (min-width: 768px) { .valuation-form { padding: var(--s-8); } }
.valuation-form > h2 { margin: 0 0 var(--s-1); }
.valuation-form__intro { margin: 0 0 var(--s-6); color: var(--muted); }

.valuation-form .forminator-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin: 0 0 var(--s-6);
}
.valuation-form .forminator-col { flex: 1 1 calc(16 * var(--rem)); min-width: 0; }
.valuation-form .forminator-field { display: flex; flex-direction: column; gap: var(--s-2); }

.valuation-form .forminator-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--ink);
}
.valuation-form .forminator-required { color: var(--live); margin-left: 2px; }
.valuation-form .forminator-description { font-size: var(--fs-sm); color: var(--muted); }

.valuation-form .forminator-input,
.valuation-form .forminator-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-sizing: border-box;
}
.valuation-form .forminator-textarea { min-height: calc(8 * var(--rem)); resize: vertical; }
.valuation-form .forminator-input:focus,
.valuation-form .forminator-textarea:focus { border-color: var(--brand-deep); }

/* Radios and checkboxes: the native controls, which carry the state and the
   keyboard behaviour. Forminator's decorative bullet spans are not needed. */
.valuation-form .forminator-radio-bullet,
.valuation-form .forminator-checkbox-box { display: none; }
.valuation-form .forminator-radio,
.valuation-form .forminator-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  margin-right: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}
.valuation-form .forminator-radio input,
.valuation-form .forminator-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--brand-deep);
}
/* Consent text runs to two lines; keep the box at the top of it. */
.valuation-form .forminator-field-gdprcheckbox .forminator-checkbox { align-items: flex-start; margin-right: 0; }
.valuation-form .forminator-field-gdprcheckbox .forminator-checkbox input { margin-top: 2px; }

.valuation-form .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s-3) var(--s-8);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--white);
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.valuation-form .forminator-button-submit:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

/* Errors. */
.valuation-form .forminator-error-message { font-size: var(--fs-sm); color: var(--live); }
.valuation-form .forminator-has_error .forminator-input,
.valuation-form .forminator-has_error .forminator-textarea { border-color: var(--live); }
.valuation-form .forminator-response-message:empty,
.valuation-form .forminator-response-message[aria-hidden="true"] { display: none; }
.valuation-form .forminator-response-message {
  margin: 0 0 var(--s-6);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--live);
  background: var(--white);
  font-size: var(--fs-sm);
}
/* Option groups read across: "Yes  No  Not sure" on one line under the
   question. Hint and error text each take their own line — Forminator puts
   the error inline beside the hint, which ran them together. */
.valuation-form .forminator-field-radio .forminator-field,
.valuation-form .forminator-field-checkbox .forminator-field { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--s-6); row-gap: 0; }
.valuation-form .forminator-field-radio .forminator-label,
.valuation-form .forminator-field-checkbox .forminator-label { flex-basis: 100%; }
.valuation-form .forminator-description,
.valuation-form .forminator-error-message { display: block; flex-basis: 100%; }