/* =========================================================================
   Kiosk model pages - /ticket-redemption-kiosks/[model]/
   Loaded after kiosks.css, which supplies the hero label, the lineup card
   art and the fixed-column feature grids. This file holds what only a
   model page has: the sibling comparison, the dimensioned drawing, the
   "best suited for" panels and the row of the other five models.
   ========================================================================= */

/* ---------- The sibling choice ----------------------------------------
   The two models an operator is choosing between, spec by spec, beside a
   payout time worked out from each one's rated dispense speed. */
.sibling {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: var(--sp-9);
}
.vs { width: 100%; border-collapse: collapse; font: var(--text-body-sm); color: var(--text-primary); }
.vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs th, .vs td { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-default); }
.vs thead th { font: var(--text-h4); color: var(--text-primary); border-bottom-color: var(--border-strong); }
.vs thead th.is-this { color: var(--text-brand); }
.vs tbody th { font-weight: var(--fw-medium); color: var(--text-secondary); width: 34%; }
.vs td { font-variant-numeric: tabular-nums; }
.vs td b { font-weight: var(--fw-bold); }
.vs td.is-same { color: var(--text-secondary); }
.vs td.is-pending { color: var(--text-tertiary); }

.race {
  display: grid; gap: var(--sp-5); padding: var(--card-pad);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}
.race h3 { font: var(--text-h4); }
.race__row { display: grid; gap: var(--sp-2); }
.race__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); font: var(--text-body-sm); color: var(--text-secondary); }
.race__head b { font: var(--text-spec); color: var(--text-primary); }
.race__bar { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--n-100); overflow: hidden; }
.race__bar i { display: block; height: 100%; width: var(--fill, 0%); border-radius: var(--radius-pill); background: var(--motif-rule-accent); }
.race__bar i.is-other { background: var(--border-strong); }
.race p { font: var(--text-caption); color: var(--text-tertiary); }

@media (prefers-reduced-motion: no-preference) {
  .race__bar i { width: 0; transition: width 900ms var(--ease-out) 220ms; }
  .race.reveal[data-inview="true"] .race__bar i { width: var(--fill, 0%); }
}

@media (max-width: 860px) {
  .sibling { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Full specs beside the dimensioned drawing ------------------ */
.model-specs {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: var(--sp-10);
}
.model-specs .spec-cols { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* The drawing: front and side views rendered from the 3D model on a
   near-orthographic camera and trimmed to the cabinet's own edges, so the
   dimension lines drawn along each image are the real extents. Both images
   share one height (--elev-h), which keeps the two views at one scale. */
.elev { --elev-h: 500px; margin: 0; display: grid; gap: var(--sp-6); justify-items: center; }
.elev__views { display: flex; align-items: flex-start; gap: 64px; }
.elev__view { display: grid; grid-template-columns: auto; justify-items: center; row-gap: var(--sp-3); }
.elev__view--front { grid-template-columns: 14px auto; column-gap: var(--sp-3); }
.elev__view--front .dim--h { grid-row: 1; grid-column: 1; }
.elev__view--front .elev__art { grid-row: 1; grid-column: 2; }
.elev__view--front .dim--w, .elev__view--front .elev__name { grid-column: 2; }
.elev__art { position: relative; }
.elev__art img { display: block; height: var(--elev-h); width: auto; max-width: none; }
.elev__name { font: var(--text-caption); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--ls-overline); }

/* Dimension lines: a hairline with end stops, the figure breaking it. */
.dim { position: relative; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font: var(--text-spec); font-size: var(--fs-caption); white-space: nowrap; }
.dim::before { content: ""; position: absolute; border: 0 solid var(--border-strong); }
.dim span { position: relative; background: var(--surface-page); }
.dim--w { width: 100%; height: 14px; border-inline: 1px solid var(--border-strong); }
.dim--w::before { inset-inline: 0; inset-block-start: 50%; border-top-width: 1px; }
.dim--w span { padding-inline: 6px; }
.dim--h { width: 14px; height: var(--elev-h); border-block: 1px solid var(--border-strong); }
.dim--h::before { inset-block: 0; inset-inline-start: 50%; border-left-width: 1px; }
.dim--h span { padding-block: 6px; writing-mode: vertical-rl; transform: rotate(180deg); }

/* Callouts: a numbered marker just right of the cabinet, with a leader
   running back to the part. --aspect on .elev__art is the front view's
   width / height; a pin's --x is how far across the cabinet its part sits
   (0 left edge, 1 right edge, default the centre line). */
.elev__pins { --aspect: .215; margin: 0; padding: 0; list-style: none; }
.elev__pins li { --lead: calc(var(--elev-h) * var(--aspect) * (1 - var(--x, .5)) + 12px); }
.elev__pins li {
  position: absolute; inset-block-start: var(--y); inset-inline-start: calc(100% + 12px); translate: 0 -50%;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gradient-mark); color: var(--text-on-brand); font: var(--text-caption); font-weight: var(--fw-bold);
}
.elev__pins li::before {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 100%;
  width: var(--lead); border-top: 1px solid var(--red-500);
}
.elev__pins li::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(100% + var(--lead) - 4px);
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 2px var(--surface-page);
}
.elev__key { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: pin; width: 100%; max-width: 360px; }
.elev__key li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; font: var(--text-body-sm); color: var(--text-secondary); counter-increment: pin; }
.elev__key li::before {
  content: counter(pin); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gradient-mark); color: var(--text-on-brand); font: var(--text-caption); font-weight: var(--fw-bold);
}
.elev__key b { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* Countertop kiosks are nearly as wide as they are tall, so their two views
   can't sit side by side in the drawing column: they wrap, front above side,
   and sit side by side again once the column is wide enough (single-column layouts). */
.elev--wide { --elev-h: 260px; }
/* The callout markers hang 36px past the front view; count them when centring. */
.elev--wide .elev__view--front { padding-inline-end: 36px; }
.elev--wide .elev__views { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-7); }

