/* ==========================================================================
   Shelbys Auctioneers: home.css (handle shelbys-home, front page only)
   Homepage-only rules from spec/design/final/styles.css (design v3), extracted with the inverse of
   foundation's port_css.py (scratchpad work/home/extract_home.py): hero + next-sale bar, facts + "as seen
   on", about grid, how-it-works wrapper + fee row, category cards (rail--cards), sale-calendar grid, FAQ
   teaser. Shared components (steps, banners, rails, lot/sale cards, split, guides) are in base.css.
   Tokens only, no raw colours or fonts. Section numbers follow styles.css.
   ========================================================================== */

/* 09 HERO + NEXT-SALE BAR ------------------------------------------------- */
.hero {
  /* Disc diameter, one fluid formula (no steps): 44vw on phones so the row bleeds off both edges
     (141px at 320, 172 at 390), then ~188 at 768, ~219 at 1024, ~269 at 1440, ~332 at 1920 and
     capped at 20.5rem (369px at 2560 on the scaled root), so the ultra-wide hero never looks sparse. */
  --d: clamp(8.5rem, max(6rem + 12vw, min(44vw, 11rem)), 20.5rem);
  /* Nameplate tracks the discs (0.62 x d: 117px at 768, 167 at 1440, 229 at 2560) but never wider than 23vw. */
  --np: min(calc(var(--d) * .62), 23vw);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--blue);
  padding-block-start: calc(var(--header-h) + .5rem);
}
.hero__texture {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.2' stroke-width='1.6'%3E%3Cellipse cx='800' cy='400' rx='260' ry='160'/%3E%3Cellipse cx='800' cy='400' rx='330' ry='204'/%3E%3Cellipse cx='800' cy='400' rx='400' ry='248'/%3E%3Cellipse cx='800' cy='400' rx='470' ry='292'/%3E%3Cellipse cx='800' cy='400' rx='540' ry='336'/%3E%3Cellipse cx='800' cy='400' rx='610' ry='380'/%3E%3Cellipse cx='800' cy='400' rx='680' ry='424'/%3E%3Cellipse cx='800' cy='400' rx='750' ry='468'/%3E%3Cellipse cx='800' cy='400' rx='820' ry='512'/%3E%3Cellipse cx='800' cy='400' rx='890' ry='556'/%3E%3Cellipse cx='800' cy='400' rx='960' ry='600'/%3E%3Cellipse cx='800' cy='400' rx='1030' ry='644'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / max(1600px, 115%) auto no-repeat;
}
.hero__stage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block-start: clamp(.5rem, 1.2vw, 1rem); }
.hero__discs { display: flex; justify-content: center; align-items: flex-start; inline-size: 100%; }
.disc {
  position: relative; flex: none; inline-size: var(--d); aspect-ratio: 1; margin: 0;
  border-radius: var(--r-pill); overflow: hidden;
  box-shadow: 0 0 0 clamp(4px, .5vw, 6px) var(--blue);
  background: var(--blue-deep);
}
.disc + .disc { margin-inline-start: calc(var(--d) * -.2); }
.disc--centre { z-index: var(--z-raised); inline-size: calc(var(--d) * 1.08); margin-block-start: calc(var(--d) * .05); }
.disc img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.disc__chip {
  position: absolute; inset-block-start: 15%; inset-inline: 0; margin-inline: auto; z-index: 1; inline-size: max-content; max-inline-size: 86%;
  padding: .3rem .75rem; background: var(--blue); color: var(--on-blue);
  font-size: var(--step--2); font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  border-radius: var(--r-xs); display: none;
}
.hero__nameplate {
  position: relative; z-index: var(--z-nameplate);
  margin-block-start: calc(var(--d) * -.48);
  font: var(--w-bold) var(--np)/.78 var(--font-sans);
  letter-spacing: -.045em; color: var(--on-blue); text-align: center; white-space: nowrap;
  user-select: none;
}
.hero__plinth {
  display: grid; gap: var(--space-m); margin-block-start: calc(var(--np) * .34);
  padding-block: clamp(1rem, .75rem + .8vw, 1.375rem) clamp(1.25rem, .9rem + 1vw, 1.875rem);
  border-block-start: 1px solid var(--rule-blue);
}
.hero__kicker { color: var(--on-blue-2); font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.3; }
.hero__title { margin-block-start: .5rem; font-size: var(--step-hero-h1); line-height: 1.12; max-inline-size: 34ch; color: var(--on-blue); }
.hero__lead { margin-block-start: .75rem; color: var(--on-blue-2); font-size: var(--step-0); max-inline-size: 52ch; }
.hero__actions { display: grid; gap: .75rem; align-content: end; }
.hero__aside { color: var(--on-blue-2); font-size: var(--step--1); }
.hero__aside a { color: var(--on-blue); font-weight: var(--w-bold); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .22em; white-space: nowrap; }
@media (min-width: 640px) {
.hero__actions { grid-template-columns: auto auto; justify-content: start; }
.hero__aside { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
.disc__chip { display: block; }
}
@media (min-width: 1024px) {
.hero__plinth { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(2rem, 4vw, 4rem); }
.hero__actions { justify-content: end; }
.hero__aside { text-align: end; }
}
@media (min-width: 1120px) {
.hero { padding-block-start: var(--header-h-lg); }
}
/* Next-sale bar: AuctionForge-fed; falls back to the cadence line when no sale is listed */
.next-sale { background: var(--blue-deep); border-block-start: 1px solid var(--rule-blue); }
.next-sale__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-block: 1.25rem; }
.next-sale__label { display: inline-flex; align-items: center; gap: .625rem; color: var(--on-blue-2); font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.next-sale__label::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--on-blue); }
.next-sale__when { color: var(--on-blue); font-weight: var(--w-bold); font-size: var(--step-1); }
.next-sale__what { flex: 1 1 100%; min-inline-size: 0; color: var(--on-blue); font-size: var(--step-0); }
/* full title stays in the DOM */
.next-sale__when { flex: 1 0 auto; }
.next-sale__links { display: flex; flex: 1 1 100%; gap: .25rem 1.5rem; }
.next-sale__btn { inline-size: 100%; justify-content: center; gap: .5rem; min-block-size: 3.25rem; font-size: var(--step-0); }
.next-sale__btn .i { inline-size: 1.1em; block-size: 1.1em; }
.next-sale .more { --c-link: var(--on-blue); --c-link-line: currentColor; --c-accent: var(--on-blue); }
@media (min-width: 1024px) {
.next-sale__inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 1.75rem; min-block-size: 6rem; padding-block: 1.25rem; }
.next-sale__what, .next-sale__links { flex: none; }
.next-sale__btn { inline-size: auto; padding-inline: 1.75rem; }
}
/* 10 FACTS + "AS SEEN ON" (one band) -------------------------------------- */
.facts { padding-block: clamp(1.25rem, .9rem + 1.2vw, 2rem); border-block-end: 1px solid var(--rule); }
.facts > .wrap { container: facts / inline-size; }
.facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact {
  display: grid; justify-items: center; align-content: start; gap: .375rem; text-align: center;
  padding: .75rem clamp(.5rem, 2.5cqi, 1.5rem);
}
.fact:nth-child(even) { border-inline-start: 1px solid var(--rule); }
.fact:nth-child(n + 3) { border-block-start: 1px solid var(--rule); }
.fact__num {
  font: var(--w-bold) var(--step-numeral)/1 var(--font-sans);
  font-size: clamp(2.5rem, 1.75rem + 2.4cqi, 3.25rem);      /* 40 -> 52, sized by the band, not the screen */
  color: var(--blue); font-variant-numeric: lining-nums; letter-spacing: var(--track-tight); white-space: nowrap;
}
.fact__num sup { font-size: .45em; vertical-align: .9em; color: var(--blue); margin-inline-start: .05em; }
.fact__label { display: block; font-weight: var(--w-bold); color: var(--ink); line-height: 1.3; }
.fact__sub { display: block; color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; margin-block-start: .125rem; }
@container facts (min-width: 40rem) {
.facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding-block: 0; }
.fact:nth-child(n + 3) { border-block-start: 0; }
.fact + .fact { border-inline-start: 1px solid var(--rule); }
}
/* "Mark has featured on": programme names, text only (never broadcaster logos) */
.tv {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem 1.5rem;
  margin-block-start: clamp(.75rem, .5rem + .6vw, 1rem); padding-block-start: clamp(.625rem, .4rem + .6vw, 1rem); border-block-start: 1px solid var(--rule); text-align: center;
}
.tv__label { flex-basis: 100%; color: var(--ink-2); font-size: var(--step--1); font-weight: var(--w-bold); letter-spacing: var(--track-caps); text-transform: uppercase; }
.tv__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; }
.tv__list li { font: var(--w-bold) var(--step-0)/1.6 var(--font-sans); color: var(--ink); white-space: nowrap; }
@container facts (min-width: 62rem) {
.tv { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 2.5rem; text-align: start; }
.tv__label { flex-basis: auto; }
.tv__list { flex: 1; justify-content: space-between; max-inline-size: 58rem; }
.tv__list li { display: inline-flex; align-items: center; }
.tv__list li + li::before { content: ""; inline-size: 1px; block-size: 1.125rem; background: var(--rule-strong); margin-inline-end: clamp(.75rem, 2cqi, 1.75rem); }
}
/* 11 ABOUT + FEATURES ----------------------------------------------------- */
/* Narrow: head, photo, features. Medium (>= 40rem): head across, photo beside a one-column list.
   Wide (>= 56rem): photo left spanning, head + 2x2 features right. The photo fills whatever height
   the copy needs (min 18rem), so the band never grows to fit a fixed 4:5 picture. */
