/* =============================================================================
   Product page (views/pages/products/detail.php), loaded only there.

   The page answers two questions — does this unit meet my specification, and
   how do I get a price — for consultants who read it the way they read a
   submittal. So: the rated figures first and large, a bar that says where each
   part of the page is, specifications that print as a clean sheet, and the
   engineers one tap from the questions. Shared components (def-list, spec-cols,
   variants, cert entries, the rail) keep their rules in site.css; this file
   only sets what is particular to this page. Logical properties throughout,
   except where the script measures physical offsets (the nav bar).
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.pd-hero {
  padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem) clamp(2.5rem, 1.4rem + 3.5vw, 5rem);
}
.pd-hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .pd-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }
}
.pd-hero__media {
  min-inline-size: 0;
}
/* Stacked (a tablet): the picture would otherwise run the full width and push
   the name below the fold, so it is held to a size that leaves both in view. */
@media (max-width: 899px) {
  .pd-hero__media {
    inline-size: min(100%, 32rem);
    margin-inline: auto;
  }
}
.pd-hero__media img {
  inline-size: 100%;
}
.pd-hero__body {
  min-inline-size: 0;
  container: pd-body / inline-size;
}
.pd-hero__title {
  margin-block: var(--eme-space-1) var(--eme-space-4);
  font-size: var(--eme-step-5);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.pd-hero__lead {
  max-inline-size: 44ch;
  margin-block-end: var(--eme-space-6);
  font-size: var(--eme-step-2);
  line-height: 1.5;
  color: var(--eme-graphite);
}

/* The rating plate: the four figures that decide whether the unit is in the
   running, each in its own cell under a heavy top edge that starts in red,
   the way the rule starts under every eyebrow on the site. */
.pd-plate {
  --cell-pad: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--eme-space-6);
  border-block-start: 2px solid var(--eme-obsidian);
}
.pd-plate::before {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: 2.75rem;
  block-size: 2px;
  background: var(--eme-red);
}
.pd-plate__cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-inline-size: 0;
  padding-block: var(--cell-pad);
  padding-inline: 0 var(--cell-pad);
  border-block-end: 1px solid var(--eme-line);
}
.pd-plate__cell:nth-child(even) {
  padding-inline-start: var(--cell-pad);
  border-inline-start: 1px solid var(--eme-line);
}
/* Three figures: the last one takes the whole row rather than leaving a hole. */
.pd-plate__cell:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.pd-plate dt {
  font-size: var(--eme-step--1);
  line-height: 1.4;
  color: var(--eme-text-muted);
}
.pd-plate dd {
  margin: 0;
  font-size: var(--eme-step-2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--eme-text);
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
/* A narrow column (a phone): one figure per row, label beside value. */
@container pd-body (max-width: 26rem) {
  .pd-plate {
    grid-template-columns: minmax(0, 1fr);
  }
  .pd-plate__cell,
  .pd-plate__cell:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--eme-space-3);
    padding-block: 0.85rem;
    padding-inline: 0;
    border-inline-start: 0;
  }
  .pd-plate dd {
    font-size: var(--eme-step-1);
  }
}

.pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eme-space-3);
}
.pd-hero__jump svg {
  flex: none;
  transition: transform 320ms var(--eme-ease-out);
}
.pd-hero__jump:hover svg {
  transform: translateY(3px);
}

/* Arrival: the machine settles into place and the words rise in after it. The
   picture is on screen from the first frame (it is the page's largest paint),
   so only its scale moves; nothing waits on the animation to be readable. */
@media (prefers-reduced-motion: no-preference) {
  .pd-hero__media img {
    animation: pd-settle 1.4s var(--eme-ease-out) both;
  }
  .pd-hero__body > * {
    animation: pd-rise 0.8s var(--eme-ease-out) both;
  }
  .pd-hero__body > :nth-child(2) { animation-delay: 70ms; }
  .pd-hero__body > :nth-child(3) { animation-delay: 140ms; }
  .pd-hero__body > :nth-child(4) { animation-delay: 210ms; }
  .pd-hero__body > :nth-child(5) { animation-delay: 280ms; }
  .pd-hero__body > :nth-child(6) { animation-delay: 350ms; }
  .pd-plate::before {
    transform-origin: 0 50%;
    animation: pd-draw 0.9s 0.35s var(--eme-ease-out) both;
  }
  html[dir="rtl"] .pd-plate::before {
    transform-origin: 100% 50%;
  }
}
@keyframes pd-settle {
  from { scale: 1.04; }
}
@keyframes pd-rise {
  from { opacity: 0; translate: 0 14px; }
}
@keyframes pd-draw {
  from { transform: scaleX(0); }
}

