/* ============================================================================
   Shared layout primitives
   ----------------------------------------------------------------------------
   The four platform pages and the home page each grew their own copy of the
   same two patterns — a split section pairing copy with a product visual, and
   a carousel of product compositions. The copies drifted, and the same bugs
   had to be found and fixed on each page in turn.

   These are the structural bits they share. Page stylesheets keep only what
   genuinely differs: their column ratio, their gap, their colours.

   Load this before the page's own stylesheet.
   ========================================================================== */

/* ---------------------------------------------------------------- pt-split --
   A section that puts copy beside a product visual. Pages set their own
   grid-template-columns and gap; everything here is common to all of them.

   The min-width:0 is the important line. Grid items default to min-width:auto,
   so an item that cannot shrink below its content widens the whole column and
   scrolls the page sideways on a phone. That single default caused seven
   separate defects across four pages before this rule existed.                */

.pt-split {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: grid;
  align-items: center;
}

.pt-split > * { min-width: 0; }

/* --------------------------------------------------------------- pt-visual --
   Marks anything that is a product visual: a mock, a carousel, a drawing.
   Carries the same shrink rule, and gives the rendering checks and anyone
   reading the markup one reliable way to find these.                          */

.pt-visual { min-width: 0; }

/* ------------------------------------------------------------ pt-scroll-x --
   A visual too wide for a phone. Never hide one — hold it at the width it was
   drawn for and let the reader pan across it. Applied by the page at the
   breakpoint where the visual stops fitting.                                  */

.pt-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------- mock labels --
   Mock text is written nowrap with an ellipsis for desktop, where there is
   room. On a phone the ellipsis eats half the label, so let it wrap instead.
   Pages opt in by marking the mock's label elements with pt-mock-label.       */

@media (max-width: 900px) {
  .pt-mock-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* -------------------------------------------------------------- pt-carousel --
   The storyboard carousels. Slides are product compositions drawn for the
   833px slot; squeezed into a phone column they clip and break up, so below
   that they hold their design width and the panel pans.                      */

@media (max-width: 900px) {
  .pt-carousel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pt-slide { right: auto; width: 833px; }
}