.about-wrap { container: about / inline-size; }
.about { display: grid; gap: var(--flow); grid-template-areas: "head" "media" "features"; }
.about__head { grid-area: head; }
.about__head .lead { margin-block-start: clamp(.5rem, .3rem + .6vw, .875rem); max-inline-size: 52ch; }
.about__head .about__summary { margin-block-start: .75rem; max-inline-size: 62ch; color: var(--c-text-2); }
.about__media { grid-area: media; }
.about__features { grid-area: features; }
.arch { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.arch__frame {
  position: relative; border-radius: 999px 999px var(--r-s) var(--r-s); overflow: hidden; box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9; background: var(--ground-3);
  border-radius: 50% 50% var(--r-s) var(--r-s) / 34% 34% var(--r-s) var(--r-s);   /* segmental arch while it is wide and short */
}
.arch__frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; }
.arch__frame::after { content: ""; position: absolute; inset: .75rem; border: 1px solid rgb(255 255 255 / .6); border-radius: inherit; pointer-events: none; }
@container about (min-width: 40rem) {
.about { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "head head" "media features"; column-gap: var(--space-xl); }
.arch__frame { aspect-ratio: auto; min-block-size: 18rem; border-radius: 999px 999px var(--r-s) var(--r-s); }
}
@container about (min-width: 56rem) {
.about { grid-template-columns: minmax(0, 7fr) minmax(0, 17fr); grid-template-areas: "media head" "media features"; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4.5cqi, 4rem); row-gap: var(--flow); }
}
/* 12 RAILS: one row that swipes on small screens, a grid when there is room -------------------
   .rail (query container) > .rail__scroller (scrolls; main.js adds role=region, an aria-label and
   tabindex=0 only while it actually overflows, so keyboard users can arrow-scroll it) > ul.rail__list.
   On narrow containers the scroller bleeds to the screen edges and the next card peeks in; a thin
   visible scrollbar and the "Swipe for more" hint are the affordances. Card links stay in the tab
   order, and focusing one scrolls it into view. */
