/* OEM chair-frame step gallery - oem-manufacturing.html only.
   Every rule is scoped under .oem-page .chair-story, so no other page and no
   existing bundle rule is affected. Each step is a borderless card: portrait
   master on top, number / title / copy directly beneath it. Portrait masters
   keep their original 9:16 ratio (no crop, no retouch); no border or shadow
   is added. Loaded last in head. */

.oem-page .chair-story {
  --oem-chair-gap: 30px;
  --oem-chair-row-gap: 40px;
}

/* One flex grid of cards; a trailing row of 3 centres itself. */
.oem-page .chair-story .chair-story-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--oem-chair-row-gap) var(--oem-chair-gap);
  max-width: none;
}

.oem-page .chair-story .inner-timeline-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Image first, then number, title and the original paragraph, with no fixed
   text block, so no empty band appears under the copy. */
.oem-page .chair-story .chair-step-media {
  order: 1;
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.oem-page .chair-story .chair-step-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 1365;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.oem-page .chair-story .chair-step-head {
  order: 2;
  grid-column: auto;
  grid-row: auto;
  display: block;
  margin: 20px 0 0;
  white-space: nowrap;
}

.oem-page .chair-story .chair-step-head span {
  color: #597182;
  font-size: 12px;
  letter-spacing: .1em;
}

.oem-page .chair-story .inner-timeline-step h3 {
  order: 3;
  grid-column: auto;
  grid-row: auto;
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.3;
}

.oem-page .chair-story .inner-timeline-step p {
  order: 4;
  grid-column: auto;
  grid-row: auto;
  max-width: none;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

/* The -0.02px slack keeps sub-pixel rounding from dropping a card to the
   next row; it is invisible and the row still centres. */

/* 1280px and up: 4 cards, then the remaining 3 centred. */
@media (min-width: 1280px) {
  .oem-page .chair-story .inner-timeline-step {
    flex: 0 1 calc((100% - 3 * var(--oem-chair-gap)) / 4 - 0.02px);
    max-width: calc((100% - 3 * var(--oem-chair-gap)) / 4 - 0.02px);
  }
}

/* 900-1279px: 3 cards. */
@media (min-width: 900px) and (max-width: 1279px) {
  .oem-page .chair-story .inner-timeline-step {
    flex: 0 1 calc((100% - 2 * var(--oem-chair-gap)) / 3 - 0.02px);
    max-width: calc((100% - 2 * var(--oem-chair-gap)) / 3 - 0.02px);
  }
}

/* 600-899px: 2 cards. */
@media (min-width: 600px) and (max-width: 899px) {
  .oem-page .chair-story .inner-timeline-step {
    flex: 0 1 calc((100% - var(--oem-chair-gap)) / 2 - 0.02px);
    max-width: calc((100% - var(--oem-chair-gap)) / 2 - 0.02px);
  }
}

/* Below 600px: one card, at most 340px, centred. */
@media (max-width: 599px) {
  .oem-page .chair-story .inner-timeline-step {
    flex: 0 1 auto;
    width: 100%;
    max-width: 340px;
  }
}