/* ==========================================================================
   Machine card component (round 15.6, 2026-10-15). The ONE source of truth
   for machine cards, the field they sit on and their grid. Markup:
   templates/partials/machine_card.html. Values are the Home cards as of
   r15.5 (the October landing card), consolidated from the 15 rounds of
   rules they replaced. Tokens only; 8px grid (4 only inside the component).
   ========================================================================== */

/* ---------- The field and the grid (the Home sections' graphite panel) ---------- */
.machine-panel {
  --panel-pad: var(--s-4);
  position: relative; padding: var(--panel-pad);
  background-color: var(--c-field-graphite);
}
.machine-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.machine-grid__item { display: flex; }
.machine-grid__item[hidden] { display: none; }
@media (max-width: 1200px) { .machine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .machine-panel { --panel-pad: var(--s-2); } }
@media (max-width: 560px) { .machine-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }
/* In a carousel (the "More crushers" row on model pages): the track runs
   between the keys, its end matching its start, with room above and below
   for the card shadow; on a phone the field bleeds to the screen edges and
   the keys go (swipe). Values carried over from the retired .panel rules. */
.machine-panel--carousel { padding-top: var(--s-2); padding-bottom: var(--s-1); }
@media (min-width: 641px) {
  .js .machine-panel--carousel { padding-left: calc(var(--key-w) + var(--panel-pad)); padding-right: calc(var(--key-w) + var(--panel-pad)); }
}
@media (max-width: 640px) {
  .machine-panel--carousel { margin: 0 calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter) 0; }
}
@supports selector(:has(*)) {
  .machine-panel--carousel:has(> .carousel__track:focus-visible) { outline: var(--focus); outline-offset: var(--s-1); }
  .machine-panel--carousel > .carousel__track:focus-visible { outline: none; }
}

/* ---------- The card ---------- */
.machine-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%;
  background: var(--c-white); color: var(--c-charcoal);
  border: var(--stroke-w) solid var(--c-card-edge);
  box-shadow: var(--shadow-card-raised);
  transition: transform var(--dur-button-out) var(--ease-button), box-shadow var(--dur-button-out) var(--ease-button),
              border-color var(--dur-button-out) var(--ease-button);
}
.machine-card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--shadow-card-lifted); transition-duration: var(--dur-button-in); }
.machine-card:active { transform: translateY(0); box-shadow: var(--shadow-card-raised); transition-duration: var(--dur-button-press); }
/* focus: the ring round the whole card (white on the graphite field) */
.machine-card:focus-within { outline: var(--focus); outline-offset: 3px; }
.machine-panel .machine-card:focus-within { outline-color: var(--c-white); }
@supports selector(:has(*)) {
  .machine-card:focus-within { outline: none; }
  .machine-card:has(:focus-visible) {
    outline: var(--focus); outline-offset: 3px;
    transform: translateY(var(--card-lift)); box-shadow: var(--shadow-card-lifted); transition-duration: var(--dur-button-in);
  }
  .machine-panel .machine-card:has(:focus-visible) { outline-color: var(--c-white); }
}

/* ---------- Picture: 4:3. Renders contained on stone; photos fill ---------- */
.machine-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-charcoal); }
@supports not (aspect-ratio: 1 / 1) {
  .machine-card__media::before { content: ""; display: block; padding-top: 75%; }
}
.machine-card__media--render, .machine-card__media--tile { background: var(--c-stone); }
.machine-card__media--render > picture { position: absolute; inset: var(--s-5) var(--s-2) var(--s-2); }
.machine-card__media--render > picture > img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 60%; }
.machine-card__media--photo > picture, .machine-card__media--photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.machine-card__media--photo > picture > img { object-fit: cover; }
/* a sibling model's picture is always labelled as such (Chris, Oct 15) */
.machine-card__similar {
  position: absolute; left: var(--s-1); bottom: var(--s-1); z-index: 1;
  padding: var(--s-half) var(--s-1); background: var(--c-charcoal); color: var(--c-white);
  font-size: var(--fs-micro); font-weight: var(--w-semibold); line-height: 1.33;
}

/* ---------- Body ---------- */
.machine-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--s-2) var(--s-3) var(--s-3); }
.machine-card__title { font-family: var(--f-display); font-weight: 800; font-size: inherit; text-transform: uppercase; color: var(--c-charcoal); }
.machine-card__name { display: block; font-size: 24px; line-height: 0.92; text-wrap: balance; }
.machine-card__link { text-decoration: none; color: inherit; }
.machine-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.machine-card__link:focus-visible { outline: none; }
.machine-card__pills { margin-top: var(--s-2); }
.machine-card__desc { margin-top: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-snug); }
/* New: the one key spec, Anaconda's published figure */
.machine-card__spec { margin-top: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-snug); }
.machine-card__spec-label { color: var(--c-muted); }
.machine-card__spec-value { font-weight: var(--w-semibold); white-space: nowrap; }