/* Grid mode: one row of four, nothing scrolls */
@container rail (min-width: 56rem) {
.rail--cards .rail__scroller { overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
.rail--cards .rail__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rail--cards .rail__hint { display: none; }
}
/* 13 HOW IT WORKS: steps, with the key benefits folded into the copy -------------------------- */
.how-wrap { container: how / inline-size; }
.fee-notes {
  list-style: none; padding: var(--flow) 0 0; margin-block-start: var(--flow); border-block-start: 1px solid var(--rule);
  display: grid; gap: .375rem 2.5rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.45;
}
.fee-notes strong { color: var(--ink); }
.fee-notes__link { margin-block-start: -.375rem; }
@container how (min-width: 48rem) {
.fee-notes { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; column-gap: clamp(1.5rem, 3cqi, 2.5rem); align-items: start; }
.fee-notes__link { margin-block-start: -.75rem; }
}
/* 14 CATEGORY CARDS (inside .rail--cards) ---------------------------------- */
.rail--cards { --rail-pad-top: 2.25rem; }
/* room for the badge that overlaps the card top */
.rail--cards .rail__scroller { padding-block-end: 1.25rem; }
/* and for the card shadow + hover lift */
.cat-card {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m);
  padding: 2.5rem .625rem .625rem;
  transition: border-color var(--dur-1) var(--ease);
}
.cat-card__badge {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% -50%;
  display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: var(--r-pill);
  background: var(--blue); color: var(--on-blue); box-shadow: 0 0 0 6px var(--ground-2);
  --c-icon-accent: var(--on-blue);
}
.cat-card__badge .i { inline-size: 1.75rem; block-size: 1.75rem; stroke-width: 1.3; }
.cat-card h3 { font: var(--w-bold) var(--step-2)/1.12 var(--font-sans); color: var(--ink); }
.cat-card h3 a { color: inherit; text-decoration: none; }
.cat-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* stretched link */
.cat-card__desc { margin-block: .25rem .75rem; padding-inline: .5rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; }
.cat-card__img { margin-block-start: auto; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ground-3); }
.cat-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.cat-card:hover { border-color: var(--blue); }
.cat-card:hover h3 { color: var(--blue); }
.cat-card:hover .cat-card__img img { transform: scale(1.035); }
.cat-card:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.cat-card h3 a:focus-visible { outline: none; }
@container rail (min-width: 56rem) {
.rail--cards { --rail-pad-top: 2.5rem; }
.cat-card { padding: 2.75rem .75rem .75rem; }
.cat-card__badge { inline-size: clamp(4rem, 5.5cqi, 4.5rem); block-size: clamp(4rem, 5.5cqi, 4.5rem); }
.cat-card__badge .i { inline-size: 2rem; block-size: 2rem; }
}
/* 15 SALE CALENDAR: next-sale card, sale-week strip, recently sold ------------------------------
   Narrow: card, week rows, lots (swipe rail). 40-70rem: the card turns landscape (date | title +
   facts | buttons), the week becomes a four-cell strip, lots a row of four. >= 70rem: card on the
   left spanning, lots top right, week strip under them. */
