/* ============================================================
   Product page — datasheet-forward "technical authority" layout.

   Loads on top of technical.css, which holds everything this layout shares with the listing
   pages: the hero shell, the key-figure strip, the sticky section nav, the section headings,
   the feature and link cards, the FAQ accordion and the downloads list. What remains here is
   product-only — the image gallery, the per-model cards and the specification table.

   Attached automatically to pages of type `product-technical` by TYPE_ASSETS in layout.mjs, so
   it never ships on any other page and site.css is untouched. Every colour, radius and shadow
   below comes from the tokens already defined in site.css.
   ============================================================ */

/* ---------- gallery ---------- */

.ptx-gallery__main {
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 26px;
  display: flex; align-items: center; justify-content: center; min-height: 300px;
}
.ptx-gallery__main img { max-height: 380px; width: auto; object-fit: contain; }
.ptx-gallery__thumbs { margin-top: 16px; }

/* ---------- overview ---------- */

.ptx-overview {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4vw, 60px); align-items: start;
}
.ptx-overview__prose p { color: var(--ink-70); line-height: 1.78; margin-top: 18px; }
.ptx-overview__side {
  background: #fff; border: 1px solid var(--ptx-rule); border-radius: var(--radius-md);
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow-sm);
}
.ptx-checklist { list-style: none; margin-top: 18px; display: grid; gap: 13px; }
.ptx-checklist li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--ink-70); }
.ptx-checklist svg { width: 18px; height: 18px; flex: none; stroke: var(--blue); margin-top: 1px; }

.ptx-callouts {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin-top: clamp(34px, 4vw, 52px);
}
.ptx-callout {
  background: var(--navy); color: #fff; border-radius: var(--radius-md);
  padding: 24px 22px; background-image: var(--band-dark);
}
.ptx-callout svg { width: 26px; height: 26px; stroke: var(--blue-400); margin-bottom: 14px; }
/* site.css colours every h3 navy, which beats inheriting the card's white — state it explicitly. */
.ptx-callout__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 7px; color: #fff; }
.ptx-callout__body { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .76); }

/* ---------- model cards ---------- */

/* Flex, not grid: model counts run 3 to 6 per product, and flex fills the last row instead of
   leaving an orphan card the way a fixed track count would. */
.ptx-models { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.ptx-model {
  flex: 1 1 190px; min-width: 0; max-width: 300px;
  border: 1px solid var(--ptx-rule); border-radius: var(--radius-md); padding: 20px;
  background: #fff; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm);
}
.ptx-model__code {
  font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.ptx-model__specs { display: grid; gap: 9px; }
.ptx-model__specs > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ptx-model__specs dt { font-size: 12.5px; color: var(--grey-500); min-width: 0; }
.ptx-model__specs dd { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: right; }
.ptx-model__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue-600);
}
.ptx-model__cta svg { width: 15px; height: 15px; transition: transform .18s; }
.ptx-model__cta:hover svg { transform: translateX(4px); }

/* ---------- specification table ---------- */

.spec-table__scroll {
  overflow-x: auto; border: 1px solid var(--ptx-rule); border-radius: var(--radius-md);
  background: #fff; box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch;
}
.spec-table__scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; min-width: 760px; }

.spec-table thead th {
  background: var(--navy); color: #fff; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 16px; white-space: nowrap;
}
.spec-table thead th:first-child { text-align: left; }

.spec-table__band th {
  background: #eef3fa; color: var(--navy); text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; border-block: 1px solid var(--ptx-rule);
}
.spec-table tbody th[scope='row'] {
  text-align: left; font-weight: 600; color: var(--navy); width: 232px; min-width: 200px;
  padding: 11px 16px; background: #fbfdff; border-right: 1px solid var(--ptx-rule);
  vertical-align: middle;
}
.spec-table td {
  padding: 11px 16px; text-align: center; color: var(--ink-70);
  border-left: 1px solid rgba(26, 27, 96, .06); vertical-align: middle;
}
.spec-table tbody tr + tr { border-top: 1px solid rgba(26, 27, 96, .07); }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th[scope='row'] { background: var(--blue-50); }
.spec-table__band:hover th { background: #eef3fa; }

/* The label column stays put while the model columns scroll. */
@supports (position: sticky) {
  .spec-table thead th:first-child,
  .spec-table tbody th[scope='row'] { position: sticky; left: 0; z-index: 1; }
  .spec-table thead th:first-child { z-index: 2; }
  .spec-table__band th { position: static; }
}

.spec-table__na { color: var(--grey); cursor: help; }
.spec-table__note { margin-top: 14px; font-size: 12.5px; color: var(--grey-500); line-height: 1.6; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .ptx-overview { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ptx-gallery__main { padding: 18px; min-height: 220px; }
  .ptx-gallery__main img { max-height: 260px; }
  .spec-table tbody th[scope='row'] { width: 150px; min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .ptx-model__cta svg { transition: none; }
}

@media print {
  .ptx-model__cta { display: none; }
  .spec-table__scroll { overflow: visible; border: 0; box-shadow: none; }
  .spec-table { min-width: 0; font-size: 10pt; }
}