/* ROMScreen module page (WEB-142, tools/pages/romscreen.mjs). Everything else comes from pages.css; only the hero
   stage, the "documents" row and one type size are new. */

/* hero: the thoraco-lumbar iPad behind, one large iPhone in front (the LeanScreen/SquatScreen stage geometry) */
.pg-st-rom .pg-d--pad { left: 0; top: 1%; width: 66%; transform: rotateY(-10deg) rotateX(3deg) rotateZ(-.6deg); }
.pg-st-rom .pg-d--p1 { left: 58%; top: 14%; width: 36%; z-index: 2; transform: rotateY(-7deg) rotateZ(2deg); }

/* "what it measures": the region names are words, not short codes, so they are set a step smaller than BF% / BMI */
#pg-data .pg-metric__k { font-size: clamp(24px, 2.1vw, 30px); letter-spacing: -.03em; }

/* "show some of the documents" (Joe, Oct 9): the real results screens side by side, nothing overlapping a table.
   The shoulder results iPad in the middle, the cervical and thoraco-lumbar results recordings either side. */
.pg-romdocs { display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1.5fr) minmax(0, .64fr); gap: clamp(18px, 3vw, 44px); align-items: end; width: min(960px, 100%); margin: 0 auto clamp(40px, 5vw, 64px); }
.pg-romdocs figcaption { margin-top: 16px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pg-romdocs figcaption small { display: block; font-weight: 500; color: var(--ink-3); }
.pg-romdocs__p { padding-bottom: clamp(24px, 3vw, 44px); } /* the phones sit a little higher than the iPad's foot */
.pg-romdocs .device { --shadow: 0 1px 2px rgba(10, 30, 50, .12), 0 18px 34px -14px rgba(10, 40, 70, .35), 0 50px 80px -40px rgba(10, 50, 90, .4); }

@media (max-width: 700px) {
  /* the iPad leads at full width; the two recordings follow side by side */
  .pg-romdocs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; width: min(440px, 100%); }
  .pg-romdocs__pad { grid-column: 1 / -1; grid-row: 1; width: min(340px, 88%); justify-self: center; }
  .pg-romdocs__p { padding-bottom: 0; }
  .pg-romdocs figcaption { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-romdocs [data-rv] { transform: none; }
}