.sales { container: sales / inline-size; }
.sales__grid { display: grid; gap: var(--flow); grid-template-areas: "card" "week" "sold"; }
.sales__grid > .sale-card { grid-area: card; }
.sales__grid > .week { grid-area: week; }
.sales__grid > .sold { grid-area: sold; }
@container sales (min-width: 70rem) {
.sales__grid { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); grid-template-areas: "card sold" "card week"; grid-template-rows: 1fr auto; column-gap: var(--space-l); }
}
/* 17 FAQ TEASER + ACCORDION --------------------------------------------------------------------
   .faq-list (homepage teaser) and .shelbys-faq (FAQ owner pages) share the accordion look. Only
   .shelbys-faq is read by the mu-plugin for FAQPage schema, so the homepage carries none. */
.faq-wrap { container: faq / inline-size; }
.faq-teaser { display: grid; gap: var(--flow); }
.faq-teaser__lead { margin-block-start: .5rem; color: var(--ink-2); }
.faq-teaser__all { margin-block-start: var(--flow); }
@container faq (min-width: 56rem) {
.faq-teaser { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6cqi, 5rem); align-items: center; }
}
@media (max-width: 639.98px) {
.faq-teaser__all { inline-size: 100%; }
}
.qa__a > * + * { margin-block-start: .6em; }
.qa__a .more { margin-block-start: .25rem; }
/* 22 MOTION, FORCED COLOURS, PRINT --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cat-card:hover .cat-card__img img { transform: none; }
}
@media (forced-colors: active) {
.disc::after { display: none; }
.cat-card:focus-within { outline: 3px solid Highlight; }
}
@media print {
.next-sale { display: none !important; }
}

/* WordPress build additions ------------------------------------------------ */
/* Empty next-sale card (no sale listed in AuctionForge). */
.sale-card__note { color: var(--c-text-2); font-size: var(--step--1); }

