/* Standard Products (built by scripts/build-standard-products.mjs). The pages
   reuse the HYDRAMEM stylesheets; these rules only fit those patterns to the
   SSD card counts and the product video. Hand-edited, no src twin. */

/* A category with fewer than five cards sits in a grid, one column per card
   (memgrid is four columns; below 1181px it is the swipe row as everywhere). */
@media (min-width: 1181px) {
  #mem-page#mem-page .memgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* SSD cards carry longer names and lists than the membrane blurbs, so the
   memcard keeps its design but gets a taller panel: names up to three lines,
   bodies up to six, nothing clipped. */
body.membrane-typography #mem-page#mem-page .memcard--sp { --mem-panel: clamp(318px, 22vw, 330px); height: clamp(490px, 38vw, 550px); }
body.membrane-typography #mem-page#mem-page .memcard--sp .memcard__name { -webkit-line-clamp: 3; }
body.membrane-typography #mem-page#mem-page .memcard--sp .memcard__body { -webkit-line-clamp: 6; }

/* Product pages: the product photo takes half the hero instead of the 420px
   catalog column, and the full width once the hero stacks (client, 30 Oct:
   larger product images). Scoped by class: the Instruments pages share this sheet. */
.mcat-hero__grid--sp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .mcat-hero__grid--sp { grid-template-columns: 1fr; }
  .mcat-hero__grid--sp .mcat-figure--hero { max-width: none; }
}

/* Product video: the membranes "Watch the film" player in the catalog figure frame. */
.sp-video { max-width: 880px; }
.sp-video .mcat-figure { background: #0a1b30; }
.sp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Five feature boxes share one row on desktop instead of four plus one. */
@media (min-width: 1081px) {
  .mcat-feat.sp-feat--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Sibling tiles: two siblings share a row instead of sitting in a four-up grid. */
@media (min-width: 561px) {
  .mcat-sibs__list.sp-sibs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

/* Card rails (31 Oct 2026). Five or more sibling tiles, or Core Solutions
   product boxes, never wrap to a second line: membrane-interactions.js marks
   the list .is-rail and puts the portfolio rail's arrows beside its heading.
   Four in view on desktop, two on tablet, one and a bit on phones. The tripled
   class outranks the section sheets' own column rules for these lists. */
.card-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-rail__head--intro { align-items: flex-end; }
.card-rail__head > .card-rail__nav:only-child { margin-left: auto; }
.card-rail__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.card-rail__nav[hidden] { display: none; }
.card-rail__nav .memrail__btn {
  width: 52px; height: 52px; border-radius: 50%; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-utility-dark, #0a2740); border: 0; color: #fff;
  box-shadow: 0 6px 16px rgba(10, 39, 64, .22);
  cursor: pointer; transition: background-color .25s ease, opacity .25s ease;
}
.card-rail__nav .memrail__btn svg { width: 22px; height: 22px; stroke-width: 2.25; }
.card-rail__nav .memrail__btn:hover:not(:disabled) { background: var(--brand-primary, #007cc3); }
.card-rail__nav .memrail__btn:disabled { opacity: 0.32; cursor: default; }
.card-rail__nav .memrail__btn--prev svg { transform: rotate(180deg); }
.is-rail.is-rail.is-rail {
  --rail-gap: 16px;
  /* relative: screen-reader-only labels inside the tiles (position: absolute)
     are clipped by the rail instead of widening the page. */
  position: relative;
  display: flex; gap: var(--rail-gap); max-width: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: 4px 18px; margin-bottom: -18px;
}
.is-rail.is-rail.is-rail::-webkit-scrollbar { display: none; }
.is-rail.is-rail.is-rail > li { flex: none; width: calc((100% - 3 * var(--rail-gap)) / 4); scroll-snap-align: start; }
@media (max-width: 1080px) {
  .is-rail.is-rail.is-rail > li { width: calc((100% - var(--rail-gap)) / 2); }
}
@media (max-width: 600px) {
  .is-rail.is-rail.is-rail > li { width: 82%; }
  .card-rail__nav .memrail__btn { width: 44px; height: 44px; }
}