/* ==========================================================================
   Prolyse — product detail page.

   Vertical rhythm (desktop, 1425px of usable width):
     hero          0 –  869   (320px padding + 64 + 165 + 320px padding)
     quote       969 – 1069   (+100 above)
     works      1169 – 1425   (+100 above)
     overview   1525 – 1969   (+100 above)
     benefits   2069 – 2689   (+100 above, 150px of air below)

   The original's section margins collapsed against one another (100/50 →
   100); the values below are the already-collapsed results, so the stack
   does not depend on margin collapsing.

   #6FC5EA (Prolyse light blue) and #040306 (near-black) are one-off colours
   from the original design, not brand tokens.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.page-prolyse .prolyse-hero {
  padding: 320px 0;
  background-image: url('/assets/images/Prolyse-product-background-image.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-prolyse .prolyse-hero__eyebrow {
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-invert);
}

.page-prolyse .prolyse-hero__title {
  margin-left: -7px;
  font-size: 165px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-invert);
}

/* --- Quote --------------------------------------------------------------- */
.page-prolyse .prolyse-quote {
  --content-width: 900px;
  margin-top: 100px;
}

.page-prolyse .prolyse-quote__text {
  font-size: 50px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: #040306;
  text-align: center;
}

/* --- "How Prolyse works?" — two bordered cards --------------------------- */
.page-prolyse .prolyse-works {
  --content-width: 1250px;
  margin-top: 100px;
}

.page-prolyse .prolyse-works .section__inner {
  flex-direction: row;
}

.page-prolyse .prolyse-works__card {
  display: flex;
  flex: 0 1 50%;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--color-secondary);
  border-radius: 40px;
  box-shadow: -6px 6px 28px 1px rgba(0, 0, 0, .25);
}

/* The 80px inner margins are shed by flex-shrink, which is what pulls each
   card from 625px down to the original's 545px. */
.page-prolyse .prolyse-works__card:first-child { margin-right: 80px; }
.page-prolyse .prolyse-works__card:last-child { margin-left: 80px; }

.page-prolyse .prolyse-works__title {
  color: #6FC5EA;
}

.page-prolyse .prolyse-works__text {
  margin-top: 10px;
}

/* --- Overview — image beside copy ---------------------------------------- */
.page-prolyse .prolyse-overview {
  --content-width: 1250px;
  margin-top: 100px;
}

.page-prolyse .prolyse-overview .section__inner {
  flex-direction: row;
}

.page-prolyse .prolyse-overview__media {
  flex: 0 1 50%;
  min-width: 0;
  margin: 0;
}

.page-prolyse .prolyse-overview__media img {
  display: block;
  width: 100%;
  border-radius: 40px;
}

.page-prolyse .prolyse-overview__body {
  display: flex;
  flex: 0 1 50%;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-left: 40px;
}

.page-prolyse .prolyse-overview__title {
  color: #6FC5EA;
}

.page-prolyse .prolyse-overview__text {
  margin-top: 10px;
}

/* 3em indent + 1.5em trailing space: the theme's default list metrics, which
   the measured boxes depend on (list text starts at x=801, and the 24px below
   it is what puts the benefits band at y=2069). */
.page-prolyse .prolyse-overview__list {
  margin: 10px 0 24px 48px;
  list-style: disc;
}

/* --- Upper respiratory benefits — six numbered cards --------------------- */
.page-prolyse .prolyse-benefits {
  --content-width: 1250px;
  margin-top: 100px;
  margin-bottom: 150px;
}

.page-prolyse .prolyse-benefits__title {
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
  color: #6FC5EA;
  text-align: center;
}

.page-prolyse .prolyse-benefits__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  column-gap: 20px;
  row-gap: 30px;
}