/* AuctionForge's libs.css @imports a Bootstrap reboot site-wide (h1-h6 / p / ul / ol / dl / figure margin-bottom).
   Neutralise it on the homepage at element specificity (0,0,1), loaded later, so every class rule still wins.
   (Site-wide fix requested from foundation in REQUESTS.md.) */
:where(.home-main) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, address, blockquote) { margin-block-end: 0; }

/* Undo two inner-page glue rules from base.css (group-built steps and banner actions) that change the reference
   layout here: step text runs full width under the ring on narrow containers, and the banner's button pair shares
   one row on phones (DESIGN §4.10, §4.11). Reported to foundation in REQUESTS.md. */
.home-main .feature > h3 + p { margin-block-start: 0; }
.home-main .step__body > p { grid-column: 1 / -1; margin-block-start: .375rem; }
@container how (min-width: 62rem) {
  .home-main .step__body > p { grid-column: 2; margin: 0; }
}
@media (max-width: 639.98px) {
  .home-main .banner__copy > .banner__actions--pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; }
}

/* Client feedback 2026-10-13: the whole next-sale bar uses the gold of the logo gavel (#BA9A38, sampled) so the sale + catalogue stand out.
   Text #00005A on #BA9A38 = 6.8:1 (AA); button #00005A with white text = 16+:1. */
.next-sale { background: #BA9A38; border-block-start: 0; --c-focus: var(--blue-deep); }
.next-sale .next-sale__label, .next-sale .next-sale__when, .next-sale .next-sale__what { color: var(--blue-deep); }
.next-sale .next-sale__label::before { background: var(--blue-deep); }
.next-sale .next-sale__btn { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; font-weight: var(--w-bold); }
.next-sale .next-sale__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.next-sale .next-sale__btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }

/* Sale cover thumbnail (Bidspirit auction image; often a tall poster, so crop from the top). */
.next-sale__cover { display: block; flex: none; inline-size: 3.75rem; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid var(--blue-deep); background: var(--blue-deep); }
.next-sale__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; display: block; }
@media (max-width: 1023.98px) {
  .next-sale__inner.has-cover { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .375rem; align-items: center; }
  .has-cover .next-sale__cover { grid-row: 1 / span 2; inline-size: 4.5rem; align-self: start; }
  .has-cover .next-sale__label { align-self: end; }
  .has-cover .next-sale__when { align-self: start; }
  .has-cover .next-sale__what, .has-cover .next-sale__links { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .next-sale__inner.has-cover { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
}

/* Client feedback 2026-10-13: brighter rings (above) and the hero blue fades into the gavel gold so it
   blends into the next-sale bar. The fade is a band between the hero copy and the bar, so white text
   always stays on solid blue. */
.hero { --fade: clamp(2.75rem, 2rem + 2vw, 4rem); }
.hero > .wrap { padding-block-end: .75rem; }
.hero:not(:has(.next-sale)) > .wrap { padding-block-end: 0; }
.next-sale { position: relative; }
.next-sale::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: var(--fade); pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 126 / 0) 0%, rgb(43 44 122 / .55) 35%, rgb(125 108 78 / .9) 75%, #BA9A38 100%); }

/* Client feedback 2026-10-13: keep the gold next-sale bar (incl. its button) above the fold on common
   desktop/laptop screens. The discs + nameplate also scale with viewport HEIGHT on wide screens. */
@media (min-width: 1024px) {
  .hero { --d: min(clamp(8.5rem, max(6rem + 12vw, min(44vw, 11rem)), 20.5rem), calc(26svh + 1rem)); }
  .hero__stage { padding-block-start: 0; }
  .next-sale__inner { padding-block: .875rem; min-block-size: 0; }
  .next-sale__cover { inline-size: 3.25rem; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero { --d: min(clamp(8.5rem, max(6rem + 12vw, min(44vw, 11rem)), 20.5rem), calc(22svh + 1rem)); }
}