@media (max-width: 1100px) {
  .model-specs { grid-template-columns: minmax(0, 1fr); }
  .elev { justify-self: center; }
}
@media (max-width: 520px) {
  .elev { --elev-h: 380px; }
  .elev__views { gap: 52px; }
  .elev--wide { --elev-h: 240px; }
}

/* ---------- Best suited for -------------------------------------------- */
.fit {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--sp-9);
}
.fit__panel {
  display: grid; gap: var(--sp-5); align-content: start; padding: var(--card-pad);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}
.fit__panel h3 { font: var(--text-h3); }
.fit__panel--yes { border-color: var(--red-500); box-shadow: 0 0 0 1px var(--red-500), var(--shadow-sm); }
.fit__panel ul { display: grid; gap: var(--sp-3); margin: 0; padding-inline-start: 20px; list-style: disc; font: var(--text-body); color: var(--text-secondary); }
.fit__panel li::marker { color: var(--text-brand); }
.fit__panel a { color: var(--text-brand); font-weight: var(--fw-semibold); }

/* The cassette options, drawn as the stack of 500-bill cassettes inside. */
.cassettes { display: flex; flex-wrap: wrap; gap: var(--sp-7); margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle); }
.cassettes > div { display: grid; grid-template-columns: 64px auto; gap: var(--sp-4); align-items: end; }
.cassettes .stack { display: grid; gap: 3px; }
.cassettes .stack i { display: block; height: 12px; border-radius: 3px; background: var(--n-100); border: 1px solid var(--border-subtle); }
.cassettes .stack i.is-on { background: var(--motif-rule-accent); border-color: transparent; }
.cassettes dt { font: var(--text-caption); color: var(--text-tertiary); }
.cassettes dd { margin: 0; font: var(--fw-extrabold) 26px/1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cassettes .fig { display: flex; flex-direction: column-reverse; gap: var(--sp-1); }

@media (max-width: 860px) {
  .fit { grid-template-columns: minmax(0, 1fr); }
}
/* Three options (the F600's 3, 4 or 6) don't fit side by side on a phone,
   so each one puts its figure under its stack and they share the row. */
@media (max-width: 520px) {
  .cassettes:has(> :nth-child(3)) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .cassettes:has(> :nth-child(3)) > div { grid-template-columns: minmax(0, 1fr); align-content: end; }
  .cassettes:has(> :nth-child(3)) .stack { width: 56px; }
}

/* ---------- The other five models --------------------------------------
   The hub's lineup card, cut down to the art, the name and one line. */
.others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-9); }
/* Art, name, one line, link: the line takes the slack, so every card's
   name and link sit at the same height across the row. */
.others .kiosk { gap: var(--sp-4); --card-pad: var(--sp-5); grid-template-rows: auto auto 1fr auto; }
.others .kiosk__go { display: block; }
.others .kiosk__go .i { display: inline; vertical-align: -3px; margin-inline-start: 4px; }
.others .kiosk__id b { font-size: 26px; }
.others .kiosk__go { font-size: var(--fs-body-sm); }
.section-head__more { font: var(--text-button); color: var(--text-brand); display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others .kiosk__art { aspect-ratio: 3 / 4; }
}