/* ==========================================================================
   Bonapur — product detail page

   Measured targets (viewport 1425px, y from top of page content):
     hero band      [   0,    0, 1425, 175]
     hero image     [ 285,  -24,  855, 735]
     h1             [ 621,  666,  183,  42]
     h5             [ 598,  718,  229,  20]
     intro copy     [ 499,  758,  428,  48]
     pillar cards   [ 200,  856,  226, 189] x4, 40px apart
     study title    [ 200, 1195,  473, 120]
     study image    [ 713, 1195,  513, 341]
     study copy     [ 200, 1335,  473, 240]
     decor rule     [ 499, 1730,  428,  16]
     chart          [ 499, 1769,  428, 392]
     h3             [ 499, 2181,  428,  60]
     note 1         [ 499, 2261,  428,  48]
     note 2         [ 499, 2329,  428,  80]
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
   Column band, centre-aligned: the coloured strip and the intro box run the
   full width, the image and the two headings shrink to their content and are
   pulled up over the strip with negative margins (as in the original).
   ------------------------------------------------------------------------ */
.page-bonapur__hero {
  align-items: center;
  min-height: 387px;
}

.page-bonapur__hero-band {
  width: 100%;
  height: 175px;
  background-color: #d0bfb0;
}

.page-bonapur__hero-image {
  width: 60%;
  max-width: 60%;
  margin-top: -199px;
}

.page-bonapur__title {
  margin: -45px 0 10px;
  font-size: 42px;
  font-weight: 600;
  color: #696d9c;
}

.page-bonapur__subtitle {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: #8384ab;
}

.page-bonapur__intro {
  width: 100%;
  padding: 0 35%;
  text-align: center;
}

/* --- Pillar cards -------------------------------------------------------
   Four 25%-wide cards that shrink inside a 40px-gapped row; all four stretch
   to the tallest (card 4, whose label wraps onto three lines).
   ------------------------------------------------------------------------ */
.page-bonapur__pillars {
  padding: 50px 200px 150px;
}

.page-bonapur__pillar-list {
  display: flex;
  flex-direction: row;
  column-gap: 40px;
  row-gap: 0;
}

.page-bonapur__pillar {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  width: 25%;
  padding: 20px;
  border-radius: 15px;
  background-color: #696d9c;
}

.page-bonapur__pillar-num,
.page-bonapur__pillar-label {
  text-align: center;
}

/* The type sits on an inline <span> so the wrapping block keeps its 16px/1.5
   strut — that is what gives the original its 54px number line box and its
   26.8px label leading. */
.page-bonapur__pillar-num span {
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0);
  -webkit-text-stroke: 1px var(--color-invert);
}

.page-bonapur__pillar-label span {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-invert);
}

/* --- Study --------------------------------------------------------------- */
.page-bonapur__study {
  flex-direction: row;
  padding: 0 200px;
}

.page-bonapur__study-text {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 50%;
  padding-right: 40px;
}

.page-bonapur__study-copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.page-bonapur__study-figure {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 0;
}

.page-bonapur__study-figure img {
  display: block;
  border-radius: 15px;
}

/* --- Silicium ------------------------------------------------------------ */
.page-bonapur__silicium {
  row-gap: 20px;
  padding: 150px 35% 100px;
}

/* Both images stay inline (vertical-align: middle) so their blocks keep the
   original line-box heights: 24px for the 16px rule, the image height for the
   chart. */
.page-bonapur__rule img,
.page-bonapur__chart img {
  vertical-align: middle;
}

.page-bonapur__rule img {
  height: 16px;
  object-fit: cover;
  object-position: center center;
}

.page-bonapur__silicium-title {
  text-align: center;
}

.page-bonapur__note {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

/* --- Laptop -------------------------------------------------------------- */
@media (max-width: 1366px) {
  .page-bonapur__pillars { padding: 50px 100px 150px; }
  .page-bonapur__pillar-list { column-gap: 20px; }
  .page-bonapur__pillar-label span { font-size: 20px; }
  .page-bonapur__study { padding: 0 100px; }
  .page-bonapur__silicium { padding: 150px 25% 100px; }
}

/* --- Tablet-extra -------------------------------------------------------- */
@media (max-width: 1200px) {
  .page-bonapur__hero-image { margin-top: -150px; }
  .page-bonapur__intro { padding: 0 25%; }
  .page-bonapur__pillars { padding: 50px 20px 150px; }
  .page-bonapur__pillar-list { column-gap: 20px; }
  .page-bonapur__study { padding: 0 50px; }
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-bonapur__pillars { padding: 50px 50px 150px; }
  .page-bonapur__pillar-list {
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 0;
    row-gap: 30px;
  }
  .page-bonapur__pillar { width: 48%; }
}

/* --- Mobile-extra -------------------------------------------------------- */
@media (max-width: 880px) {
  .page-bonapur__study { flex-wrap: wrap; }
  .page-bonapur__study-text {
    order: 2;
    width: 100%;
    padding: 20px 0 0;
  }
  .page-bonapur__study-figure {
    order: 1;
    width: 100%;
  }
  .page-bonapur__silicium { padding: 150px 20% 100px; }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-bonapur__hero-image {
    width: 100%;
    max-width: 100%;
    margin-top: -130px;
  }
  .page-bonapur__title { margin: -20px 0 10px; }
  .page-bonapur__intro { padding: 0 5%; }
  .page-bonapur__pillar { width: 100%; }
  .page-bonapur__study { padding: 0 20px; }
  .page-bonapur__silicium { padding: 150px 5% 100px; }
}


/* --- 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-bonapur__hero,
  .page-bonapur__pillars,
  .page-bonapur__study,
  .page-bonapur__silicium { padding-inline: var(--gutter); }
}