/* ---------- Foot: the tag on the left, View on the right ---------- */
.machine-card__foot { margin-top: auto; padding-top: var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.machine-card__price { white-space: nowrap; line-height: 1; }
.machine-card__quote { position: relative; z-index: 3; display: inline-flex; text-decoration: none; }
.machine-card__quote .price-tag { transition: background-color var(--dur-button-out) var(--ease-button); }
.machine-card__quote:hover .price-tag { background: var(--c-red-deep); transition-duration: var(--dur-button-in); }
.machine-card__quote:focus-visible { outline: var(--focus); outline-offset: 2px; }
.machine-card__view {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-small); font-weight: var(--w-semibold); line-height: 1.2; color: var(--c-charcoal);
  transition: color var(--dur-button-out) var(--ease-button);
}
.machine-card__view svg { width: var(--icon); height: var(--icon); transition: transform var(--dur-button-out) var(--ease-button); }
.machine-card:hover .machine-card__view, .machine-card:focus-within .machine-card__view { color: var(--c-red); transition-duration: var(--dur-button-in); }
.machine-card:hover .machine-card__view svg, .machine-card:focus-within .machine-card__view svg { transform: translateX(var(--nudge)); transition-duration: var(--dur-button-in); }

/* ---------- Reduced motion: colour only ---------- */
@media (prefers-reduced-motion: reduce) {
  .machine-card, .machine-card:hover, .machine-card:active,
  .machine-card .machine-card__view svg { transform: none !important; }
  .machine-card { transition-property: color, background-color, border-color, box-shadow !important; }
}
@media (prefers-reduced-motion: reduce) {
  @supports selector(:has(*)) { .machine-card:has(:focus-visible) { transform: none !important; } }
}

/* ---------- Round 15.8 (Chris: "warm cream colour from the hero ... renders
   with cream background"): New = the catalogue machine. New grids sit on
   the hero's cream (--c-page-alt) with no dark field; each New card's
   picture tile is a step lighter (--c-page, #fbf9f5) so the card separates
   from the section. Anaconda's studio renders sit on it with the hero's
   soft ground shadow. Where Anaconda has no render, its photo is inset on
   the same tile as a framed print (no invented renders). Used stays as is:
   full-bleed photos on the graphite field. ---------- */
.section--cream { background: var(--c-page-alt); }
.machine-panel--new { background-color: transparent; padding: 0; }
.machine-panel--new.machine-panel--carousel { padding-top: var(--s-1); padding-bottom: 0; }
.machine-panel--new .machine-card:focus-within { outline-color: var(--c-charcoal); }
@supports selector(:has(*)) { .machine-panel--new .machine-card:has(:focus-visible) { outline-color: var(--c-charcoal); } }
.machine-card--new .machine-card__media { background: var(--c-page); }
.machine-card--new .machine-card__media--render::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: var(--s-2); height: 12%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(18, 20, 22, 0.26), rgba(18, 20, 22, 0.08) 62%, rgba(18, 20, 22, 0));
}
.machine-card--new .machine-card__media--render > picture { z-index: 1; }
.machine-card--new .machine-card__media--photo > picture { inset: var(--s-3); width: auto; height: auto; }
.machine-card--new .machine-card__media--photo > picture > img { box-shadow: 0 1px 2px rgba(18, 20, 22, 0.16), 0 6px 16px rgba(18, 20, 22, 0.12); }

/* ---------- Round 15.9 (Chris: "do this for used equipment as well, but
   give the background a slightly different colour"): Used grids float on
   --c-stone (#e6e6e3), a step darker and cooler than New's cream
   (--c-page-alt, #f0eee8), so the two read as distinct when stacked. No
   dark field. Used photos still fill the tile edge to edge. ---------- */
.section--stone { background: var(--c-stone); }
.machine-panel--used { background-color: transparent; padding: 0; }
.machine-panel--used .machine-card:focus-within { outline-color: var(--c-charcoal); }
@supports selector(:has(*)) { .machine-panel--used .machine-card:has(:focus-visible) { outline-color: var(--c-charcoal); } }

/* ---------- Round 18 (2026-10-17): PUSH on the price tag ---------- */
/* the price tag GET A QUOTE on every machine card: its notch is a
   clip-path (and the eyelet a mask), so the 3px base is a pseudo-element
   behind the tag with the same outline. The base's own mask carries a
   slot where the eyelet travels, so the eyelet still shows what is behind
   it. Hover sinks 1px, pressed the full 3px (as on the sheet). */