/* ----------------------------------------------------- on this page */
.pd-nav {
  --pd-nav-link-h: 3.25rem;
  position: relative;
  background: var(--eme-bg);
  border-block: 1px solid var(--eme-line);
  transition: box-shadow var(--eme-med) var(--eme-ease);
}
.pd-nav__inner {
  position: relative;
}
.pd-nav__list {
  display: flex;
  gap: clamp(1.25rem, 0.7rem + 1.8vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-nav__list::-webkit-scrollbar {
  display: none;
}
.pd-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--pd-nav-link-h);
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--eme-text-muted);
  transition: color var(--eme-fast) var(--eme-ease);
}
html[lang="ar"] .pd-nav__link {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--eme-step-0);
}
.pd-nav__link:hover,
.pd-nav__link[aria-current="true"] {
  color: var(--eme-text);
}
.pd-nav__link:focus-visible {
  outline-offset: -2px;
}
/* The red bar under the part of the page on screen. The script sets its
   physical offset and width (--x, --w), so it is placed from the physical
   left here on purpose, in both directions. */
.pd-nav__bar {
  position: absolute;
  inset-block-end: -1px;
  left: 0;
  inline-size: var(--w, 0px);
  block-size: 2px;
  background: var(--eme-red);
  transform: translateX(var(--x, 0px));
  transition:
    transform 460ms var(--eme-ease-out),
    inline-size 460ms var(--eme-ease-out);
  pointer-events: none;
}
.pd-nav__bar.is-instant {
  transition: none;
}
@media (min-width: 48rem) {
  .pd-nav {
    position: sticky;
    inset-block-start: var(--eme-header-h);
    z-index: calc(var(--eme-z-header) - 1);
  }
  .pd-nav.is-stuck {
    box-shadow: 0 12px 28px rgba(26, 28, 30, 0.07);
  }
  /* Header and bar read as one piece once the bar has docked under it. */
  html.pd-nav-docked .site-header.is-scrolled {
    box-shadow: none;
  }
  /* Anchors land below both bars (the landing script reads this too). */
  html:has(.pd-nav) {
    scroll-padding-block-start: calc(var(--eme-header-h) + var(--pd-nav-h, 3.4rem) + 1rem);
  }
}
/* A phone: the links scroll sideways, and fade out at the far edge to say so. */
@media (max-width: 47.99rem) {
  .pd-nav__list {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  html[dir="rtl"] .pd-nav__list {
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent);
    mask-image: linear-gradient(to left, #000 82%, transparent);
  }
  .pd-nav__list.is-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pd-nav__bar {
    transition: none;
  }
}

/* ------------------------------------------------------------- overview */
.pd-overview__prose > p:first-of-type {
  font-size: var(--eme-step-1);
  color: var(--eme-text);
}
.pd-overview__prose p {
  color: var(--eme-graphite);
}
/* Materials marked with the brand's slash rather than a bullet. */
.pd-materials {
  display: grid;
  gap: var(--eme-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-materials li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.55;
}
.pd-materials li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  inset-block-start: 0.5em;
  inline-size: 0.5rem;
  block-size: 0.55rem;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}

/* ------------------------------------------------------- specifications */
.pd-specs__head {
  align-items: center;
}
.pd-specs__head h2 {
  margin: 0;
}
.pd-specs__print {
  background: none;
  border-inline: 0;
  border-block-start: 0;
  padding-inline: 0;
  cursor: pointer;
}
.pd-specs__print svg,
html[dir="rtl"] .pd-specs__print svg,
.pd-specs__print:hover svg,
html[dir="rtl"] .pd-specs__print:hover svg {
  transform: none;
}
.pd-specs .def-list--tight dd {
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ FAQ */
.pd-faq__grid {
  display: grid;
  gap: var(--eme-space-6) clamp(2rem, 0.5rem + 5vw, 7rem);
}
@media (min-width: 900px) {
  .pd-faq__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }
  .pd-faq__aside {
    position: sticky;
    inset-block-start: calc(var(--eme-header-h) + var(--pd-nav-h, 3.4rem) + var(--eme-space-6));
  }
}
.pd-faq__aside h2 {
  margin-block-end: var(--eme-space-3);
  font-size: var(--eme-step-4);
}
.pd-faq__lead {
  max-inline-size: 38ch;
  margin-block-end: var(--eme-space-5);
  color: var(--eme-graphite);
}
.pd-faq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eme-space-3);
}
.pd-faq__phone {
  letter-spacing: 0.02em;
}
.pd-faq__list {
  border-block-start-color: var(--eme-line-strong);
}
.pd-faq .faq__item {
  border-block-end-color: var(--eme-line-strong);
}
.pd-faq .faq__item summary {
  align-items: center;
  padding-block: 1.2rem;
  font-size: var(--eme-step-1);
  line-height: 1.45;
  transition: color var(--eme-fast) var(--eme-ease);
}
/* A drawn plus that turns into a cross: the same mark, a quarter-turn apart. */
.pd-faq .faq__item summary::after,
.pd-faq .faq__item[open] summary::after {
  content: "";
  inline-size: 0.85rem;
  block-size: 0.85rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--eme-red);
  transition: transform 360ms var(--eme-ease-out);
}
.pd-faq .faq__item[open] summary::after {
  transform: rotate(45deg);
}
.pd-faq .faq__item p {
  padding-block-end: 1.4rem;
  color: var(--eme-graphite);
  max-inline-size: 68ch;
}
/* Answers open and close rather than jump, where the browser can animate a
   <details>; elsewhere they simply appear. */
