/* =========================================================================
   Ticket Redemption Kiosks - the hub, /ticket-redemption-kiosks/, and the
   model pages under it (which add kiosk-model.css)
   The F600-V spotlight, the lineup cards with product art, the comparison
   table and the related-post cards. The hero, facts, feature grid, flow,
   FAQ and quote form are shared components from site.css.
   ========================================================================= */

/* ---------- Hero: the newest model is labelled on the still ------------- */
.product-hero__art { position: relative; }
.product-hero__art figcaption { position: absolute; inset-block-start: 9%; inset-inline-start: 12%; }

/* ---------- F600-V spotlight ------------------------------------------- */
.spot {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 72px); align-items: center;
}
.spot__art { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.spot__art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.spot__copy { display: grid; gap: var(--sp-6); justify-items: start; }
.spot__copy h2 { font: var(--text-display-md); letter-spacing: var(--ls-display); text-wrap: balance; }
.spot__copy .lead { max-width: 56ch; }
/* Four figures an operator weighs, set like the quick-facts strip. */
.spot__figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; width: 100%;
  background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden;
}
.spot__figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--sp-1); padding: var(--sp-5); background: var(--surface-raised); }
.spot__figs dt { font: var(--text-body-sm); color: var(--text-secondary); }
.spot__figs dd { margin: 0; font: var(--fw-extrabold) clamp(22px, 2.2vw, 28px)/1.1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.spot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.spot__links > a:not(.btn) { font: var(--text-button); color: var(--text-brand); }

@media (max-width: 860px) {
  .spot { grid-template-columns: minmax(0, 1fr); }
  .spot__art { max-width: 300px; }
}
@media (max-width: 440px) {
  .spot__figs { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Lineup ------------------------------------------------------
   The home page's kiosk card, with the product itself on top. Grouped by
   where the kiosk goes, because that is the first thing an operator rules
   out. Both groups share one four-column track, so every card is the same
   width and the countertop pair lines up under the first two standups. */
.lineup { margin-top: var(--sp-10); display: grid; gap: var(--sp-10); }
.lineup__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-default); }
.lineup__label h3 { font: var(--text-h3); }
.lineup__label p { font: var(--text-body-sm); color: var(--text-secondary); }
.lineup .kiosks { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sp-6); }
.kiosk__art {
  display: grid; place-items: end center; aspect-ratio: 3 / 4; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  background: var(--surface-subtle); border-bottom: 1px solid var(--border-subtle);
}
.kiosk__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kiosk__art .i { align-self: center; color: var(--border-strong); }
.kiosk--featured { border-color: var(--red-500); box-shadow: 0 0 0 1px var(--red-500), var(--shadow-sm); }
/* Four across leaves too little width for a label and a value on one line,
   so in the lineup each spec stacks: label above, value below. */
.lineup .kiosk__meter-head { flex-wrap: wrap; row-gap: 2px; }
.lineup .kiosk__spec > span { flex-direction: column; justify-content: flex-start; gap: 2px; }
.lineup .kiosk__spec > span > span:last-child { text-align: left; }

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

/* ---------- Comparison table ------------------------------------------
   Kept from the live page, which ranks on it. Models run across, specs
   down, and the label column stays put while the models scroll sideways
   on a phone. Each model's column header carries the live page's old
   anchor, so existing links (#f-600, #e-450-ex …) still land on it. */
.cmp-wrap {
  margin-top: var(--sp-9); overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}
.cmp { width: 100%; min-width: 920px; border-collapse: collapse; font: var(--text-body-sm); color: var(--text-primary); }
.cmp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp th, .cmp td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.cmp tr:last-child > * { border-bottom: 0; }
.cmp thead th { background: var(--surface-subtle); white-space: nowrap; }
/* The model name carries the anchor id: Chrome ignores scroll-margin on a
   table cell, so the offset that clears the fixed header lives here. */
.cmp thead th b { display: block; font: var(--text-h4); scroll-margin-top: calc(var(--header-h) + 40px); }
.cmp thead th span { display: block; margin-top: 2px; font: var(--text-caption); color: var(--text-tertiary); }
.cmp tbody th { font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap; }
.cmp td { font-variant-numeric: tabular-nums; }
.cmp td.is-pending { color: var(--text-tertiary); }
.cmp th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface-raised); box-shadow: 1px 0 0 var(--border-subtle); }
.cmp thead th:first-child { background: var(--surface-subtle); }
.cmp .is-featured { background: var(--red-50); }
.cmp thead th.is-featured { box-shadow: inset 0 3px 0 var(--red-500); background: var(--red-50); }
.cmp a { font: var(--text-button); color: var(--text-brand); white-space: nowrap; }
.cmp-note { margin-top: var(--sp-4); font: var(--text-caption); color: var(--text-tertiary); }

/* ---------- Related posts ---------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin: var(--sp-9) 0 0; padding: 0; list-style: none; }
.post {
  display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; text-decoration: none; color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.post img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.post div { display: grid; gap: var(--sp-3); align-content: start; padding: var(--card-pad); }
.post b { font: var(--text-h4); text-wrap: balance; }
.post p { font: var(--text-body-sm); color: var(--text-secondary); }
.post span { display: inline-flex; align-items: center; gap: 8px; font: var(--text-button); color: var(--text-brand); }

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

/* ---------- Feature grids with a fixed column count -------------------- */
.features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .features--4, .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .features--4, .features--3 { grid-template-columns: minmax(0, 1fr); }
}