/*
 * Product gallery hero (products/index-v2.php — business cards, letterheads, envelopes, stamps…).
 * Same look as the printed & digital products page hero (paiement/products.php), which is built from
 * the industry stack (style-2024-industry*.css + logos-by-industry.css + products-page.css).
 * The gallery doesn't load that stack, so the final values are reproduced here standalone.
 */

.pg-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  text-align: center;
}

.pg-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.pg-hero__background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.pg-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Title 45px / subtitle 20px, line-height 100%, 14px gap, up to 1480px wide (products page Figma values). */
.pg-hero__title {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-align: center;
}

.pg-hero__subtitle {
  max-width: 1480px;
  margin: 14px auto 0;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-align: center;
}

/* Layout offset. The fixed site header is 64px on desktop in both layouts, but the products page body has
   60px top padding and the gallery body 50px — 10px more margin puts the hero at the same screen position. */
@media screen and (min-width: 769px) {
  .pg-hero {
    /* margin-top: 10px; */
  }
}

/* Mobile: same as the products page (25px sides, title 30/42px, subtitle 20/30px, 10px gap, 60px padding).
   There the hero starts right below the 60px fixed header. Here the header is absolute (z-index 1000, 60px)
   over a 50px body padding: 10px more puts the hero at the same place — same box, same background crop. */
@media screen and (max-width: 768px) {
  .pg-hero {
    /* margin-top: 10px; */
    padding: 60px 0;
  }

  .pg-hero__content {
    padding-left: 25px;
    padding-right: 25px;
  }

  .pg-hero__title {
    font-size: 30px;
    line-height: 42px;
  }

  .pg-hero__subtitle {
    margin-top: 10px;
    line-height: 30px;
  }
}