.pd-faq {
  interpolate-size: allow-keywords;
}
.pd-faq .faq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size 380ms var(--eme-ease-out),
    content-visibility 380ms allow-discrete;
}
.pd-faq .faq__item[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .pd-faq .faq__item::details-content,
  .pd-faq .faq__item summary::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------- print
   "Print specifications" gives a consultant a clean sheet for a submittal:
   the unit, its rated figures, the full specification and its standards,
   with where it came from at the foot. Everything that only works on screen
   stays off the paper. */
.pd-print-foot {
  display: none;
}
@media print {
  @page {
    margin: 14mm 14mm 16mm;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    font-size: 10pt;
  }
  body {
    background: #fff;
    color: #000;
  }
  .skip-link,
  .site-header,
  .breadcrumbs,
  .pd-nav,
  .pd-hero__actions,
  .cert-inline,
  .pd-specs__print,
  .cert-explain .line-link,
  .pd-faq,
  .prail-section,
  .cta-band,
  .site-footer,
  .sticky-cta,
  .wa-float {
    display: none !important;
  }
  .section,
  .section--alt,
  .section--tight {
    padding-block: 5mm !important;
    background: none !important;
  }
  .container {
    padding-inline: 0 !important;
    max-inline-size: none !important;
  }
  .pd-hero__grid {
    grid-template-columns: 34% minmax(0, 1fr);
    gap: 8mm;
    align-items: start;
  }
  .pd-hero__media img {
    max-block-size: 58mm;
    object-fit: contain;
  }
  .pd-hero__title {
    font-size: 20pt;
  }
  .pd-hero__lead {
    font-size: 11pt;
    margin-block-end: 4mm;
  }
  .pd-plate dd {
    font-size: 11pt;
  }
  .split,
  .spec-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6mm !important;
  }
  .spec-cols > div,
  .variant,
  .cert-entry,
  .pd-plate,
  .pd-materials {
    break-inside: avoid;
  }
  h2,
  h3,
  .section-head {
    break-after: avoid;
  }
  /* The small red marks are part of the sheet's language: keep them on paper. */
  .pd-plate::before,
  .pd-materials li::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .chip--solid {
    background: none;
    color: #000;
    border-color: #000;
  }
  .pd-print-foot {
    display: block;
    margin: 6mm 0 0;
    padding-block-start: 3mm;
    border-block-start: 1px solid #999;
    font-size: 8pt;
    color: #444;
  }
}