/*
  Products page (category overview). Scoped to body.page-products.
  Dark hero (video + still), light catalogue band with four image cards.
*/

.page-products {
  --pd-h1: clamp(40px, 4.6vw, 68px);
  --pd-hero-min: clamp(500px, 44vw, 620px);
  --pd-tint: .5;
  --pd-tint-video: .92;
}

.page-products main > .hero h1 { max-width: 980px; }

/* ---------- Catalogue band: replaces the teal gradient with a light band ---------- */
.page-products .products-catalog {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--pd-cut) + 84px) 0 112px;
  border: 0;
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%, #d4edf1 0%, transparent 70%),
    linear-gradient(180deg, #f8fbfc 0%, #eaf2f4 100%);
}

.page-products .products-catalog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--pd-route-light-tr) right -90px top 40px / min(760px, 70vw) auto no-repeat;
}

.page-products .products-catalog::after { display: none; }

.page-products .products-catalog .section-heading h2 { color: var(--pd-navy); }
.page-products .products-catalog .section-heading h2 span { color: var(--pd-teal-dark); }
.page-products .products-catalog .section-heading .eyebrow { color: var(--pd-teal-deep); }
.page-products .products-catalog .section-heading > p { color: var(--pd-body); }

.page-products .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1000px;
  margin-inline: auto;
  gap: 28px;
}

.page-products .product-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 28px;
  border: 1px solid #cfe0e5;
  border-bottom: 1px solid #cfe0e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 44px -30px #0b303c80;
  overflow: hidden;
  transition: transform .3s var(--pd-ease), box-shadow .3s ease, border-color .3s ease;
}

.page-products .product-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto auto 0;
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, #3fd0e0, #00a0b6);
  transition: width .45s var(--pd-ease);
}

.page-products .product-card .category-image {
  width: 100%;
  height: 240px;
  margin: 0 0 26px;
  aspect-ratio: auto;
  object-fit: cover;
}

.page-products .product-card h3 {
  margin: 0 0 12px;
  padding: 0 28px;
  font-size: 19px;
  letter-spacing: .2px;
  color: var(--pd-navy);
}

.page-products .product-card p {
  margin: 0 0 26px;
  padding: 0 28px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pd-body);
}

.page-products .product-card .category-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  margin: auto 28px 0;
  padding-top: 18px;
  border-top: 1px solid #e1edf0;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pd-teal-dark);
}

.page-products .product-card .category-action::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--pd-arrow-mask) center / contain no-repeat;
  mask: var(--pd-arrow-mask) center / contain no-repeat;
  transition: transform .25s var(--pd-ease);
}

@media (hover: hover) {
  .page-products .product-card:hover {
    transform: translateY(-5px);
    border-color: #8cc9d3;
    box-shadow: 0 34px 56px -30px #0b303ca6;
  }

  .page-products .product-card:hover::before { width: 100%; }
  .page-products .product-card:hover .category-action::after { transform: translateX(5px); }
}

.page-products .product-card:focus-visible {
  outline: 3px solid var(--pd-teal-dark);
  outline-offset: 4px;
  transform: none;
}

@media (max-width: 1050px) {
  .page-products .product-grid { gap: 20px; }
  .page-products .product-card .category-image { height: 200px; }
}

@media (max-width: 900px) {
  .page-products .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .page-products .product-grid { grid-template-columns: minmax(0, 1fr); }
  .page-products .products-catalog { padding-bottom: 72px; }
}

/* Keep long product headline words within narrow mobile screens. */
@media (max-width: 600px) {
  .pd-redesign.page-products main > .hero h1 { font-size: clamp(28px, 8.5vw, 40px); }
}