/* ==========================================================================
   Products — /products/

   Two bands:
     1. .products-hero  — full-bleed photo band, 320px above/below a 200px H1.
     2. .products       — a wrapping 2-up grid of product cards, boxed at
                          1616px with a 150px row gap and 150px margin block.

   Each card is itself a wrapping flex row, exactly as the original was:

       [ decorative rule ................................ 100% ]
       [ product photo 40% ][ name + copy 60% ]
       [ "Learn more" ................................... 100% ]

   Two behaviours of that structure carry the whole vertical rhythm and are
   deliberately preserved rather than hard-coded:

   * cards in a row stretch to the tallest card (align-items on the grid), and
   * the spare height inside a shorter card is shared out over its flex lines
     (align-content: stretch), which is why the two cards in a row do not have
     their photos on the same baseline in the reference render.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

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

.page-products .products-hero__title {
  color: var(--color-secondary);
  font-size: 200px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* --- Grid ---------------------------------------------------------------- */

.page-products .products__grid {
  --content-width: 1616px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: stretch;
  justify-content: center;
  gap: 150px 0;
  margin-block: 150px;
}

/* --- Card ---------------------------------------------------------------- */

.page-products .products__card {
  display: flex;
  flex: 0 0 50%;
  flex-wrap: wrap;
  align-content: stretch;
}

.page-products .products__card--bonaviox { padding-right: 80px; }
.page-products .products__card--prolyse { padding-left: 80px; }
.page-products .products__card--thionex { padding-right: 80px; }
.page-products .products__card--hilomex { padding-right: 80px; }

/* Decorative rule — always its own full-width line. The artwork is wider than
   the column at every breakpoint, so it simply scales down to fit. The 24px
   floor is the text line the original rendered these inline images on; it only
   ever bites on the hairline Bonapur rule. */
.page-products .products__decor {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  justify-content: center;
  align-self: flex-start;
  min-height: 24px;
  margin-bottom: 30px;
}

.page-products .products__card--thionex .products__decor img {
  filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(259deg);
}

.page-products .products__media {
  display: flex;
  flex: 0 0 40%;
  flex-direction: column;
}

.page-products .products__decor img,
.page-products .products__media img {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .products__info {
  display: flex;
  flex: 0 0 60%;
  flex-direction: column;
  padding-left: 30px;
}

.page-products .products__text {
  margin-top: 20px;
}

.page-products .products__cta {
  flex: 0 0 100%;
  align-self: flex-start;
  margin-top: 50px;
}

/* --- Laptop -------------------------------------------------------------- */

@media (max-width: 1366px) {
  .page-products .products-hero { padding: 280px 0; }
  .page-products .products-hero__title { font-size: 150px; }

  .page-products .products__grid {
    --content-width: 1100px;
    gap: 100px 0;
    margin-block: 100px;
  }

  .page-products .products__card--bonaviox { padding-right: 30px; }
  .page-products .products__card--prolyse { padding-left: 30px; }
}

/* --- Tablet-extra: photo and copy stop sharing a line --------------------- */

@media (max-width: 1200px) {
  .page-products .products-hero__title { font-size: 130px; }

  .page-products .products__grid { --content-width: 900px; }

  .page-products .products__card--thionex { padding-right: 40px; }
  .page-products .products__card--bonapur { padding-left: 40px; }
  .page-products .products__card--hilomex { padding-right: 40px; }

  .page-products .products__media { flex-basis: 100%; }

  .page-products .products__info {
    flex-basis: 100%;
    padding: 30px 0 0;
  }

  .page-products .products__card--bonaviox .products__decor,
  .page-products .products__card--prolyse .products__decor { margin-bottom: 0; }
}

/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .page-products .products-hero { padding: 200px 0; }
  .page-products .products-hero__title { font-size: 110px; }

  .page-products .products__grid { --content-width: 700px; }
}

/* --- Mobile-extra -------------------------------------------------------- */

@media (max-width: 880px) {
  .page-products .products-hero__title { font-size: 90px; }
}

/* --- Mobile: one card per row -------------------------------------------- */

@media (max-width: 767px) {
  .page-products .products-hero { padding: 150px 0; }
  .page-products .products-hero__title { font-size: 50px; }

  .page-products .products__grid {
    --content-width: 320px;
    gap: 100px 0;
  }

  .page-products .products__card {
    flex-basis: 100%;
    padding: 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-products .products-hero { padding-inline: var(--gutter); }
}