/*
==================================================================
BIOMETRIC DEVICE PAGES
Shared by finger-print-terminals.html, face-recognition.html,
rfid-card-readers.html and ess-kiosk-machines.html.

One device = one row: product shot on one side, name + summary +
spec list on the other, alternating down the page. Devices appear
on every category page they genuinely belong to, so the same row
markup is reused across pages.
==================================================================
*/

/* ==================================================================
   CATEGORY NAV — the four device pages are siblings, so each one
   carries links to the other three.
   ================================================================== */
.tt-dv-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tt-dv-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  color: var(--tt-dark);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-dv-nav-link i { color: var(--tt-primary); font-size: 0.9rem; }
.tt-dv-nav-link:hover {
  color: var(--tt-primary);
  border-color: rgba(var(--tt-primary-rgb), 0.4);
}
.tt-dv-nav-link.is-current {
  background: var(--tt-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--tt-primary-rgb), 0.75);
}
.tt-dv-nav-link.is-current i { color: #fff; }

/* ==================================================================
   DEVICE ROW
   ================================================================== */
/* Deep-link landing. The mega menu's device rows jump straight to a card
   (/ess-kiosk/#canteen-terminal and friends), and the header is fixed - so
   without this the card lands UNDER the navbar and the visitor sees the middle
   of the previous device. Same expression as .tt-hp-title[id] in hrms-page.css,
   deliberately: one house value for "clear the header on a jump".

   --tt-header-height is referenced by six stylesheets and defined by none, so
   it resolves to the 96px fallback. That is the desktop header, and it is a
   known, accepted approximation on mobile - see the note in CLAUDE.md. Scoped
   to [id] because only the cards that are link targets need it. */
.tt-dv-device[id] {
  scroll-margin-top: calc(var(--tt-header-height, 96px) + 1.5rem);
}

.tt-dv-device {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.tt-dv-device + .tt-dv-device { border-top: 1px solid var(--tt-border); }

/* Alternate which side the product shot sits on. */
.tt-dv-device:nth-child(even) .tt-dv-media { order: 2; }

/* ---------- Product shot ---------- */
.tt-dv-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-radius: 20px;
  background: rgba(243, 244, 246, 0.9);
  border: 1px solid var(--tt-border);
}
.tt-dv-media::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}
/* Product shots are cut-outs of very different proportions - a tall kiosk next
   to a small wall terminal. A fixed box with object-fit: contain gives them a
   consistent footprint instead of the kiosk dwarfing everything else. */
.tt-dv-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(220px, 26vw, 340px);
  object-fit: contain;
}

/* ---------- Copy ---------- */
.tt-dv-name {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: var(--tt-fs-h3);
  color: var(--tt-dark);
  margin: 0 0 0.75rem;
}
.tt-dv-blurb {
  font-size: var(--tt-fs-body);
  line-height: 1.75;
  color: var(--tt-muted);
  margin: 0 0 1.35rem;
}

/* Spec list. Two columns on wide screens - these run to 11 rows and a single
   column pushes the product shot far off centre. */
.tt-dv-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}
.tt-dv-specs.tt-dv-specs-1col { grid-template-columns: minmax(0, 1fr); }

.tt-dv-specs li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--tt-fs-body-sm);
  line-height: 1.6;
  color: var(--tt-muted);
}
.tt-dv-specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tt-primary);
}
.tt-dv-specs b {
  color: var(--tt-dark);
  font-weight: 600;
}

.tt-dv-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: var(--tt-gradient-primary);
  color: #fff;
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(var(--tt-primary-rgb), 0.8);
  transition: var(--tt-transition-standard);
}
.tt-dv-cta:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 991.98px) {
  .tt-dv-device {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  /* Product shot always first once stacked - the alternating order only
     makes sense side by side. */
  .tt-dv-device:nth-child(even) .tt-dv-media { order: 0; }
  .tt-dv-media img { height: clamp(200px, 42vw, 280px); }
}

@media (max-width: 575.98px) {
  .tt-dv-specs { grid-template-columns: minmax(0, 1fr); }
  .tt-dv-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-dv-cta, .tt-dv-nav-link { transition: none; }
  .tt-dv-cta:hover { transform: none; }
}