.page-prolyse .prolyse-benefits__card {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  width: 49%;
  min-width: 0;
  gap: 20px;
  padding: 30px;
  border-radius: 40px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

/* The numeral, the chevron and the copy all shrink out of a row that is far
   narrower than their natural widths — the numeral and chevron end up only a
   few px wide and their glyphs spill out of them. That overflow is the
   original's, and `min-width: 0` is what lets it reproduce.

   The 30px copy offset and the chevron nudges below therefore have to sit on
   an inner box (`__text`, `__chevron`) rather than on the flex item itself.
   Flex sizing scales an item's shrink by its content size only, so the same
   values written as padding or as an outer margin would not shrink with the
   box and everything to their right would land several px off. */
.page-prolyse .prolyse-benefits__num,
.page-prolyse .prolyse-benefits__arrow,
.page-prolyse .prolyse-benefits__copy {
  min-width: 0;
}

.page-prolyse .prolyse-benefits__num,
.page-prolyse .prolyse-benefits__arrow {
  font-weight: 600;
  line-height: 1;
}

.page-prolyse .prolyse-benefits__num { font-size: 100px; }
.page-prolyse .prolyse-benefits__arrow { font-size: 70px; }
.page-prolyse .prolyse-benefits__chevron { display: block; }

.page-prolyse .prolyse-benefits__text {
  margin-left: 30px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #040306;
}

/* Odd cards: blue numeral, near-black chevron. Even cards: the reverse. */
.page-prolyse .prolyse-benefits__card .prolyse-benefits__num { color: #6FC5EA; }
.page-prolyse .prolyse-benefits__card .prolyse-benefits__arrow { color: #040306; }
.page-prolyse .prolyse-benefits__card:nth-of-type(even) .prolyse-benefits__num { color: #040306; }
.page-prolyse .prolyse-benefits__card:nth-of-type(even) .prolyse-benefits__arrow { color: #6FC5EA; }

/* Per-card optical nudges on the chevron, exactly as the original set them. */
.page-prolyse .prolyse-benefits__card:nth-of-type(2) .prolyse-benefits__chevron { margin-left: 15px; }
.page-prolyse .prolyse-benefits__card:nth-of-type(3) .prolyse-benefits__chevron { margin-left: 15px; }
.page-prolyse .prolyse-benefits__card:nth-of-type(4) .prolyse-benefits__chevron { margin-left: 20px; }
.page-prolyse .prolyse-benefits__card:nth-of-type(5) .prolyse-benefits__chevron { margin-left: 5px; }

/* ==========================================================================
   Laptop — 1366px
   ========================================================================== */
@media (max-width: 1366px) {
  .page-prolyse .prolyse-hero { padding: 280px 0 280px 50px; }
  .page-prolyse .prolyse-hero__eyebrow { font-size: 40px; }
  .page-prolyse .prolyse-hero__title { font-size: 118px; }

  .page-prolyse .prolyse-works { --content-width: 1000px; }
  .page-prolyse .prolyse-works__card:first-child { margin-right: 40px; }
  .page-prolyse .prolyse-works__card:last-child { margin-left: 40px; }

  .page-prolyse .prolyse-overview { --content-width: 1100px; }
  .page-prolyse .prolyse-benefits { --content-width: 1100px; }
}

/* ==========================================================================
   Tablet extra — 1200px
   ========================================================================== */
@media (max-width: 1200px) {
  .page-prolyse .prolyse-hero__eyebrow { font-size: 36px; }
  .page-prolyse .prolyse-hero__title { font-size: 98px; }

  .page-prolyse .prolyse-works { --content-width: 900px; }
  .page-prolyse .prolyse-works__card:first-child { margin-right: 20px; }
  .page-prolyse .prolyse-works__card:last-child { margin-left: 20px; }

  .page-prolyse .prolyse-overview { --content-width: 900px; }

  .page-prolyse .prolyse-benefits { --content-width: 900px; }
  .page-prolyse .prolyse-benefits__card { width: 48%; }
}

/* ==========================================================================
   Tablet — 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .page-prolyse .prolyse-hero { padding: 200px 0 200px 40px; }
  .page-prolyse .prolyse-hero__eyebrow { font-size: 32px; }
  .page-prolyse .prolyse-hero__title { font-size: 84px; }

  .page-prolyse .prolyse-quote { --content-width: 700px; }
  .page-prolyse .prolyse-quote__text { font-size: 40px; }

  .page-prolyse .prolyse-works { --content-width: 700px; }
  .page-prolyse .prolyse-works .section__inner { flex-wrap: wrap; }
  .page-prolyse .prolyse-works__card { flex-basis: 100%; }
  .page-prolyse .prolyse-works__card:first-child { margin-right: 0; }
  .page-prolyse .prolyse-works__card:last-child { margin-top: 50px; margin-left: 0; }

  .page-prolyse .prolyse-overview { --content-width: 700px; }

  .page-prolyse .prolyse-benefits { --content-width: 700px; }
  .page-prolyse .prolyse-benefits__card { width: 100%; }
}

/* ==========================================================================
   Mobile extra — 880px
   ========================================================================== */
@media (max-width: 880px) {
  .page-prolyse .prolyse-hero__eyebrow { font-size: 28px; }
  .page-prolyse .prolyse-hero__title { margin-left: -3px; font-size: 72px; }
}

/* ==========================================================================
   Mobile — 767px
   ========================================================================== */
@media (max-width: 767px) {
  .page-prolyse .prolyse-hero { padding: 150px 0 150px 30px; }
  .page-prolyse .prolyse-hero__eyebrow { font-size: 20px; }
  .page-prolyse .prolyse-hero__title { margin-left: 0; font-size: 35px; }

  .page-prolyse .prolyse-quote {
    --content-width: 320px;
    margin-top: 50px;
  }
  .page-prolyse .prolyse-quote__text { font-size: 26px; }

  .page-prolyse .prolyse-works {
    --content-width: 300px;
    margin-top: 50px;
  }

  .page-prolyse .prolyse-overview { --content-width: 320px; }
  .page-prolyse .prolyse-overview .section__inner { flex-wrap: wrap; }
  .page-prolyse .prolyse-overview__media { flex-basis: 100%; }
  .page-prolyse .prolyse-overview__body {
    flex-basis: 100%;
    padding-top: 20px;
    padding-left: 0;
  }

  .page-prolyse .prolyse-benefits { --content-width: 320px; }
  /* The card wraps on mobile: numeral and chevron keep one line, the copy
     drops below full width — which is why the gap and the copy's 30px offset
     are both dropped here. */
  .page-prolyse .prolyse-benefits__card {
    flex-wrap: wrap;
    gap: 0;
  }
  /* `:nth-of-type(n)` matches every card and matches the specificity of the
     per-card nudges above, so this reset actually beats them. */
  .page-prolyse .prolyse-benefits__card:nth-of-type(n) .prolyse-benefits__chevron { margin-left: 0; }
  .page-prolyse .prolyse-benefits__text { margin-left: 0; }
}


/* --- Wide-screen gutter -------------------------------------------------
   Above 1366px these bands have no content-width narrow enough to keep them
   off the screen edge, so they get the same 40px gutter as the header.
   ------------------------------------------------------------------------ */
@media (min-width: 1367px) {
  .page-prolyse .prolyse-hero { padding-inline: var(--gutter); }
}

/* The hero had left padding but none on the right, so its text block ran to the
   screen edge below 1367px. */
.page-prolyse .prolyse-hero { padding-right: var(--gutter); }

@media (max-width: 767px) {
  .page-prolyse .prolyse-hero { padding-right: var(--gutter-mobile); }
}