.machine-card__quote { margin-bottom: var(--tag-base); transform: translateY(0); transition: transform var(--dur-button-out) var(--ease-button); }
.machine-card__quote .price-tag { min-height: calc(var(--tag-h) - var(--tag-base)); }
.machine-card__quote::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;
  background: var(--c-red-deep);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  -webkit-mask: radial-gradient(4px 5px at 13px calc(50% - 1.5px), transparent 96%, #000 100%);
          mask: radial-gradient(4px 5px at 13px calc(50% - 1.5px), transparent 96%, #000 100%);
  transform: translateY(var(--tag-base));
  transition: transform var(--dur-button-out) var(--ease-button);
}
.machine-card__quote:hover .price-tag, .machine-card__quote:focus-visible .price-tag { background: var(--c-red); }
.machine-card__quote:hover, .machine-card__quote:focus-visible { transform: translateY(1px); transition-duration: var(--dur-button-in); }
.machine-card__quote:hover::before, .machine-card__quote:focus-visible::before { transform: translateY(calc(var(--tag-base) - 1px)); transition-duration: var(--dur-button-in); }
.machine-card__quote:active { transform: translateY(var(--tag-base)); transition-duration: var(--dur-button-press); }
.machine-card__quote:active::before { transform: translateY(0); transition-duration: var(--dur-button-press); }

@media (prefers-reduced-motion: reduce) {
  .machine-card__quote, .machine-card__quote::before { transition: none !important; }
  .machine-card__quote:hover, .machine-card__quote:focus-visible, .machine-card__quote:active { transform: none; }
  .machine-card__quote:hover::before, .machine-card__quote:focus-visible::before, .machine-card__quote:active::before { transform: translateY(var(--tag-base)); }
  .machine-card__quote:hover .price-tag, .machine-card__quote:focus-visible .price-tag { filter: brightness(0.9); }
  .machine-card__quote:active .price-tag { filter: brightness(0.84); }
}

/* ---------- Round 19 (Chris, Oct 17: "live photos give more texture than
   the stand alone machines. Let's always use a photo, make them full bleed
   in the card too"): every New card is an in-the-field photo, edge to edge
   in the 4:3 box. No inset, no cream mat, no print shadow. ---------- */
.machine-card--new .machine-card__media--photo { background: var(--c-charcoal); }
.machine-card--new .machine-card__media--photo > picture { inset: 0; width: 100%; height: 100%; }
.machine-card--new .machine-card__media--photo > picture > img { box-shadow: none; }

/* ---------- Round 39 (Chris, Oct 18, phones: "let's do 2x2 machines ...
   It's scrolling way too long"): on Home and the New equipment pages (the
   index and each category, the cream collection sections) the grid is two
   across from 640 down, so the four before Show More read as 2x2. The card
   is the same component, tightened for half a phone: 16 between cards, the
   body 8/12/16, the name 18 (it may wrap to two lines), the line under it
   one step smaller (12), the price tag 14, and View is dropped (it was
   decorative; the whole card is the link, so the tap target is the card).
   Used equipment's own page keeps one card per row. Round 41 (Chris,
   decision 9): the Used equipment page is 2x2 too. ---------- */
@media (max-width: 640px) {
  .page-home .machine-grid,
  .section--cream.grid-section--collection .machine-grid, .section--stone.grid-section--collection .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .page-home .machine-card__body,
  .section--cream.grid-section--collection .machine-card__body, .section--stone.grid-section--collection .machine-card__body { padding: var(--s-1) 12px var(--s-2); }
  .page-home .machine-card__name,
  .section--cream.grid-section--collection .machine-card__name, .section--stone.grid-section--collection .machine-card__name { font-size: 18px; line-height: 0.95; }
  .page-home .machine-card__pills,
  .section--cream.grid-section--collection .machine-card__pills, .section--stone.grid-section--collection .machine-card__pills { margin-top: var(--s-1); }
  .page-home .machine-card__desc, .page-home .machine-card__spec,
  .section--cream.grid-section--collection .machine-card__desc, .section--stone.grid-section--collection .machine-card__desc,
  .section--cream.grid-section--collection .machine-card__spec, .section--stone.grid-section--collection .machine-card__spec { margin-top: var(--s-1); font-size: var(--fs-micro); }
  .page-home .machine-card__foot,
  .section--cream.grid-section--collection .machine-card__foot, .section--stone.grid-section--collection .machine-card__foot { padding-top: var(--s-1); }
  .page-home .machine-card__view,
  .section--cream.grid-section--collection .machine-card__view, .section--stone.grid-section--collection .machine-card__view { display: none; }
  .page-home .machine-card .price-tag,
  .section--cream.grid-section--collection .machine-card .price-tag, .section--stone.grid-section--collection .machine-card .price-tag { font-size: 14px; padding: 0 var(--s-1) 0 calc(var(--tag-point) + var(--s-1)); }
}